讓網頁在各式終端“奏響美妙樂章”！

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

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

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

　　巴赫和他的十二平均律

　　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”、&ldq