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

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

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

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

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

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

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

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

Web設(shè)計(jì)中的好脾氣

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

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

觸控優(yōu)先

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

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

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

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

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

此外，我們之前的又是為了觸屏移動(dòng)設(shè)備而設(shè)計(jì)一文也可以在觸控體驗(yàn)設(shè)計(jì)方面為大家?guī)?lái)一些參考。

響應(yīng)式設(shè)計(jì)方案

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

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

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

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

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

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

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

移動(dòng)優(yōu)先的設(shè)計(jì)

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

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

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

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

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

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

當(dāng)心狼

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

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

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

對(duì)于下圖所示的導(dǎo)航結(jié)構(gòu)，移動(dòng)設(shè)備用戶(hù)普遍表示壓力很大。這種下拉菜單形式的UI組件在傳統(tǒng)設(shè)備當(dāng)中是非常常見(jiàn)的，但是由于它需要通過(guò)鼠標(biāo)懸停的方式來(lái)觸發(fā)彈出，所以在觸屏移動(dòng)設(shè)備當(dāng)中，這種形式通常無(wú)法正常的工作。

總結(jié)

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

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

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

文章題目：設(shè)計(jì)好脾氣的Web頁(yè)面
標(biāo)題鏈接：http://www.rwnh.cn/news2/160302.html

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

廣告

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