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

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

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

巴赫與“好脾氣的克萊維爾”(十二平均律鋼琴曲集)

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

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

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

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

Web設計中的好脾氣

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

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

觸控優(yōu)先

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

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

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

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

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

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

響應式設計方案

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

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

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

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

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

有興趣的同學不妨參考我們之前的相關文章，對響應式Web設計的概念及實踐方式進行深入了解：

• 什么是響應式Web設計？怎樣進行？
• 通過CSS3 Media Query實現(xiàn)響應式Web設計
• 走出移動互聯(lián)網(wǎng)的迷宮 – 網(wǎng)站移動化的方法策略
• 案例學習 – 響應式網(wǎng)站的產(chǎn)品需求和設計流程詳解

移動優(yōu)先的設計

之前的話題主要偏向于頁面的視覺設計。其實，“好脾氣”的設計思路同樣可以體現(xiàn)在產(chǎn)品設計、用戶體驗、信息架構等諸多方面。接下來讓我們來看看產(chǎn)品設計當中的移動優(yōu)先策略。

在這個概念里，我們會從移動的角度入手開始產(chǎn)品設計工作，并始終圍繞著移動平臺的軟硬件特性來打造最符合移動設備上下文環(huán)境的產(chǎn)品基本功能。正如Luke Wroblewski在《移動優(yōu)先》一書中所說：

如果一個團隊以移動優(yōu)先為策略原則開展設計工作，其產(chǎn)品最終所帶來的體驗將是具有高度的任務驅(qū)動性的。用戶可以將注意力聚焦在需要完成的關鍵任務當中，而不會被傳統(tǒng)風格的桌面版本網(wǎng)站產(chǎn)品當中過多的無關因素所干擾。這對于產(chǎn)品的用戶體驗及業(yè)務發(fā)展都是有好處的。

對這種設計策略進行擴展，使其超越移動體驗的范疇，并上升到整個產(chǎn)品的層面，我們就可以在它身上發(fā)現(xiàn)很明顯的“好脾氣”特征。Twitter最近的一次改版當中就很好的體現(xiàn)出了這方面的概念。

Twitter這輪改版的一個主要目的就是在不同類型的設備當中實現(xiàn)具有一致性的體驗模式。保持界面外觀的統(tǒng)一只是其中的一個方面，更重要的是能否在整個產(chǎn)品體驗的層面上實現(xiàn)這一目標。移動優(yōu)先的設計策略可以保證相關的工作能夠朝著正確的方向前進。

我們可以在Twitter的這次改版當中很明顯的感受到移動化的體驗模式對于整個產(chǎn)品設計方案的影響作用。例如其客戶端底部的“Home”、“Connect”、“Discover”、“Me”這四個導航標簽，從數(shù)量上來說正好適用于移動設備的小尺寸屏幕規(guī)格，這正體現(xiàn)出了產(chǎn)品的信息架構針對移動環(huán)境所進行的優(yōu)化調(diào)整。而同樣的導航結構也出現(xiàn)在了Twitter桌面版的網(wǎng)站當中。我們可以在上面的截圖當中看到，雖然桌面環(huán)境相對于移動設備來說擁有更大的界面顯示空間，但這些導航元素的尺寸及外觀效果卻幾乎與客戶端當中的完全一致，只是在整體布局方面進行了調(diào)整?？梢哉f，整個桌面版的設計方案在某種程度上就是為了能夠保持與移動版本的體驗一致性而刻意受限的。

當心狼

在巴赫平均律之前的自然律體系中，那些不在當前調(diào)式當中的音符被彈奏出來的時候，通常會產(chǎn)生一種非常刺耳的效果。當時的音樂家們喜歡將這種情況比喻成狼叫。

借鑒這個兇殘的概念，我們可以將用戶界面當中那些在某些平臺當中適用，但在其他環(huán)境中就會破壞產(chǎn)品體驗的視覺或交互元素稱之為“狼”。當你使用手機瀏覽Web頁面的時候，那些本是為了鼠標指針而設計的難以通過手指準確觸摸到的鏈接，那些微小到幾乎無法辨識形狀的文字，那些依賴鼠標懸停而觸發(fā)顯示的UI元素…這些都是移動設備上下文環(huán)境當中的Web界面之狼。

