1. 基礎(chǔ)常識(shí)

1.1 主流屏幕尺寸

1.2 圖標(biāo)尺寸

1.3 顏色值

Android 定義顏色color時(shí)有6位或8位值的區(qū)別，6位（如：#0470C4）就是RGB罗晕，值8位（如：#1E000000）頭兩位是透明度，后6位是RGB值檩赢，00是完全透明闪盔，F(xiàn)F是完全不透明结序，比較適中的透明度值是 1E障斋。

不透明度16進(jìn)制值

格式如#00FFFFFF，前兩位代表不透明度的十六進(jìn)制徐鹤。00表示完全透明配喳，F(xiàn)F就是全不透明。依次遞增凳干。

1.4 標(biāo)注

• Android 設(shè)計(jì)規(guī)范中間距單位是 dp，dp 在 Android 機(jī)上不同的密度轉(zhuǎn)換后的 px 是不一樣的被济，所以按照設(shè)計(jì)圖的 px 轉(zhuǎn)換成 dp 也是不一樣的救赐。
  現(xiàn)在，多數(shù)標(biāo)注工具都支持 dp 標(biāo)注功能，比如 MarkMan经磅，如果UI設(shè)計(jì)者是按照1280*720的尺寸設(shè)計(jì)的效果圖泌绣，在標(biāo)注時(shí)選擇xhdpi即可：

使用 MarkMan 進(jìn)行 dp 標(biāo)注

DP/PX在線轉(zhuǎn)換工具：http://pixplicity.com/dp-px-converter/

• 字體大小單位是 sp。

1.5 切圖

注意：切圖素材文件大小盡量保持 <= 200Kb预厌，主要為png格式阿迈。

2. Material Design相關(guān)

Material Design，中文名：質(zhì)感設(shè)計(jì)轧叽，是由 Google 推出的全新的設(shè)計(jì)語(yǔ)言苗沧，谷歌表示，這種設(shè)計(jì)語(yǔ)言旨在為手機(jī)炭晒、平板電腦待逞、臺(tái)式機(jī)和“其他平臺(tái)”提供更一致、更廣泛的“外觀和感覺(jué)”网严。

想要深入了解 Material Design识樱，還是建議有空通讀一遍官方文檔。不過(guò)震束，牢記以下要點(diǎn)怜庸，基本能做到90%了。實(shí)際上，Google 官方的應(yīng)用也有不遵照規(guī)范的地方，不能太拘泥于條條框框咖摹。

Material Design 中文版文檔

2.1 核心思想

Material 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)高度一致燕垃。

2.2 材質(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ì)中的概念访诱，開(kāi)發(fā)人員確實(shí)可以通過(guò)一個(gè)值來(lái)控制元素的海拔高度和投影垫挨。

2.3 動(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ò)程的切威，忽然開(kāi)始、忽然停止的勻速動(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)入子界面鼓择，需要抬升子元素的海拔高度三幻，并展開(kāi)至整個(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á)到令人愉悅的效果

2.4 顏色

顏色不宜過(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% 分隔線]

2.5 圖標(biāo)

• ** 桌面圖標(biāo) **

桌面圖標(biāo)建議模仿現(xiàn)實(shí)中的折紙效果节芥，通過(guò)扁平色彩表現(xiàn)空間和光影。注意避免以下問(wèn)題：

• 不要給彩色元素加投影

• 層疊不要超過(guò)兩層

• 折角不要放在左上角

• 帶投影的元素要完整展現(xiàn)逆害，不能被圖標(biāo)邊緣裁剪

• 如果有折痕头镊，放在圖片中央，并且最多只有一條

• 帶折疊效果的圖標(biāo)魄幕，表面不要有圖案

• 不能透視相艇、彎曲

• ** 小圖標(biāo) **

優(yōu)先使用material design默認(rèn)圖標(biāo)。設(shè)計(jì)小圖標(biāo)時(shí)纯陨，使用最簡(jiǎn)練的圖形來(lái)表達(dá)坛芽，圖形不要帶空間感留储。

活動(dòng)區(qū)域

