Web設(shè)計(jì)思想——漸進(jìn)增強(qiáng)

時(shí)間：2023-09-06 03:24:02 | 來(lái)源：網(wǎng)站運(yùn)營(yíng)

時(shí)間：2023-09-06 03:24:02 來(lái)源：網(wǎng)站運(yùn)營(yíng)

Web設(shè)計(jì)思想——漸進(jìn)增強(qiáng)：最近在拜讀一本W(wǎng)eb體驗(yàn)相關(guān)的書《漸進(jìn)增強(qiáng)——跨平臺(tái)用戶體驗(yàn)設(shè)計(jì) 》，閱讀后做些總結(jié)，消化一下書中的精髓。







在閱讀本文前，可以先思考下面幾個(gè)問(wèn)題。

1. 瀏覽網(wǎng)頁(yè)的目的是什么？

2. 瀏覽網(wǎng)頁(yè)的時(shí)候會(huì)碰到哪些問(wèn)題？

3. 用什么方法來(lái)解決這些問(wèn)題？

4. 這些方法具體的實(shí)施步驟有哪些？

一、契機(jī)

1）內(nèi)容

　　內(nèi)容是Web頁(yè)面的核心，也是用戶瀏覽頁(yè)面的目的。內(nèi)容可以是某些信息或某個(gè)功能，用戶瀏覽網(wǎng)頁(yè)就是為了獲得它們。接下來(lái)所做的一切都是為了讓 內(nèi)容脫穎而出，向用戶傳達(dá)更清晰明確的意義，傳遞更準(zhǔn)確、更具表現(xiàn)力的信息，讓內(nèi)容適應(yīng)更多、更新的設(shè)備。內(nèi)容是用戶體驗(yàn)的核心，結(jié)構(gòu)清晰、文字曉暢、組 織得當(dāng)?shù)膬?nèi)容，是一個(gè)網(wǎng)頁(yè)的基礎(chǔ)。沒(méi)有內(nèi)容，你的網(wǎng)頁(yè)從技術(shù)上相當(dāng)于不存在。

2）遇到的問(wèn)題

　　雖然所有用戶訪問(wèn)的頁(yè)面是同一份，但在瀏覽的時(shí)候，經(jīng)常會(huì)碰到各種奇葩問(wèn)題，例如頁(yè)面打不開(kāi)，內(nèi)容看不到，功能不能用，錯(cuò)亂的排版等。這是由于目前設(shè)備和瀏覽器碎片化，用戶使用環(huán)境和交互習(xí)慣多樣化導(dǎo)致的。

3）漸進(jìn)增強(qiáng)

　　在Web開(kāi)發(fā)的時(shí)候，需要考慮的細(xì)節(jié)越來(lái)越多，設(shè)備的屏幕尺寸，內(nèi)存，CPU，像素密度，操作系統(tǒng)，瀏覽器，網(wǎng)絡(luò)，代理等，用戶的文化水平，認(rèn) 知障礙，上網(wǎng)目的，習(xí)慣，需求等。要做一個(gè)每個(gè)人體驗(yàn)都一致的網(wǎng)站，幾乎不可能。但還是得確保Web的可訪問(wèn)性，保證用戶在任何環(huán)境、使用任何設(shè)備，都能 正常訪問(wèn)核心內(nèi)容或使用基本功能，并為他們提供當(dāng)前條件下最好的體驗(yàn)，這正是漸進(jìn)增強(qiáng)的核心思想。

　　漸進(jìn)增強(qiáng)是一種兼容未知設(shè)備、平衡各種設(shè)備間交互可用性的思想，并不要求技術(shù)追新，但能讓用戶脫離設(shè)備制約，極大提升Web可用性。采用漸進(jìn)增強(qiáng)在項(xiàng)目開(kāi)始之前需要多花些時(shí)間去思考，但會(huì)為后來(lái)的設(shè)計(jì)開(kāi)發(fā)節(jié)省大量的時(shí)間，資源，從而在單位時(shí)間內(nèi)產(chǎn)出更多價(jià)值。

