《漸進增強——跨平台使用者體驗設計》一第1章 為體驗而設計1.1 優秀的代碼，麻煩的裝置

本節書摘來自異步社群《漸進增強——跨平台使用者體驗設計》一書中的第1章，第1.1節，作者 【美】aaron gustafson，更多章節内容可以通路雲栖社群“異步社群”公衆号檢視

漸進增強——跨平台使用者體驗設計

“總有些人幹過這種事，在網頁頂部或底部搞一個小黃條，寫上‘請使用xx浏覽器(如ie6)通路本網站以獲得最佳通路效果’。要我說，這種人到底是多麼想回到過去啊，回到web誕生之前嗎？那樣你就不可能在别的電腦、别的文字處理器，或者别的網絡來通路你這個不想讓别人看的網站啦！”

——tim berners lee

網際網路中，唯一不變的就是變化。四下觀望，永遠都有新的設計風格，新的語言、架構、工具、新的上網裝置在博人眼球。亂花漸欲迷人眼，城頭變幻大王旗，連“上網行為”這個概念本身都不能保證難免一天不會被重定義。

在這樣一個日新月異的行業，人們普遍感到一種技術焦慮，作為置身網際網路行業中的你，我猜也有和我相同的感受。

在我近20年的網際網路從業經驗中，我目睹了太多技術的變遷，從java applets、shockwave、flash、prototype、jquery、960gs、bootstrap，到angular、react，等等，技術的發展就像長江後浪推前浪；在技術發展的同時，裝置的螢幕也由小變大，又由大變小，裝置的更疊也猶如花開花謝；然後，我們還經曆了因裝置碎片化導緻的開發混亂，面臨過為不同裝置獨立開發，還是一套代碼相容不同裝置的概念掙紮。後之視今，亦猶今之視昔。大江東去浪淘盡，唯有web這個概念，在不斷發展變化中保留了下來。

web的概念之是以經久不衰，是因為它無關裝置和螢幕尺寸；web不是軟體，不需要使用者去安裝；web本身對其承載的内容具有良好的适應性和無限的延展性；web可以作為内容通路的視窗，內建在任何需要的地方；web可以觸及每個使用者；當今的web幾乎能夠勝任一切。

2012年初，我所在的公司接待了一個客戶，這個客戶被他們移動端app的使用者登入驗證問題傷透了腦筋，是以想請求我們的幫助。情況是這樣的，他們開發了好幾個原生app，這些app都有一個使用者登入的公用子產品，是通過web service的方式通路伺服器上的統一接口來實作的。這種技術方案雖然友善了代碼的管理，卻為他們後來的開發留下了麻煩。他們想在web service的子產品中加入一個安全驗證的步驟（類似“你就讀的第一所學校的名稱是什麼？”這種驗證問題），卻發現部署這個頁面比改這個頁面麻煩多了，大概步驟如下。

1．将安全驗證這個需求開發完成。

2．将代碼放在web service上。

3．更新每個原生app，以使新需求生效（可能需要調整每個原生app的ui）。

4．将每個app送出到應用市場。

5．指望使用者更新到新版本的app。

這位客戶解釋了他們為什麼會采用原生app内嵌web service的解決方案。他們的app的版本覆寫了iphone、ipad和android三個平台，希望通過web方式統一管理使用者登入行為，利用web service和原生代碼分離的特點降低代碼耦合，提高重用效率，且做到功能的迅速部署和更新。事實上，這種方式确實已經被大多數網站所采用，并且收到了很好的效果。

了解了客戶的困擾和需求後，我們開始了對這個項目的改造。盡管要考慮到跨三個平台的問題，但我們并沒有過于糾結每個平台的技術差異和繁雜的螢幕尺寸。我們的思考方式是，設想每個元件在每個螢幕下可能的展示效果。首先，頁面的布局必須設計為響應式的，無論是通過小螢幕或大螢幕裝置通路，都能保證可見子產品有良好的适應性。然後，我們使用了一些輕量的html5和javascript技術，希望在盡量不增加檔案大小的情況下為頁面加入一些新特性（例如使用html5原生表單驗證來代替用戶端javascript驗證），這樣，在css或javascript因網絡或者使用者設定的原因而無法加載的情況下，頁面依然能夠驗證和響應使用者輸入的内容。

于是，客戶得到了解決方案，高高興興地走了。我們也很開心，喝喝酒做點别的，時間過得很快。幾個月後，這個客戶又回來了。他們這次開了一個新的腦洞，想讓所有通路他們觸屏版網站的使用者，也能通過之前那套使用者驗證系統來登入。他們提供了一份觸屏版網站的訪客ua資料（即使用者通過何種裝置或浏覽器通路過這個登入頁），資料顯示，在兩天之内，ua竟然有1400種，就是說，使用者通過1400種不同的裝置和浏覽器通路了這個頁面。客戶拿着這份資料，說相容問題你們能搞定嗎？我們秉着客戶至上的精神，認真分析他們提供的資料[1]并進行了整理。我們在資料分析結果中發現，這1400條登入記錄中，有25種裝置的使用頻率極高，差不多覆寫了97%的使用者。其他3%的使用者形成了資料長尾，他們使用的裝置林林總總，某些裝置實在超出我們的想象之外。得到這個資料後，我們感到一陣暗爽，因為在幾個月前的開發中，我們已經把97%的問題解決啦！是以我們隻需要解決其他長尾裝置可能出現的問題，方式是——遇見一個解決一個。

客戶給我們的預算中，包括相容1400種不同的裝置或浏覽器的開發成本，包括相容一些很古老的web裝置（例如blackberry4和openwave這種），對這些古老裝置的相容，花去了預算的1/3。

當所有需求都厘清并完成的時候，我們盤點了我們的項目實際工時和完成時間，大約隻花掉了目标預算的1/2。我們自己很開心，因為我們提前傳遞了項目，顯得我們的團隊很高效。同時我們的客戶也很開心，因為他為公司節省了很多開發經費，他的老闆勢必會說，你真能幹啊（這些是我們這群不通人情世故的程式員的想象，實際情況我們就不知道了）。

一切歸功于幾個月前，我們對項目的改造，幾乎使我們不用做什麼，就解決了97%的問題。這一個項目的快速推進，靠的不是我們解決bug的能力和執行速度，而是印證了項目遵循一個好的設計開發思想是多麼重要，這種設計和開發思想，就叫做——漸進增強。

漸進增強是一種擁抱未來的設計思想。這種設計思想無關你面對的是何種裝置或浏覽器，也無關你的代碼是html或css的哪個版本。使用漸進增強的設計思想便意味着，你為使用者提供了一種無論使用什麼裝置和浏覽器都能正确通路你的頁面内容的方法。

聽起來很棒啊！你可能會想，這麼強大的思想，落實到代碼上需要的工作量也很大吧？哈哈，你想錯了，一旦你了解了漸進增強思想的實作原理，你會發現其實落實起來相當簡單。

在2003年美國西南互動設計大會上，web标準化組織的steve champion首次提出了“漸進增強”的概念，用來描述一種web設計的思考角度——即圍繞頁面中的内容，從内容出發進行設計。一旦你明白了漸進增強這個概念的内涵，你就會不由自主地順從某種邏輯來思考。謝天謝地，在web誕生差不多10年之後，我們終于有了一套web設計的指導思想[2]。