修飾區(qū)域

小圖標(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)]

2.6 圖片

• ** 選用圖片 **

描述具體事物帅矗，優(yōu)先使用照片。然后可以考慮使用插畫煞烫。

• ** 圖片上的文字 **

圖片上的文字浑此，需要淡淡的遮罩確保其可讀性。深色的遮罩透明度在20%-40%之間滞详，淺色的遮罩透明度在40%-60%之間凛俱。

對(duì)于帶有文字的大幅圖片，遮罩文字區(qū)域茵宪，不要遮住整張圖片最冰。

• ** 提取顏色 **

Android L可以從圖片中提取主色，運(yùn)用在其他UI元素上稀火。

• ** 圖片加載過(guò)程 **

圖片的加載過(guò)程非常講究暖哨，透明度、曝光度凰狞、飽和度3個(gè)指標(biāo)依次變化篇裁，效果相當(dāng)細(xì)膩。

2.7 文字

• 字體

英文字體使用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字符（英文）左右产还。

2.8 布局

所有可操作元素最小點(diǎn)擊區(qū)域尺寸：48dp X 48dp。

柵格系統(tǒng)的最小單位是8dp嘀趟，一切距離脐区、尺寸都應(yīng)該是8dp的整數(shù)倍。以下是一些常見(jiàn)的尺寸與距離：

• 頂部狀態(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)增大。

2.9 組件（Components）

• 底部導(dǎo)航（Bottom navigation）

顯示效果

標(biāo)準(zhǔn)示例

• ** 底部動(dòng)作條（Bottom Sheets） **

底部動(dòng)作條是一個(gè)從屏幕底部邊緣向上滑出的一個(gè)面板巡验，使用這種方式向用戶呈現(xiàn)一組功能。底部動(dòng)作條呈現(xiàn)了簡(jiǎn)單碘耳、清晰显设、無(wú)需額外解釋的一組操作。

通常以列表形式出現(xiàn)辛辨，支持上下滾動(dòng)捕捂。

也可以是網(wǎng)格式的。

• ** 按鈕（Buttons） **

按鈕由文字和/或圖標(biāo)組成斗搞，文字及圖標(biāo)必須能讓人輕易地和點(diǎn)擊后展示的內(nèi)容聯(lián)系起來(lái)指攒。

主要的按鈕有三種:

• 懸浮響應(yīng)按鈕（Floating action button）， 點(diǎn)擊后會(huì)產(chǎn)生墨水?dāng)U散效果的圓形按鈕僻焚。
• 浮動(dòng)按鈕(Raised button)允悦， 常見(jiàn)的方形紙片按鈕，點(diǎn)擊后會(huì)產(chǎn)生墨水?dāng)U散效果虑啤。
• 扁平按鈕(Flat button)局服， 點(diǎn)擊后產(chǎn)生墨水?dāng)U散效果系吩，和浮動(dòng)按鈕的區(qū)別是沒(méi)有浮起的效果恍飘。

懸浮響應(yīng)按鈕

浮動(dòng)按鈕

扁平按鈕

最重要且隨處用到的操作前方，建議使用懸浮按鈕抑进。信息較多時(shí)汞窗，選用凸起按鈕可以有效突出重要操作舀武，但注意紙片不要疊太多層。扁平按鈕適合用在簡(jiǎn)單的界面家乘，例如對(duì)話框中蝗羊。

使用懸浮按鈕要遵循以下規(guī)則：

• 建議只用一個(gè)懸浮按鈕
• 懸浮按鈕可以貼在紙片邊緣或者接縫處，但不要貼在對(duì)話框仁锯、側(cè)邊抽屜和菜單的邊緣
• 懸浮按鈕不能被其他元素蓋住耀找，也不能擋住其他按鈕
• 列表滾動(dòng)至底部時(shí)，懸浮按鈕應(yīng)該隱藏业崖，防止它擋住列表項(xiàng)
• 懸浮按鈕的位置不能隨意擺放野芒，可以貼著左右兩邊的對(duì)齊基線

懸浮按鈕有兩種尺寸：56x56dp/40x40dp

