編者按：這一年就快完了刀荒，你還沒搞懂Material design嗎？是嫌文檔太長(zhǎng)窄陡，還是覺得自己英文不好炕淮？都沒關(guān)系，我們善良熱情的@十萬(wàn)個(gè)為什麼幫同學(xué)們通讀了一遍官方的設(shè)計(jì)指南跳夭，去糙取精涂圆，整理出這篇干貨超多的學(xué)習(xí)筆記们镜，打包票學(xué)完基本就掌握90%了，別錯(cuò)過(guò)咯润歉！
自從Material design發(fā)布以來(lái)模狭，可樂橙就在一直收集相關(guān)素材與資源，研究別人的作品踩衩。這套設(shè)計(jì)風(fēng)格非常鮮明嚼鹉，帶有濃郁的Google式嚴(yán)謹(jǐn)和理性哲學(xué)，深得我心驱富。實(shí)際上锚赤，光是研究素材和別人作品，就能發(fā)現(xiàn)一些明顯的規(guī)律萌朱，做出幾分相似的設(shè)計(jì)宴树。這樣半吊子的狀態(tài)一直保持到現(xiàn)在，最近有時(shí)間通讀一遍官方的設(shè)計(jì)指南晶疼，終于有了深入的理解酒贬。在朋友的項(xiàng)目（http://lydiabox.com）中實(shí)踐了一番，雖然很抱歉拿朋友開刀翠霍，不過(guò)他對(duì)整體效果似乎還算滿意锭吨。
Material design的設(shè)計(jì)規(guī)范細(xì)致入微，需要消化好一陣子寒匙。越讀越感受到它的妙處零如，假如每個(gè)細(xì)節(jié)都嚴(yán)格遵照Material design的思想來(lái)設(shè)計(jì)，哪怕你不是設(shè)計(jì)人員锄弱，你的產(chǎn)品也一定不會(huì)難用和難看考蕾。當(dāng)然，作為設(shè)計(jì)師会宪，要求就更高了肖卧。設(shè)計(jì)文檔本身，就提供了一種很好的方式掸鹅，幫你從各個(gè)角度思考和構(gòu)建自己產(chǎn)品的規(guī)范塞帐。但在這之前，先要好好整理一下學(xué)習(xí)筆記巍沙。要打破規(guī)矩葵姥，必先掌握規(guī)矩。
由于只是筆記句携，我會(huì)寫得盡量簡(jiǎn)單榔幸。并且省略掉一些可樂橙認(rèn)為設(shè)計(jì)師都已經(jīng)掌握的信息。想要深入了解Material design，還是建議有空通讀一遍官方文檔削咆。不過(guò)喳篇，牢記以下要點(diǎn)，基本能做到90%了态辛。實(shí)際上，Google官方的應(yīng)用也有不遵照規(guī)范的地方挺尿，不能太拘泥于條條框框奏黑。
一、核心思想
,aterial design的核心思想编矾，就是把物理世界的體驗(yàn)帶進(jìn)屏幕熟史。去掉現(xiàn)實(shí)中的雜質(zhì)和隨機(jī)性，保留其最原始純凈的形態(tài)窄俏、空間關(guān)系蹂匹、變化與過(guò)渡，配合虛擬世界的靈活特性凹蜈，還原最貼近真實(shí)的體驗(yàn)限寞，達(dá)到簡(jiǎn)潔與直觀的效果。
Material design是最重視跨平臺(tái)體驗(yàn)的一套設(shè)計(jì)語(yǔ)言仰坦。由于規(guī)范嚴(yán)格細(xì)致履植，保證它在各個(gè)平臺(tái)使用體驗(yàn)高度一致。不過(guò)目前還只有Google自家的服務(wù)這么做悄晃，畢竟其他平臺(tái)有自己的規(guī)范與風(fēng)格玫霎。
二、材質(zhì)與空間
材質(zhì)
Material design中妈橄，最重要的信息載體就是魔法紙片庶近。紙片層疊、合并眷蚓、分離鼻种，擁有現(xiàn)實(shí)中的厚度、慣性和反饋溪椎，同時(shí)擁有液體的一些特性普舆，能夠自由伸展變形。
這些是紙片的魔法特性校读，真實(shí)紙片所不具備的能力：
紙片可以伸縮沼侣、改變形狀
紙片變形時(shí)可以裁剪內(nèi)容，比如紙片縮小時(shí)歉秫，內(nèi)容大小不變蛾洛，而是隱藏超出部分
多張紙片可以拼接成一張
一張紙片可以分裂成多張
紙片可以在任何位置憑空出現(xiàn)
不過(guò)，魔法紙片有些效果是禁止的：
一項(xiàng)操作不能同時(shí)觸發(fā)兩張紙片的反饋
層疊的紙片，海報(bào)高度不能相同
紙片不能互相穿透
紙片不能彎折
紙片不能產(chǎn)生透視轧膘，必須平行于屏幕
空間
Material design引入了z軸的概念钞螟，z軸垂直于屏幕，用來(lái)表現(xiàn)元素的層疊關(guān)系谎碍。z值（海拔高度）越高鳞滨，元素離界面底層（水平面）越遠(yuǎn)，投影越重蟆淀。這里有一個(gè)前提拯啦，所有的元素的厚度都是1dp。
所有元素都有默認(rèn)的海拔高度熔任，對(duì)它進(jìn)行操作會(huì)抬升它的海拔高度褒链，操作結(jié)束后，它應(yīng)該落回默認(rèn)海拔高度疑苔。同一種元素甫匹，同樣的操作，抬升的高度是一致的惦费。
注意：這不止是設(shè)計(jì)中的概念兵迅，開發(fā)人員確實(shí)可以通過(guò)一個(gè)值來(lái)控制元素的海拔高度和投影。
三趁餐、動(dòng)畫
Material design重視動(dòng)畫效果喷兼，它反復(fù)強(qiáng)調(diào)一點(diǎn)：動(dòng)畫不只是裝飾，它有含義后雷，能表達(dá)元素季惯、界面之間的關(guān)系，具備功能上的作用臀突。
easing
動(dòng)畫要貼近真實(shí)世界勉抓，就要重視easing。物理世界中的運(yùn)動(dòng)和變化都是有加速和減速過(guò)程的候学，忽然開始藕筋、忽然停止的勻速動(dòng)畫顯得機(jī)械而不真實(shí)∈崧耄考慮動(dòng)畫的easing隐圾，要先考慮它在現(xiàn)實(shí)世界中的運(yùn)動(dòng)規(guī)律。
水波反饋
所有可點(diǎn)擊的元素掰茶，都應(yīng)該有這樣的反饋效果暇藏。通過(guò)這個(gè)動(dòng)畫，將點(diǎn)擊的位置與所操作的元素關(guān)聯(lián)起來(lái)濒蒋，體現(xiàn)了Material design動(dòng)畫的功能性盐碱。
轉(zhuǎn)場(chǎng)效果
通過(guò)過(guò)渡動(dòng)畫把兔，表達(dá)界面之間的空間與層級(jí)關(guān)系，并且跨界面?zhèn)鬟f信息瓮顽。
從父界面進(jìn)入子界面县好，需要抬升子元素的海拔高度，并展開至整個(gè)屏幕暖混，反之亦然缕贡。
多個(gè)相似元素，動(dòng)畫的設(shè)計(jì)要有先后次序拣播，起到引導(dǎo)視線的作用善绎。
相似元素的運(yùn)動(dòng)，要符合統(tǒng)一的規(guī)律诫尽。
細(xì)節(jié)動(dòng)畫
通過(guò)圖標(biāo)的變化和一些細(xì)節(jié)來(lái)達(dá)到令人愉悅的效果。
四炬守、顏色
顏色不宜過(guò)多牧嫉。選取一種主色、一種輔助色（非必需）减途，在此基礎(chǔ)上進(jìn)行明度酣藻、飽和度變化，構(gòu)成配色方案鳍置。
Appbar背景使用主色辽剧，狀態(tài)欄背景使用深一級(jí)的主色或20%透明度的純黑。
小面積需要高亮顯示的地方使用輔助色税产。
其余顏色通過(guò)純黑#000000與純白#ffffff的透明度變化來(lái)展現(xiàn)（包括圖標(biāo)和分隔線）怕轿，而且透明度限定了幾個(gè)值。
黑色：[87% 普通文字] [54% 減淡文字] [26% 禁用狀態(tài)/提示文字] [12% 分隔線]
白色：[100% 普通文字] [70% 減淡文字] [30% 禁用狀態(tài)/提示文字] [12% 分隔線]
延伸閱讀：《超方便辟拷！Material Design專用在線配色工具》
五撞羽、圖標(biāo)
桌面圖標(biāo)
桌面圖標(biāo)尺寸是48dp X 48dp。
桌面圖標(biāo)建議模仿現(xiàn)實(shí)中的折紙效果衫冻，通過(guò)扁平色彩表現(xiàn)空間和光影诀紊。注意避免以下問題：
不要給彩色元素加投影
層疊不要超過(guò)兩層
折角不要放在左上角
帶投影的元素要完整展現(xiàn)，不能被圖標(biāo)邊緣裁剪
如果有折痕隅俘，放在圖片中央邻奠，并且最多只有一條
帶折疊效果的圖標(biāo)，表面不要有圖案
不能透視为居、彎曲
常規(guī)形狀可以遵循幾套固定柵格設(shè)計(jì)碌宴。
小圖標(biāo)
優(yōu)先使用material design默認(rèn)圖標(biāo)。設(shè)計(jì)小圖標(biāo)時(shí)颜骤，使用最簡(jiǎn)練的圖形來(lái)表達(dá)唧喉，圖形不要帶空間感。
小圖標(biāo)尺寸是24dp X 24dp。圖形限制在中央20dp X 20dp區(qū)域內(nèi)八孝。
小圖標(biāo)同樣有柵格系統(tǒng)董朝。線條、空隙盡量保持2dp寬干跛，圓角半徑2dp子姜。特殊情況相應(yīng)調(diào)整。
小圖標(biāo)的顏色使用純黑與純白楼入，通過(guò)透明度調(diào)整：
黑色：[54% 正常狀態(tài)] [26% 禁用狀態(tài)]
白色：[100% 正常狀態(tài)] [30% 禁用狀態(tài)]
六哥捕、圖片
選用圖片
描述具體事物，優(yōu)先使用照片嘉熊。然后可以考慮使用插畫遥赚。
圖片上的文字
圖片上的文字，需要淡淡的遮罩確保其可讀性阐肤。深色的遮罩透明度在20%-40%之間凫佛，淺色的遮罩透明度在40%-60%之間。
對(duì)于帶有文字的大幅圖片孕惜，遮罩文字區(qū)域愧薛，不要遮住整張圖片。
可以使用半透明的主色蓋住圖片衫画。
提取顏色
Android L可以從圖片中提取主色毫炉，運(yùn)用在其他UI元素上。
圖片加載過(guò)程
圖片的加載過(guò)程非常講究削罩，透明度瞄勾、曝光度、飽和度3個(gè)指標(biāo)依次變化弥激，效果相當(dāng)細(xì)膩丰榴。
七、文字
字體
英文字體使用Roboto秆撮，中文字體使用Noto四濒。
Roboto有6種字重：Thin、Light职辨、Regular盗蟆、Medium、Bold 和 Black舒裤。
Noto有7種字重：Thin, Light喳资、DemiLight、Regular腾供、Medium仆邓、Bold 和 Black鲜滩。
文字排版
常用字號(hào)：
12sp 小字提示
14sp（桌面端13sp） 正文/按鈕文字
16sp（桌面端15sp） 小標(biāo)題
20sp Appbar文字
24sp 大標(biāo)題
34sp/45sp/56sp/112sp 超大號(hào)文字
長(zhǎng)篇幅正文，每行建議60字符（英文）左右节值。短文本徙硅，建議每行30字符（英文）左右。
八搞疗、布局
所有可操作元素最小點(diǎn)擊區(qū)域尺寸：48dp X 48dp嗓蘑。
柵格系統(tǒng)的最小單位是8dp，一切距離匿乃、尺寸都應(yīng)該是8dp的整數(shù)倍桩皿。以下是一些常見的尺寸與距離：
頂部狀態(tài)欄高度：24dp
Appbar最小高度：56dp
底部導(dǎo)航欄高度：48dp
懸浮按鈕尺寸：56x56dp/40x40dp
用戶頭像尺寸：64x64dp/40x40dp
小圖標(biāo)點(diǎn)擊區(qū)域：48x48dp
側(cè)邊抽屜到屏幕右邊的距離：56dp
卡片間距：8dp
分隔線上下留白：8dp
大多元素的留白距離：16dp
屏幕左右對(duì)齊基線：16dp
文字左側(cè)對(duì)齊基線：72dp
另外注意56dp這個(gè)數(shù)字，許多尺寸可變的控件幢炸，比如對(duì)話框泄隔、菜單等，寬度都可以按56的整數(shù)倍來(lái)設(shè)計(jì)宛徊。
還有非常多規(guī)范梅尤，不詳細(xì)列舉，遵循8dp柵格很容易找到適合的尺寸與距離岩调。平板與PC上留白更多，距離與尺寸要相應(yīng)增大赡盘。
九号枕、組件
Bottom sheets
通常以列表形式出現(xiàn)，支持上下滾動(dòng)陨享。
也可以是網(wǎng)格式的葱淳。
Buttons
按鈕分為懸浮按鈕、凸起按鈕和扁平按鈕3種抛姑。重要性如下遞減：
最重要且隨處用到的操作赞厕，建議使用懸浮按鈕。信息較多時(shí)定硝，選用凸起按鈕可以有效突出重要操作皿桑，但注意紙片不要疊太多層瞳浦。扁平按鈕適合用在簡(jiǎn)單的界面质蕉，例如對(duì)話框中。
使用懸浮按鈕要遵循以下規(guī)則：
建議只用一個(gè)懸浮按鈕
懸浮按鈕可以貼在紙片邊緣或者接縫處屹培，但不要貼在對(duì)話框箱蟆、側(cè)邊抽屜和菜單的邊緣
懸浮按鈕不能被其他元素蓋住沟绪，也不能擋住其他按鈕
列表滾動(dòng)至底部時(shí)，懸浮按鈕應(yīng)該隱藏空猜，防止它擋住列表項(xiàng)
懸浮按鈕的位置不能隨意擺放绽慈，可以貼著左右兩邊的對(duì)齊基線
懸浮按鈕通常觸發(fā)正向的操作恨旱，添加、創(chuàng)建坝疼、收藏之類搜贤。不能觸發(fā)負(fù)面、破壞性或不重要的操作裙士，也不應(yīng)該有數(shù)字角標(biāo)入客。下圖就是懸浮按鈕的錯(cuò)誤使用：
懸浮按鈕有兩種尺寸：56x56dp/40x40dp
Cards
即使在同一個(gè)列表中，卡片的內(nèi)容和布局方式也可以不一樣腿椎。
卡片統(tǒng)一帶有2dp的圓角桌硫。
在以下情況考慮使用卡片：
同時(shí)展現(xiàn)多種不同內(nèi)容
卡片內(nèi)容之間不需要進(jìn)行比較
包含了長(zhǎng)度不確定的內(nèi)容，比如評(píng)論
包含豐富的內(nèi)容與操作項(xiàng)啃炸，比如贊铆隘、滾動(dòng)條、評(píng)論
本該是列表南用，但文字超過(guò)3行
本該是網(wǎng)格膀钠，但需要展現(xiàn)更多文字
卡片最多有兩塊操作區(qū)域。輔助操作區(qū)至多包含兩個(gè)操作項(xiàng)裹虫，更多操作需要使用下拉菜單肿嘲。其余部分都是主操作區(qū)。
Chips
狹小空間內(nèi)表現(xiàn)復(fù)雜信息的一個(gè)組件筑公，比如日期雳窟、聯(lián)系人選擇器。
Dialogs
對(duì)話框包含標(biāo)題匣屡、內(nèi)容和操作項(xiàng)封救。點(diǎn)擊對(duì)話框外的區(qū)域，不會(huì)關(guān)閉對(duì)話框捣作。
通常情況誉结，避免出現(xiàn)滾動(dòng)條∪辏空間不足時(shí)允許滾動(dòng)惩坑，滾動(dòng)條建議默認(rèn)顯示。
對(duì)話框中也拜，取消類操作項(xiàng)放在左邊旭贬，引起變化的操作項(xiàng)放在右邊。要寫明操作項(xiàng)的具體效果搪泳，不要只寫“是”和“否”稀轨。標(biāo)題文字要明確，即使不讀正文內(nèi)容也能知道在干什么岸军，標(biāo)題不要用“確定嗎”這樣的含糊措辭奋刽。
在對(duì)話框中改變內(nèi)容瓦侮，不會(huì)提交數(shù)據(jù)，點(diǎn)擊確定后佣谐，才會(huì)發(fā)生變化肚吏。
對(duì)話框上方不能再層疊對(duì)話框。
還有一種簡(jiǎn)易對(duì)話框狭魂，不帶操作項(xiàng)罚攀。點(diǎn)擊列表內(nèi)容觸發(fā)相應(yīng)操作，并關(guān)閉對(duì)話框雌澄。點(diǎn)擊簡(jiǎn)易對(duì)話框外面斋泄，對(duì)話框會(huì)關(guān)閉，操作取消镐牺。
對(duì)話框可以是全屏式的炫掐，全屏對(duì)話框上方可以再層疊對(duì)話框。左圖是一個(gè)普通界面睬涧，其中的任何改動(dòng)立即生效募胃。右圖是全屏對(duì)話框，其中任何改動(dòng)畦浓，要點(diǎn)擊保存后才生效痹束，點(diǎn)擊X取消。
全屏對(duì)話框右上角的操作項(xiàng)讶请，可以是諸如保存祷嘶、發(fā)送、添加秽梅、分享、更新剿牺、創(chuàng)建之類的操作企垦，不要使用完成、OK晒来、關(guān)閉這樣的含糊措辭钞诡。
只有必填項(xiàng)都填了，右上角的操作項(xiàng)才變?yōu)榭牲c(diǎn)擊狀態(tài)湃崩。
內(nèi)容發(fā)生了改變荧降，點(diǎn)左上角的X，需要有個(gè)確認(rèn)對(duì)話框攒读，提示是否忽略修改朵诫。內(nèi)容沒有發(fā)生改變，點(diǎn)左上角的X薄扁，直接退出全屏對(duì)話框剪返。
對(duì)話框的四周留白比較大废累，通常是24dp。
Dividers
列表中有頭像脱盲、圖片等元素時(shí)邑滨，使用內(nèi)嵌分隔線，左端與文字對(duì)齊钱反。
沒有頭像掖看、圖標(biāo)等元素時(shí)，需要用通欄分隔線面哥。
圖片本身就起到劃定區(qū)域的作用哎壳，相冊(cè)列表不需要分隔線。
謹(jǐn)慎使用分隔線幢竹，留白和小標(biāo)題也能起到分隔作用耳峦。能用留白的地方，優(yōu)先使用留白焕毫。分隔線的層級(jí)高于留白蹲坷。
通欄分隔線的層級(jí)高于內(nèi)嵌分隔線。
Grids
網(wǎng)格由單元格構(gòu)成邑飒，單元格中的瓦片用來(lái)承載內(nèi)容循签。
瓦片可以橫跨多個(gè)單元格。
瓦片包含主操作區(qū)和副操作區(qū)疙咸，副操作區(qū)的位置可以在上下左右4個(gè)角落县匠。在同一個(gè)網(wǎng)格中，主撒轮、副操作區(qū)的內(nèi)容與位置要保持一致乞旦。兩者的操作都應(yīng)該直接生效，不能觸發(fā)菜單题山。
網(wǎng)格只能垂直滾動(dòng)兰粉。單個(gè)瓦片不支持滑動(dòng)手勢(shì)，也不鼓勵(lì)使用拖放操作顶瞳。
網(wǎng)格中的單元格間距是2dp或8dp玖姑。
Lists
列表由行構(gòu)成，行內(nèi)包含瓦片慨菱。如果列表項(xiàng)內(nèi)容文字超過(guò)3行焰络，請(qǐng)改用卡片。如果列表項(xiàng)的主要區(qū)別在于圖片符喝，請(qǐng)改用網(wǎng)格闪彼。
列表包含主操作區(qū)與副操作區(qū)。副操作區(qū)位于列表右側(cè)协饲，其余都是主操作區(qū)备蚓。在同一個(gè)列表中课蔬，主、副操作區(qū)的內(nèi)容與位置要保持一致郊尝。
在同一個(gè)列表中二跋，滑動(dòng)手勢(shì)操作保持一致。
主操作區(qū)與副操作區(qū)的圖標(biāo)或圖形元素是列表控制項(xiàng)流昏，列表的控制項(xiàng)可以是勾選框扎即、開關(guān)、拖動(dòng)排序况凉、展開/收起等操作谚鄙，也可以包含快捷鍵提示、二級(jí)菜單等提示信息刁绒。
Menus
順序固定的菜單闷营，操作頻繁的選項(xiàng)放在上面。順序可變的菜單知市，可以把之前用過(guò)的選項(xiàng)排在前面傻盟，動(dòng)態(tài)排序。菜單盡量不要超過(guò)2級(jí)嫂丙。
當(dāng)前不可用的選項(xiàng)要顯示出來(lái)娘赴，讓用戶知道在特定條件可以觸發(fā)這些操作。
菜單原地展開跟啤，蓋住當(dāng)前選項(xiàng)诽表，當(dāng)前選項(xiàng)應(yīng)該成為菜單的第一項(xiàng)。
菜單的當(dāng)前選項(xiàng)隅肥，始終與當(dāng)前選項(xiàng)水平對(duì)齊竿奏。
靠近屏幕邊緣時(shí)，位置可適當(dāng)錯(cuò)開腥放。
菜單過(guò)長(zhǎng)時(shí)泛啸，需要顯示滾動(dòng)條。
菜單從當(dāng)前選項(xiàng)固定位置展開捉片，不要跟隨點(diǎn)擊位置改變平痰。
菜單到上下留出8dp距離汞舱。
Pickers
日期和時(shí)間選擇器是固定組件伍纫，在小屏幕設(shè)備中，通常以對(duì)話框形式展現(xiàn)昂芜。
Progress & activity
線形進(jìn)度條只出現(xiàn)在紙片的邊緣莹规。
環(huán)形進(jìn)度條也分時(shí)間已知和時(shí)間未知兩種。
環(huán)形進(jìn)度條可以用在懸浮按鈕上泌神。
加載詳細(xì)信息時(shí)良漱，也可以使用進(jìn)度條舞虱。
下拉刷新的動(dòng)畫比較特殊，列表不動(dòng)母市，出現(xiàn)一張帶有環(huán)形進(jìn)度條的紙片矾兜。
Sliders
滑塊左右兩邊可以放置圖標(biāo)。
或是可編輯文本框患久。
非連續(xù)的滑塊椅寺，需要標(biāo)出具體數(shù)值。
Snackbars & toasts
Snackbars至多包含一個(gè)操作項(xiàng)蒋失，不能包含圖標(biāo)返帕。不能出現(xiàn)一個(gè)以上的Snackbars。
Snackbars在移動(dòng)設(shè)備上篙挽，出現(xiàn)在底部荆萤。在PC上，應(yīng)該懸浮在屏幕左下角铣卡。
不一定要用戶響應(yīng)的提示链韭，可以使用Snackbars。非常重要的提示算行，必須用戶來(lái)決定的梧油，應(yīng)該用對(duì)話框。
Snackbars不能遮擋住懸浮按鈕州邢，懸浮按鈕要上移讓出位置儡陨。
Snackbars的留白比較大，24dp量淌。
toasts和Snackbars類似骗村，樣式和位置可以自定義，建議遵循Snackbars的規(guī)則設(shè)計(jì)呀枢。
Subheaders
小標(biāo)題是列表或網(wǎng)格中的特殊瓦片胚股，描述列表內(nèi)容的分類、排序等信息裙秋。
滾動(dòng)時(shí)琅拌，如果列表較長(zhǎng)，小標(biāo)題會(huì)固定在頂部摘刑，直到下一個(gè)小標(biāo)題將它頂上去进宝。
存在浮動(dòng)按鈕時(shí)，小標(biāo)題要讓出位置枷恕，與文字對(duì)齊党晋。
Switches
必須所有選項(xiàng)保持可見時(shí)，才用Radio button。不然可以使用下拉菜單未玻，節(jié)省空間灾而。
在同一個(gè)列表中有多項(xiàng)開關(guān)，建議使用Checkbox扳剿。
單個(gè)開關(guān)項(xiàng)建議使用Switch旁趟。
Tabs
tab只用來(lái)展現(xiàn)不同類型的內(nèi)容，不能當(dāng)導(dǎo)航菜單使用庇绽。tab至少2項(xiàng)轻庆，至多6項(xiàng)。
超出6項(xiàng)敛劝，tab需要變?yōu)闈L動(dòng)式余爆，左右翻頁(yè)。
tab文字要顯示完整夸盟，字號(hào)保持一致蛾方，不能折行，文字與圖標(biāo)不能混用上陕。
tab選中項(xiàng)的下劃線高度是2dp桩砰。
Text fields
簡(jiǎn)單一根橫線就能代表輸入框，可以帶圖標(biāo)释簿。
激活狀態(tài)和錯(cuò)誤狀態(tài)亚隅，橫線的寬度變?yōu)?dp，顏色改變庶溶。
輸入框點(diǎn)擊區(qū)域高度至少48dp煮纵，但橫線并不在點(diǎn)擊區(qū)域的底部，還有8dp距離偏螺。
輸入框提示文字行疏，可以在輸入內(nèi)容后，縮小停留在輸入框左上角套像。
整個(gè)點(diǎn)擊區(qū)域增高酿联，提示文字也是點(diǎn)擊區(qū)域的一部分。
通欄輸入框是沒有橫線的夺巩，這種情況下通常有分隔線將輸入框隔開贞让。
右下角可以加入字?jǐn)?shù)統(tǒng)計(jì)。字?jǐn)?shù)統(tǒng)計(jì)不要默認(rèn)顯示柳譬，字?jǐn)?shù)接近上限時(shí)再顯示出來(lái)喳张。
通欄輸入框也可以有字?jǐn)?shù)統(tǒng)計(jì)，單行的字?jǐn)?shù)統(tǒng)計(jì)顯示在同一行右側(cè)征绎。
錯(cuò)誤提示顯示在輸入框的左下方蹲姐。默認(rèn)提示文本可以轉(zhuǎn)換為錯(cuò)誤提示。
字?jǐn)?shù)限制與錯(cuò)誤提示都會(huì)使點(diǎn)擊區(qū)域增高人柿。
同時(shí)有多個(gè)輸入框錯(cuò)誤時(shí)柴墩，頂部要有一個(gè)全局的錯(cuò)誤提示。
輸入框盡量帶有自動(dòng)補(bǔ)全功能凫岖。
Tooltips
提示只用在小圖標(biāo)上江咳，文字不需要提示。鼠標(biāo)懸停哥放、獲得焦點(diǎn)歼指、手指長(zhǎng)按都可以觸發(fā)提示。
上圖是錯(cuò)誤例子甥雕。提示不能包含富文本踩身，不需要三角箭頭。
觸摸提示（左）和鼠標(biāo)提示（右）的尺寸是不同的社露，背景都帶有90%的透明度挟阻。
Navigation drawer
側(cè)邊抽屜從左側(cè)滑出，占據(jù)整個(gè)屏幕高度峭弟，遵循普通列表的布局規(guī)則附鸽。手機(jī)端的側(cè)邊抽屜距離屏幕右側(cè)56dp。
側(cè)邊抽屜支持滾動(dòng)瞒瘸。如果內(nèi)容過(guò)長(zhǎng)坷备，設(shè)置和幫助反饋可以固定在底部。抽屜收起時(shí)情臭，會(huì)保留之前的滾動(dòng)位置省撑。
列表較短不需要滾動(dòng)時(shí)，設(shè)置和幫助反饋跟隨在列表后面俯在。
十丁侄、設(shè)置界面
設(shè)置和幫助反饋通常放在側(cè)邊抽屜中。如果沒有側(cè)邊抽屜朝巫，則放在Appbar的下拉菜單底部鸿摇。
設(shè)置界面只能包含設(shè)置項(xiàng)，諸如關(guān)于劈猿、反饋之類的界面拙吉，入口應(yīng)該放在其他地方。
設(shè)置項(xiàng)使用通欄分隔線來(lái)分組揪荣。7項(xiàng)以下不必分組筷黔。如果某項(xiàng)獨(dú)立一組，考慮把它放在頂部（重要）或放在底部的“其他”一欄中（不重要）仗颈。設(shè)置項(xiàng)較多時(shí)嘗試合并佛舱，比如把兩個(gè)相關(guān)的勾選項(xiàng)合并成一個(gè)多選項(xiàng)椎例。設(shè)置項(xiàng)非常多時(shí)，使用子界面请祖。
十一订歪、易用性
無(wú)障礙設(shè)計(jì)
material design很重視用戶的廣度增淹，應(yīng)該盡量照顧到殘障人士的體驗(yàn)衔掸。設(shè)計(jì)時(shí)考慮以下使用場(chǎng)景：
沒有聲音
沒有色彩
手機(jī)開啟了高對(duì)比度模式
手機(jī)畫面放大
沒有視覺信息泼诱，使用屏幕閱讀器
只能通過(guò)語(yǔ)音控制
以上多項(xiàng)結(jié)合
并注意以下問題：
無(wú)鼠標(biāo)声滥、純鍵盤操作钦勘。鼠標(biāo)懸停顯示信息讥蟆，也要通過(guò)其他方式展現(xiàn)马胧。
考慮大字號(hào)情況下的使用體驗(yàn)僵朗。
不要只通過(guò)顏色表達(dá)某些信息席纽。
音頻信息也要提供文字或其他視覺呈現(xiàn)捏悬。
為圖片和視頻提供備用的文字信息。
本地化
為阿拉伯語(yǔ)润梯、希伯來(lái)語(yǔ)邮破、波斯語(yǔ)用戶設(shè)計(jì)相反的界面，他們的書寫和閱讀習(xí)慣是從右到左的仆救。
十二抒和、資源（需要科學(xué)上網(wǎng)）
精華資源兩波：
《新鮮熱辣！一組實(shí)用的Material Design風(fēng)格素材彤蔽！》
《該跟上潮流了摧莽！一大波優(yōu)質(zhì)的MATERIAL DESIGN資源免費(fèi)下載》
實(shí)踐
最后，展示一下朋友的項(xiàng)目——云集（http://lydiabox.com）的部分界面顿痪。這是一款瀏覽器镊辕，也是一個(gè)html5應(yīng)用平臺(tái)。功能結(jié)構(gòu)不算復(fù)雜蚁袭，但也有它的特殊性征懈。非常適合用來(lái)理解material design，并嘗試做一些變通揩悄。
