設(shè)計好脾氣的Web頁面

隨著技術(shù)的進(jìn)步，Web設(shè)計的理念與技法也在不斷發(fā)展。設(shè)備種類越來越多，帶給我們的挑戰(zhàn)也越來越大。怎樣以最合理的方式使設(shè)計方案能夠最大程度地適應(yīng)各種設(shè)備的性能與規(guī)格屬性，這是我們在工作當(dāng)中必須考慮的問題。

面對這樣的挑戰(zhàn)，我們一方面會覺得自己曾經(jīng)熟悉的工作領(lǐng)域突然充滿了未知感，而另一方面，一直普遍存在的那些舊問題也依然擺在面前。我們是否需要花費全部精力用來解決各種新舊細(xì)節(jié)問題，還是可以從宏觀上尋求一些具有指導(dǎo)性質(zhì)的“真諦”？

Web設(shè)計的歷史過于短暫，要想弄明白一些大道理，我們不妨將視野放遠(yuǎn)些，讓思路跨越設(shè)計的范疇。其實，我們真的可以從那些看上去與設(shè)計沒有多大關(guān)聯(lián)的領(lǐng)域中找到一些抽象化的、更具普遍意義的思路和模式，以幫助我們解決自己的問題。心理學(xué)和音樂等都是我們可以加以研究和探索的對象。接下來，就讓我們一起了解一下巴赫與當(dāng)前Web設(shè)計所面臨的挑戰(zhàn)之間的關(guān)系。巴赫誒。

巴赫與“好脾氣的克萊維爾”(十二平均律鋼琴曲集)
1722年，巴赫創(chuàng)作了一部包括48首前奏曲與賦格(24個大小調(diào))的鋼琴曲集，主要用作培養(yǎng)年輕音樂家的教育素材。這套曲集是西方音樂史中最重要的作品之一，影響極為深遠(yuǎn)。巴赫本人將它命名為“好脾氣的克萊維爾(The Well-Tempered Clavier)”。

為什么這部曲集具有重大的歷史意義呢？要知道，在巴赫所處的那個時代，在鍵盤樂器上使用全部調(diào)式演奏曲目并不是一種很正統(tǒng)的做法。從物理學(xué)的角度講，具有固定音調(diào)的鍵盤樂器一次只能演奏幾個特定的調(diào)式。對于那個時代的調(diào)音系統(tǒng)來說，要在鋼琴上彈奏出全部12個調(diào)式，幾乎是一件不可能的事情。

物理定律是很難被突破的，但人的感知是可以被改變的，解決方案就是重新定義“合調(diào)”的概念。某些音程在被調(diào)整之后會與標(biāo)準(zhǔn)的音準(zhǔn)產(chǎn)生微小的偏差，從而產(chǎn)生了一個新的調(diào)音體系，使人們可以彈奏全部曲調(diào)。這種為了構(gòu)筑更合理的系統(tǒng)而調(diào)整其組成要素屬性特征的能力，就是一個系統(tǒng)的“脾氣”。

巴赫的平均律對自然律進(jìn)行了修正，將八度音程分為十二半音的調(diào)律法，以便于轉(zhuǎn)調(diào)。這種方式自然可以被稱為“好脾氣”，它就像是古典音樂中的實用主義。

Web設(shè)計中的好脾氣
Web設(shè)計面向的目標(biāo)設(shè)備正在由單一發(fā)展為多元，這也許是最近一兩年里最令人激動，同時又是最令人焦慮的事情了。這不再是關(guān)于樣式能否在不同瀏覽器中保持兼容的問題，我們在新局面下面對的是各種方面的因素：不同的設(shè)備、不同的屏幕尺寸、不同的使用環(huán)境、不同的系統(tǒng)平臺所具有的UI風(fēng)格等。

雖然響應(yīng)式設(shè)計(什么是響應(yīng)式Web設(shè)計？)或是針對指定設(shè)備進(jìn)行設(shè)計的思路都可以在一定程度上幫助我們面向不同的環(huán)境調(diào)整外觀形式及體驗方式，但不是所有的UI元素或模塊都可以被賦予彈性，我們?nèi)匀恍枰诤芏嗟胤绞褂?ldquo;固定”的全局化設(shè)計方案。這時，“好脾氣”的思路就可以幫上忙了。具體的實踐原則很簡單明了：為了讓設(shè)計方案在一系列不同類型的設(shè)備中都能產(chǎn)生最好的用戶體驗，我們需要對界面中一些關(guān)鍵性的UI元素做出不同程度的折中調(diào)整，使整個頁面對于環(huán)境的適應(yīng)能力更強。

觸控優(yōu)先
最近，越來越多的桌面版本網(wǎng)站當(dāng)中開始出現(xiàn)具有觸屏設(shè)備UI風(fēng)格的界面元素，這種做法很好地體現(xiàn)出了“好脾氣”的設(shè)計思路。在觸屏移動設(shè)備當(dāng)中，我們需要通過手指對界面當(dāng)中的交互對象進(jìn)行直接操作。比起傳統(tǒng)的鼠標(biāo)指針，手指觸控方式需要的目標(biāo)作用區(qū)域更大?？紤]到這一點，我們應(yīng)該適度地增大頁面當(dāng)中一些重要交互元素的尺寸；同時，為了保持視覺上的平衡，我們還需要對相關(guān)元素之間的間距及它們各自的內(nèi)邊距進(jìn)行調(diào)整。