• ** 卡片（Cards） **

卡片是包含一組特定數(shù)據(jù)集的紙片，數(shù)據(jù)集含有各種相關(guān)信息双炕，例如狞悲，關(guān)于單一主題的照片，文本妇斤，和鏈接摇锋。卡片通常是通往更詳細(xì)復(fù)雜信息的入口站超≥┧。卡片有固定的寬度和可變的高度。最大高度限制于可適應(yīng)平臺(tái)上單一視圖的內(nèi)容死相，但如果需要它可以臨時(shí)擴(kuò)展（例如融求，顯示評(píng)論欄）∷愦椋卡片不會(huì)翻轉(zhuǎn)以展示其背后的信息双肤。

**卡片集**是**卡片**的一個(gè)平面布局

即使在同一個(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ū)辩昆。

** 卡片布局準(zhǔn)則 **

字體設(shè)計(jì)
正文：14 sp 或 16 sp
標(biāo)題：24 sp 或更大
扁平按鈕：Roboto Medium, 14 sp, 10 sp 字間距

移動(dòng)設(shè)備上的卡片間距
屏幕邊界與卡片間留白：8 dp
卡片間留白：8 dp

內(nèi)容留白
16 dp

• ** 紙片（Chips ） **

紙片是一種小塊的用來(lái)呈現(xiàn)復(fù)雜實(shí)體的塊，比如說(shuō)日歷的事件或聯(lián)系人旨袒。它可以包含一張圖片汁针，一個(gè)短字符串(必要時(shí)可能被截取的字符串)，或者是其它的一些與實(shí)體對(duì)象有關(guān)的簡(jiǎn)潔的信息砚尽。Chips 可以非常方便的通過(guò)托拽來(lái)操作施无。通過(guò)按壓動(dòng)作可以觸發(fā)懸浮卡片(或者是全屏視圖)中的 Chip 對(duì)應(yīng)實(shí)體的視圖，或者是彈出與 Chip 實(shí)體相關(guān)的操作菜單必孤。

狹小空間內(nèi)表現(xiàn)復(fù)雜信息的一個(gè)組件猾骡，比如日期、聯(lián)系人選擇器敷搪。

• ** 提示框（Dialogs） **

Dialogs 用于提示用戶作一些決定兴想，或者是完成某個(gè)任務(wù)時(shí)需要的一些其它額外的信息。 Dialog 可以是用一種 取消/確定 的簡(jiǎn)單應(yīng)答模式赡勘，也可以是自定義布局的復(fù)雜模式嫂便，比如說(shuō)一些文本設(shè)置或者是文本輸入 。

一些復(fù)雜的操作狮含，尤其是每個(gè)決策都需要相關(guān)解釋說(shuō)明的情況下是不適合使用 Dialog 形式的。

Dialog 包含了一個(gè)標(biāo)題(可選)曼振，內(nèi)容 几迄，事件。
標(biāo)題：主要是用于簡(jiǎn)單描述下選擇類型冰评。它是可選的映胁，要需要的時(shí)候賦值即可。
內(nèi)容：主要是描述要作出一個(gè)什么樣的決定 甲雅。
事件：主要是允許用戶通過(guò)確認(rèn)一個(gè)具體操作來(lái)繼續(xù)下一步活動(dòng)解孙。

• ** 分隔線（Dividers） **

Dividers 主要用于管理和分隔列表和頁(yè)面布局內(nèi)的內(nèi)容，以便讓內(nèi)容生成更好的視覺(jué)效果及空間感抛人。示例中呈現(xiàn)的分隔線是一種弱規(guī)則弛姜，弱到不會(huì)去打擾到用戶對(duì)內(nèi)容的關(guān)注。

列表中有頭像妖枚、圖片等元素時(shí)廷臼，使用內(nèi)嵌分隔線，左端與文字對(duì)齊。

沒(méi)有頭像荠商、圖標(biāo)等元素時(shí)寂恬，需要用通欄分隔線

圖片本身就起到劃定區(qū)域的作用，相冊(cè)列表不需要分隔線