4）分層設(shè)計(jì)

　　實(shí)施漸進(jìn)增強(qiáng)，可分為文檔結(jié)構(gòu)化，完善視覺(jué)設(shè)計(jì)和豐富交互設(shè)計(jì)這3個(gè)層面，從而實(shí)現(xiàn)從基本到復(fù)雜的體驗(yàn)。

5）容錯(cuò)性

HTML的容錯(cuò)性：瀏覽器在渲染頁(yè)面的時(shí)候，會(huì)忽略不認(rèn)識(shí)的元素和屬性，而文檔中的內(nèi)容則會(huì)保留下來(lái)。得益于這種設(shè)計(jì)，HTML的發(fā)展并不會(huì)傷害過(guò)時(shí)的瀏覽器。

CSS的容錯(cuò)性：瀏覽器遇到不認(rèn)識(shí)的CSS規(guī)則或?qū)傩?，瀏覽器就會(huì)忽略解析錯(cuò)誤出現(xiàn)之處周圍的代碼。

JavaScript的容錯(cuò)性：與HTML和CSS不同，JavaScript沒(méi)有那么強(qiáng)的容錯(cuò)性，一旦程序中有一部分語(yǔ)義不明，這個(gè)程序就無(wú)法執(zhí)行。

二、文檔結(jié)構(gòu)化

　　如果我們能夠提供結(jié)構(gòu)清晰、易于檢索的內(nèi)容，無(wú)論對(duì)于搜素引擎的抓取，還是對(duì)某些數(shù)據(jù)結(jié)構(gòu)化工具的內(nèi)容識(shí)別都是相當(dāng)有用的，同時(shí)讓你的內(nèi)容適應(yīng)更多、更新的瀏覽器。

1）按照Web標(biāo)準(zhǔn)開(kāi)發(fā)

　　語(yǔ)義化元素組織HTML結(jié)構(gòu)、使用CSS級(jí)聯(lián)樣式表來(lái)布局、壓縮圖片、優(yōu)化DOM，使用腳本增強(qiáng)交互體驗(yàn)等，實(shí)現(xiàn)結(jié)構(gòu)和樣式、邏輯分離。過(guò)去人 們喜歡用table布局，究其原因有二：第一，兼容性不錯(cuò)，不會(huì)出現(xiàn)特別顯眼的問(wèn)題；第二，大多數(shù)從業(yè)者尚未形成可訪問(wèn)性優(yōu)化的意識(shí)。但隨 后，Google率先采取了HTML語(yǔ)義化分析的方法，來(lái)判斷一個(gè)網(wǎng)頁(yè)的內(nèi)容和關(guān)鍵詞意義的相關(guān)程度，各大搜索引擎也開(kāi)始搜尋語(yǔ)義化的標(biāo)簽，開(kāi)發(fā)出類似的 排名技術(shù)。很多網(wǎng)站的流量都是從搜索引擎帶入，這使得語(yǔ)義化標(biāo)記和CSS樣式布局的方法逐漸被大家接受。

2）使用合適的標(biāo)簽

　　當(dāng)你在合適的地方使用一個(gè)語(yǔ)義恰當(dāng)?shù)臉?biāo)簽的時(shí)候，內(nèi)容的意義也會(huì)被強(qiáng)化，頁(yè)面的內(nèi)容結(jié)構(gòu)變得更加清晰。如果使用不同的HTML元素來(lái)模擬某個(gè)控 件，在瀏覽器中，會(huì)體現(xiàn)出不同的特征。就算我們可以實(shí)現(xiàn)從樣式到行為的全面模擬，得到的也只是一個(gè)不穩(wěn)定、代碼臃腫、難以維護(hù)的組件。在頁(yè)面中合理運(yùn)用布 局元素（section、article、header等），將頁(yè)面劃分為各個(gè)語(yǔ)義明確的區(qū)塊，使網(wǎng)頁(yè)的內(nèi)容信息更好地傳遞給用戶。