舉個簡單的例子，Google在其新版UI當(dāng)中明顯地增大了“寫郵件”按鈕這類重要交互元素的尺寸；同時，諸如導(dǎo)航菜單、工具欄、郵件列表等界面元素，在間距留白等方面也有做相應(yīng)的調(diào)整。相比于過去，新版設(shè)計方案顯著地提升了Google的這些主線產(chǎn)品對于觸屏操作的友好性。

從某種程度上講，iPad在觸屏移動設(shè)備與傳統(tǒng)桌面設(shè)備之間架起了一座橋梁，它的普及提升了觸屏設(shè)備UI風(fēng)格在桌面設(shè)備當(dāng)中的影響力?？纯碐mail和Twitter這類主流產(chǎn)品在最近的改版，或是花時間到那些CSS網(wǎng)頁設(shè)計案例集當(dāng)中瀏覽一下最新的優(yōu)秀作品，你會發(fā)現(xiàn)當(dāng)前的Web設(shè)計風(fēng)格看上去確實和以前不大一樣了，它們看上去似乎更加的...豐滿。留白更多，按鈕更大，一切看上去都又大又平。不過我們也必須承認(rèn)，這種現(xiàn)象與桌面顯示器不斷增大的尺寸也有一定的關(guān)聯(lián)。

在這類設(shè)計方案當(dāng)中，界面元素所占據(jù)的空間對于鼠標(biāo)指針來說顯得有些許浪費了，但對于手指觸控的方式卻恰到好處。這也正是“好脾氣”的設(shè)計思路的核心思想，即為了使界面能夠適用于更多的平臺環(huán)境，而對“標(biāo)準(zhǔn)化”的設(shè)計方案進(jìn)行微調(diào)，最終達(dá)到一種折中的狀態(tài)。

而且在很多時候，這種權(quán)衡的結(jié)果對于鍵鼠交互方式來說也并不壞。容易被手指觸摸的按鈕同樣易于鼠標(biāo)的控制，整個UI在傳統(tǒng)設(shè)備上下文環(huán)境當(dāng)中的用戶體驗也許反而有所提升。

此外，我們之前的又是為了觸屏移動設(shè)備而設(shè)計一文也可以在觸控體驗設(shè)計方面為大家?guī)硪恍﹨⒖肌?/p>

響應(yīng)式設(shè)計方案
市面上有很多關(guān)于這個話題的討論，不過它們大多是圍繞著各種相關(guān)的開發(fā)技術(shù)來進(jìn)行的。其實，“響應(yīng)化”本身不是目的，我們真正需要的是一種機制，它能夠幫助網(wǎng)站根據(jù)不同的設(shè)備平臺對內(nèi)容、媒體文件和布局結(jié)構(gòu)進(jìn)行相應(yīng)的調(diào)整與優(yōu)化，從而使網(wǎng)站在各種環(huán)境下都能為用戶提供一種最優(yōu)且相對統(tǒng)一的體驗?zāi)Ｊ健?/p>

響應(yīng)式方案離不開全局化的用戶體驗設(shè)計。正像我們在前文當(dāng)中提到的，這類方案固然可以在一定程度上幫助我們面向不同的環(huán)境調(diào)整設(shè)計方案，但不是所有的UI元素或模塊都可以被賦予彈性，我們?nèi)匀恍枰诤芏嗟胤酵ㄟ^“好脾氣”的設(shè)計思路權(quán)衡出一種最優(yōu)的全局化解決之道。在這方面，波士頓環(huán)球報(Boston Globe’s)的網(wǎng)站就是一個不錯的例子。

各位可以試著使用不同類型的設(shè)備來訪問這個站點，或是直接在桌面設(shè)備中不斷調(diào)整瀏覽器窗口的尺寸，以觀察頁面的響應(yīng)化調(diào)整規(guī)則。

響應(yīng)式策略可以使同一套設(shè)計方案適應(yīng)于各種類型的顯示設(shè)備，用戶甚至可以通過老舊的蘋果Newton掌上電腦來瀏覽波士頓環(huán)球報的頁面。不過，這不只是前端開發(fā)方面的成就，實際上，這種策略所體現(xiàn)出的具有高度適應(yīng)性的設(shè)計思路才是最重要的。

我想，如果我們只需要面向桌面設(shè)備進(jìn)行設(shè)計，那么最終的方案應(yīng)該是更加純粹的，包括視覺效果及交互體驗等方面。畢竟，在這種情況下，我們擁有足夠的時間和資源來使一種設(shè)計方案盡量趨于完美。一旦要考慮到不同類型的設(shè)備環(huán)境，我們就必須做出某種程度的權(quán)衡，以便“彈奏出全部調(diào)式”。

有興趣的同學(xué)不妨參考我們之前的相關(guān)文章，對響應(yīng)式Web設(shè)計的概念及實踐方式進(jìn)行深入了解。