Material Design視覺設(shè)計(jì)語(yǔ)言概述

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 的靈感來自物理世界及其質(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)效是通過微妙的反饋和連貫的過渡,來集中用戶注意力并保持交互的連續(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ù),允許無縫實(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ì)來自用戶、設(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)。

列寬是使用百分比,而非固定值來定義,以便于內(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ū)適用于通過觸摸和非觸摸交互的任何設(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)的樂趣。

但如果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)用程序,且不需要馬上查看促銷信息

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

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

目標(biāo):

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

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

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

類型

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

 

 

 

作者: 宛蘇

每天更新,
全站高品質(zhì)素材免費(fèi)下載!