3）class和id的命名

　　一些常用的class和id的命名對(duì)HTML起到了一定的補(bǔ)充和建議作用，例如#header、#nav和.article等。最后慢慢演變成了HTML標(biāo)準(zhǔn)元素，header、nav和article等。

4）微格式

　　微格式通過(guò)定義HTML的屬性（rel或class）來(lái)實(shí)現(xiàn)Web語(yǔ)義化的擴(kuò)展，rel用來(lái)描述通過(guò)href屬性鏈接起來(lái)的兩個(gè)網(wǎng)頁(yè)或文檔之間的關(guān)系，用class的名稱來(lái)實(shí)現(xiàn)數(shù)據(jù)格式化。RDFa是另外一種數(shù)據(jù)格式化技術(shù)，但語(yǔ)法比微格式嚴(yán)格。

5）避免冗余標(biāo)簽

　　額外的HTML結(jié)構(gòu)因?yàn)楸粚懰涝诹隧?yè)面中，會(huì)讓頁(yè)面產(chǎn)生潛在的可用性或可維護(hù)性方面的問(wèn)題。既然交互行為是由JavaScript支持的，那么這些交互行為所依賴的HTML結(jié)構(gòu)當(dāng)然也應(yīng)該由JavaScript動(dòng)態(tài)按需生成。

6）ARIA屬性

　　如果原生的HTML元素可以滿足語(yǔ)義化和默認(rèn)行為的需求，就不要試圖通過(guò)改變ARIA屬性的方法去實(shí)現(xiàn)相同的目的。如果合理的設(shè)置了ARIA屬性，那些需要輔助設(shè)備工具支持的用戶就能更快定位內(nèi)容，視覺(jué)障礙的體驗(yàn)就會(huì)因此獲得極大提升。

三、視覺(jué)設(shè)計(jì)

　　目前存在著分辨率不同、設(shè)備對(duì)CSS的支持程度不一、像素密度各異等客觀條件，導(dǎo)致了一堆和視覺(jué)設(shè)計(jì)有關(guān)的問(wèn)題。為了解決問(wèn)題，就需要好的設(shè)計(jì)。好的設(shè)計(jì)有三個(gè)原則：化繁為簡(jiǎn)（共同性）、化零為整（一致性）、化靜為動(dòng)（靈活性）。

1）設(shè)計(jì)一個(gè)系統(tǒng)，而非一堆頁(yè)面

　　花一點(diǎn)時(shí)間去對(duì)內(nèi)容進(jìn)行分析，從中挑出10到12個(gè)頁(yè)面進(jìn)行設(shè)計(jì)（加上一堆小組件）。我們?cè)O(shè)計(jì)的是整個(gè)系統(tǒng)而不是單獨(dú)的頁(yè)面。你會(huì)發(fā)現(xiàn)頁(yè)面和頁(yè) 面之間、組件和組件之間是有內(nèi)在聯(lián)系的。對(duì)于用戶來(lái)說(shuō)，各頁(yè)面之間設(shè)計(jì)的一致性降低了認(rèn)知成本，對(duì)于開(kāi)發(fā)者來(lái)說(shuō)，組件復(fù)用性的提升降低了今后系統(tǒng)的維護(hù)難 度。設(shè)計(jì)系統(tǒng)具體分為3個(gè)步驟：

1.設(shè)計(jì)清算（羅列界面清單），可以宏觀的掌握整個(gè)網(wǎng)站的設(shè)計(jì)風(fēng)格。從每個(gè)模塊的角度進(jìn)行考慮，更加系統(tǒng)的進(jìn)行設(shè)計(jì)。