紐約時報的單篇文章頁面中，正文右側(cè)通常是一組分享鏈接，其中每個鏈接單元的高度是12像素。當我們在iPhone中瀏覽這個頁面的時候，會發(fā)現(xiàn)這樣的尺寸確實很容易造成誤操作，你幾乎難以準確地觸摸到正確的目標對象。對于這些功能性質(zhì)的鏈接單元，最好可以按照蘋果在iOS人機界面設計規(guī)范當中所要求的那樣，在寬度和高度上都至少給到44像素。

對于下圖所示的導航結構，移動設備用戶普遍表示壓力很大。這種下拉菜單形式的UI組件在傳統(tǒng)設備當中是非常常見的，但是由于它需要通過鼠標懸停的方式來觸發(fā)彈出，所以在觸屏移動設備當中，這種形式通常無法正常的工作。

總結

最后再次強調(diào)，雖然響應式設計或是針對指定設備進行設計的思路都可以在一定程度上幫助我們面向不同的環(huán)境調(diào)整頁面的外觀形式及體驗方式，但不是所有的UI元素或模塊都可以被賦予彈性。我們有必要將按鈕或其他一些全局化的界面組件以某種折中的方案進行調(diào)整，使頁面無論在整體還是細節(jié)當中都可以面向不同的設備提供最優(yōu)且相對一致的體驗模式。另外有一個很現(xiàn)實的因素是我們不可以忽視的，即使我們有足夠的資源面向不同類型的設備打造具有高度針對性的設計方案，用戶在更換設備進行使用的時候同樣會將之前的體驗轉(zhuǎn)化為潛意識當中的期望而帶到另外一個設備當中，所以體驗一致性的問題是我們必須認真考慮到的。

• 觸控優(yōu)先：在尺寸上適合手指觸摸的按鈕或鏈接同樣適合于鼠標點擊，但反之則不然。所以觸控優(yōu)先的設計思路可以確保頁面在多數(shù)平臺當中都能有不錯的體驗。
• 響應式設計方案：響應式設計方案夠幫助網(wǎng)站根據(jù)不同的設備平臺對內(nèi)容、媒體文件和布局結構進行相應的調(diào)整與優(yōu)化，不過同時，我們還需要在很多局部的UI元素或模塊當中權衡出一種最優(yōu)的全局化解決之道
• 移動優(yōu)先：從移動的角度入手開始產(chǎn)品設計工作，并始終圍繞著移動平臺的軟硬件特性來打造最符合移動設備上下文環(huán)境的產(chǎn)品基本功能，使其最終所帶來的體驗具有高度的任務驅(qū)動性的。
• 留意細節(jié)當中的交互方式：要特別留意細節(jié)當中的那些不具備跨平臺能力的交互模式。其中最常見的一個問題就是觸屏設備通常無法支持傳統(tǒng)設備當中的鼠標懸停狀態(tài)。

巴赫相信人們有權利也有能力以他們認為合適的調(diào)式來演奏音樂，他通過好脾氣的調(diào)律法以及基于平均律的偉大音樂集向世人證明了這一點。而我們則希望，無論人們使用哪一類設備，他們都能感知到的產(chǎn)品體驗；我們希望自己的網(wǎng)站產(chǎn)品在可用性及可訪問性等方面做到最優(yōu)。

文章題目：設計好脾氣的Web頁面
標題鏈接：http://jinyejixie.com/news2/160302.html

成都網(wǎng)站建設公司_創(chuàng)新互聯(lián)，為您提供外貿(mào)網(wǎng)站建設、手機網(wǎng)站建設、域名注冊、靜態(tài)網(wǎng)站、微信小程序、商城網(wǎng)站

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權請盡快告知，我們將會在第一時間刪除。文章觀點不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時需注明來源： 創(chuàng)新互聯(lián)