讓網(wǎng)頁在各式終端奏響美妙樂章發(fā)布者：本站     時間：2021-12-20 11:12:10

科技在進(jìn)步，網(wǎng)頁設(shè)計的技巧也在進(jìn)步。新的科技帶來了新的挑戰(zhàn)，因此，我們需要新的解決方案。有時，我們面對嶄新的未知領(lǐng)域，實在是毫無經(jīng)驗，只能根據(jù)直覺去打造解決方案。而有時，我們在新領(lǐng)域面對的問題有過去的影子，我們可以從歷史、別人的經(jīng)驗中找到答案。

相對其他設(shè)計那漫長而又榮耀的歷史，網(wǎng)頁設(shè)計的歷史有限，因此能給出的經(jīng)驗也相對有限，而我們又不得不借鑒這段有限的歷史去解決近乎無限的問題。雖然圖形設(shè)計和視覺傳達(dá)藝術(shù)的經(jīng)驗我們也可以學(xué)習(xí)。但是網(wǎng)絡(luò)完全不一樣，我們不應(yīng)該被束縛，因為網(wǎng)絡(luò)的本質(zhì)是自由。如果我們能夠分析出問題的因和果，分析出問題的組成，那么問題就好解決多了，世界上任何事物都有一定的規(guī)律，有章可循，我們可以向一切學(xué)習(xí)，獲取靈感，從而解決問題。即使是音樂和心理學(xué)這種不相關(guān)的領(lǐng)域，我們也可以從其中找到解決問題的答案。即使是約翰·塞巴斯蒂安·巴赫的樂章，其中也暗藏著迎接挑戰(zhàn)的方案。

本文我們將進(jìn)行一次歷史的穿越，讓那個時代偉大的藝術(shù)家巴赫來解決網(wǎng)頁設(shè)計中的問題——網(wǎng)頁設(shè)計，該如何適兼容性不盡相同、特性各異的不同設(shè)備。

巴赫和他的十二平均律

1722年，巴赫收集整理了自己的鍵盤曲集，打算用此來為年輕的音樂家教學(xué)。這本曲集包含了48首曲子——從C到B有十二個音，十二種調(diào)性，每種調(diào)性包含了大調(diào)與小調(diào)。調(diào)式總和為24，而每一個調(diào)都寫了前奏曲和賦格曲，共計48首?，F(xiàn)在成為了西方音樂的主要規(guī)范，這是西方音樂史上總重要的作品之一。巴赫將此命名為平均律

你要知道巴赫時代的鋼琴是古鋼琴，和現(xiàn)代鋼琴不同，那時候的鍵盤現(xiàn)在看起來也很非常規(guī)。古鋼琴的發(fā)音原理是：通過羽毛管的撥子撥動金屬弦發(fā)音，且擊弦后立即脫離琴弦的裝置，所以無法連續(xù)彈奏，一次只能彈一個鍵。在那樣落后的時代，想要將十二個大調(diào)彈奏的合調(diào)，是很艱難的。因為在巴赫的時代，所使用的調(diào)律法節(jié)本上是純律，這很不利于轉(zhuǎn)調(diào)。

想要改變物理規(guī)律很難，但是人類的觀察角度卻很容易轉(zhuǎn)變。問題：無法和諧的彈奏。原因：1.鋼琴物理因素。2.彈奏無法合調(diào)。既然物理上改造鋼琴很難，所以巴赫換了一種角度來思考，他將問題重新定義，主要致力于“合調(diào)”問題的解決。巴赫將8度音程平均分為十二個半音。這樣，問題就得以解決。這種折中的、系統(tǒng)性的解決方案被稱之為音律。

讓網(wǎng)頁在各式終端奏響美妙樂章,PS教程,

巴赫十二平均律中第一首前奏的開頭部分(圖像來自：維基百科)

這種因巴赫而馳名的、可以用來解決問題的音律系統(tǒng)被稱之為十二平均律，今天西方音樂的“均分律”和“平均律”有一些差異，但是他們的目標(biāo)是一致的：使每個按鍵略有差異(或者說是略有瑕疵。，這樣就能合理利用全鍵盤。這是音樂上的實用主義。

那這跟界面設(shè)計有什么關(guān)系?

網(wǎng)頁設(shè)計近些年來最令人興奮的進(jìn)展是什么?是網(wǎng)頁設(shè)計對多設(shè)備瀏覽的支持。不再是那種支持多瀏覽器瀏覽的小把戲，而是支持不同特性設(shè)備瀏覽：不同的屏幕尺寸，不同的兼容性，不同的使用場景，不同的界面。

盡管響應(yīng)式設(shè)計網(wǎng)站以及具有設(shè)備針對性的網(wǎng)站能夠重新塑造設(shè)計，使之符合不同設(shè)備上的用戶需求。但這并不是萬能的辦法，有時問題依然會凸顯，我們依然要采取最妥當(dāng)?shù)臎Q定——這時，我們便可以借鑒平均律中的方法，將平均律作為一種隱喻，幫助我們解決設(shè)計問題。

