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

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

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

與 iOS 的相似之處

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

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

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

擬物化設(shè)計(jì) 2.0

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

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

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

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

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

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

懸浮動(dòng)作按鈕隱藏了部分交互動(dòng)作。

懸浮動(dòng)作按鈕使用強(qiáng)烈的對(duì)比色，具有導(dǎo)航和交互的雙重作用。

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

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

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

但有一點(diǎn)是確定的，在安卓系統(tǒng)中，漢堡包側(cè)欄將越來越常見，因?yàn)椴馁|(zhì)設(shè)計(jì)鼓勵(lì)這種做法。

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

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

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

對(duì)色彩的運(yùn)用

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

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

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

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

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

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

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

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

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

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

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

對(duì)色彩的搭配也有詳盡的指導(dǎo)規(guī)范

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

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

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

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

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

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

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

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

 

（此圖為 GIF）

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

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

via.Medium

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