Md規范是一種設計風格,并不特指規范。是一種模擬紙張的手法。
一、核心思想
把物理世界的體驗帶進屏幕。去掉現實中的雜質和隨機性,保留其最原始純凈的形態、空間關系、變化與過度,配合虛擬世界的靈活特性,還原最貼近真實的體驗,達到簡潔與直觀的效果。
01、五大原則
1、材料隱喻
受物理世界及其物理紋理材質的啟發,包括它們如何讓反射光線和投射陰影。材料表面進行重新構想,加入紙張和墨水的特性。
2、大膽夸張
以印刷設計方法,排版、網格、空間、比例、顏色和圖像為指導,創造出讓用戶沉浸在精心設計的視覺層級、視覺意義以及視覺聚焦中。
3、動效表意
通過微妙的反饋和平滑的過渡來使動效保持一定的連續性。隨著元素出現在屏幕上,它們在環境中轉換和重組,相互作用產生新的變化。
4、靈活
系統旨在實現品牌傳達。他集成了一個自定義代碼庫,可以使組件、插件和設計元素無縫的鏈接和靈活的運行。
5、 跨平臺
使用跨平臺管理,其中包括android、ios、flutter和web,方便設計師跨平臺維護ui組件。
02、設計目標
創造:我們希望創造一種新的視覺設計語言,能夠遵循優秀設計的經典定則,同時還伴有創新理念和新的科技
統一:我們希望創造一種獨一無二的底層系統,在這個系統的基礎智商,構建跨平臺和超越設備尺寸的統一體驗
定制:通過Material的視覺語言的延伸,為創新和品牌表達提供統一靈活的設計規范。
二、材質與空間
01、材質
Meterial design中,最重要的信息載體就是魔法紙片。紙片層疊、合并、分離,擁有現實中的厚度、慣性和反饋,同時擁有液體的一些特性,能夠自由伸展變形。
這些是紙片的魔法特性,真實紙片所不具備的能力:
1、紙片可以伸縮,改變形狀
2、紙片變形時可以裁剪內容,比如紙片縮小時,內容大小不變,而是隱藏超出部分
3、多張紙片可以拼接成一張
4、一張紙片可以分裂成多張
5、紙片可以在任何位置憑空出現
不過,魔法紙片有些效果是禁止的:
1、一項操作不能同時觸發兩站紙片的反饋
2、層疊的紙片,高度不能相同
3、紙片不能互相穿透
4、紙片不能彎折
5、紙片不能產生透視,必須平行于屏幕
02、空間
Material Design引入了Z軸的概念:
Z軸垂直于屏幕,用來表現元素的疊層關系。Z值越高,元素離界面底層越遠,投影越重。這里有一個前提,所有的元素的厚度都是1dp。
03、動效
Material Design重視動畫效果,它反復強調一點:
動畫不只是裝飾,他有含義,能表達元素、界面之間的關系,具備功能上的作用。
動畫要貼近真實世界,就要重視easing。物理世界中的運動和變化都是有加速和減速的過程的,忽然開始、忽然停止的勻速動畫顯得機械而不真實。考慮動畫的easing,要先考慮它在現實世界中的運動規律。
所有可點擊的元素,都應該有這樣的反饋效果。通過這個動畫,將點擊的位置與所操作的元素關聯起來,體現了Material Design動畫的功能性。
1、通過過渡動畫,表達界面之間的空間與層級關系,并且跨界面傳遞信息。
2、從父界面進入子界面,需要抬升子元素的海拔高度,并展開至整個屏幕,反之亦然。
3、多個相似元素,動畫的設計要有先后次序,起到引導視線的作用。
4、相似元素的運動,要符合統一的規律。
5、通過圖標的變化和一些細節來達到令人愉悅的效果。
四、色彩規范
1、顏色不易過多。選取一種主色、一種輔助色(非必需),在次基礎上進行明度、飽和度變化,構成配色方案。
2、Appbar背景使用主色,狀態欄背景使用深一級的主色或者20%透明度的純黑。
3、小面積需要高亮顯示的地方使用輔助色。
4、其余顏色通過純黑#000000與純白#ffffff的透明度變化來展現(包括圖標和分割線)
五、圖標
1、桌面圖標尺寸是48dp*48dp。桌面圖標建議模仿顯示中的折紙效果,通過扁平色彩表現空間和光影。
2、小圖標尺寸是24dp*24dp。圖形限制在中央20dp*20dp區域內。小圖標同樣有刪格系統。線條、空隙盡量保持在2dp寬,圓角半徑2dp。特殊情況相應調整。
3、優先使用material design默認圖標。設計小圖標時,使用簡練的圖形來表達,圖形不要帶空間感。
六、圖標
1、描述具體食物,優先使用照片。然后可以考慮使用插畫。
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字符(英文)左右。
八、布局
所有可操作元素最小點擊區域尺寸48dp*48dp。
刪格系統的最小單位是8dp,一切距離、尺寸都應該是8dp的整倍數。
頂部狀態欄高度:24dp
Appbar最小高度:56dp
底部導航欄高度:48dp
用戶頭像尺寸:64*64dp/40*40dp
小圖標點擊區域:48*48dp
側邊抽屜到屏幕右邊的距離:56dp
卡片間距:8dp
分割線上下留白:8dp
大多元素的留白距離:16dp
屏幕左右對齊基線:16dp
文字左側對齊基線:72dp