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)下載!