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

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

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

推薦閱讀：
《那些年,我們看過的各種設計理論法則》
《你知道網頁設計的黃金比例嗎？》
《這20種平面設計理論你知道嗎》

巴赫和他的十二平均律

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

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

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

巴赫十二平均律中第一首前奏的開頭部分（圖像來自：維基百科）
這種因巴赫而馳名的、可以用來解決問題的音律系統被稱之為十二平均律，今天西方音樂的“均分律”和“平均律”有一些差異，但是他們的目標是一致的：使每個按鍵略有差異（或者說是略有瑕疵。，這樣就能合理利用全鍵盤。這是音樂上的實用主義。

那這跟界面設計有什么關系？
網頁設計近些年來最令人興奮的進展是什么？是網頁設計對多設備瀏覽的支持。不再是那種支持多瀏覽器瀏覽的小把戲，而是支持不同特性設備瀏覽：不同的屏幕尺寸，不同的兼容性，不同的使用場景，不同的界面。

盡管響應式設計網站以及具有設備針對性的網站能夠重新塑造設計，使之符合不同設備上的用戶需求。但這并不是萬能的辦法，有時問題依然會凸顯，我們依然要采取最妥當的決定——這時，我們便可以借鑒平均律中的方法，將平均律作為一種隱喻，幫助我們解決設計問題。
將這種概念應用到界面設計中也非常簡單：為了將優質的用戶體驗提供給盡可能多的設備，就不得不做出犧牲，個別界面可能會“略有瑕疵”。小小的折中能夠使設計的適應面更廣，應用更多樣化。

觸摸至上的設計

這種折中的設計思維，可以體現在觸摸交互界面中，現在它以經扎根于桌面網頁設計中了。

在觸摸交互界面中，手指作為定點設備，它比鼠標的指針大得多，這就需要更大的觸摸對象。為了確保可用性，交互元素也需要更大。出于美學的考慮，相應的需要增大內邊距和外邊距。因為更大的交互元素需要更大的邊距來保持一種視覺上的平衡感。

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

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

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

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

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

通過響應式設計實現的普遍化設計
盡管關于響應式設計的討論，很多聚焦于技術層面和響應式概念的層面，但是“響應能力”這個指標不應該是我們的目標，只是我們為了滿足用戶需求的某種條件：只是我們對于不同內容的呈遞所需要具備的工具；只是我們用來壓縮圖像大小的一種技術；只是我們用來合理布局，更好的呈遞信息，以適應小屏幕顯示的一種手段。

響應式設計的核心目標是為不同設備提供普遍化的體驗。
掌握響應式設計的過程，便是一種普遍化設計的訓練，掌握了響應式，我們便對設計的“平均律”有了更深層次的了解。Boston?Globe的網站便是此理論的絕佳案例。

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

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

移動優先的設計

前面的案例大多和平面設計有關，但是平均律的思想可以為設計師所用，用來進行產品設計，用戶體驗設計，信息構架——幾乎涵蓋了設計的各個領域。讓我們一起來看看在產品設計中的體現，以及移動至上的設計理念。

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

當一個設計團隊進行移動優先的設計時，設計成果將非常符合用戶的任務需求和預期。這種設計不會誤入歧途，而是直奔主題；這種設計不會像桌面上的界面設計一樣，不會有毫無意義的裝飾元素。無論是從用戶體驗的角度，還是商業的角度，這都是一件好事。

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

New?Twitter?簡約的設計，多設備一致性的體驗。
Twitter重設計的目標之一便是打造計算機、手機多平臺的一致性體驗。這對于界面設計來說，可謂是一種挑戰。那么有沒有捷徑呢？有，移動優先的設計策略便能幫助我們迅速達成目標。

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

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

小心設計的“狼音”

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

在界面設計中，當我們把某些交互元素或者視覺元素移植到其他平臺時，某些問題似乎不可避免。例如，桌面版的網頁設計必然包含鏈接，光標操作并不是很費力，那么移植到手機上后，你會發現鏈接很小，很不便于觸控。或者桌面版的字體大小屬性原封不動的移植到了移動端，用戶讀起來很吃力。再或者，懸停效果對于觸摸設備。這些都是界面設計中的狼音。

這篇文章的鏈接只適合鼠標操作。當用戶使用移動觸摸設備進行瀏覽時，此頁面的可用性降低了。

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

結論以及實用建議

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

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

除此之外，我們要注意的一點是，雖然響應式設計能夠實現多平臺體驗的一致性。用戶不一定會有一致性的預期，也就是說，有可能，用戶不會把一款應用桌面版上的經驗當成移動版的預期。有時各個平臺之間的聯系性可能會非常模糊。至于要怎樣設計，是繼續使用響應式設計？還是根據設備的特點打造截然不同的體驗？這就仁者見仁，智者見智了。

需要記住的幾點建議：

??響應式的思考

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

??要有觸摸至上的思想

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

??要有普遍性的思想

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

??要有移動優先的思想

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

??要謹慎

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

尾聲

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

巴赫的平均律讓作曲家和音樂家的手指能夠隨心所欲的在鋼琴上跳動。
我們每一位設計師都想要在網頁以及應用上構建偉大的用戶體驗，讓設計超越媒介，在不同的設備上、不同的場景下表現出同樣的驚艷。我們每一位設計時都想讓我們的設計具備更好的可用性以及可達性。這是我們對用戶的責任所在。
你，會怎樣設計呢？

作者：Rob?Flaherty
優設網翻譯：@MartinRGB

================關于優設網================
"優設網uisdc.com"是一個分享網頁設計、無線端設計以及PS教程的干貨網站。
【特色推薦】
PS禮儀手冊：網頁設計師必須修煉的內功技法，更是不可或缺的WEB設計指南http://hao.uisdc.com/ps/。
設計微博：擁有粉絲量58萬的人氣微博@優秀網頁設計 ，歡迎關注獲取網頁設計資源、下載頂尖設計素材。
設計導航：全球頂尖設計網站推薦，設計師必備導航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設計教程、經驗分享和各種意想不到的"福利"嗎？
添加 優秀網頁設計 微信號：【youshege】優設哥的全拼
您也可以通過掃描下方二維碼快速添加：