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

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

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

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

巴赫和他的十二平均律

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

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

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

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

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

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

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

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

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

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

觸摸至上的設計

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

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

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

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

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

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

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

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

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

通過(guò)響應式設計實(shí)現的普遍化設計

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

響應式設計的核心目標是為不同設備提供普遍化的體驗。

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

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

The Boston Globe 是響應式設計的絕佳案例，適應性很強。

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

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

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

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

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

正如 Luke Wroblewski 寫(xiě)的那樣：

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

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

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

New Twitter 簡(jiǎn)約的設計，多設備一致性的體驗。

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

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

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

小心設計的“狼音”

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

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

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

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

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

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

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

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

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

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

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

? 響應式的思考

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

? 要有觸摸至上的思想

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

? 要有普遍性的思想

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

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

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

? 要謹慎

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

尾聲

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

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

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