使響應(yīng)設(shè)計具有良好的用戶體驗所需要的東西遠(yuǎn)遠(yuǎn)不止媒體查詢這么簡單。如果你認(rèn)為響應(yīng)設(shè)計只是創(chuàng)建柔美的布局，那只能說明你不得要領(lǐng)。實(shí)際上，我們需要將固有的用戶體驗在越來越多的移動設(shè)備上進(jìn)行實(shí)現(xiàn)。如果只是簡單地在每種設(shè)備上獨(dú)立地實(shí)現(xiàn)用戶體驗，從長遠(yuǎn)來看是不可擴(kuò)展的。創(chuàng)建自適應(yīng)的用戶體驗是個明智的選擇，但實(shí)現(xiàn)起來是很具挑戰(zhàn)性的。

下面是一些在進(jìn)行響應(yīng)設(shè)計過程中應(yīng)該避開的誤區(qū)：

1.         隱藏內(nèi)容

因為采用響應(yīng)設(shè)計的諸多網(wǎng)站共享同一個代碼庫，這樣很容易實(shí)現(xiàn)內(nèi)容一致，而內(nèi)容一致是個很不錯的方案。然而，也有例外，有許多響應(yīng)網(wǎng)站都為了適應(yīng)小屏幕設(shè)備而隱藏或刪除內(nèi)容。

請遵守這一簡單的原則：不要讓稀客失望。用戶滿懷希望來訪問我們網(wǎng)站、享受我們的服務(wù)，滿足用戶的需求是我們的職責(zé)。桌面用戶所使用到的功能，移動用戶同樣也需要，而且一定要讓移動用戶可以正常地使用這些功能。所以，要盡最大努力，盡量使更多的用戶可以訪問你的網(wǎng)站、使用其功能。

另一點(diǎn)值得注意的是：帶有CSS的內(nèi)容雖然被隱藏了，但還是會被加載。這是很影響性能的。這正好引入下一個應(yīng)該避開的陷阱。

2.         內(nèi)容膨脹

不應(yīng)該在小屏幕設(shè)備上略去主要內(nèi)容，而且你一直在努力實(shí)現(xiàn)完美的用戶體驗而從來不考慮網(wǎng)頁內(nèi)容。貌似一切都很合理，不是嗎？其實(shí)不是，因為現(xiàn)在有太多的東西需要加載，這需要消耗時間。如果一個頁面用了5秒鐘還沒打開，74%的移動用戶將會離開（PDF），不幸的是：所有響應(yīng)網(wǎng)站當(dāng)中，只有3%的小屏幕版本比其相應(yīng)的大屏版本更輕量級。這就意味著用戶要忍受后臺大量下載所帶來的時間開銷。

Barack Obama的響應(yīng)網(wǎng)站上一般的頁面大小都在4MB以上。這在任何標(biāo)準(zhǔn)下都是不可接受的，更別說在EDGE、３G或是低速WiFi的聯(lián)網(wǎng)環(huán)境下。

對于一個面向普通用戶群（無論是何種種族、何種信條、何種膚色、何種宗教）的網(wǎng)站來說，這會導(dǎo)致很嚴(yán)重的訪問問題：

的確，其中一部分是RIM所需要的東西，但這些也的確是我們需要關(guān)注的。

進(jìn)行web響應(yīng)設(shè)計時最大的挑戰(zhàn)之一是：提供完整的用戶體驗時各因素能很好地協(xié)調(diào)，并且使所有的用戶都能得到很好的體驗。去掉程序中的冗余內(nèi)容，遵循性能最佳實(shí)踐，不要以為默認(rèn)連接是健壯的，想法探索先進(jìn)技術(shù)（如conditional loading）使原始頁面大小盡量減小。

3.         忽略設(shè)備上下文約定

手機(jī)不是平板電腦、不是筆記本電腦、不是臺式機(jī)、也不是電視機(jī)。

每種設(shè)備都有自己唯一的外形尺寸、接口標(biāo)準(zhǔn)、限制和使用機(jī)會。為了讓用戶體驗更加自然，我們應(yīng)該把所有這些因素都考慮在內(nèi)。我并不是建議在瀏覽器中為每種平臺都創(chuàng)建各自的本地UI，但我們的確有必要留意一下用戶使用設(shè)備的習(xí)慣，比如：他們習(xí)慣于看什么樣式的圖標(biāo)等等。瀏覽器中好的響應(yīng)設(shè)計應(yīng)該能夠避開沙箱效應(yīng)，不管用戶如何使用也不管是何種設(shè)備上下文。 按照定義，web響應(yīng)設(shè)計并不等同于移動設(shè)計，所以是否在設(shè)計中考慮上下文環(huán)境因素取決于我們自己。這就意味著，要使響應(yīng)導(dǎo)航能夠跨上下文、設(shè)計能夠很好地適用于觸摸屏、避免讓移動用戶下載一些不必要的內(nèi)容。