2.設(shè)計(jì)風(fēng)格組件，將網(wǎng)站上可能出現(xiàn)的界面元素，如標(biāo)題、正文、圖標(biāo)、按鈕等最基礎(chǔ)的設(shè)計(jì)風(fēng)格羅列在一份文檔中，形成網(wǎng)站最基本的視覺(jué)規(guī)范。一來(lái)方便網(wǎng)站設(shè)計(jì)的控制，二來(lái)當(dāng)調(diào)整網(wǎng)站主題風(fēng)格，會(huì)大大節(jié)省工作量。

3.建立視覺(jué)規(guī)范與組件庫(kù)，視覺(jué)規(guī)范就像一份巨細(xì)無(wú)遺的風(fēng)格組件庫(kù)，包含具體設(shè)計(jì)標(biāo)注，如文字的字號(hào)、模塊的間距、圖像和廣告位的尺寸，在具體設(shè)計(jì) 中提供準(zhǔn)繩。組件庫(kù)分類羅列了網(wǎng)站中常用模塊的HTML結(jié)構(gòu)，前端工程師摘取需要的模塊代碼來(lái)組成所需的頁(yè)面。建立組件庫(kù)好比收集一堆積木，積木越多，越 能找到合適的組件，從而大大提升了網(wǎng)站的設(shè)計(jì)和開(kāi)發(fā)速度。

2）文案內(nèi)容

　　設(shè)計(jì)師只有獲悉了文案內(nèi)容，才能運(yùn)用設(shè)計(jì)方法來(lái)烘托內(nèi)容、強(qiáng)調(diào)內(nèi)容、襯托內(nèi)容。文案制定者和視覺(jué)設(shè)計(jì)師坐在一起集思廣益，分工設(shè)計(jì)文案。視覺(jué)設(shè)計(jì)師考慮文案的極端情況，盡早考慮極端情況，會(huì)讓你的設(shè)計(jì)稿更健壯；文案制定者考慮文案是否可以被現(xiàn)有設(shè)計(jì)規(guī)范所滿足。

3）響應(yīng)式Web設(shè)計(jì)

　　目前市面上有許多媒體類型，其中包括電腦屏幕、打印介質(zhì)、電視、手持設(shè)備，以及輔助設(shè)備，如屏幕閱讀器、盲文打印機(jī)、觸摸反饋等設(shè)備。為了能在 不同媒體中渲染合適的樣式，呈現(xiàn)正確的界面，有人提出了響應(yīng)式Web設(shè)計(jì)。響應(yīng)式Web設(shè)計(jì)的基本方法包括流體柵格、靈活適應(yīng)的媒體、媒體查詢和瀏覽器分 級(jí)。

1.流體柵格：基于百分比單位規(guī)定列寬的柵格系統(tǒng)。

2.靈活適應(yīng)的媒體：圖片、視頻等媒體在Web頁(yè)面中的占位寬度不允許超過(guò)其容器的寬度。

3.媒體查詢：通過(guò)設(shè)置媒體查詢的條件（寬度斷點(diǎn)），在不同分辨率和屏幕尺寸下，布局應(yīng)該呈現(xiàn)什么樣的結(jié)構(gòu)，以及行高、字號(hào)等樣式信息。

4.瀏覽器分級(jí)：區(qū)分哪些是技術(shù)支持度較差的老瀏覽器，哪些是支持度一般的瀏覽器，哪些是支持度高的瀏覽器。

4）防守性設(shè)計(jì)

　　在老的瀏覽器中，那些不認(rèn)識(shí)的新CSS屬性或值會(huì)被自動(dòng)忽略掉，而新的瀏覽器會(huì)根據(jù)先后順序覆蓋掉舊的屬性，如下代碼所示。

property:basic value;property:advanced value;　　手動(dòng)編寫降級(jí)或兼容代碼會(huì)比較繁瑣，可以使用Sass、Less等預(yù)處理器，這些工具提供了CSS語(yǔ)法兼容的自動(dòng)化方法，可以自動(dòng)生成對(duì)老瀏覽器降級(jí)代碼和針對(duì)不同瀏覽器的廠商前綴。

