注：本文原載于 Medium ，經(jīng)作者 Meng To 同意翻譯并刊載于雷鋒網(wǎng)。Meng To 是一名亞裔設(shè)計師兼程序員，現(xiàn)居舊金山。

當材質(zhì)設(shè)計橫空出世時，筆者被谷歌在設(shè)計領(lǐng)域花費的心力感動了，這以往是蘋果一騎絕塵的領(lǐng)域。現(xiàn)在，一切改變了。我以往一直在抱怨 Android Design 的種種不足，例如朝令夕改，缺乏足夠的則例，難看的黑色主題，對側(cè)欄菜單的濫用。材質(zhì)設(shè)計解決了大多數(shù)的問題。谷歌終于提供了一種更輕，更明亮，更豐富多彩并且有詳細指導細則的設(shè)計語言。

漂亮的配色，卡片式設(shè)計帶來十足的層次感與觸感，我時常問我自己，材質(zhì)設(shè)計真的比 iOS 的扁平化設(shè)計更好，更先進嗎？我認為不是的。

與 iOS 的相似之處

讓我們回顧一下 iOS 設(shè)計的三大原則：明確性，一致性，層次感。

明確性指的是文本的易讀性。內(nèi)容與控件之間應(yīng)該有清晰的間隔及足夠的差異。當我們談?wù)撁鞔_性的時候，應(yīng)該考慮到具體平臺的差異。一個控件可能對 iOS 用戶而言是易于辨認的，但對安卓用戶并非如此，反之亦然。 

層次感是所有平臺共同的設(shè)計原則，但達成的手段不一。iOS 系統(tǒng)通過毛玻璃特效及色彩的漸變突出層次感，而安卓則采用陰影及紙張的質(zhì)感體現(xiàn)層次差異。

擬物化設(shè)計 2.0

一般來說，所有的設(shè)計都是從生活中取材。設(shè)計中的陰影，毛玻璃，過渡動畫都遵循一定的物理特性及真實性。擬物化設(shè)計讓普通用戶也能輕松上手，但過度地描繪細節(jié)及立體感會起反效果。畢竟作為用戶，我們對科技產(chǎn)品已經(jīng)不再感到陌生，我們對皮制日歷及黑膠唱片的熟悉程度甚至比不上數(shù)字版本。

對舊范式的模擬常常使人困惑，這種古老的皮制日歷早已無人問津

所謂完美的設(shè)計語言是不存在的。以此圖為例，看起來每一層都像最頂層。而對高飽和度色彩的濫用也影響了整體觀感。

這些 Android Wear 表盤看起來非常精美，與圓形表盤渾然天成。

在材質(zhì)設(shè)計中，內(nèi)容不為王

在全平臺上的一致表現(xiàn)，是材質(zhì)設(shè)計的最大特色。iOS 遵循「形式跟隨內(nèi)容」的設(shè)計原則，力求使內(nèi)容更高效地呈現(xiàn)于屏幕中，而安卓則用卡片式設(shè)計使內(nèi)容更具觸感，鮮艷的配色使界面更輕盈靈動，但損失了信息的呈現(xiàn)密度。

懸浮動作按鈕隱藏了部分交互動作。

懸浮動作按鈕使用強烈的對比色，具有導航和交互的雙重作用。

左圖為 Google Music ，右圖為 Apple Music 。很明顯 Google Music 使用了大量的高飽和色彩，而 Apple Music 僅僅在 “ Try Now”一處采用了明亮的配色。

底部導航欄 VS 漢堡包側(cè)欄

關(guān)于漢堡包側(cè)欄應(yīng)該怎么用，什么時候應(yīng)該用，在設(shè)計界眾說紛紜，尚無定論。而蘋果甚至幾乎不使用這種設(shè)計。

但有一點是確定的，在安卓系統(tǒng)中，漢堡包側(cè)欄將越來越常見，因為材質(zhì)設(shè)計鼓勵這種做法。

 iOS 更偏向于采用底部導航欄的設(shè)計。有趣的是，設(shè)計師 LukeW 指出，往往勝利的是淺顯直觀的設(shè)計。Facebook 自從在 iOS 上采用底部導航欄之后，聲稱他們的用戶活躍度有了大幅提升。

但有一種情況，采用漢堡包側(cè)欄就是件再合適不過的事，就是當你的首頁占據(jù)你內(nèi)容展示的絕大部分的時候。這時側(cè)欄可以展示十分次要的東西，像設(shè)置和退出。

 Google Inbox 采用了漢堡包側(cè)欄

對色彩的運用

對于材質(zhì)設(shè)計而言，色彩是其精髓。無疑，它們非常好看，奪目，其推薦配色與 Flat UI （一個免費的 Web組件庫）極為相似。我們都同意，在大多數(shù)情況下，柔和的 Flat UI 及     材質(zhì)設(shè)計配色都非常漂亮，而 Xcode 默認的配色則過于鮮艷，華而不實。

