最近在拜讀一本Web體驗相關的書《漸進增強——跨平臺用戶體驗設計 》， 閱讀後做些總結， 消化一下書中的精髓。
在閱讀本文前， 可以先思考下面幾個問題。
1. 流覽網頁的目的是什麼？
2. 流覽網頁的時候會碰到哪些問題？
3. 用什麼方法來解決這些問題？
4. 這些方法具體的實施步驟有哪些？
一、契機
1）內容
內容是Web頁面的核心， 也是使用者流覽頁面的目的。 內容可以是某些資訊或某個功能， 使用者流覽網頁就是為了獲得它們。 接下來所做的一切都是為了讓內容脫穎而出， 向使用者傳達更清晰明確的意義， 傳遞更準確、更具表現力的資訊， 讓內容適應更多、更新的設備。 內容是使用者體驗的核心， 結構清晰、文字曉暢、組織得當的內容， 是一個網頁的基礎。 沒有內容， 你的網頁從技術上相當於不存在。
2）遇到的問題
雖然所有使用者訪問的頁面是同一份， 但在流覽的時候，
3）漸進增強
在Web開發的時候， 需要考慮的細節越來越多， 設備的螢幕尺寸， 記憶體， CPU， 圖元密度， 作業系統， 流覽器， 網路， 代理等， 使用者的文化水準， 認知障礙， 上網目的， 習慣， 需求等。 要做一個每個人體驗都一致的網站， 幾乎不可能。 但還是得確保Web的可訪問性， 保證用戶在任何環境、使用任何設備， 都能正常訪問核心內容或使用基本功能， 並為他們提供當前條件下最好的體驗， 這正是漸進增強的核心思想。
漸進增強是一種相容未知設備、平衡各種設備間交互可用性的思想，
4）分層設計
實施漸進增強， 可分為文檔結構化， 完善視覺設計和豐富交互設計這3個層面， 從而實現從基本到複雜的體驗。
5）容錯性
HTML的容錯性：流覽器在渲染頁面的時候， 會忽略不認識的元素和屬性， 而文檔中的內容則會保留下來。 得益於這種設計， HTML的發展並不會傷害過時的流覽器。
CSS的容錯性：流覽器遇到不認識的CSS規則或屬性， 流覽器就會忽略解析錯誤出現之處周圍的代碼。
JavaScript的容錯性：與HTML和CSS不同， JavaScript沒有那麼強的容錯性，
二、文檔結構化
如果我們能夠提供結構清晰、易於檢索的內容， 無論對於搜素引擎的抓取， 還是對某些資料結構化工具的內容識別都是相當有用的， 同時讓你的內容適應更多、更新的流覽器。
1）按照Web標準開發
語義化元素組織HTML結構、使用CSS階層式樣式表來佈局、壓縮圖片、優化DOM， 使用腳本增強交互體驗等， 實現結構和樣式、邏輯分離。 過去人們喜歡用table佈局， 究其原因有二：第一， 相容性不錯， 不會出現特別顯眼的問題；第二， 大多數從業者尚未形成可訪問性優化的意識。 但隨後， Google率先採取了HTML語義化分析的方法， 來判斷一個網頁的內容和關鍵字意義的相關程度， 各大搜尋引擎也開始搜尋語義化的標籤，
2）使用合適的標籤
當你在合適的地方使用一個語義恰當的標籤的時候， 內容的意義也會被強化， 頁面的內容結構變得更加清晰。 如果使用不同的HTML元素來類比某個控制項， 在流覽器中， 會體現出不同的特徵。 就算我們可以實現從樣式到行為的全面類比， 得到的也只是一個不穩定、代碼臃腫、難以維護的元件。 在頁面中合理運用佈局元素（section、article、header等）， 將頁面劃分為各個語義明確的區塊， 使網頁的內容資訊更好地傳遞給使用者。
3）class和id的命名
一些常用的class和id的命名對HTML起到了一定的補充和建議作用， 例如#header、#nav和.article等。最後慢慢演變成了HTML標準元素，header、nav和article等。
4）微格式
微格式通過定義HTML的屬性（rel或class）來實現Web語義化的擴展，rel用來描述通過href屬性連結起來的兩個網頁或文檔之間的關係，用class的名稱來實現資料格式化。RDFa是另外一種資料格式化技術，但語法比微格式嚴格。
5）避免冗餘標籤
額外的HTML結構因為被寫死在了頁面中，會讓頁面產生潛在的可用性或可維護性方面的問題。既然交互行為是由JavaScript支持的，那麼這些交互行為所依賴的HTML結構當然也應該由JavaScript動態按需生成。
6）ARIA屬性
如果原生的HTML元素可以滿足語義化和默認行為的需求，就不要試圖通過改變ARIA屬性的方法去實現相同的目的。如果合理的設置了ARIA屬性，那些需要輔助設備工具支援的使用者就能更快定位內容，視覺障礙的體驗就會因此獲得極大提升。
三、視覺設計
目前存在著解析度不同、設備對CSS的支援程度不一、圖元密度各異等客觀條件，導致了一堆和視覺設計有關的問題。為了解決問題，就需要好的設計。好的設計有三個原則：化繁為簡（共同性）、化零為整（一致性）、化靜為動（靈活性）。
1）設計一個系統，而非一堆頁面
花一點時間去對內容進行分析，從中挑出10到12個頁面進行設計（加上一堆小元件）。我們設計的是整個系統而不是單獨的頁面。你會發現頁面和頁面之間、元件和元件之間是有內在聯繫的。對於使用者來說，各頁面之間設計的一致性降低了認知成本，對於開發者來說，元件複用性的提升降低了今後系統的維護難度。設計系統具體分為3個步驟：
1.設計清算（羅列介面清單），可以宏觀的掌握整個網站的設計風格。從每個模組的角度進行考慮，更加系統的進行設計。
2.設計風格元件，將網站上可能出現的介面元素，如標題、正文、圖示、按鈕等最基礎的設計風格羅列在一份文檔中，形成網站最基本的視覺規範。一來方便網站設計的控制，二來當調整網站主題風格，會大大節省工作量。
3.建立視覺規範與元件庫，視覺規範就像一份巨細無遺的風格組件庫，包含具體設計標注，如文字的字型大小、模組的間距、圖像和廣告位元的尺寸，在具體設計中提供準繩。元件庫分類羅列了網站中常用模組的HTML結構，前端工程師摘取需要的模組代碼來組成所需的頁面。建立組件庫好比收集一堆積木，積木越多，越能找到合適的元件，從而大大提升了網站的設計和開發速度。
2）文案內容
設計師只有獲悉了文案內容，才能運用設計方法來烘托內容、強調內容、襯托內容。文案制定者和視覺設計師坐在一起集思廣益，分工設計文案。視覺設計師考慮文案的極端情況，儘早考慮極端情況，會讓你的設計稿更健壯；文案制定者考慮文案是否可以被現有設計規範所滿足。
3）響應式Web設計
目前市面上有許多媒體類型，其中包括電腦螢幕、列印介質、電視、手持設備，以及輔助設備，如螢幕閱讀器、盲文印表機、觸摸回饋等設備。為了能在不同媒體中渲染合適的樣式，呈現正確的介面，有人提出了回應式Web設計。回應式Web設計的基本方法包括流體柵格、靈活適應的媒體、媒體查詢和流覽器分級。
1.流體柵格：基於百分比單位規定列寬的柵格系統。
2.靈活適應的媒體：圖片、視頻等媒體在Web頁面中的占位元寬度不允許超過其容器的寬度。
3.媒體查詢：通過設置媒體查詢的條件（寬度中斷點），在不同解析度和螢幕尺寸下，佈局應該呈現什麼樣的結構，以及行高、字型大小等樣式資訊。
4.流覽器分級：區分哪些是技術支援度較差的老流覽器，哪些是支援度一般的流覽器，哪些是支援度高的流覽器。
4）防守性設計
在老的流覽器中，那些不認識的新CSS屬性或值會被自動忽略掉，而新的流覽器會根據先後順序覆蓋掉舊的屬性，如下代碼所示。
property:basic value; property:advanced value;手動編寫降級或相容代碼會比較繁瑣，可以使用Sass、Less等前置處理器，這些工具提供了CSS語法相容的自動化方法，可以自動生成對老流覽器降級代碼和針對不同流覽器的廠商首碼。
四、交互設計
Web的歷史，是一部JavaScript的折騰史，甚至可以說是災難史。利用JavaScript去實現漸進增強，其要求比使用CSS或HTML更嚴格。熟悉所有可能導致JavaScript失效或影響基於JavaScript建立的體驗的所有要素。在多大程度上減輕這方面的損害，取決於你對那些影響體驗的要素的熟悉程度。
1）無JavaScript
不要把所有的用戶體驗都寄託在JavaScript上，會有很多情況導致流覽器不能使用JavaScript，當出現這種情況的時候，至少要讓網頁可訪問，把風險降到最低。
2）特性檢測
JavaScript是零容錯，要想代碼足夠健壯，特性檢測是必需的。特性檢測就是把代碼封裝在一些代碼塊中，針對不同相容要求的流覽器運行不同的代碼，避免報錯風險。舉例來說通過屬性設置去觀察是否達到了該特性的預期。
if(window.addEventListener) { //支援addEventListener的邏輯 }else if(window.attachEvent){ //支援attachEvent的邏輯 }3）建立最低限度的代碼支持
首先，寫一部分通用的，最低限度也要支持的JavaScript（如cookie），然後通過附加特性檢測的方法去引入那些增強體驗的高級JavaScript代碼（如localStorag）。
4）區分對待
微軟提供了一種叫做“條件注釋”的私有技術。所有的IE可識別
5）創建頁面所需的結構
用JavaScript去生成有著強依賴關係的HTML結構，這樣做既可以讓頁面輕量，也會降低頁面維護的難度，因為HTML和JavaScript代碼都在同一個地方進行管理了。換句話說，將通用或複雜的功能，封裝成組件或外掛程式。
6）自訂屬性
data屬性是一種自訂屬性，明晰的data屬性可以通過降低開發維護成本的方式使頁面的漸進增強設計變得更加容易。在表單驗證外掛程式中，將驗證規則和提示直接定義在data屬性內，讓內容和邏輯解耦，減少JavaScript代碼的檔尺寸，讓介面開發更輕鬆。
7）滑鼠事件之外
設計者們常常會忽略那些不使用滑鼠，而是用其它輸入終端使用者的需求，漸進增強的設計思想要求在任何可提升體驗的地方要留心。
1.發揮鍵盤的作用，鍵盤依然是一個很有用的輸入媒介，作為一個標準程度較高的輸入工具，對於視覺障礙使用者和一些電腦較為熟練的使用者來說，重要性是不可取代的。
2.提升觸屏體驗，滑鼠的移動是連續的，而觸屏上面的手指移動是跳躍的，不要把基於滑鼠的設計思維遷移到觸控式螢幕幕上。
8）不要依賴網路狀況
人們的上網環境在一天之內可能會在蜂窩網路、WIFI連接、4G、3G之間隨時切換，有時還會進入完全沒有信號的地方，當沒有網路的時候，可以做些緩存或離線處理。
1.將資料存儲在用戶端，將表單數據捕獲為一個JSON物件，並緩存起來，然後提醒使用者，當網路恢復，將資料提交給伺服器。
2.豐富離線體驗，如果你的網站功能性大於內容性，離線技術會讓網站變得易於安裝。
五、介面體驗圖
1）介面體驗圖
漸進增強設計的最大挑戰不是代碼編寫，而是制定一個計畫。通過介面體驗圖（也稱Ix圖）來解決這一問題，這張圖將展示網頁遇到各種介面選擇困難時的每一種適應性的解決路徑，保證團隊中的每一個成員都能對目標和結果有深刻的理解，從而為一個共同的工作目標而努力。
這個工具最擅長的，是展示網頁遇到各種介面選擇困難時候的每一種適應性的解決路徑。這個圖只是一些節點和箭頭而已，利用它可以嘗試不同的方案。這份文檔簡潔清晰，對於團隊中的每個人都別具價值。
1.內容編輯：看到不同設備和狀態下的網站顯示情況，根據實際情況決定在該介面下暴露出的內容。
2.設計師：觀察到每種可能的體驗效果，從而根據實際情況產出不同的線框圖和視覺效果。
3.工程師：在何種條件下提供哪些具體的功能，並且清楚定制各個設備的性能檢測。
4.測試：在具體設備和頁面上有針對性地去測試對應的功能。
2）漸進思想的受益人
使用漸進增強思想去設計一個網站，每一個人都會從中受益。
用戶：產品能夠在一切情況下給使用者帶來最佳的訪問體驗。
自己：不必執著於為每一個用戶提供完全相同的體驗。
客戶和老闆：產品的可訪問帶動的使用者量，維護的視覺和金錢成本也都降低了。
例如#header、#nav和.article等。最後慢慢演變成了HTML標準元素，header、nav和article等。4）微格式
微格式通過定義HTML的屬性（rel或class）來實現Web語義化的擴展，rel用來描述通過href屬性連結起來的兩個網頁或文檔之間的關係，用class的名稱來實現資料格式化。RDFa是另外一種資料格式化技術，但語法比微格式嚴格。
5）避免冗餘標籤
額外的HTML結構因為被寫死在了頁面中，會讓頁面產生潛在的可用性或可維護性方面的問題。既然交互行為是由JavaScript支持的，那麼這些交互行為所依賴的HTML結構當然也應該由JavaScript動態按需生成。
6）ARIA屬性
如果原生的HTML元素可以滿足語義化和默認行為的需求，就不要試圖通過改變ARIA屬性的方法去實現相同的目的。如果合理的設置了ARIA屬性，那些需要輔助設備工具支援的使用者就能更快定位內容，視覺障礙的體驗就會因此獲得極大提升。
三、視覺設計
目前存在著解析度不同、設備對CSS的支援程度不一、圖元密度各異等客觀條件，導致了一堆和視覺設計有關的問題。為了解決問題，就需要好的設計。好的設計有三個原則：化繁為簡（共同性）、化零為整（一致性）、化靜為動（靈活性）。
1）設計一個系統，而非一堆頁面
花一點時間去對內容進行分析，從中挑出10到12個頁面進行設計（加上一堆小元件）。我們設計的是整個系統而不是單獨的頁面。你會發現頁面和頁面之間、元件和元件之間是有內在聯繫的。對於使用者來說，各頁面之間設計的一致性降低了認知成本，對於開發者來說，元件複用性的提升降低了今後系統的維護難度。設計系統具體分為3個步驟：
1.設計清算（羅列介面清單），可以宏觀的掌握整個網站的設計風格。從每個模組的角度進行考慮，更加系統的進行設計。
2.設計風格元件，將網站上可能出現的介面元素，如標題、正文、圖示、按鈕等最基礎的設計風格羅列在一份文檔中，形成網站最基本的視覺規範。一來方便網站設計的控制，二來當調整網站主題風格，會大大節省工作量。
3.建立視覺規範與元件庫，視覺規範就像一份巨細無遺的風格組件庫，包含具體設計標注，如文字的字型大小、模組的間距、圖像和廣告位元的尺寸，在具體設計中提供準繩。元件庫分類羅列了網站中常用模組的HTML結構，前端工程師摘取需要的模組代碼來組成所需的頁面。建立組件庫好比收集一堆積木，積木越多，越能找到合適的元件，從而大大提升了網站的設計和開發速度。
2）文案內容
設計師只有獲悉了文案內容，才能運用設計方法來烘托內容、強調內容、襯托內容。文案制定者和視覺設計師坐在一起集思廣益，分工設計文案。視覺設計師考慮文案的極端情況，儘早考慮極端情況，會讓你的設計稿更健壯；文案制定者考慮文案是否可以被現有設計規範所滿足。
3）響應式Web設計
目前市面上有許多媒體類型，其中包括電腦螢幕、列印介質、電視、手持設備，以及輔助設備，如螢幕閱讀器、盲文印表機、觸摸回饋等設備。為了能在不同媒體中渲染合適的樣式，呈現正確的介面，有人提出了回應式Web設計。回應式Web設計的基本方法包括流體柵格、靈活適應的媒體、媒體查詢和流覽器分級。
1.流體柵格：基於百分比單位規定列寬的柵格系統。
2.靈活適應的媒體：圖片、視頻等媒體在Web頁面中的占位元寬度不允許超過其容器的寬度。
3.媒體查詢：通過設置媒體查詢的條件（寬度中斷點），在不同解析度和螢幕尺寸下，佈局應該呈現什麼樣的結構，以及行高、字型大小等樣式資訊。
4.流覽器分級：區分哪些是技術支援度較差的老流覽器，哪些是支援度一般的流覽器，哪些是支援度高的流覽器。
4）防守性設計
在老的流覽器中，那些不認識的新CSS屬性或值會被自動忽略掉，而新的流覽器會根據先後順序覆蓋掉舊的屬性，如下代碼所示。
property:basic value; property:advanced value;手動編寫降級或相容代碼會比較繁瑣，可以使用Sass、Less等前置處理器，這些工具提供了CSS語法相容的自動化方法，可以自動生成對老流覽器降級代碼和針對不同流覽器的廠商首碼。
四、交互設計
Web的歷史，是一部JavaScript的折騰史，甚至可以說是災難史。利用JavaScript去實現漸進增強，其要求比使用CSS或HTML更嚴格。熟悉所有可能導致JavaScript失效或影響基於JavaScript建立的體驗的所有要素。在多大程度上減輕這方面的損害，取決於你對那些影響體驗的要素的熟悉程度。
1）無JavaScript
不要把所有的用戶體驗都寄託在JavaScript上，會有很多情況導致流覽器不能使用JavaScript，當出現這種情況的時候，至少要讓網頁可訪問，把風險降到最低。
2）特性檢測
JavaScript是零容錯，要想代碼足夠健壯，特性檢測是必需的。特性檢測就是把代碼封裝在一些代碼塊中，針對不同相容要求的流覽器運行不同的代碼，避免報錯風險。舉例來說通過屬性設置去觀察是否達到了該特性的預期。
if(window.addEventListener) { //支援addEventListener的邏輯 }else if(window.attachEvent){ //支援attachEvent的邏輯 }3）建立最低限度的代碼支持
首先，寫一部分通用的，最低限度也要支持的JavaScript（如cookie），然後通過附加特性檢測的方法去引入那些增強體驗的高級JavaScript代碼（如localStorag）。
4）區分對待
微軟提供了一種叫做“條件注釋”的私有技術。所有的IE可識別
5）創建頁面所需的結構
用JavaScript去生成有著強依賴關係的HTML結構，這樣做既可以讓頁面輕量，也會降低頁面維護的難度，因為HTML和JavaScript代碼都在同一個地方進行管理了。換句話說，將通用或複雜的功能，封裝成組件或外掛程式。
6）自訂屬性
data屬性是一種自訂屬性，明晰的data屬性可以通過降低開發維護成本的方式使頁面的漸進增強設計變得更加容易。在表單驗證外掛程式中，將驗證規則和提示直接定義在data屬性內，讓內容和邏輯解耦，減少JavaScript代碼的檔尺寸，讓介面開發更輕鬆。
7）滑鼠事件之外
設計者們常常會忽略那些不使用滑鼠，而是用其它輸入終端使用者的需求，漸進增強的設計思想要求在任何可提升體驗的地方要留心。
1.發揮鍵盤的作用，鍵盤依然是一個很有用的輸入媒介，作為一個標準程度較高的輸入工具，對於視覺障礙使用者和一些電腦較為熟練的使用者來說，重要性是不可取代的。
2.提升觸屏體驗，滑鼠的移動是連續的，而觸屏上面的手指移動是跳躍的，不要把基於滑鼠的設計思維遷移到觸控式螢幕幕上。
8）不要依賴網路狀況
人們的上網環境在一天之內可能會在蜂窩網路、WIFI連接、4G、3G之間隨時切換，有時還會進入完全沒有信號的地方，當沒有網路的時候，可以做些緩存或離線處理。
1.將資料存儲在用戶端，將表單數據捕獲為一個JSON物件，並緩存起來，然後提醒使用者，當網路恢復，將資料提交給伺服器。
2.豐富離線體驗，如果你的網站功能性大於內容性，離線技術會讓網站變得易於安裝。
五、介面體驗圖
1）介面體驗圖
漸進增強設計的最大挑戰不是代碼編寫，而是制定一個計畫。通過介面體驗圖（也稱Ix圖）來解決這一問題，這張圖將展示網頁遇到各種介面選擇困難時的每一種適應性的解決路徑，保證團隊中的每一個成員都能對目標和結果有深刻的理解，從而為一個共同的工作目標而努力。
這個工具最擅長的，是展示網頁遇到各種介面選擇困難時候的每一種適應性的解決路徑。這個圖只是一些節點和箭頭而已，利用它可以嘗試不同的方案。這份文檔簡潔清晰，對於團隊中的每個人都別具價值。
1.內容編輯：看到不同設備和狀態下的網站顯示情況，根據實際情況決定在該介面下暴露出的內容。
2.設計師：觀察到每種可能的體驗效果，從而根據實際情況產出不同的線框圖和視覺效果。
3.工程師：在何種條件下提供哪些具體的功能，並且清楚定制各個設備的性能檢測。
4.測試：在具體設備和頁面上有針對性地去測試對應的功能。
2）漸進思想的受益人
使用漸進增強思想去設計一個網站，每一個人都會從中受益。
用戶：產品能夠在一切情況下給使用者帶來最佳的訪問體驗。
自己：不必執著於為每一個用戶提供完全相同的體驗。
客戶和老闆：產品的可訪問帶動的使用者量，維護的視覺和金錢成本也都降低了。