網際網路中，唯一不變的就是變化。四下觀望，永遠都有新的設計風格，新的語言、框架、工具、新的上網裝置在博人眼球。亂花漸欲迷人眼，城頭變幻大王旗，連“上網行為”這個概念本身都不能保證難免一天不會被重定義。
在這樣一個日新月異的行業，人們普遍感到一種技術焦慮，作為置身網際網路行業中的你，我猜也有和我相同的感受。
在處理瀏覽器相容方面，尤其是現在，我們要面對如此多的瀏覽器、移動裝置，與其使用優雅降級的方案，使用漸進增強的方案會節省大量的資源，從而在單位時間內產出更多的價值。在效率方面，優雅降級在漸進增強面前就是個毫無戰鬥力的渣渣，註定要被吊打。
好吧，說了這麼多，怎麼做才能實現漸進增強呢？
漸進增強，簡單說，就是創造連續的使用者體驗。
你滿足不了所有的人首先你要明白：你滿足不了所有人。
在今天的Web環境中，按照PSD檔案的畫素去還原一個網頁，然後在任何裝置上都展示成一個模樣的時代已經過去了。我們要考慮的因素越來越多。
在技術實現方面，螢幕尺寸、畫素密度、CPU運算速度、記憶體大小、感測器的支援程度、功能差異、不同介面，乃至不同的作業系統、同一作業系統的不同版本、不同的瀏覽器，同一瀏覽器的不同版本、外掛、外掛版本、網速、網路延遲、防火牆、使用者自己設定的代理、路由器，以及日新月異的技術發展，讓我們的Web環境愈發複雜起來。
技術實現方面之外，我們還要考慮到使用者的互動習慣。
考慮到使用者習慣之後，我們間接就要考慮到使用產品的使用者的文化水平、知識結構、可能存在的認知障礙—如學習和閱讀障礙、注意力分散、視力障礙、聽覺障礙、運動障礙等，我們的使用者對裝置和瀏覽器的理解和使用達到了什麼樣的程度？使用者的各種感性因素，我們也需要注意和考慮。
每個人都是不一樣的個體，每個人上網都有不一樣的環境、需求、習慣或目的。有些人因為一些障礙，在網頁上停留的時間較長—如藉助語音輔助裝置的盲人。有一些人是為了尋找資料來到你的網站，看一眼標題不合需要，馬上離開走人。還有一些人緣分似的來到這裡，成為你訪客的資料長尾，使用著各種各樣的裝置，在各種環境和你的網站偶遇。
考慮到如此複雜的技術環境和使用者環境，想做一個能夠滿足任何人個性化要求的網站，幾乎是不可能的。如果你有無限的時間和經費，你可以做一個龐大的使用者調研，然後花大量的時間去寫定製化的程式碼，理論上沒有問題。但是實際上沒有人會這麼幹[9] 。關於使用者，我們懂的太少了。
Tim Berners Lee，發明全球資訊網（World Wide Web）的這位仁兄這麼形容Web：無所不能，無所不在 。兄弟說得太對了。
向後相容，向前適應中學時代，我經常用MS-DOS系統上的Word文字編輯軟體寫作業。這是個特別專業的軟體，因為開啟它就只能寫字，別的什麼都幹不了 。那時的Word軟體沒有太多的編輯選項，卻也能滿足大部分的需要，對於我來說，足夠用了。
然而，當時我寫的作業，用現在的Word軟體已經打不開了。二十多年過去，這個軟體已經不再支援MS-DOS版本的DOC檔案。
有人說，都20多年過去了，你還惦記那些中學寫的作業啊—我不是這個意思。我相信除了我之外，很多人都用過MS-DOS下的Word軟體。如果說我們把文章寫在紙上，可以保留上百年都不是問題，結果因為Word軟體的版本更新，早年我們寫下的文字，20年之後我們用同樣的軟體卻再也看不到了。對於我們這些使用者來說，這是多麼尷尬的一件事情。
不光是Word，很多軟體也幹過類似的事情。這種情況，被稱為破壞性的升級體驗。就好像你好好玩著一個遊戲，攢了大量經驗和錢，透過努力，角色等級不知高到哪裡去了。突然，遊戲官方發聲明說，眾位玩家朋友，咱們現在在內測，遊戲馬上進入公測階段，之前的資料不好意思就刪檔了啊。這種破壞性的升級體驗在Web領域也出現過不少。比方說Angular.js這個前端框架吧，如果我們之前使用的是1.0版本，想升級到2.0版本的話，就必須重寫大量的程式碼，因為2.0版本對老版本的程式碼幾乎完全不相容。
這就意味著，如果你想訪問早先建立的內容，你必須維護一個可以相容早先內容的軟體環境。
Tim Berners Lee設計全球資訊網之初意識到了這個問題。為了避免類似的情況發生，他設計了一種通用的、可擴充套件的描述性語言作為Web的規範，即HTML。這種對未來的相容性，在HTML2.0的版本說明中是這麼描述的 ：
“為了保證不同版本HTML之間的相容，使用者瀏覽器中包含的HTML解析器裡面會包含一個HTML2.0的超集，使使用者訪問的程式碼能夠被HTML2.0標準所解釋。如果一個HTML標籤未被HTML2.0宣告的話，這個標籤會被自動忽略掉。同理，如果一個HTML標籤的某個屬性未被宣告的話，這個屬性也會被忽略掉。”
這就是說，瀏覽器會自動忽略它不認識的HTML標籤和屬性。這種容錯處理的方式是HTML語言乃至後來的CSS的核心思想之一 。
HTML和CSS這兩種語言都被設計為“向前相容”。這樣設計的好處在於，你今天使用這兩種語言寫下的文件，無論再過多少年你都可以正常瀏覽。HTML和CSS透過忽略它們所不認識的標籤或屬性來保持自身的可擴充套件性。每一代HTML和CSS透過新增標籤或屬性來發展自身，而這些新增的標籤或屬性並不會在舊版本瀏覽器上報錯。
甚至，你可以在20世紀90年代的Lynx瀏覽器上訪問最新的使用HTML5技術開發的網頁。你也不必擔心如果你在網頁中使用了過多CSS3屬性，IE6會不會崩潰。理解了這種Web天生的容錯處理手段，你就會很容易理解漸進增強。漸進增強正是合理利用了這種Web的容錯特性，讓Web設計的可用性大大提高了。
技術服務於內容我們知道，裝置和瀏覽器的碎片化，以及使用者使用環境和互動習慣的多樣化，使得我們不得不考慮頁面的可用性問題，即為不同的裝置設計差異化的體驗。Brad Frost—這位Web設計師將此形容為“支援程度與最佳化設計之間的平衡”。
“除非你有預知未來的能力，否則你不可能為未來的每一款瀏覽器去單獨最佳化你的Web設計。所以我們應該尋找一種通用方法來解決問題。
而所謂的通用方法，也並非要強制讓所有瀏覽器顯示一致。話說那些只能支援WAP網路的手機，要想達到iOS或Android手機那樣的渲染程度，也沒什麼可能性。但是，我們可以多瞭解一些我們要支援的裝置，體會不同平臺裝置對互動方式的支援程度。這樣，在滿足最先進平臺的最佳化設計的同時，也保留對老舊平相容設計，也不是不可能的。 ”
如上所言，最佳化設計需要考慮到不同裝置的互動支援性。在此前提下，我們需要注意，內容是Web頁面的核心。我們希望所有的使用者都能在自己的裝置上看到根據自己機器的互動特性所最佳化過的內容。首先，我們要保證在比較落後的裝置上能夠正常訪問核心內容，然後在比較先進的裝置上利用裝置效能來逐步增加使用者的互動體驗—這就是漸進增強思想的核心。
漸進增強無關瀏覽器、裝置和任何技術手段，它是一種讓使用者脫離裝置制約，從而極大提升Web可用性的方法。漸進增強為使用者提供的是差異化的體驗，它並不在意你使用的是最先進的裝置還是快淘汰的瀏覽器。裝置和技術都只是形式。漸進增強的思想讓網頁迴歸了它要傳達的內容本身，無論技術如何發展，都是為內容穿上了一層層更優雅的外衣，無論使用者用什麼裝置訪問，我們都能讓它看到本質的內容，而外衣在不同的裝置下，會呈現得略有不同。
裝置的更迭和技術的發展就像開來開走的列車，趕得上這趟，未必追得上那趟。而運用漸進增強的思想去改造你的Web，會讓你對使用者關心的內容更加註意，而不容易被新技術迷惑，做出一些買櫝還珠的事情。
“說得好聽，但是不接地氣。你得算一下捕捉使用者的成本。如果一些使用者根本不是你的目標使用者，不能為你帶來任何收益，那麼，幹嘛為他們進行最佳化？根據這種設計思想，本質上你是要為所有使用者的體驗負責，無形中會大量增加開發成本。但是，恕我打個比方—我們都知道成衣的尺碼分大中小號，我們大多數人也都是到成衣店試衣，覺得尺碼差不多合身就買回家了。為什麼呢？因為絕大多數人僱傭不起一個裁縫來為自己的每件衣服量體裁衣，這樣成本太高了！除非你能讓我看到這麼做的回報，否則我很難接受這種設計思想。”
Tim是這麼回答的：
“我認為，所謂優雅降級式的向下逐級支援，和漸進增強式的向上逐級最佳化，是完全不同的兩個概念。首先，我說的為所有的裝置最佳化，並不是我真的在京東下單買下了網站上所有的手機，拿回來一臺臺測試，來保證所有裝置上的網頁都執行正常。實際上，我們並不需要測試每一臺裝置，很多裝置都可以歸為同一個類別，對有限幾個類別的機器進行測試，不會花太長時間。
漸進增強，即向上逐級最佳化，先在一類舊裝置和瀏覽器上實現較為基礎的功能，再為能夠支援較新技術的裝置和瀏覽器逐級豐富它們的體驗。比如說，一開始你要考慮到，一些裝置可能對JavaScript的支援不是很好，那麼你在一開始構建網頁的時候，需要利用HTML和CSS的特性，讓網頁在脫離JavaScript支援的情況下，也能保證內容的可讀以及最起碼的互動可用性。”
在設計和寫程式碼的過程中，沒有人能夠預料到使用者在何種使用場景下，使用哪種瀏覽器或裝置去訪問這個網頁—就算你們的預算再充足，也沒人傻到幹這種出力不討好的事。就如Brad Frost所說的，你需要考慮的只是“支援程度與最佳化設計之間的平衡”。在一步步進行設計創意的時候，不要讓高階功能傷害到舊裝置的可用性。
漸進增強的思想，是一種平衡各種裝置間互動可用性的思想。在寫程式碼的過程中，一些程式碼是任何瀏覽器或裝置都能解讀的。我們先以健壯的方式寫下這些安全的程式碼，保證所有的裝置和瀏覽器可以訪問，然後再為技術支援程度更高的裝置和瀏覽器去最佳化，所以漸進增強並不要求技術追新，我們希望可以利用現有的技術讓所有的使用者都能獲得可接受範圍內的互動體驗。
如果你應用了漸進增強的思想來設計和編寫網頁，當用戶透過一些你們沒有測試到的奇葩裝置或瀏覽器來訪問，你會發現，在這些意料之外的裝置上，你的頁面依舊顯示得不錯。舉例來說，2013年，TechCrunch進行了一次改版，這次改版並沒有專門為特別小的螢幕進行最佳化，但是當智慧手錶流行起來之後，使用者發現，在智慧手錶上，網頁也顯示得很好（圖1）。
漸進增強是面向未來友好設計的核心思想之一。原因就是用這種思想，你可以做到相容未知的裝置。
圖1 使用安卓智慧手錶訪問TechCrunch
提升Web的可訪問性Tim關於Web的看法是：任何Web頁面，我們都可以把它看成一個文件。同樣內容的文件，我們只需要保留一份就夠了。不論使用者透過何種瀏覽器或裝置訪問，內容是唯一的，不同的只是呈現形式。這樣做的好處顯而易見—Web世界是由“超媒體” 聯絡起來的龐大網路，我在一個頁面中添加了一個超連結，卻不能預料到使用者是透過什麼裝置訪問並點選的這個連結。如果文件是唯一的，那麼入口連結也一定是唯一的。我只需要新增一個連結，使用者無論從任何裝置點選它，都能獲得最佳的訪問體驗。
總體來說，Tim反覆強調的是：確保Web的可訪問性，Web的可訪問性，Web的可訪問性！—重要的話說三遍。
可訪問性這個概念近年來逐漸被重視起來了，與之伴隨，大家近幾年都在說“以使用者為中心”，很多互動設計師也會在各種場合分享相關話題，比如為視覺有障礙的使用者提供最佳化體驗等（比較常見的技術就是相容螢幕閱讀器，如國內楊永全推廣的“爭渡讀屏軟體”）。大家開始重視可訪問性了，這是一個好的現象。
但是我們也要知道，提升可訪問性和相容螢幕閱讀器並不是劃等號的。就算是盲人，也有各種各樣獲取內容的方式。比方說有人使用盲文觸控反饋閱讀器，有人用盲文印表機，有的盲人重度依賴鍵盤，也有人使用一個帶有聲音反饋的觸控式螢幕，甚至他們可能會使用相機拍下內容，然後匯入到OCR光學字元識別系統裡，然後把文字轉換成語音來獲取他想要的內容。存在視覺障礙的使用者其數量非常多（考慮到隨著每個人的長大變老，每個人都可能會遇到視覺障礙的問題），但是解決視覺障礙的可訪問性，也只是廣義“可訪問性”要解決的問題的一小部分。
每個人都是不同的個體，彼此有著不同的特點。所以設計師所面對的使用者也是千變萬化的。使用者總有一些特殊的情況，比如慣用左手、色弱等。首先，設計師需要考慮這些人的需求，在設計中考慮是否可以為這些使用者提供一些便利的設定。然後，再結合各種裝置的不同特點，來最佳化不同的互動方式—這樣做，Web的可訪問性無疑會大大提升。
下面，我們來舉例談談Web的可訪問性都體現在哪些方面。
在互動設計方面，我們的Web頁面上，總有一些連結、按鈕等，這些需要使用者操作的元素，它們之間的佈局關係可能會影響到你的產品的可訪問性。設想一下，如果你是一個經常使用右手操作滑鼠的人，某一天你的右手受傷了而不得不使用左手來操作，那些網站上的按鈕設計得那麼小，按鈕又靠得那麼近，你點選起來多費勁啊！所以，互動設計對於實現可訪問性來說，是非常重要的。在視覺設計方面，Web頁面上的文字和頁面的背景顏色的對比度也是需要考慮的。我們要保證在不同的照明條件下文字在頁面上清晰可讀。這個是可以透過做實驗來反覆推敲的。有些網站的內容在PC上閱讀沒有問題，但是如果使用者拿著手機跑到戶外的大太陽下看，文字卻基本不可讀。文字顏色的考慮也是非常重要的。在文案設計方面，語文上的考慮對於提升可訪問性來說也是非常重要的。文字的可讀性決定了你想要傳達的資訊是不是可以為使用者所理解，這是網站必須要重視，卻最容易被忽略的。舉例來說，有誰好好讀過任意網站的註冊協議嗎？這種臭長的東西沒有人願意讀，因為沒有人好好考慮過註冊協議的文案設計 。文案設計的缺位，對Web的可訪問性的影響是非常巨大的。在網頁資源方面，如果頁面請求的資源過多過大，使用者的體驗是非常不好的，千萬不要考驗使用者的耐心，也千萬不要認為使用者的流量是免費的。一次，我在國外不小心打開了一個影片網站，因為這個網站是自動播放 的，所以那個月運營商直接扣了我30美元的流量，心都碎了啊。所以，我的建議是，根據使用者的使用環境去提供不同的體驗，至少，在戶外3G環境下，不要讓影片自動載入吧（騰訊影片是這麼做的—譯者注）？提升可訪問性，網頁資源的最佳化也是應該重視的。
類似的例子還可以舉出很多，但是我想你們應該明白“可訪問性”大概包含哪些內容了。
每個人可以有不同的理解，我個人認為，可訪問性就是確保每個人都能平等地訪問Web上的內容，無論使用者是有一些生理上的缺陷，還是受網路條件或裝置條件的限制。作為Web設計師，我們要考慮到不同的使用者體驗場景，有針對性地最佳化Web設計，讓大家透過同一個連結入口進來，都能訪問到為他最佳化過的，他想要看到的內容。
當透過手機訪問一個網站的時候，我會受到很多限制。首先，我受到螢幕解析度的限制，儘管我可以縮放頁面來放大我要看的內容，但是和PC上的感覺還是相差很多。其次，我會受到互動手段的限制。在PC上，我已經很熟悉使用滑鼠了，點選很小的按鈕也沒有困難。但是在手機上，我的手指傻大笨粗，如果頁面的連結密密麻麻，我想要準確點選一個連結，也是非常困難的。我希望獲得一個針對移動裝置最佳化過的頁面，我相信這是很多手機使用者的呼聲。
使用者會抱怨。收集這種抱怨，提煉出問題，並且解決問題，這一過程就是使用者體驗的最佳化。
針對不同的使用者，我們可以有不同的最佳化方法，而前提是，我們不應該拋棄任何使用者。漸進增強，就是這種不拋棄、不放棄的使用者體驗最佳化的方法之一。
分層次設計漸進增強是一種設計的思考方式，關於這種思考方式，我經常拿M&M豆來打比方（圖2）。我特別喜歡吃M&M豆，所以我們想一下，是不是所有的M&M豆最裡面都有一顆花生啊？M&M豆為什麼要在最裡面包含一顆花生，而不是別的什麼東西呢？我猜，因為花生是一種普遍都能接受的食品，除了少數過敏者，很少有人不喜歡吃花生。所以，花生是M&M豆的核心，正如一個網頁的內容是網頁的核心。廣告啊、導航啊，這些都是次要的，大家來到你的網頁是來看內容的，別的都不重要。
圖2 從一顆花生到一顆M&M豆的變化過程
發明M&M豆的人顯然深諳花生的美味之道。他為花生塗了厚厚的一層巧克力，巧克力也是大多數人都愛吃的東西，於是這顆花生進化了！就好像我們為網站的內容寫了一些CSS樣式表，讓內容更加易於閱讀，同時視覺上也更好看，道理是一樣的。
然後，他們為這顆包裹著巧克力的花生塗了一層糖衣，完成了花生的終極進化！一顆M&M豆誕生了！這就好像你為網頁增加了一些基於JavaScript的互動行為，滿足了使用者和內容進行互動的需求。使用者因此更喜歡你的網站了。
這就是基本的漸進增強的思想，我們首先建立了內容，然後逐級往內容上應用技術，每一層技術帶來不同的增強體驗，但是，內容始終是一切的核心。
漸進增強的設計思想，就是要求設計師從內容核心開始設計，如果沒有那些增強的技術支援，Web頁面的體驗是什麼樣子的？然後我們逐層增加了一些技術，同一個Web頁面的體驗又是什麼樣子的？Benjamin Hoh曾經這麼描述過這種設計思路 ：
“漸進增強”的設計是一種開放的設計，允許我們為不同的裝置和場景做逐級增強的最佳化，而不是一開始設計出一整套看似完美的體驗方案，然後在各種裝置上出問題。
內容，通常是使用者體驗的核心。結構清晰、文字曉暢、組織得當的內容，是一個網頁的基礎。內容的可讀性和可用性是如此的重要，因為內容是網頁的核心，“沒有內容，你的網頁從技術上相當於不存在”。
為了讓內容更有意義，我們為內容添加了各種各樣的HTML標籤。有些標籤是為了標記某些內容更重要，如<strong>；有些標籤是為了標記一些內容是作為特殊用途而存在的，如<address>；有些標籤是為了體現某些內容之間的邏輯關係，如<ol>。這些HTML標籤為內容賦予了結構化的意義，也就是我們常說的HTML語義化。
視覺設計讓你的頁面顯得更有層次。你可以運用一些平面構成的方法，如對比、重複、將類似的元素放在同一個區域、控制內容的對齊方式等，讓頁面的結構更清晰。視覺設計還可以加深使用者對頁面的印象，提升使用者的閱讀體驗。
一些互動設計的手段可以讓介面更友好。例如，有些內容，使用者是不需要馬上看到的，我們可以先隱藏起來，當用戶進行頁面互動的時候，我們再讓使用者看到這些內容。再如，我們可以在使用者在輸入框中填寫內容的時候給予一些實時反饋，讓使用者知道自己填寫的內容是否符合表單的要求。一些細節的互動，使用者會覺得很貼心，從而對你網站的印象大大提升。
語義化、視覺手段、互動手段—我們把這些提升使用者體驗的手段分了級，卻並不意味著，所有的使用者都能享受到這些手段所帶來的便利。這些設計手段構成了我們所能提供的使用者體驗的一個階梯—從最基本的體驗到最複雜的體驗（圖3）。使用者在不同場景下，獲取到的體驗是不同的，但是他獲取到的，都是在該場景下我們所能提供的最好的體驗。
當我們使用漸進增強的思想設計開發了一個網站，就意味著，無論任何使用者、透過任何裝置或瀏覽器來訪問它，網站的可用性都是沒有問題的。有使用者可能會使用Lynx這種命令列瀏覽器來訪問你的網站，當然他只能看到純文字，不可能和使用最新版Chrome瀏覽器的使用者獲得同樣的視覺體驗，但是他依然能夠獲得關於網站的文字介紹資訊，對於使用Lynx瀏覽器的使用者來說，這足夠了。
圖3 使用者能獲得的體驗隨著裝置和瀏覽器的支援程度而逐漸提升
漸進增強思想就是這樣一種神器：結合使用者所使用的裝置和瀏覽器的狀況，考慮到使用者的使用環境，為使用者提供我們可以提供的，放棄此時不能支援的，讓使用者得到他可以得到的最好的體驗。
本文節選自《漸進增強——跨平臺使用者體驗設計》
內容簡介
大多數有關Web設計的圖書都採取了“技術+案例”的形式，以便讓讀者迅速掌握某項技能。這類圖書會用很大篇幅講述如何應用HTML標籤，CSS程式碼的每個屬性是如何生效的，等等。此外，這些圖書還會附帶一個一個的小專案，透過帶著讀者一步一步寫出程式碼，來觀察專案是如何成型的，讓讀者形成自己的認識，從而掌握設計和開發技巧。
市面上已經存在大量的技術圖書，網上也有大量的技術文章可以讀。這些書很多寫得都非常好，但是，如你所知，大多數圖書和文章在幾個月到一年的時間之後就被淘汰了，因為技術過時了。
實現技術、瀏覽器、工具包……這些東西變化得太快。我自己經常因為學習這些東西導致不堪重負。在一片動盪不安的技術海洋裡，到底有多少種方法可以學習啊！我只是想做一個小網站，這片大海簡直把我嚇壞了！當我被技術的浪潮推到這邊，拍到那邊，因為暈船吐得一塌糊塗之後，我終於發現了大多數技術都在圍繞一箇中心在發展自己——這個中心就是“漸進增強”。
“漸進增強”的哲學可以稱之為適應性Web設計方法的核心和靈魂。以它為核心，我終於能夠正確理解很多技術和思路是如何產生的。甚至，理解了這種思想之後，我做出來的新網站變得更加健壯，而且很多使用者表示我的網站訪問起來終於不那麼頭疼啦，因此，這些網站的訪問量也一天天增長起來。對“漸進增強”的理解使我成為了一名更優秀的Web設計師，我相信這種魔力也會讓你變得更優秀。