前言：
把物理世界的體驗帶進(jìn)屏幕。去除現(xiàn)實(shí)中的雜志和隨機(jī)性，保留其最原始純凈的形態(tài)、空間關(guān)系、變化與過渡，配合虛擬世界的靈活特性，還原最貼近真實(shí)的體驗，達(dá)到簡潔與直觀的效果。
1、運(yùn)用比喻
2、大膽，形象目的明確
3、動效表意
一、魔法紙片
魔法紙片的特性
1、紙片可以伸縮、改變形狀
2、紙片變形時可以裁剪內(nèi)容，比如之前縮小時，內(nèi)容大小不變，而是隱藏超出部分
3、多張之前可以拼接成一張
4、一張紙片可以分裂成多張
5、紙片可以在任何位置憑空出現(xiàn)
魔法紙片的禁止效果
1、一項操作不能同時觸發(fā)兩張紙片的反饋
2、層疊的紙片，高度不能相同
3、紙片不能互相穿透
4、紙片不能彎折
5、紙片不能產(chǎn)生透視，必須平衡于屏幕
二、空間
引入Z軸的概念，Z軸垂直于屏幕，用來表示元素的層疊關(guān)系。Z值（海拔高度）越高，元素離界面低層（水平面）越遠(yuǎn)，投影越重。這里有一個前提，所有的元素的厚度都是1dp。
三、動畫
動畫只是裝飾，它有含義，能表達(dá)元素、界面之間的關(guān)系，具有功能上的功能。（現(xiàn)實(shí)世界的運(yùn)動規(guī)律）
水波反饋：所有可點(diǎn)擊的元素，都應(yīng)該有這樣的反饋效果。通過這個動畫，將點(diǎn)擊的位置與所操作的元素關(guān)聯(lián)起來，提現(xiàn)Material Design動畫的功能性。
1、通過過渡動畫，表達(dá)界面之間的空間、層次關(guān)系，并且跨界面?zhèn)鬟f信息。
2、從父界面進(jìn)去子界面，需要先抬升子元素的海拔高度，并展開至整個屏幕，反之亦然。
3、多個相似元素，動畫設(shè)計要有先后次序，起到引導(dǎo)視線的作用。
4、相似元素的運(yùn)動，要符合統(tǒng)一的規(guī)律。
5、通過圖標(biāo)的變化和一些細(xì)節(jié)來達(dá)到令人愉悅的效果。
四、色彩規(guī)范
1、顏色不宜過多，選取一種主色，一種輔助色（非必須），在此基礎(chǔ)上進(jìn)行明度、飽和度的變化，構(gòu)成配色方案。
2、Appbar（頭部導(dǎo)航條）背景使用主色（色卡值500），狀態(tài)欄背景使用深一級的主色或20％透明度的純黑。（色值卡700）
3、其余顏色
黑色：〔87％普通文字〕〔54％減淡文字〕〔26％禁用狀態(tài)/提示文字〕〔12％分隔線〕
白色：〔100％普通文字〕〔70％減淡文字〕〔30％禁用狀態(tài)/提示文字〕〔12％分隔線〕
五、圖標(biāo)
1、桌面圖標(biāo)的尺寸是48dp*48dp。桌面圖標(biāo)建議模仿現(xiàn)實(shí)中的折紙效果，通過扁平化色彩表現(xiàn)空間和光影。
2、小圖標(biāo)尺寸是24dp*24dp。圖形限制在中央20dp*20dp區(qū)域內(nèi)。? 小圖標(biāo)同樣有柵格系統(tǒng)。線條、間隙盡量保持2dp寬，圓角半徑2dp。特殊情況相應(yīng)調(diào)整。
3、小圖標(biāo)的顏色使用純黑與純白，通過透明度調(diào)整：
黑色：〔51％正常狀態(tài)〕〔26％禁用狀態(tài)〕
白色：〔100％正常狀態(tài)〕〔30％禁用狀態(tài)〕
六、圖片
1、描述具體事物，優(yōu)先使用照片。然后可以考慮使用插畫。
2、圖片上的文字，需要淡淡的遮罩確保其可讀性。深色的遮罩透明度在20％-40％之間，淺色的遮罩透明度在40％-60％之間。
3、Android L可以從圖片中提取主色，運(yùn)用在其它UI元素上。
七、文字
1、英文
英文字體使用Roboto Roboto有6種字重：Thin、Light、Regular、Meaium、Bold和Black
2、中文
中文字體使用Noto Noto有7種字重：Thin、Light、Demilight、Regular、Medium、Bold和Black。
3、常用字號（1倍）
① 12sp小字提示
② 14sp（桌面端13sp） 正文/按鈕文字
③ 16sp（桌面端15sp） 小標(biāo)題
④ 20sp Appbar文字
⑤ 24sp大標(biāo)題
⑥ 34sp/45sp/56sp/112sp超大號文字
⑦ 長篇幅正文，每行建議60字符（英文，中文30）左右。短文本，建議每行30字符（英文，中文15）左右。
八、布局
所有可操作元素最小點(diǎn)擊區(qū)域尺寸：48dp*48dp。（IOS是44dp*44dp）（原因：同等配置屏幕精度蘋果高）
柵格系統(tǒng)的最小單位是8dp，一切距離、尺寸都應(yīng)該是8dp的整數(shù)倍。
常見的尺寸與距離
? 頂部導(dǎo)航欄高度：24dp
? Appbar最小高度：56dp
? 底部導(dǎo)航欄高度：48dp
? 用戶頭像尺寸：64dp*64dp/40dp*40dp
? 小圖標(biāo)點(diǎn)擊區(qū)域：48dp*48dp
? 側(cè)邊抽屜到屏幕右邊的距離：56dp
? 卡片間距：8dp
? 分隔線上下留白：8dp
? 大多元素的留白距離：16dp
? 屏幕左右對齊基線：16dp
? 文字左側(cè)對齊基線：72dp
九、組件
1、底部動作條
①通常以列表形式出現(xiàn)，支持上下滾動。
②也可以是網(wǎng)格式的。
2、按鈕
? 層級權(quán)限從高到低排列
①懸浮按鈕
②凸起按鈕
③扁平按鈕
? 重要性
①最重要且隨處用到的操作，建議使用懸浮按鈕。信息較多時，選用凸起按鈕可以有效突出重要操作，但注意紙片不要疊太多層。扁平按鈕適用在簡單的頁面，例如對話框中。
? 懸浮按鈕使用規(guī)則
①建議只用一個懸浮按鈕
②懸浮按鈕可以貼在紙片邊緣或者接縫處，但不要貼在對話框、側(cè)邊抽屜和菜單的邊緣
③懸浮按鈕不能被其它元素蓋住，也不能擋住其它按鈕
④列表滾動至底部時，懸浮按鈕應(yīng)該隱藏，防止它擋住列表項。
⑤懸浮按鈕的位置不能隨意擺放，可以貼著左右兩邊的對齊基線。
? 其它
懸浮按鈕通常觸發(fā)正向的操作，添加、創(chuàng)建、收藏之類。不能觸發(fā)負(fù)面、破壞性或不重要的操作，也不應(yīng)該有數(shù)字角標(biāo)。左圖就是懸浮按鈕的錯誤使用。
〔懸浮按鈕有兩種尺寸：56*56dp/40*40dp〕
3、卡片
①即使在同一列表中，卡片的內(nèi)容和布局方式也可以不一樣。
②卡片統(tǒng)一帶走2dp的圓角。
③卡片的使用規(guī)則
A、同時展現(xiàn)多種不同內(nèi)容
B、卡片內(nèi)容之間不需要比較
C、包含了長度不確定的內(nèi)容，比如評論
D、包含了豐富的內(nèi)容與操作項，比如贊、滾動? ? ? ? ? 條、評論
E、本該是列表，但文字超過3行
F、本該是網(wǎng)格，但需要展現(xiàn)更多文字
④卡片最多有兩塊操作區(qū)域。輔助操作區(qū)至多包含兩個操作項，更多操作需要使用下拉菜單。其它部分都是主操作區(qū)。
4、彈窗
狹小空間表現(xiàn)復(fù)雜信息的一個組件，比如日期、聯(lián)系人選擇器。
5、彈出框
①對話框包含標(biāo)題、內(nèi)容、操作項。點(diǎn)擊對話框? ? ? ? 外的區(qū)域，不會關(guān)閉對話框
②通常情況，避免出現(xiàn)滾動條?？臻g不足時允許滾動，滾動條建議默認(rèn)顯示。
③對話框中，取消類操作放左邊，引起變化的操作項放右邊。要寫明操作項的具體效果，不要只寫“是”和“否”。標(biāo)題文字要明確，即使不讀正文內(nèi)容也能知道在干什么，標(biāo)題不要用“確定嗎”這樣的含糊措辭。
④再對話框中改變內(nèi)容，不會提交數(shù)據(jù)，點(diǎn)擊確定后，才會發(fā)生變化。對話框上方不能在疊加對話框。
⑤還有一種簡單對話框，不帶操作項。點(diǎn)擊列表內(nèi)容觸發(fā)相應(yīng)操作，并關(guān)閉對話框。點(diǎn)擊簡易對話框外面，對話框會關(guān)閉，操作取消。
⑥
A、對話框可以是全屏式的，全屏對話框上方可以? ? ? 再層疊對話框。全屏式對話框，其中的任何改? ? ? 動，要點(diǎn)擊保存后才生效，點(diǎn)擊返回取消。
B、全屏對話框右上角的操作項，可以是諸如保? ? ? ? ? 存、發(fā)送、添加、分享、更新、創(chuàng)建之類的操? ? ? ? ? 作，不要使用完成、OK、關(guān)閉這樣含糊的措? ? ? ? ? 辭。
C、只有必填項都填了，右上角的操作才變?yōu)榭牲c(diǎn)? ? ? 擊狀態(tài)。內(nèi)容發(fā)生了改變，點(diǎn)擊關(guān)閉需要有個? ? ? 確認(rèn)對話框，提示是否忽略修改。
D、內(nèi)容沒有發(fā)生改變，點(diǎn)擊關(guān)閉，直接退出全屏? ? ? 對話框。
E、對話框四周留白比較大，通常是24dp
6、分隔線
①列表中有頭像、圖片等元素時，使用內(nèi)嵌分隔線，左端與文字對齊。
②沒有頭像、圖標(biāo)等元素時，需要用通欄分隔線。
③圖片本身就起到劃分區(qū)域的作用，相冊列表不需要分隔線。
④謹(jǐn)慎使用分隔線，留白和小標(biāo)題也能起到分隔作用。能用留白的地方，優(yōu)先使用留白。分隔線的層級高于留白。
⑤通欄分隔線的層級高于內(nèi)嵌分隔線。
7、列表
①列表由行構(gòu)成，行內(nèi)包含瓦片。如果列表內(nèi)容文字超過3行，請改用卡片。如果列表項的主要區(qū)別在于圖片，請改用網(wǎng)格。
②列表包含主操作區(qū)域與副操作區(qū)域。副操作區(qū)位于列表右側(cè)，其余都是主操作區(qū)。在同一個列表中，主、副操作區(qū)的內(nèi)容與位置要保持一致。
③在同一個列表中，滑動手勢操作保持一致。
④主操作區(qū)域與副操作區(qū)的圖標(biāo)或圖形元素是列表控制項，列表的控制項可以是勾選框、開關(guān)、拖動排序、展開/收起等操作，也可以包含快捷鍵提示、二級菜單等提示信息。
8、開關(guān)
①必須所有選項保持可見時，才用Radio button（圓形的單選開關(guān)）。不然可以使用下拉菜單，節(jié)省空間。
②在同一個列表中有多項開關(guān)，建議使用Checkbox（框形的復(fù)選開關(guān)）。
③單個開關(guān)建議使用Switch（圓矩形的滑動開關(guān)。在IOS中，開關(guān)是在矩形框中，而在Material Design中，開關(guān)是浮起來變大且有投影的）。
9、動作條
①Tap只用來展示不同類型的內(nèi)容，不能當(dāng)導(dǎo)航菜單使用。Tab至少2項，至多6項。
②超出6項，Tab需要變?yōu)闈L動模式，左右翻頁。
③
A、Tab文字要顯示完整，字號保持一致，不能 折? ? ? ? 行，文字與圖標(biāo)不能混用。
B、Tab選中項的下劃線高度是2dp。
10、文本框
①激活狀態(tài)和錯誤狀態(tài)，橫線的寬度為2dp，顏色改變。
②輸入點(diǎn)擊區(qū)域高度至少48dp，但橫線并不在點(diǎn)擊區(qū)域底部，還有8dp的距離。
③整個點(diǎn)擊區(qū)域增高，提示文字也是點(diǎn)擊區(qū)域的一部分。
④字?jǐn)?shù)限制與錯誤提示都會使點(diǎn)擊區(qū)域增高。
11、抽屜導(dǎo)航
①側(cè)邊抽屜從左側(cè)滑出，占據(jù)整個屏幕高度，遵循列表的布局規(guī)則。手機(jī)端的側(cè)邊抽屜距離屏幕右側(cè)56dp。
②列表較短不需要滾動時，設(shè)置和幫助反饋跟隨在列表后面。
