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