Web設計思想——漸進增強

標籤：奇葩   ima   開發   正是   計劃   att   原則   結構化   螢幕   

最近在拜讀一本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）漸進思想的受益人

　　使用漸進增強思想去設計一個網站，每一個人都會從中受益。

使用者：產品能夠在一切情況下給使用者帶來最佳的訪問體驗。

自己：不必執著於為每一個使用者提供完全相同的體驗。

客戶和老闆：產品的可訪問帶動的使用者量，維護的視覺和金錢成本也都降低了。

 

 

Web設計思想——漸進增強