在2014年的Google I/O大會(huì)上，谷歌發(fā)布了Android L即Android 5.0，并推出Material Design，重新統(tǒng)一了谷歌的設(shè)計(jì)語言，確立了谷歌設(shè)計(jì)的未來發(fā)展方向。
Material Design字面之意為“材料設(shè)計(jì)”，但是IT之家更愿意將之翻譯為“本質(zhì)設(shè)計(jì)”，顧名思義，這是一種考慮事物本質(zhì)的設(shè)計(jì)，將顯示屏里的各種UI元素看成是一種不存在于現(xiàn)實(shí)世界的新的物質(zhì)，并賦予它物理特性，因此Material Design并不是去擬物化的設(shè)計(jì)，可以稱之為抽象化設(shè)計(jì)。
時(shí)至今日，Android系統(tǒng)已更迭到7.1版本，再提起Material Design似乎有些過時(shí)了，但是我們不妨重新溫習(xí)一下這種設(shè)計(jì)語言，再回看谷歌利用這種設(shè)計(jì)理念所創(chuàng)造出的后代系統(tǒng)，似乎會(huì)品嘗到不一樣的滋味。
Material Design的特點(diǎn)主要體現(xiàn)在以下幾個(gè)方面。
1、模擬紙的形態(tài)：交互更有空間感、層次感
我們都知道一本書里每一頁紙之間在空間上是相互獨(dú)立的，但顯示屏上的所有內(nèi)容都在一個(gè)平面上，雖然沒有立體空間，但信息內(nèi)容卻是有空間層級的關(guān)系。
Material Design引入了z軸的概念，z軸垂直于屏幕，用來表現(xiàn)元素的層疊關(guān)系，將之具體化就是把紙張的特性挪到顯示屏里，把信息內(nèi)容呈現(xiàn)在虛擬的紙上，“紙”與“紙”之間有上下層級關(guān)系，用陰影模擬紙張的空間感，陰影會(huì)隨著紙張的空間關(guān)系而改變大小
另外，iOS的UI模糊效果從本質(zhì)上來說與Material Design的紙張?jiān)O(shè)計(jì)是相類似的，通過模擬景深的效果來表達(dá)內(nèi)容信息的層級關(guān)系。
2、字體：字重區(qū)分細(xì)致
Material Design所采用的字體有詳細(xì)的筆畫的粗細(xì)（字重）區(qū)分，英文字體名為Roboto，中文及日韓文名為Noto。
Roboto有6種字重：Thin、Light、Regular、Medium、Bold和Black。
Noto有7種字重：Thin, Light、DemiLight、Regular、Medium、Bold和Black。
3、大面積色塊，大插圖：視覺感和諧，沖擊力強(qiáng)
過去的Android多采用灰色、黑色等深色系，讓人有冰冷科技感，同時(shí)也容易產(chǎn)生一種距離感。而Material Design采用了與過去相反的做法，在系統(tǒng)里大面積地使用鮮艷的色塊，用色塊來突出主要內(nèi)容和標(biāo)題，讓界面的主次感更佳突出，也讓原本的界面擁有了時(shí)尚和活力。
色塊的顏色選擇多使用飽和度高、明度適中的顏色，整體擁有比較強(qiáng)烈的視覺沖擊，但并不會(huì)太刺眼，Action Bar狀態(tài)欄也同樣從過去的灰黑顏色改為彩色，并且讓狀態(tài)欄與之融為一體，這點(diǎn)與iOS的設(shè)計(jì)非常相似。
Material Design常采用一張與屏幕等寬，縱向占據(jù)半個(gè)屏幕左右的大圖，狀態(tài)欄懸浮于圖片之上，后續(xù)也有一些應(yīng)用（例如淘寶）跟進(jìn)這樣的設(shè)計(jì)，但并沒有大面積流行起來。
4、圖標(biāo)，F(xiàn)AB和無邊框按鈕：簡潔直觀
Material Design圖標(biāo)多采用簡約的折紙效果，通過扁平色彩表現(xiàn)空間和光影。
小圖標(biāo)也僅通過單色點(diǎn)線或文字來表現(xiàn)。
在Material Design里，最引人注目的可能就是就是那個(gè)淘氣的圓形小按鈕——FAB（Fixed Action Button）按鈕。
這個(gè)按鈕的功能并不局限于“新建”“播放”“收藏”“更多”等功能，對于整體界面的配色形成比較大的反差，因此會(huì)讓這個(gè)按鈕在界面里顯得非常耀眼。
從這樣的設(shè)計(jì)來看，這個(gè)按鈕所背負(fù)的任務(wù)將會(huì)是整個(gè)界面的主要操作，這是與iOS相比，區(qū)別最大的一種交互設(shè)計(jì)。
在iOS的設(shè)計(jì)里，我們已經(jīng)看到了無邊框按鈕的影子，例如“返回”按鈕只有箭頭和文案，去掉了原本的按鈕質(zhì)感。尤其是Material Design的鍵盤的極端設(shè)計(jì)風(fēng)格，直接把鍵盤的按鈕邊框全部去掉，只保留了英文字母的按鈕。這樣的設(shè)計(jì)可能讓用戶對點(diǎn)擊的精準(zhǔn)度無法更快地判斷，但是在屏幕較小的手機(jī)上，去掉邊框會(huì)給字母更大的空間，方便了操作。
無邊框按鈕的設(shè)計(jì)也體現(xiàn)在提示框的按鈕上。如何讓無邊框的按鈕區(qū)別于內(nèi)容文字，這需要設(shè)計(jì)師除了考慮配色外，還需要考慮按鈕出現(xiàn)的場景，對設(shè)計(jì)師的在應(yīng)用場景的解讀上也是一個(gè)挑戰(zhàn)。
5、轉(zhuǎn)場和圖標(biāo)動(dòng)畫：動(dòng)作豐富，動(dòng)感十足
過去我們的頁面只有X與Y軸，打開一個(gè)新的頁面則是生硬地直接跳轉(zhuǎn)到新的頁面，并沒有點(diǎn)出頁面的空間層級關(guān)系。
而Material Design則強(qiáng)調(diào)Z軸，即頁面之間的空間層級關(guān)系,通過轉(zhuǎn)場動(dòng)畫告訴我們，這個(gè)頁面從哪里來，到哪里去，在整個(gè)APP或者系統(tǒng)里的空間位置是什么。
另外，不僅僅是頁面層級的動(dòng)畫過渡，對象操作也伴隨著動(dòng)畫過渡，從動(dòng)畫里能感受到操作的過程變化。過渡動(dòng)畫賦予了界面控件一種物理特性，在空間被拉伸、回彈時(shí)模仿了橡皮筋的物理特性。
在完成點(diǎn)擊操作之后，圖標(biāo)通常會(huì)轉(zhuǎn)為對應(yīng)的另外一種形態(tài)，如“返回”與“菜單，”“選擇”與“未選擇”，“收藏”與“已收藏”“點(diǎn)贊”與“取消點(diǎn)贊”的狀態(tài)之間切換。
圖標(biāo)動(dòng)畫將使得點(diǎn)擊之后的反饋更佳強(qiáng)烈，并且讓界面活起來，動(dòng)感起來。
從Android 5.0 Lollipop“棒棒糖”到Android 7.0 Nougat“牛軋?zhí)恰?，Material Design設(shè)計(jì)語言已迭代三年。由于其開源的特性，Android系統(tǒng)升級率與升級速度已被iOS遠(yuǎn)遠(yuǎn)的甩在后面，Material Design也因此遭受連累，采用了這種設(shè)計(jì)語言的應(yīng)用少之又少。
國外應(yīng)用在經(jīng)歷了多個(gè)版本的更新升級之后才完成了Material Design化，而國內(nèi)廠商永遠(yuǎn)將“交互體驗(yàn)”和“好看”排在商業(yè)利益之后，再加上各種服務(wù)都需要科學(xué)上網(wǎng)，國內(nèi)很難找到完全符合Material Design的應(yīng)用。
谷歌在Android 7.0強(qiáng)化了AOSP項(xiàng)目的系統(tǒng)升級服務(wù)后，可以繞過廠商直接對設(shè)備進(jìn)行系統(tǒng)版本升級，這一舉措可以間接推動(dòng)應(yīng)用的Material Design化。在未來，Android的系統(tǒng)UI或許真正能迎來大一統(tǒng)的那一天。
廣告聲明：文內(nèi)含有的對外跳轉(zhuǎn)鏈接（包括不限于超鏈接、二維碼、口令等形式），用于傳遞更多信息，節(jié)省甄選時(shí)間，結(jié)果僅供參考，IT之家所有文章均包含本聲明。