考慮到設(shè)備之間的差異如此之多，自然會理解折衷處理的必要性，這里只是提出一種融洽地處理上下文環(huán)境的思想。

4.         同一尺寸應(yīng)用于所有設(shè)備

各種移動設(shè)備之間的差異有很多方面，不僅僅是屏幕大小的不同。由于新型設(shè)備不斷涌現(xiàn)，也就會滋生更多全新的用例、出現(xiàn)更多的使用模式、也會出現(xiàn)更多意想不到的情況。我們不應(yīng)該僅僅因為創(chuàng)建響應(yīng)布局就妄自菲薄。例如，我們有時會忘記手機(jī)可以定位、通話等等。這些設(shè)備上的瀏覽器有望在不久的將來提供更多的訪問設(shè)備的APIs，這樣，web的功能將進(jìn)一步擴(kuò)充。

我們應(yīng)該充分發(fā)揮設(shè)備的硬件功能。處理約束為我們打下了很好的基礎(chǔ)，而后，我們可以利用漸近增強(qiáng)、特征檢測等技術(shù)使用戶體驗進(jìn)一步地提高。

5.         依賴設(shè)備的分辨率

320px. 480px. 768px. 1024px. 各種各樣的分辨率，樣式實(shí)在太多了。

實(shí)質(zhì)上，我們無法控制用戶的設(shè)備屏幕大小，也無法左右制造商生成何種設(shè)備。請相信我，他們正在嘗試生產(chǎn)所有的型號。

[[71726]]

永遠(yuǎn)不要依賴于設(shè)備分辨率

另外，由于瀏覽器上書簽欄、chrome和Ask Jeeves工具欄的使用與否，會引起頁面高度不斷變化。但是，目前在移動web領(lǐng)域根本不會通過瀏覽器來衡量用戶體驗的好壞。我們通過Facebook、Twitter及其它應(yīng)用業(yè)來訪問鏈接，所有這些應(yīng)用都內(nèi)嵌了自己的瀏覽器。當(dāng)然，鏈接層次太多仍然是個問題，而你想要的是網(wǎng)頁加載速度越快越好，但是，在現(xiàn)有像素高度的情況下，鏈接層次和速度不可兼得，所以要學(xué)會放棄。

Jeremy Keith在其文章“Fanfare for the Common Breakpoint”中鏗鏘有力地指出“關(guān)鍵問題不是在斷點(diǎn)處發(fā)生了什么，而是在斷點(diǎn)之間發(fā)生了什么。”這就是說，我們設(shè)計的東西，無論尺寸大小，都應(yīng)該是一個良好結(jié)合的整體。

讓設(shè)計本身來決定何處應(yīng)該出現(xiàn)斷點(diǎn)。我很喜歡Stephen Hay的建議：“從小屏幕開始，然后不斷放大，直到圖像看起來不像樣時，插入斷點(diǎn)。”

在響應(yīng)設(shè)計中，把斷點(diǎn)放置的決定權(quán)交給內(nèi)容本身。我們的目標(biāo)是，讓我們的設(shè)計不僅現(xiàn)在看起來美觀，在將來也一樣很好看。

 要不斷發(fā)展:

我們創(chuàng)建自適應(yīng)的用戶體驗，這只是冰山一角。為了創(chuàng)建自適應(yīng)的用戶體驗，我們應(yīng)該無條件地避開這些陷阱（當(dāng)然還有更多本文未提到的陷阱）。每天都有很多不同型號不同尺寸的設(shè)備問世，作為web開發(fā)人員，我們總會碰到這些設(shè)備。這的確有點(diǎn)令人生畏，但我們應(yīng)該接受挑戰(zhàn)，把握機(jī)遇，盡量擴(kuò)大我們的用戶群。

作者：Brad Frost，發(fā)表于2012年４月27日

原文鏈接：http://www.netmagazine.com/features/five-responsive-web-design-pitfalls-avoid