四、交互設(shè)計(jì)

　　Web的歷史，是一部JavaScript的折騰史，甚至可以說(shuō)是災(zāi)難史。利用JavaScript去實(shí)現(xiàn)漸進(jìn)增強(qiáng)，其要求比使用CSS或 HTML更嚴(yán)格。熟悉所有可能導(dǎo)致JavaScript失效或影響基于JavaScript建立的體驗(yàn)的所有要素。在多大程度上減輕這方面的損害，取決于 你對(duì)那些影響體驗(yàn)的要素的熟悉程度。

1）無(wú)JavaScript

　　不要把所有的用戶體驗(yàn)都寄托在JavaScript上，會(huì)有很多情況導(dǎo)致瀏覽器不能使用JavaScript，當(dāng)出現(xiàn)這種情況的時(shí)候，至少要讓網(wǎng)頁(yè)可訪問(wèn)，把風(fēng)險(xiǎn)降到最低。

2）特性檢測(cè)

　　JavaScript是零容錯(cuò)，要想代碼足夠健壯，特性檢測(cè)是必需的。特性檢測(cè)就是把代碼封裝在一些代碼塊中，針對(duì)不同兼容要求的瀏覽器運(yùn)行不同的代碼，避免報(bào)錯(cuò)風(fēng)險(xiǎn)。舉例來(lái)說(shuō)通過(guò)屬性設(shè)置去觀察是否達(dá)到了該特性的預(yù)期。

if(window.addEventListener) { //支持addEventListener的邏輯}else if(window.attachEvent){ //支持attachEvent的邏輯}3）建立最低限度的代碼支持

　　首先，寫一部分通用的，最低限度也要支持的JavaScript（如cookie），然后通過(guò)附加特性檢測(cè)的方法去引入那些增強(qiáng)體驗(yàn)的高級(jí)JavaScript代碼（如localStorag）。

4）區(qū)分對(duì)待

　　微軟提供了一種叫做“條件注釋”的私有技術(shù)。所有的IE可識(shí)別

<!--[if IE]><!--><link href="../../assets/css/style.css" rel="stylesheet" /><!--<![endif]-->5）創(chuàng)建頁(yè)面所需的結(jié)構(gòu)

　　用JavaScript去生成有著強(qiáng)依賴關(guān)系的HTML結(jié)構(gòu)，這樣做既可以讓頁(yè)面輕量，也會(huì)降低頁(yè)面維護(hù)的難度，因?yàn)镠TML和JavaScript代碼都在同一個(gè)地方進(jìn)行管理了。換句話說(shuō)，將通用或復(fù)雜的功能，封裝成組件或插件。

6）自定義屬性

　　data屬性是一種自定義屬性，明晰的data屬性可以通過(guò)降低開(kāi)發(fā)維護(hù)成本的方式使頁(yè)面的漸進(jìn)增強(qiáng)設(shè)計(jì)變得更加容易。在表單驗(yàn)證插件中，將驗(yàn)證規(guī)則和提示直接定義在data屬性內(nèi)，讓內(nèi)容和邏輯解耦，減少JavaScript代碼的文件尺寸，讓界面開(kāi)發(fā)更輕松。

7）鼠標(biāo)事件之外

　　設(shè)計(jì)者們常常會(huì)忽略那些不使用鼠標(biāo)，而是用其它輸入終端用戶的需求，漸進(jìn)增強(qiáng)的設(shè)計(jì)思想要求在任何可提升體驗(yàn)的地方要留心。

1.發(fā)揮鍵盤的作用，鍵盤依然是一個(gè)很有用的輸入媒介，作為一個(gè)標(biāo)準(zhǔn)程度較高的輸入工具，對(duì)于視覺(jué)障礙用戶和一些計(jì)算機(jī)較為熟練的用戶來(lái)說(shuō)，重要性是不可取代的。

