最近在拜讀一本Web體驗相關的書《漸進增強——跨平台用戶體驗設計 》，閱讀后做些總結，消化一下書中的精髓。
在閱讀本文前，可以先思考下面幾個問題。
1. 瀏覽網頁的目的是什么？
2. 瀏覽網頁的時候會碰到哪些問題？
3. 用什么方法來解決這些問題？
4. 這些方法具體的實施步驟有哪些？
一、契機
1）內容
內容是Web頁面的核心，也是用戶瀏覽頁面的目的。內容可以是某些信息或某個功能，用戶瀏覽網頁就是為了獲得它們。接下來所做的一切都是為了讓內容脫穎而出，向用戶傳達更清晰明確的意義，傳遞更准確、更具表現力的信息，讓內容適應更多、更新的設備。內容是用戶體驗的核心，結構清晰、文字曉暢、組織得當的內容，是一個網頁的基礎。沒有內容，你的網頁從技術上相當於不存在。
2）遇到的問題
雖然所有用戶訪問的頁面是同一份，但在瀏覽的時候，經常會碰到各種奇葩問題，例如頁面打不開，內容看不到，功能不能用，錯亂的排版等。這是由於目前設備和瀏覽器碎片化，用戶使用環境和交互習慣多樣化導致的。
3）漸進增強
在Web開發的時候，需要考慮的細節越來越多，設備的屏幕尺寸，內存，CPU，像素密度，操作系統，瀏覽器，網絡，代理等，用戶的文化水平，認知障礙，上網目的，習慣，需求等。要做一個每個人體驗都一致的網站，幾乎不可能。但還是得確保Web的可訪問性，保證用戶在任何環境、使用任何設備，都能正常訪問核心內容或使用基本功能，並為他們提供當前條件下最好的體驗，這正是漸進增強的核心思想。
漸進增強是一種兼容未知設備、平衡各種設備間交互可用性的思想，並不要求技術追新，但能讓用戶脫離設備制約，極大提升Web可用性。采用漸進增強在項目開始之前需要多花些時間去思考，但會為后來的設計開發節省大量的時間，資源，從而在單位時間內產出更多價值。
4）分層設計
實施漸進增強，可分為文檔結構化，完善視覺設計和豐富交互設計這3個層面，從而實現從基本到復雜的體驗。
5）容錯性
HTML的容錯性：瀏覽器在渲染頁面的時候，會忽略不認識的元素和屬性，而文檔中的內容則會保留下來。得益於這種設計，HTML的發展並不會傷害過時的瀏覽器。
CSS的容錯性：瀏覽器遇到不認識的CSS規則或屬性，瀏覽器就會忽略解析錯誤出現之處周圍的代碼。
JavaScript的容錯性：與HTML和CSS不同，JavaScript沒有那么強的容錯性，一旦程序中有一部分語義不明，這個程序就無法執行。
二、文檔結構化
如果我們能夠提供結構清晰、易於檢索的內容，無論對於搜素引擎的抓取，還是對某些數據結構化工具的內容識別都是相當有用的，同時讓你的內容適應更多、更新的瀏覽器。
1）按照Web標准開發
語義化元素組織HTML結構、使用CSS級聯樣式表來布局、壓縮圖片、優化DOM，使用腳本增強交互體驗等，實現結構和樣式、邏輯分離。過去人們喜歡用table布局，究其原因有二：第一，兼容性不錯，不會出現特別顯眼的問題；第二，大多數從業者尚未形成可訪問性優化的意識。但隨后，Google率先采取了HTML語義化分析的方法，來判斷一個網頁的內容和關鍵詞意義的相關程度，各大搜索引擎也開始搜尋語義化的標簽，開發出類似的排名技術。很多網站的流量都是從搜索引擎帶入，這使得語義化標記和CSS樣式布局的方法逐漸被大家接受。
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可識別
<!--[if IE]><!--> <link href="../../assets/css/style.css" rel="stylesheet" /> <!--<![endif]-->
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）漸進思想的受益人
使用漸進增強思想去設計一個網站，每一個人都會從中受益。
用戶：產品能夠在一切情況下給用戶帶來最佳的訪問體驗。
自己：不必執着於為每一個用戶提供完全相同的體驗。
客戶和老板：產品的可訪問帶動的用戶量，維護的視覺和金錢成本也都降低了。