將這種概念應(yīng)用到界面設(shè)計中也非常簡單：為了將優(yōu)質(zhì)的用戶體驗提供給盡可能多的設(shè)備，就不得不做出犧牲，個別界面可能會“略有瑕疵”。小小的折中能夠使設(shè)計的適應(yīng)面更廣，應(yīng)用更多樣化。

觸摸至上的設(shè)計

這種折中的設(shè)計思維，可以體現(xiàn)在觸摸交互界面中，現(xiàn)在它以經(jīng)扎根于桌面網(wǎng)頁設(shè)計中了。

在觸摸交互界面中，手指作為定點設(shè)備，它比鼠標(biāo)的指針大得多，這就需要更大的觸摸對象。為了確?？捎眯?，交互元素也需要更大。出于美學(xué)的考慮，相應(yīng)的需要增大內(nèi)邊距和外邊距。因為更大的交互元素需要更大的邊距來保持一種視覺上的平衡感。

讓網(wǎng)頁在各式終端奏響美妙樂章,PS教程,

Gmail 在新設(shè)計中采用了很多留白區(qū)域，增大了按鈕的內(nèi)邊距，非常適合手指操作，盡管這是桌面版的設(shè)計。

按照以前的思維，觸摸交互界面和桌面界面涇渭分明，但iPad的出現(xiàn)以及流行使兩者之間的界線變得模糊，iPad為兩者“牽線搭橋”。iPad的觸摸設(shè)計影響了桌面界面設(shè)計?？梢粤粢庖幌伦罱烂娼缑嬖O(shè)計的主要作品，諸如Gmail，Twitter，以及一些CSS圖庫，你可以看到網(wǎng)頁上的設(shè)計開始跟以前略有不同了。似乎元素看起來更…豐滿了。更多的留白區(qū)域，更大內(nèi)邊距的按鈕，總體來說，就是元素更大了。當(dāng)然，日益增長的桌面屏幕尺寸也是這一現(xiàn)象的原因之一。

這種設(shè)計，對于鼠標(biāo)操作來說，可能元素排布不是很緊密，但是卻給拇指提供了充足的操作空間，防止了觸摸的誤操作。允許些許的不完美，以提供更普遍化的用戶體驗。等等，聽起來這論調(diào)怎么那么熟悉?沒錯，這就是界面設(shè)計中的平均律!

我們要注意到，如果界面設(shè)計能夠適合手指的觸摸操作，那么該設(shè)計一般會更適合桌面上的鼠標(biāo)操作。易于觸摸的按鈕通常會更易于點擊。平衡來自混亂，完美來自些許的瑕疵，通過這種設(shè)計方式，在滿足觸摸交互體驗的同時，也提升了桌面場景的體驗。

讓網(wǎng)頁在各式終端奏響美妙樂章,PS教程,

微軟的Metro化設(shè)計語言以觸摸為主，達(dá)到了很好的交互性。

通過響應(yīng)式設(shè)計實現(xiàn)的普遍化設(shè)計

盡管關(guān)于響應(yīng)式設(shè)計的討論，很多聚焦于技術(shù)層面和響應(yīng)式概念的層面，但是“響應(yīng)能力”這個指標(biāo)不應(yīng)該是我們的目標(biāo)，只是我們?yōu)榱藵M足用戶需求的某種條件：只是我們對于不同內(nèi)容的呈遞所需要具備的工具;只是我們用來壓縮圖像大小的一種技術(shù);只是我們用來合理布局，更好的呈遞信息，以適應(yīng)小屏幕顯示的一種手段。

響應(yīng)式設(shè)計的核心目標(biāo)是為不同設(shè)備提供普遍化的體驗。

掌握響應(yīng)式設(shè)計的過程，便是一種普遍化設(shè)計的訓(xùn)練，掌握了響應(yīng)式，我們便對設(shè)計的“平均律”有了更深層次的了解。Boston Globe的網(wǎng)站便是此理論的絕佳案例。

讓網(wǎng)頁在各式終端奏響美妙樂章,PS教程,

The Boston Globe 是響應(yīng)式設(shè)計的絕佳案例，適應(yīng)性很強(qiáng)。