謹(jǐn)慎使用分隔線莱没，留白和小標(biāo)題也能起到分隔作用初肉。能用留白的地方，優(yōu)先使用留白饰躲。分隔線的層級(jí)高于留白牙咏。

通欄分隔線的層級(jí)高于內(nèi)嵌分隔線

• ** 網(wǎng)格（Grids） **

網(wǎng)格列表是一種標(biāo)準(zhǔn)列表視圖的可選組件。網(wǎng)格列表與應(yīng)用于布局和其他可視視圖中的網(wǎng)格有著明顯的區(qū)別属铁。

網(wǎng)格由單元格構(gòu)成眠寿，單元格中的瓦片用來(lái)承載內(nèi)容

瓦片可以橫跨多個(gè)單元格

瓦片內(nèi)容包括主要內(nèi)容（primary content）和次要內(nèi)容(secondary content)。主要內(nèi)容是有著重要區(qū)別的內(nèi)容焦蘑，典型的如圖片盯拱。次要內(nèi)容可以是一個(gè)動(dòng)作按鈕或者文本。

為瓦片內(nèi)容提供一個(gè)默認(rèn)圖片例嘱。
網(wǎng)格只能垂直滾動(dòng)狡逢。單個(gè)瓦片不支持滑動(dòng)手勢(shì)，也不鼓勵(lì)使用拖放操作拼卵。
網(wǎng)格中的單元格間距是2dp或8dp奢浑。

• 列表（Lists）

列表作為一個(gè)單一的連續(xù)元素來(lái)以垂直排列的方式顯示多行條目。

列表由單一連續(xù)的列構(gòu)成腋腮，該列又等分成相同寬度稱為行（rows）的子部分雀彼。行是瓦片（tiles）的容器。瓦片中存放內(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)可以是勾選框、開(kāi)關(guān)嗽交、拖動(dòng)排序卿嘲、展開(kāi)/收起等操作，也可以包含快捷鍵提示夫壁、二級(jí)菜單等提示信息拾枣。

• 菜單（Menus）

順序固定的菜單，操作頻繁的選項(xiàng)放在上面盒让。
順序可變的菜單梅肤，可以把之前用過(guò)的選項(xiàng)排在前面，動(dòng)態(tài)排序邑茄。
菜單盡量不要超過(guò)2級(jí)姨蝴。

當(dāng)前不可用的選項(xiàng)要顯示出來(lái)，讓用戶知道在特定條件可以觸發(fā)這些操作肺缕。

菜單原地展開(kāi)左医，蓋住當(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ò)開(kāi)秕硝。

菜單過(guò)長(zhǎng)時(shí)，需要顯示滾動(dòng)條洲尊。

菜單從當(dāng)前選項(xiàng)固定位置展開(kāi)远豺，不要跟隨點(diǎn)擊位置改變。

菜單到上下留出8dp距離坞嘀。

• 選擇器（Pickers）

選擇器提供了一個(gè)簡(jiǎn)單的方法來(lái)從一個(gè)預(yù)定義集合中選取單個(gè)值躯护。

日期選擇器

時(shí)間選擇器

• 進(jìn)度和動(dòng)態(tài)（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ì)遏弱。

• 副標(biāo)題（Subheaders）

小標(biāo)題是列表或網(wǎng)格中的特殊瓦片，描述列表內(nèi)容的分類塞弊、排序等信息漱逸。

滾動(dòng)時(shí)，如果列表較長(zhǎng)居砖，小標(biāo)題會(huì)固定在頂部虹脯，直到下一個(gè)小標(biāo)題將它頂上去。

存在浮動(dòng)按鈕時(shí)奏候，小標(biāo)題要讓出位置循集，與文字對(duì)齊。

• 選擇控制（Selection controls）

開(kāi)關(guān)允許用戶選擇選擇項(xiàng)蔗草。一共有三種類型的開(kāi)關(guān)：復(fù)選框咒彤、單選按鈕和 on/off 開(kāi)關(guān)。

單選按鈕（Radio button）

復(fù)選框（Checkbox）

