Md規(guī)范是一種設(shè)計風格，并不特指規(guī)范。是一種模擬紙張的手法。

一、核心思想

把物理世界的體驗帶進屏幕。去掉現(xiàn)實中的雜質(zhì)和隨機性，保留其最原始純凈的形態(tài)、空間關(guān)系、變化與過度，配合虛擬世界的靈活特性，還原最貼近真實的體驗，達到簡潔與直觀的效果。

01、五大原則

1、材料隱喻

受物理世界及其物理紋理材質(zhì)的啟發(fā)，包括它們?nèi)绾巫尫瓷涔饩€和投射陰影。材料表面進行重新構(gòu)想，加入紙張和墨水的特性。

2、大膽夸張

以印刷設(shè)計方法，排版、網(wǎng)格、空間、比例、顏色和圖像為指導，創(chuàng)造出讓用戶沉浸在精心設(shè)計的視覺層級、視覺意義以及視覺聚焦中。

3、動效表意

通過微妙的反饋和平滑的過渡來使動效保持一定的連續(xù)性。隨著元素出現(xiàn)在屏幕上，它們在環(huán)境中轉(zhuǎn)換和重組，相互作用產(chǎn)生新的變化。

4、靈活

系統(tǒng)旨在實現(xiàn)品牌傳達。他集成了一個自定義代碼庫，可以使組件、插件和設(shè)計元素無縫的鏈接和靈活的運行。

5、 跨平臺

使用跨平臺管理，其中包括android、ios、flutter和web，方便設(shè)計師跨平臺維護ui組件。

02、設(shè)計目標

創(chuàng)造：我們希望創(chuàng)造一種新的視覺設(shè)計語言，能夠遵循優(yōu)秀設(shè)計的經(jīng)典定則，同時還伴有創(chuàng)新理念和新的科技

統(tǒng)一：我們希望創(chuàng)造一種獨一無二的底層系統(tǒng)，在這個系統(tǒng)的基礎(chǔ)智商，構(gòu)建跨平臺和超越設(shè)備尺寸的統(tǒng)一體驗

定制：通過Material的視覺語言的延伸，為創(chuàng)新和品牌表達提供統(tǒng)一靈活的設(shè)計規(guī)范。

二、材質(zhì)與空間

01、材質(zhì)

Meterial design中，最重要的信息載體就是魔法紙片。紙片層疊、合并、分離，擁有現(xiàn)實中的厚度、慣性和反饋，同時擁有液體的一些特性，能夠自由伸展變形。

這些是紙片的魔法特性，真實紙片所不具備的能力：

1、紙片可以伸縮，改變形狀

2、紙片變形時可以裁剪內(nèi)容，比如紙片縮小時，內(nèi)容大小不變，而是隱藏超出部分

3、多張紙片可以拼接成一張

4、一張紙片可以分裂成多張

5、紙片可以在任何位置憑空出現(xiàn)

不過，魔法紙片有些效果是禁止的：

1、一項操作不能同時觸發(fā)兩站紙片的反饋

2、層疊的紙片，高度不能相同

3、紙片不能互相穿透

4、紙片不能彎折

5、紙片不能產(chǎn)生透視，必須平行于屏幕

02、空間

Material Design引入了Z軸的概念：

Z軸垂直于屏幕，用來表現(xiàn)元素的疊層關(guān)系。Z值越高，元素離界面底層越遠，投影越重。這里有一個前提，所有的元素的厚度都是1dp。

03、動效

Material Design重視動畫效果，它反復強調(diào)一點：

動畫不只是裝飾，他有含義，能表達元素、界面之間的關(guān)系，具備功能上的作用。

動畫要貼近真實世界，就要重視easing。物理世界中的運動和變化都是有加速和減速的過程的，忽然開始、忽然停止的勻速動畫顯得機械而不真實。考慮動畫的easing，要先考慮它在現(xiàn)實世界中的運動規(guī)律。

所有可點擊的元素，都應該有這樣的反饋效果。通過這個動畫，將點擊的位置與所操作的元素關(guān)聯(lián)起來，體現(xiàn)了Material Design動畫的功能性。

1、通過過渡動畫，表達界面之間的空間與層級關(guān)系，并且跨界面?zhèn)鬟f信息。

2、從父界面進入子界面，需要抬升子元素的海拔高度，并展開至整個屏幕，反之亦然。

3、多個相似元素，動畫的設(shè)計要有先后次序，起到引導視線的作用。

4、相似元素的運動，要符合統(tǒng)一的規(guī)律。

5、通過圖標的變化和一些細節(jié)來達到令人愉悅的效果。

四、色彩規(guī)范

1、顏色不易過多。選取一種主色、一種輔助色(非必需)，在次基礎(chǔ)上進行明度、飽和度變化，構(gòu)成配色方案。

2、Appbar背景使用主色，狀態(tài)欄背景使用深一級的主色或者20%透明度的純黑。

3、小面積需要高亮顯示的地方使用輔助色。

4、其余顏色通過純黑#000000與純白#ffffff的透明度變化來展現(xiàn)(包括圖標和分割線)

五、圖標

1、桌面圖標尺寸是48dp*48dp。桌面圖標建議模仿顯示中的折紙效果，通過扁平色彩表現(xiàn)空間和光影。

2、小圖標尺寸是24dp*24dp。圖形限制在中央20dp*20dp區(qū)域內(nèi)。小圖標同樣有刪格系統(tǒng)。線條、空隙盡量保持在2dp寬，圓角半徑2dp。特殊情況相應調(diào)整。

3、優(yōu)先使用material design默認圖標。設(shè)計小圖標時，使用簡練的圖形來表達，圖形不要帶空間感。

六、圖標

1、描述具體食物，優(yōu)先使用照片。然后可以考慮使用插畫。

2、圖片上的文字，需要淡淡的遮罩確保其可讀性。深色的遮罩透明度在20%～40%之間，淺色的遮罩在40%～60%之間。

3、Android L可以從圖片中提取主色，運用在其他UI元素上。

七、文字

1、英文

英文字體使用Roboto

Roboto有6種字重：Thin、Light、Regular、Medium、Bold和Black

2、中文

中文字體使用Noto

Noto有7種字重：Thin、Light、DemiLight、Regular、Medium、Bold和Black

常用字號：

1、12sp小字提示

2、14sp(桌面端13sp)正文/按鈕文字

3、16sp(桌面端15sp)小標題

4、20sp Appbar文字

5、24sp大標題

6、34sp/45sp/56sp/112sp超大號文字

7、長篇幅正文，每行建議60字符(英文)左右。短文本，建議每行30字符(英文)左右。

八、布局

所有可操作元素最小點擊區(qū)域尺寸48dp*48dp。

刪格系統(tǒng)的最小單位是8dp，一切距離、尺寸都應該是8dp的整倍數(shù)。

頂部狀態(tài)欄高度：24dp

Appbar最小高度：56dp

底部導航欄高度：48dp

用戶頭像尺寸：64*64dp/40*40dp

小圖標點擊區(qū)域：48*48dp

側(cè)邊抽屜到屏幕右邊的距離：56dp

卡片間距：8dp

分割線上下留白：8dp

大多元素的留白距離：16dp

屏幕左右對齊基線：16dp

文字左側(cè)對齊基線：72dp

總結(jié)

以上是生活随笔為你收集整理的android md 颜色,安卓MD(Material Design)规范的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。