Material Design（原質(zhì)化設(shè)計(jì)）是谷歌開發(fā)的一種視覺設(shè)計(jì)語(yǔ)言，它遵循了優(yōu)秀設(shè)計(jì)的經(jīng)典原則，同時(shí)還結(jié)合了創(chuàng)新理念和新技術(shù)。

概 述

一、目標(biāo)（Goals）

? 創(chuàng)造 (Create) : 創(chuàng)造一種視覺語(yǔ)言，將經(jīng)典的優(yōu)秀設(shè)計(jì)原則與技術(shù)和科學(xué)的創(chuàng)新和可能性相結(jié)合。

? 統(tǒng)一 (Unify) : 開發(fā)一個(gè)單一的底層系統(tǒng)，在平臺(tái)、設(shè)備和輸入方法之間統(tǒng)一用戶體驗(yàn)。

? 定制 (Customize) : 拓展 Material 視覺語(yǔ)言，為創(chuàng)新和品牌傳達(dá)提供靈活的基礎(chǔ)。

二、原則（Principles）

1、Material（原質(zhì)化） 即隱喻

Materia Design 的靈感來(lái)自物理世界及其質(zhì)感，包括它們?nèi)绾畏瓷涔饩€、投射陰影。

實(shí)體的表面和邊緣提供基于紙墨效果的視覺體驗(yàn)，熟悉的質(zhì)感讓用戶可以快速地理解和認(rèn)知。

2、清晰、形象、深思熟慮

Material Design 在排版、網(wǎng)格、空間、比例、顏色和圖像的設(shè)計(jì)上，借鑒了傳統(tǒng)的印刷設(shè)計(jì)。

力求構(gòu)建出鮮明、形象、有意義的用戶界面，使用戶沉浸其中。

3、有意義的動(dòng)效

動(dòng)效是通過(guò)微妙的反饋和連貫的過(guò)渡，來(lái)集中用戶注意力并保持交互的連續(xù)性。

當(dāng)元素出現(xiàn)在屏幕上時(shí)，隨著交互的觸發(fā)，這些元素會(huì)發(fā)生外觀上的變化，并且周圍的場(chǎng)景也會(huì)發(fā)生改變。

4、基礎(chǔ)靈活

原質(zhì)化設(shè)計(jì)系統(tǒng)旨在實(shí)現(xiàn)品牌表達(dá)。它整合了一個(gè)可定制的代碼庫(kù)，允許無(wú)縫實(shí)現(xiàn)組件、插件和設(shè)計(jì)元素。

5、跨平臺(tái)

Material Design 使用跨Android、iOS、Flutter和Web的共享組件，跨平臺(tái)維護(hù)相同的UI。

三、布局（Layout）

原則

1、可預(yù)測(cè)的

UI應(yīng)使用直觀且可預(yù)測(cè)的布局，具有一致的UI區(qū)域和空間組織。

2、一致性

布局應(yīng)該使用一致的網(wǎng)格、關(guān)鍵字和填充。

3、響應(yīng)式

布局是自適應(yīng)的，并對(duì)來(lái)自用戶、設(shè)備和屏幕元素的輸入作出反應(yīng)。

響應(yīng)式布局網(wǎng)格

Material Design響應(yīng)式布局網(wǎng)格可自適應(yīng)屏幕尺寸和方向，確保布局的一致性。

響應(yīng)式布局網(wǎng)格由三種元素組成：列 (Columns) 、水槽 (Gutters) 和邊距 (Margins) 。

列

界面內(nèi)容放置在列的范圍內(nèi)。

列寬是使用百分比，而非固定值來(lái)定義，以便于內(nèi)容可以靈活地適應(yīng)任何屏幕大小。網(wǎng)格中顯示的列數(shù)由屏幕大小確定。

水槽

水槽是列與列之間的空隙。它們有助于分離頁(yè)面的內(nèi)容。

水槽的寬度是每個(gè)斷點(diǎn)范圍內(nèi)的固定值。為了更好地適應(yīng)屏幕，水槽寬度可以在不同的斷點(diǎn)處更改。