響應(yīng)式設(shè)計策略簡化了設(shè)計，一種設(shè)計便能滿足多用設(shè)備的閱讀需求，The Boston Globe的網(wǎng)站就很棒，用戶在任何設(shè)備上都可以獲取舒心的閱讀體驗(即便是蘋果的牛頓古董計算機(jī)也能)。這不僅僅是一種前段技術(shù)。響應(yīng)式設(shè)計通過對media queries和JavaScript的巧妙運用，讓設(shè)計具備更靈活的彈性，提高了設(shè)計的適應(yīng)能力。

這是一種可調(diào)節(jié)、均衡的設(shè)計。盡管極簡主義設(shè)計極度有型，但我曾經(jīng)以為它只能在桌面上實現(xiàn)，而曾經(jīng)的移動端界面設(shè)計，大多過于注重裝飾，顯得華而不實。將桌面上的設(shè)計風(fēng)格移植到多個平臺，以追求一致性的體驗，這本來是一項艱巨的工程，但是響應(yīng)式設(shè)計橫空出現(xiàn)。設(shè)計師做了一點點權(quán)衡，在設(shè)計上進(jìn)行了調(diào)整，一種設(shè)計便能適應(yīng)多種應(yīng)用場景——你看，設(shè)計師也會彈奏十二平均律。

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

前面的案例大多和平面設(shè)計有關(guān)，但是平均律的思想可以為設(shè)計師所用，用來進(jìn)行產(chǎn)品設(shè)計，用戶體驗設(shè)計，信息構(gòu)架——幾乎涵蓋了設(shè)計的各個領(lǐng)域。讓我們一起來看看在產(chǎn)品設(shè)計中的體現(xiàn)，以及移動至上的設(shè)計理念。

如果你信奉“移動優(yōu)先”，并以此為自己的設(shè)計理念，那么恭喜你，你的理念和平均律的思想不謀而合。只要你的設(shè)計流程圍繞移動端展開，并且設(shè)計能夠符合移動應(yīng)用場景的苛刻條件，那么你的設(shè)計將具有一種簡樸、實用的美感，因為非常凝練，只包含產(chǎn)品最基本的元素。

正如 Luke Wroblewski 寫的那樣：

當(dāng)一個設(shè)計團(tuán)隊進(jìn)行移動優(yōu)先的設(shè)計時，設(shè)計成果將非常符合用戶的任務(wù)需求和預(yù)期。這種設(shè)計不會誤入歧途，而是直奔主題;這種設(shè)計不會像桌面上的界面設(shè)計一樣，不會有毫無意義的裝飾元素。無論是從用戶體驗的角度，還是商業(yè)的角度，這都是一件好事。

當(dāng)這種設(shè)計從移動端擴(kuò)散到各個平臺之時，便完成了優(yōu)良體驗的多平臺、多設(shè)備覆蓋。這便是設(shè)計的十二平均律。最近Twitter的重設(shè)計便很好的闡述了這種設(shè)計策略。

讓網(wǎng)頁在各式終端奏響美妙樂章,PS教程,

New Twitter 簡約的設(shè)計，多設(shè)備一致性的體驗。

Twitter重設(shè)計的目標(biāo)之一便是打造計算機(jī)、手機(jī)多平臺的一致性體驗。這對于界面設(shè)計來說，可謂是一種挑戰(zhàn)。那么有沒有捷徑呢?有，移動優(yōu)先的設(shè)計策略便能幫助我們迅速達(dá)成目標(biāo)。

我在Twitter的重設(shè)計上發(fā)現(xiàn)了有趣的一點，那便是移動端的體驗設(shè)計涵蓋(或者說影響)到了各個平臺上。例如，除了Tweet 按鈕之外，用戶所有的操作均由四個標(biāo)簽展開：“Home”、“Connect”、“Discover”、“Me”。為何?因為這種設(shè)計非常適合手機(jī)那種小屏。標(biāo)簽欄的四個元素便能實現(xiàn)大部分操作。

桌面版的網(wǎng)頁，便是以此為基礎(chǔ)，添加了更豐富的功能，但是依然有移動版那種簡化風(fēng)格的痕跡。盡管桌面版的界面空間非常大，元素非常多，但是為了移動端的用戶體驗，設(shè)計的很收斂，設(shè)計師懂得權(quán)衡，以便確保多設(shè)備間體驗的普遍性。

小心設(shè)計的“狼音”

雖然平均律很好，但是在某些調(diào)式中會出現(xiàn)狼音，不過要肯定的是，狼音不是由于平均律引起的。何謂狼音?狼音是樂器自然共鳴引起的一種刺耳的哮聲，是樂器設(shè)計的必然結(jié)果。因此，音樂家給這種聲音起了一種很形象的名字：他們管它叫做“狼音”。