2.提升觸屏體驗(yàn)，鼠標(biāo)的移動(dòng)是連續(xù)的，而觸屏上面的手指移動(dòng)是跳躍的，不要把基于鼠標(biāo)的設(shè)計(jì)思維遷移到觸摸屏幕上。

8）不要依賴網(wǎng)絡(luò)狀況

　　人們的上網(wǎng)環(huán)境在一天之內(nèi)可能會(huì)在蜂窩網(wǎng)絡(luò)、WIFI連接、4G、3G之間隨時(shí)切換，有時(shí)還會(huì)進(jìn)入完全沒(méi)有信號(hào)的地方，當(dāng)沒(méi)有網(wǎng)絡(luò)的時(shí)候，可以做些緩存或離線處理。

1.將數(shù)據(jù)存儲(chǔ)在客戶端，將表單數(shù)據(jù)捕獲為一個(gè)JSON對(duì)象，并緩存起來(lái)，然后提醒用戶，當(dāng)網(wǎng)絡(luò)恢復(fù)，將數(shù)據(jù)提交給服務(wù)器。

2.豐富離線體驗(yàn)，如果你的網(wǎng)站功能性大于內(nèi)容性，離線技術(shù)會(huì)讓網(wǎng)站變得易于安裝。

五、界面體驗(yàn)圖

1）界面體驗(yàn)圖

　　漸進(jìn)增強(qiáng)設(shè)計(jì)的最大挑戰(zhàn)不是代碼編寫，而是制定一個(gè)計(jì)劃。通過(guò)界面體驗(yàn)圖（也稱Ix圖）來(lái)解決這一問(wèn)題，這張圖將展示網(wǎng)頁(yè)遇到各種界面選擇困難時(shí)的每一種適應(yīng)性的解決路徑，保證團(tuán)隊(duì)中的每一個(gè)成員都能對(duì)目標(biāo)和結(jié)果有深刻的理解，從而為一個(gè)共同的工作目標(biāo)而努力。







這個(gè)工具最擅長(zhǎng)的，是展示網(wǎng)頁(yè)遇到各種界面選擇困難時(shí)候的每一種適應(yīng)性的解決路徑。這個(gè)圖只是一些節(jié)點(diǎn)和箭頭而已，利用它可以嘗試不同的方案。這份文檔簡(jiǎn)潔清晰，對(duì)于團(tuán)隊(duì)中的每個(gè)人都別具價(jià)值。

1.內(nèi)容編輯：看到不同設(shè)備和狀態(tài)下的網(wǎng)站顯示情況，根據(jù)實(shí)際情況決定在該界面下暴露出的內(nèi)容。

2.設(shè)計(jì)師：觀察到每種可能的體驗(yàn)效果，從而根據(jù)實(shí)際情況產(chǎn)出不同的線框圖和視覺(jué)效果。

3.工程師：在何種條件下提供哪些具體的功能，并且清楚定制各個(gè)設(shè)備的性能檢測(cè)。

4.測(cè)試：在具體設(shè)備和頁(yè)面上有針對(duì)性地去測(cè)試對(duì)應(yīng)的功能。

2）漸進(jìn)思想的受益人

　　使用漸進(jìn)增強(qiáng)思想去設(shè)計(jì)一個(gè)網(wǎng)站，每一個(gè)人都會(huì)從中受益。

用戶：產(chǎn)品能夠在一切情況下給用戶帶來(lái)最佳的訪問(wèn)體驗(yàn)。

自己：不必執(zhí)著于為每一個(gè)用戶提供完全相同的體驗(yàn)。

客戶和老板：產(chǎn)品的可訪問(wèn)帶動(dòng)的用戶量，維護(hù)的視覺(jué)和金錢成本也都降低了。