“物質”的中文翻譯是“物質”,代表物質的組成。如果放在手機系統設計中,這個詞很容易讓人聯想到手機系統的界面風格設計,比如模仿、扁平化風格。但是,這壹次,谷歌的材質設計並不是系統界面設計風格。材料設計其實就是壹種簡單的設計語言,包括系統界面風格、交互、UI等。另外,對於谷歌來說,材料設計有壹個非常偉大的使命,就是創造壹種跨所有設備的統壹設計語言,比如手機、桌面、可穿戴設備等。今天就請跟隨這個小編的腳步,來看看Google Material design這個全新的設計理念。
系統界面風格
“有特色、生動、有思想”,這幾個字是Material design的界面風格設計最貼切的詞。材質設計為Android提供了新的視覺語言。在基本元素的處理上,借鑒了傳統的印刷設計、字體布局、網格體系、空間、比例、色彩搭配、圖像運用等。在這些設計的基礎上,我們可以構建視覺層次、視覺意義和視覺焦點。精心選擇顏色、圖像、比例字體和空格,努力構建生動形象的用戶界面,讓新的系統界面如此美麗。
在色彩的選擇上,材料設計的原則是“大膽、圖形、有意義”。在材質設計上,UI配色提倡壹個主色,壹個補色。在面積較大的部分,顏色是主色的500個色調,在面積較小的部分,比如狀態欄,顏色較深。如此巧妙的配色讓應用看起來非常大膽,色彩感十足,突出內容。
材料設計非常重視界面的布局。眾所周知,好的排版會讓界面看起來非常清爽,不會有雜亂感。要做好排版工作,“基線”絕對必不可少。谷歌的官方文件《材料設計排版邊距》提到了基線的放置。從下圖中我們可以看到,Material Design將第壹條基線放置在距離16dp的位置,第二條基線與距離左邊界72dp的文本項對齊。這種對齊規則讓界面看起來很清爽,有印刷設計的閱讀節奏感。它可以讓用戶快速閱讀信息,更符合格式塔原理。
總體來說,材質設計給Android帶來了壹場改革,系統的界面風格和布局都有了很大的改變,Android系統本身的風格也逐漸顯現出來。最後,有人會說安卓原生系統醜。
愉快的交互設計
材料設計的交互設計采用響應式交互,可以將壹個應用從簡單的顯示用戶請求的信息升級為壹個可以更強烈、更具體的與用戶進行交互的工具。接下來我們選擇幾個簡單的動態圖來看看材料設計獨特的交互設計。
上面兩張圖顯示的是響應式交互中的表面響應。當用戶點擊屏幕時,系統會立即在交互的觸點上繪制壹個可視化圖形,供用戶感知。比如上圖,當用戶點擊屏幕,使用麥克風,或者用鍵盤輸入時,就會出現類似墨水擴散的視覺效果形狀。
上面兩張圖中顯示的響應交互中的點擊-浮動交互表明,當卡片元素或可分離元素被激活時,它應該浮動以指示它處於激活狀態。
練習筆記
從上面的介紹來看,材質設計看起來非常漂亮。接下來我們來看壹個基於材料設計的app——inbox。它完全展示了材料的設計。充滿層次,大膽的顏色和直觀的動畫。