但材質(zhì)設(shè)計喜歡在頂欄，有時甚至是內(nèi)容的底色中采用多彩的顏色。當你采用很多種對比色時，就要考慮到整體的協(xié)調(diào)性。

每一種顏色都會給人以不同的感覺，但作用相當有限（如紅色代表警覺，而黃色也有相似含義）。色彩可的以帶來強烈的品牌特色，但這不應(yīng)該是 UI 設(shè)計關(guān)注的重點。事實上，如果真的想突出品牌特色，在應(yīng)用圖標上下功夫就行了。

重申，靈動活潑的色彩應(yīng)用在安卓上挺合理，但在 iOS 上絕非如此。

定制化VS 全平臺統(tǒng)一

首先得承認，我以前常常認為，在所有平臺上采用同一種設(shè)計語言也許是最好的選擇。不幸的事，這導致了我在安卓的 App 上采用的 iOS 的那套設(shè)計語言。在我當時看來，這很合理，但消費者并不買賬。安卓與 iOS 之間還是有相當大的差異。

材質(zhì)設(shè)計旨在將所有平臺的設(shè)計語言統(tǒng)一起來，它干的也確實非常不錯。但一個設(shè)計真的是個好主意嗎？

卡片式設(shè)計真的適合 Android Wear ，尤其是圓形表盤的嗎？這似乎與現(xiàn)代主義設(shè)計一直以來倡導的「形式跟隨內(nèi)容」相悖，像是事后才想起來的補救措施。

看看 Apple Watch ，它的設(shè)計就明顯是根據(jù)手表這一媒介重新思考過的。這意味著，UI 與交互必須與硬件上的 Froce Touch ，黑色邊框，Digital Crown ，腕部監(jiān)測等緊密結(jié)合。

材質(zhì)設(shè)計限制了設(shè)計師的想象力

在谷歌關(guān)于材質(zhì)設(shè)計的則例網(wǎng)站上，詳細地講解了材質(zhì)設(shè)計的配色，布局，控件的擺放，甚至陰影的使用。

對色彩的搭配也有詳盡的指導規(guī)范

詳盡的規(guī)范與則例帶來的好處是，使得設(shè)計師可以輕而易舉地設(shè)計出不那么糟糕的界面，它提供了一系列的工具及參考。但壞處就是，限制了優(yōu)秀設(shè)計師的發(fā)揮，且可能導致設(shè)計的同質(zhì)化。

材質(zhì)設(shè)計的閃光之處

請別誤會，材質(zhì)設(shè)計絕非一無是處，它干對了絕大多數(shù)的事情。我只是不希望設(shè)計師們在稱贊材質(zhì)設(shè)計的時候忘記了其局限性。設(shè)計是一陣又一陣的風潮，這迫使我們不斷學習新事物以跟上時代。世界處于不斷變革之中，設(shè)計也是。

首先，世界級的則例及說明，對于很多處于學習階段的交互設(shè)計師大有裨益，不僅僅用于材質(zhì)設(shè)計。

材質(zhì)設(shè)計擁有十分奪目的配色及動畫效果

將內(nèi)容的載體卡片化對于平面設(shè)計來說十分合適。它富有彈性且模塊化。在網(wǎng)頁上，它也是極為優(yōu)秀的，卡片式設(shè)計同時也是響應(yīng)式設(shè)計，這意味著網(wǎng)站可以對手機等豎直屏幕有良好的支持。但我相信，再小的屏幕便不適合卡片式的設(shè)計了。

就像我之前提到的，大量運用高飽和的色彩可不是個新事物，但扁平化風潮和材質(zhì)設(shè)計帶動其走向流行。但回到設(shè)計的基礎(chǔ)，和諧的配色及漂亮的排版才是設(shè)計的最終追求。對設(shè)計的理解越深刻，才能越得心應(yīng)手地運用大膽跳脫的色彩。

材質(zhì)設(shè)計的動畫令人賞心悅目，盡管這不是谷歌創(chuàng)造出來的新東西。可以說，iOS 7 真正將過渡動畫的概念發(fā)揚光大。我很高興地看到，他們都采用了足夠平滑的過渡動畫效果，旨在有效引導用戶，這是最好的。而不求邏輯只追求炫酷的過渡動畫，則脫離了設(shè)計的本意。

 

（此圖為 GIF）

無趣的總結(jié)：沒有最好的設(shè)計語言

永遠沒有最好的設(shè)計語言或模板。即，我們不應(yīng)該對設(shè)計語言厚此薄彼，而應(yīng)該對每一種設(shè)計語言的長處及短處有清醒的認識。設(shè)計是取舍的藝術(shù)。只有不斷嘗試，才能找到最適合的那個點。不要忘記的是，你為誰而設(shè)計。

via.Medium

雷峰網(wǎng)原創(chuàng)文章，未經(jīng)授權(quán)禁止轉(zhuǎn)載。詳情見轉(zhuǎn)載須知。