在界面設(shè)計中，當(dāng)我們把某些交互元素或者視覺元素移植到其他平臺時，某些問題似乎不可避免。例如，桌面版的網(wǎng)頁設(shè)計必然包含鏈接，光標(biāo)操作并不是很費力，那么移植到手機(jī)上后，你會發(fā)現(xiàn)鏈接很小，很不便于觸控?；蛘咦烂姘娴淖煮w大小屬性原封不動的移植到了移動端，用戶讀起來很吃力。再或者，懸停效果對于觸摸設(shè)備。這些都是界面設(shè)計中的狼音。

讓網(wǎng)頁在各式終端奏響美妙樂章,PS教程,

這篇文章的鏈接只適合鼠標(biāo)操作。當(dāng)用戶使用移動觸摸設(shè)備進(jìn)行瀏覽時，此頁面的可用性降低了。

讓網(wǎng)頁在各式終端奏響美妙樂章,PS教程,

New York Magazine 的下拉式導(dǎo)航很實用，設(shè)計的很棒——但是僅僅適用于鼠標(biāo)操作。

結(jié)論以及實用建議

再重復(fù)一次，響應(yīng)式設(shè)計和移動優(yōu)先策略是明智的選擇，能夠幫助我們解決上述問題。如果我們能夠一勞便能永逸，又何必費事的一個平臺一個平臺的設(shè)計?別忘了，設(shè)備的種類會越來越多，設(shè)計也要講究方法。

盡管我們現(xiàn)在已經(jīng)有了響應(yīng)式設(shè)計這種能夠“量體裁衣”的處理方式，但依然要學(xué)會思考，尤其當(dāng)設(shè)計需要跨越不同設(shè)別、不同平臺時，我們要借鑒古人平均律的思想，在概念上思考普遍、可達(dá)的設(shè)計該要如何實現(xiàn)。

除此之外，我們要注意的一點是，雖然響應(yīng)式設(shè)計能夠?qū)崿F(xiàn)多平臺體驗的一致性。用戶不一定會有一致性的預(yù)期，也就是說，有可能，用戶不會把一款應(yīng)用桌面版上的經(jīng)驗當(dāng)成移動版的預(yù)期。有時各個平臺之間的聯(lián)系性可能會非常模糊。至于要怎樣設(shè)計，是繼續(xù)使用響應(yīng)式設(shè)計?還是根據(jù)設(shè)備的特點打造截然不同的體驗?這就仁者見仁，智者見智了。

需要記住的幾點建議：

? 響應(yīng)式的思考

即便你的設(shè)計形式上不完全遵循響應(yīng)式設(shè)計，但設(shè)計思想上要有“響應(yīng)式”的意識，因為可用性好、普遍性高的設(shè)計使我們共同追求。

? 要有觸摸至上的思想

如果一個按鈕的尺寸適合手指操作，那么這個按鈕同樣適合光標(biāo)操作。反之亦然嗎?不亦然。適合光標(biāo)操作的按鈕尺寸往往不適合手指操作。觸摸至上的設(shè)計思想能夠確保你的網(wǎng)頁或者應(yīng)用適應(yīng)不同的應(yīng)用場景。

? 要有普遍性的思想

老話說的好,”早測試，常測試。”這里的“測試”可以換成“思考”，如果有需求，那么早作打算，早點思考問題，你的設(shè)計到底該要如何在不同設(shè)備上實現(xiàn)基本一致的功能。

? 要有移動優(yōu)先的思想

移動優(yōu)先的設(shè)計策略能幫助你思考：對于用戶來說，什么是最基本的?什么又是最重要的?只要將設(shè)計的重心集中于最基本的特點，那么打造一致性體驗將會很容易。

? 要謹(jǐn)慎

不同界面的交互特點不同。懸停狀態(tài)就是個例子。你不能用鼠標(biāo)來實現(xiàn)觸摸手勢操作。小心這些限制和約束。

尾聲

巴赫一直相信，鋼琴上的每一個鍵都可以隨意的彈奏、或者用來譜曲。他通過自己美妙的音樂證明了這一點，用方法制服了規(guī)則。

巴赫的平均律讓作曲家和音樂家的手指能夠隨心所欲的在鋼琴上跳動。

我們每一位設(shè)計師都想要在網(wǎng)頁以及應(yīng)用上構(gòu)建偉大的用戶體驗，讓設(shè)計超越媒介，在不同的設(shè)備上、不同的場景下表現(xiàn)出同樣的驚艷。我們每一位設(shè)計時都想讓我們的設(shè)計具備更好的可用性以及可達(dá)性。這是我們對用戶的責(zé)任所在。