開(kāi)關(guān)（Switch）

• Tabs

在一個(gè) app 中咒精，tabs 使在不同的視圖和功能間探索和切換以及瀏覽不同類別的數(shù)據(jù)集合起來(lái)變得簡(jiǎn)單镶柱。

擴(kuò)展的 app bar + tab bar

加入檢索 + app bar + tab bar

默認(rèn)的 app bar + tab bar

默認(rèn)的 app bar + 可滾動(dòng)的 tab bar

和 tab 指示器一樣的字體顏色

被鎖定滾動(dòng)的 tab bar

tab只用來(lái)展現(xiàn)不同類型的內(nèi)容，不能當(dāng)導(dǎo)航菜單使用模叙。tab至少2項(xiàng)歇拆，至多6項(xiàng)。

tab文字要顯示完整范咨，字號(hào)保持一致故觅，不能折行，文字與圖標(biāo)不能混用渠啊。

• 文本字段（Text fields）

文本框可以讓用戶輸入文本输吏。它們可以是單行的，帶或不帶滾動(dòng)條替蛉，也可以是多行的贯溅，并且?guī)в幸粋€(gè)圖標(biāo)拄氯。點(diǎn)擊文本框后顯示光標(biāo)，并自動(dòng)顯示鍵盤它浅。除了輸入译柏，文本框可以進(jìn)行其他任務(wù)操作，如文本選擇（剪切姐霍，復(fù)制艇纺，粘貼）以及數(shù)據(jù)的自動(dòng)查找功能。

簡(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ū)域的一部分

通欄輸入框是沒(méi)有橫線的急迂，這種情況下通常有分隔線將輸入框隔開(kāi)

右下角可以加入字?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ā)提示。

觸摸提示（左）和鼠標(biāo)提示（右）的尺寸是不同的愤估，背景都帶有90%的透明度帮辟。

• Steppers

• Toolbars

2.10 模式（patterns）

• 空狀態(tài)（Empty states）

• 錯(cuò)誤（Errors）

• 導(dǎo)航（Navigation）

Tabs

Bottom navigation bar 1

Bottom navigation bar 2

Navigation drawer

• 導(dǎo)航抽屜（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è)置和幫助反饋跟隨在列表后面羡棵。

• 通知（Notifications）

• 權(quán)限（Permissions）

• 搜索（Search）

• 設(shè)置界面（Settings）

設(shè)置和幫助反饋通常放在側(cè)邊抽屜中壹若。如果沒(méi)有側(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í)，使用子界面轩端。

• 點(diǎn)擊刷新（Swipe to refresh）

2.11 資源

• 界面模板
  移動(dòng)設(shè)備：Mobile Whiteframe - 2.23 MB (.ai)
  平板設(shè)備：Tablet Whiteframe
  - 1.39 MB (.ai)
  桌面環(huán)境：Desktop Whiteframe
  - 89.40 MB (.ai)
  線稿（Whiteframes）：
  Whiteframes
  - 14.38 MB (.ai)
  Whiteframes
  - 2.92 MB (.sketch)
• 調(diào)色板
  Color Swatches
  - 0.02 MB (.zip)
• 字體
  Roboto Font
  - 1.21 MB (.zip)
  Roboto specimen booklet
  - 1.67 MB (.pdf)
  Noto Font 簡(jiǎn)體中文
  - 115.45 MB (.zip)
• 設(shè)備標(biāo)準(zhǔn)
• UI組件
  Components sticker sheet for Sketch
  - 23.51 MB (.sketch)
  Components sticker sheet for Adobe After Effects
  - 136.72 MB (.zip)
  Components sticker sheet for Adobe Photoshop
  - 94.86 MB (.psd)
  Components sticker sheet for Adobe Illustrator
  - 50.07 MB (.ai)
• 系統(tǒng)圖標(biāo)
  System icon sticker sheet
  - 0.39 MB (.ai)

2.12 實(shí)踐

知乎安卓客戶端Material Design實(shí)戰(zhàn)規(guī)范:http://www.tuyiyi.com/v/40056.html