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

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

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

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

巴赫和他的十二平均律

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

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

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

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

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

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

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

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

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

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

觸摸至上的設(shè)計(jì)

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

在觸摸交互界面中，手指作為定點(diǎn)設(shè)備，它比鼠標(biāo)的指針大得多，這就需要更大的觸摸對(duì)象。為了確?？捎眯?，交互元素也需要更大。出于美學(xué)的考慮，相應(yīng)的需要增大內(nèi)邊距和外邊距。因?yàn)楦蟮慕换ピ匦枰蟮倪吘鄟肀３忠环N視覺上的平衡感。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

正如 Luke Wroblewski 寫的那樣：

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

需要記住的幾點(diǎn)建議：

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

即便你的設(shè)計(jì)形式上不完全遵循響應(yīng)式設(shè)計(jì)，但設(shè)計(jì)思想上要有“響應(yīng)式”的意識(shí)，因?yàn)榭捎眯院谩⑵毡樾愿叩脑O(shè)計(jì)使我們共同追求。

? 要有觸摸至上的思想

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

? 要有普遍性的思想

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

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

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

? 要謹(jǐn)慎

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

尾聲

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

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

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