更寬的水槽更適合更大的屏幕，因?yàn)樗鼈冊(cè)诹兄g會(huì)有更多的空白。

邊距

邊距是內(nèi)容與屏幕左右邊緣之間的空隙。

邊距寬度定義為每個(gè)斷點(diǎn)范圍的固定值。為了更好地適應(yīng)屏幕，邊距寬度可以在不同的斷點(diǎn)處改變。

更寬的邊距更適合更大的屏幕，因?yàn)樗鼈冊(cè)趦?nèi)容的周邊會(huì)有更多的空白。

間距

1、8dp網(wǎng)格

所有組件都與移動(dòng)設(shè)備的8dp網(wǎng)格線的網(wǎng)格對(duì)齊。

如上圖，應(yīng)用欄與懸浮按鈕都與網(wǎng)格保持對(duì)齊。

2、4dp網(wǎng)格

圖標(biāo)、排版和組件中的元素可以與4dp網(wǎng)格對(duì)齊。

如上圖，底部導(dǎo)航欄的元素與4dp網(wǎng)格對(duì)齊。

3、空隙

空隙是指UI元素之間的空間。它是一種替代間距的方法，以8dp或4dp的增量測(cè)量。

空隙應(yīng)與響應(yīng)布局網(wǎng)格結(jié)合使用，以在設(shè)計(jì)中一致地放置元素。

4、垂直間距

垂直間距是指標(biāo)準(zhǔn)元素的高度，例如應(yīng)用欄或列表項(xiàng)。這些元素的高度應(yīng)與8dp網(wǎng)格對(duì)齊。

觸摸熱區(qū)

1.熱區(qū)規(guī)格

觸摸熱區(qū)適用于通過(guò)觸摸和非觸摸交互的任何設(shè)備。為了平衡信息密度和可用性，觸摸熱區(qū)應(yīng)至少為48 x 48 dp，并且它們之間至少還要有8dp的空間。

2.點(diǎn)擊熱區(qū)

在非接觸式用戶界面上（如WEB端、桌面端等），點(diǎn)擊熱區(qū)應(yīng)至少為24 x 24 dp，其間至少還要有8 dp的空間。

四、啟動(dòng)屏幕（Launch screen）

當(dāng)APP啟動(dòng)時(shí)，顯示啟動(dòng)屏幕，而非空白屏幕。顯示啟動(dòng)屏幕可以弱化長(zhǎng)時(shí)間加載/等待的感覺，并且有可能增加用戶體驗(yàn)的樂(lè)趣。

但如果APP正在運(yùn)行，則不應(yīng)顯示啟動(dòng)屏幕。

有兩種類型的啟動(dòng)屏幕：

? 占位符啟動(dòng)頁(yè)顯示APP實(shí)際UI的界面，即非交互式預(yù)覽。此啟動(dòng)屏幕適用于APP啟動(dòng)和APP內(nèi)的活動(dòng)轉(zhuǎn)換。

? 品牌發(fā)布屏幕提供短暫的品牌曝光，可提高品牌識(shí)別度。

五、新手引導(dǎo)（Onboarding）

應(yīng)該新手引導(dǎo)是一種虛擬的打開體驗(yàn)，幫助用戶開始使用APP。它應(yīng)該為某類用戶達(dá)到特定的目標(biāo)而設(shè)計(jì)。

用戶場(chǎng)景：

用戶已經(jīng)安裝了應(yīng)用程序，且不需要馬上查看促銷信息

用戶渴望在不閱讀說(shuō)明手冊(cè)的情況下，先使用APP

用戶還不熟悉APP的用戶界面，并且準(zhǔn)備了解它

目標(biāo)：

歡迎用戶并激發(fā)他們馬上體驗(yàn)APP的興趣

幫助用戶隱性或顯式地理解APP如何使用

推動(dòng)用戶在前七天使用APP，提高參與度和留存率

類型

有三種新手引導(dǎo)的樣式：自我選擇、快速入門和引導(dǎo)頁(yè)。

作者： 宛蘇