自從Material Design發(fā)布以來鄙漏，我就在一直收集相關素材與資源嗤谚，研究別人的作品。這套設計風格非常鮮明怔蚌，帶有濃郁的Google式嚴謹和理性哲學巩步，深得我心。實際上桦踊，光是研究素材和別人作品椅野，就能發(fā)現(xiàn)一些明顯的規(guī)律，做出幾分相似的設計籍胯。這樣半吊子的狀態(tài)一直保持到現(xiàn)在竟闪，最近有時間通讀一遍官方的設計指南，終于有了深入的理解杖狼。

Material Design的設計規(guī)范細致入微炼蛤，需要消化好一陣子。越讀越感受到它的妙處蝶涩，假如每個細節(jié)都嚴格遵照Material Design的思想來設計理朋，哪怕你不是設計人員，你的產(chǎn)品也一定不會難用和難看绿聘。當然暗挑，作為設計師，要求就更高了斜友。設計文檔本身炸裆，就提供了一種很好的方式，幫你從各個角度思考和構建自己產(chǎn)品的規(guī)范鲜屏。但在這之前烹看，先要好好整理一下學習筆記国拇。要打破規(guī)矩，必先掌握規(guī)矩惯殊。

（多圖酱吝，WIFI狀態(tài)下查看更佳）

1. 核心思想

Material Design的核心思想，就是把物理世界的體驗帶進屏幕土思。去掉現(xiàn)實中的雜質和隨機性务热，保留其最原始純凈的形態(tài)、空間關系己儒、變化與過渡崎岂，配合虛擬世界的靈活特性，還原最貼近真實的體驗闪湾，達到簡潔與直觀的效果冲甘。

Material Design是最重視跨平臺體驗的一套設計語言。由于規(guī)范嚴格細致途样，保證它在各個平臺使用體驗高度一致江醇。不過目前還只有Google自家的服務這么做，畢竟其他平臺有自己的規(guī)范與風格何暇。

2. 材質與空間

材質

material design中陶夜，最重要的信息載體就是魔法紙片。紙片層疊裆站、合并律适、分離，擁有現(xiàn)實中的厚度遏插、慣性和反饋，同時擁有液體的一些特性纠修，能夠自由伸展變形胳嘲。

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

①紙片可以伸縮扣草、改變形狀

②紙片變形時可以裁剪內容了牛，比如紙片縮小時，內容大小不變辰妙，而是隱藏超出部分

③多張紙片可以拼接成一張

④一張紙片可以分裂成多張

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

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

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

②層疊的紙片，海報高度不能相同

③紙片不能互相穿透

④紙片不能彎折

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

空間

Material Design引入了z軸的概念蛙婴，z軸垂直于屏幕，用來表現(xiàn)元素的層疊關系尔破。z值（海拔高度）越高街图，元素離界面底層（水平面）越遠浇衬，投影越重。這里有一個前提餐济，所有的元素的厚度都是1dp耘擂。

所有元素都有默認的海拔高度，對它進行操作會抬升它的海拔高度絮姆，操作結束后醉冤，它應該落回默認海拔高度。同一種元素篙悯，同樣的操作晕鹊，抬升的高度是一致的。

注意：這不止是設計中的概念蚕断，開發(fā)人員確實可以通過一個值來控制元素的海拔高度和投影迹冤。

3. 動畫

Material Design重視動畫效果，它反復強調一點：動畫不只是裝飾移宅，它有含義归粉，能表達元素、界面之間的關系漏峰，具備功能上的作用糠悼。

easing

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

水波反饋

所有可點擊的元素悼枢，都應該有這樣的反饋效果。通過這個動畫脾拆，將點擊的位置與所操作的元素關聯(lián)起來馒索，體現(xiàn)了material design動畫的功能性。

轉場效果

通過過渡動畫名船，表達界面之間的空間與層級關系绰上，并且跨界面?zhèn)鬟f信息。

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

多個相似元素疯趟，動畫的設計要有先后次序拘哨，起到引導視線的作用。

相似元素的運動信峻，要符合統(tǒng)一的規(guī)律倦青。

細節(jié)動畫

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

4. 顏色

顏色不宜過多盹舞。選取一種主色产镐、一種輔助色（非必需），在此基礎上進行明度踢步、飽和度變化癣亚，構成配色方案。

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

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

其余顏色通過純黑#000000與純白#ffffff的透明度變化來展現(xiàn)（包括圖標和分隔線）兼丰，而且透明度限定了幾個值玻孟。

黑色：[87% 普通文字] [54% 減淡文字] [26% 禁用狀態(tài)/提示文字] [12% 分隔線]

白色：[100% 普通文字] [70% 減淡文字] [30% 禁用狀態(tài)/提示文字] [12% 分隔線]

5. 圖標

桌面圖標

桌面圖標尺寸是48dp X 48dp。

桌面圖標建議模仿現(xiàn)實中的折紙效果鳍征，通過扁平色彩表現(xiàn)空間和光影黍翎。注意避免以下問題：

①不要給彩色元素加投影

②層疊不要超過兩層

③折角不要放在左上角

④帶投影的元素要完整展現(xiàn)，不能被圖標邊緣裁剪

⑤如果有折痕艳丛，放在圖片中央匣掸，并且最多只有一條

⑥帶折疊效果的圖標，表面不要有圖案

⑦不能透視氮双、彎曲

常規(guī)形狀可以遵循幾套固定柵格設計碰酝。

小圖標

優(yōu)先使用Material Design默認圖標。設計小圖標時戴差，使用最簡練的圖形來表達送爸，圖形不要帶空間感。

小圖標尺寸是24dp X 24dp造挽。圖形限制在中央20dp X 20dp區(qū)域內。

小圖標同樣有柵格系統(tǒng)弄痹。線條饭入、空隙盡量保持2dp寬，圓角半徑2dp肛真。特殊情況相應調整谐丢。

小圖標的顏色使用純黑與純白，通過透明度調整：

黑色：[54% 正常狀態(tài)] [26% 禁用狀態(tài)]

白色：[100% 正常狀態(tài)] [30% 禁用狀態(tài)]

6. 圖片

選用圖片

描述具體事物，優(yōu)先使用照片乾忱。然后可以考慮使用插畫讥珍。

圖片上的文字

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

對于帶有文字的大幅圖片蹄葱，遮罩文字區(qū)域氏义，不要遮住整張圖片。

可以使用半透明的主色蓋住圖片图云。

提取顏色

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

圖片加載過程

圖片的加載過程非常講究竣况，透明度克婶、曝光度、飽和度3個指標依次變化丹泉，效果相當細膩情萤。

7. 文字

字體

英文字體使用Roboto，中文字體使用Noto嘀掸。

Roboto有6種字重：Thin, Light, Regular, Medium, Bold 和 Black紫岩。

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

文字排版

常用字號：

● 12sp 小字提示

● 14sp（桌面端13sp） 正文/按鈕文字

● 16sp（桌面端15sp） 小標題

● 20sp Appbar文字

● 24sp 大標題

● 34sp/45sp/56sp/112sp 超大號文字

長篇幅正文泉蝌，每行建議60字符（英文）左右。短文本揩晴，建議每行30字符（英文）左右勋陪。

8. 布局

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

柵格系統(tǒng)的最小單位是8dp硫兰，一切距離诅愚、尺寸都應該是8dp的整數(shù)倍。以下是一些常見的尺寸與距離：

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

● Appbar最小高度：56dp?

● 底部導航欄高度：48dp?

● 懸浮按鈕尺寸：56x56dp/40x40dp?

● 用戶頭像尺寸：64x64dp/40x40dp?

● 小圖標點擊區(qū)域：48x48dp?

● 側邊抽屜到屏幕右邊的距離：56dp?

● 卡片間距：8dp?

● 分隔線上下留白：8dp

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

● 屏幕左右對齊基線：16dp

● 文字左側對齊基線：72dp?

另外注意56dp這個數(shù)字劫映，許多尺寸可變的控件违孝，比如對話框、菜單等泳赋，寬度都可以按56的整數(shù)倍來設計雌桑。

還有非常多規(guī)范，不詳細列舉祖今，遵循8dp柵格很容易找到適合的尺寸與距離校坑。平板與PC上留白更多拣技，距離與尺寸要相應增大。

9. 組件

Bottom sheets

通常以列表形式出現(xiàn)耍目，支持上下滾動膏斤。

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

Buttons

按鈕分為懸浮按鈕邪驮、凸起按鈕和扁平按鈕3種莫辨。重要性如下遞減：

最重要且隨處用到的操作，建議使用懸浮按鈕耕捞。信息較多時衔掸，選用凸起按鈕可以有效突出重要操作，但注意紙片不要疊太多層俺抽。扁平按鈕適合用在簡單的界面敞映，例如對話框中。

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

● 建議只用一個懸浮按鈕

● 懸浮按鈕可以貼在紙片邊緣或者接縫處磷斧，但不要貼在對話框振愿、側邊抽屜和菜單的邊緣?

● 懸浮按鈕不能被其他元素蓋住，也不能擋住其他按鈕?

● 列表滾動至底部時弛饭，懸浮按鈕應該隱藏冕末，防止它擋住列表項?

● 懸浮按鈕的位置不能隨意擺放，可以貼著左右兩邊的對齊基線?

懸浮按鈕通常觸發(fā)正向的操作侣颂，添加档桃、創(chuàng)建、收藏之類憔晒。不能觸發(fā)負面藻肄、破壞性或不重要的操作，也不應該有數(shù)字角標拒担。下圖就是懸浮按鈕的錯誤使用：

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

Cards

即使在同一個列表中嘹屯，卡片的內容和布局方式也可以不一樣。

卡片統(tǒng)一帶有2dp的圓角从撼。

在以下情況考慮使用卡片：

● 同時展現(xiàn)多種不同內容?

● 卡片內容之間不需要進行比較?

● 包含了長度不確定的內容州弟，比如評論?

● 包含豐富的內容與操作項，比如贊低零、滾動條婆翔、評論

● 本該是列表，但文字超過3行

● 本該是網(wǎng)格掏婶，但需要展現(xiàn)更多文字

卡片最多有兩塊操作區(qū)域啃奴。輔助操作區(qū)至多包含兩個操作項，更多操作需要使用下拉菜單气堕。其余部分都是主操作區(qū)纺腊。

Chips

狹小空間內表現(xiàn)復雜信息的一個組件，比如日期茎芭、聯(lián)系人選擇器揖膜。

Dialogs

對話框包含標題耸别、內容和操作項沸手。點擊對話框外的區(qū)域黎茎，不會關閉對話框苦丁。

通常情況砾莱，避免出現(xiàn)滾動條斤寇「新郏空間不足時允許滾動焚鲜，滾動條建議默認顯示垦页。

對話框中雀费，取消類操作項放在左邊，引起變化的操作項放在右邊痊焊。要寫明操作項的具體效果盏袄，不要只寫“是”和“否”。標題文字要明確薄啥，即使不讀正文內容也能知道在干什么辕羽，標題不要用“確定嗎”這樣的含糊措辭。

在對話框中改變內容垄惧，不會提交數(shù)據(jù)刁愿，點擊確定后，才會發(fā)生變化到逊。

對話框上方不能再層疊對話框铣口。

還有一種簡易對話框，不帶操作項蕾管。點擊列表內容觸發(fā)相應操作枷踏，并關閉對話框。點擊簡易對話框外面掰曾，對話框會關閉旭蠕，操作取消。

對話框可以是全屏式的旷坦，全屏對話框上方可以再層疊對話框掏熬。左圖是一個普通界面，其中的任何改動立即生效秒梅。右圖是全屏對話框旗芬，其中任何改動，要點擊保存后才生效捆蜀，點擊X取消疮丛。

全屏對話框右上角的操作項幔嫂，可以是諸如保存、發(fā)送誊薄、添加履恩、分享、更新呢蔫、創(chuàng)建之類的操作切心，不要使用完成、OK片吊、關閉這樣的含糊措辭绽昏。

只有必填項都填了，右上角的操作項才變?yōu)榭牲c擊狀態(tài)俏脊。

內容發(fā)生了改變全谤，點左上角的X，需要有個確認對話框爷贫，提示是否忽略修改啼县。內容沒有發(fā)生改變，點左上角的X沸久，直接退出全屏對話框季眷。

對話框的四周留白比較大，通常是24dp卷胯。

Dividers

列表中有頭像子刮、圖片等元素時，使用內嵌分隔線窑睁，左端與文字對齊挺峡。

沒有頭像、圖標等元素時担钮，需要用通欄分隔線橱赠。

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

謹慎使用分隔線狭姨，留白和小標題也能起到分隔作用。能用留白的地方苏遥，優(yōu)先使用留白饼拍。分隔線的層級高于留白。

通欄分隔線的層級高于內嵌分隔線田炭。

Grids

網(wǎng)格由單元格構成师抄，單元格中的瓦片用來承載內容。

瓦片可以橫跨多個單元格教硫。

瓦片包含主操作區(qū)和副操作區(qū)叨吮，副操作區(qū)的位置可以在上下左右4個角落辆布。在同一個網(wǎng)格中，主茶鉴、副操作區(qū)的內容與位置要保持一致谚殊。兩者的操作都應該直接生效，不能觸發(fā)菜單蛤铜。

網(wǎng)格只能垂直滾動。單個瓦片不支持滑動手勢丛肢，也不鼓勵使用拖放操作围肥。

網(wǎng)格中的單元格間距是2dp或8dp。

Lists

列表由行構成蜂怎，行內包含瓦片穆刻。如果列表項內容文字超過3行，請改用卡片杠步。如果列表項的主要區(qū)別在于圖片氢伟，請改用網(wǎng)格。

列表包含主操作區(qū)與副操作區(qū)幽歼。副操作區(qū)位于列表右側朵锣，其余都是主操作區(qū)。在同一個列表中甸私，主诚些、副操作區(qū)的內容與位置要保持一致。

在同一個列表中皇型，滑動手勢操作保持一致诬烹。

主操作區(qū)與副操作區(qū)的圖標或圖形元素是列表控制項，列表的控制項可以是勾選框弃鸦、開關绞吁、拖動排序、展開/收起等操作唬格，也可以包含快捷鍵提示家破、二級菜單等提示信息。

Menus

順序固定的菜單购岗，操作頻繁的選項放在上面员舵。順序可變的菜單，可以把之前用過的選項排在前面藕畔，動態(tài)排序马僻。菜單盡量不要超過2級。

當前不可用的選項要顯示出來注服，讓用戶知道在特定條件可以觸發(fā)這些操作韭邓。

菜單原地展開措近，蓋住當前選項，當前選項應該成為菜單的第一項女淑。

菜單的當前選項瞭郑，始終與當前選項水平對齊。

靠近屏幕邊緣時鸭你，位置可適當錯開屈张。

菜單過長時，需要顯示滾動條袱巨。

菜單從當前選項固定位置展開阁谆，不要跟隨點擊位置改變。

菜單到上下留出8dp距離愉老。

Pickers

日期和時間選擇器是固定組件场绿，在小屏幕設備中，通常以對話框形式展現(xiàn)嫉入。

Progress & activity

線形進度條只出現(xiàn)在紙片的邊緣焰盗。

環(huán)形進度條也分時間已知和時間未知兩種。

環(huán)形進度條可以用在懸浮按鈕上咒林。

加載詳細信息時熬拒，也可以使用進度條。

下拉刷新的動畫比較特殊垫竞，列表不動梦湘，出現(xiàn)一張帶有環(huán)形進度條的紙片。

Sliders

滑塊左右兩邊可以放置圖標件甥。

或是可編輯文本框捌议。

非連續(xù)的滑塊，需要標出具體數(shù)值引有。

Snackbars & toasts

Snackbars至多包含一個操作項瓣颅，不能包含圖標。不能出現(xiàn)一個以上的Snackbars譬正。

Snackbars在移動設備上宫补，出現(xiàn)在底部。在PC上曾我，應該懸浮在屏幕左下角粉怕。

不一定要用戶響應的提示，可以使用Snackbars抒巢。非常重要的提示贫贝，必須用戶來決定的，應該用對話框。

Snackbars不能遮擋住懸浮按鈕稚晚，懸浮按鈕要上移讓出位置崇堵。

Snackbars的留白比較大，24dp客燕。

toasts和Snackbars類似鸳劳，樣式和位置可以自定義，建議遵循Snackbars的規(guī)則設計也搓。

Subheaders

小標題是列表或網(wǎng)格中的特殊瓦片赏廓，描述列表內容的分類、排序等信息傍妒。

滾動時幔摸，如果列表較長，小標題會固定在頂部拍顷，直到下一個小標題將它頂上去。

存在浮動按鈕時山上，小標題要讓出位置囊扳，與文字對齊俄认。

Switches

必須所有選項保持可見時，才用Radio button踏揣。不然可以使用下拉菜單，節(jié)省空間匾乓。

在同一個列表中有多項開關捞稿，建議使用Checkbox。

單個開關項建議使用Switch拼缝。

Tabs

tab只用來展現(xiàn)不同類型的內容娱局，不能當導航菜單使用。tab至少2項咧七，至多6項衰齐。

超出6項，tab需要變?yōu)闈L動式继阻，左右翻頁耻涛。

tab文字要顯示完整，字號保持一致瘟檩，不能折行抹缕，文字與圖標不能混用。

tab選中項的下劃線高度是2dp墨辛。

Text fields

簡單一根橫線就能代表輸入框卓研，可以帶圖標。

激活狀態(tài)和錯誤狀態(tài)睹簇，橫線的寬度變?yōu)?dp鉴分，顏色改變哮幢。

輸入框點擊區(qū)域高度至少48dp，但橫線并不在點擊區(qū)域的底部志珍，還有8dp距離橙垢。

輸入框提示文字，可以在輸入內容后伦糯，縮小停留在輸入框左上角柜某。

整個點擊區(qū)域增高，提示文字也是點擊區(qū)域的一部分敛纲。

通欄輸入框是沒有橫線的喂击，這種情況下通常有分隔線將輸入框隔開。

右下角可以加入字數(shù)統(tǒng)計淤翔。字數(shù)統(tǒng)計不要默認顯示翰绊，字數(shù)接近上限時再顯示出來。

通欄輸入框也可以有字數(shù)統(tǒng)計旁壮，單行的字數(shù)統(tǒng)計顯示在同一行右側监嗜。

錯誤提示顯示在輸入框的左下方。默認提示文本可以轉換為錯誤提示抡谐。

字數(shù)限制與錯誤提示都會使點擊區(qū)域增高裁奇。

同時有多個輸入框錯誤時，頂部要有一個全局的錯誤提示麦撵。

輸入框盡量帶有自動補全功能刽肠。

Tooltips

提示只用在小圖標上，文字不需要提示免胃。鼠標懸停音五、獲得焦點、手指長按都可以觸發(fā)提示羔沙。

上圖是錯誤例子放仗。提示不能包含富文本，不需要三角箭頭撬碟。

觸摸提示（左）和鼠標提示（右）的尺寸是不同的诞挨，背景都帶有90%的透明度。

Navigation drawer

側邊抽屜從左側滑出呢蛤，占據(jù)整個屏幕高度惶傻，遵循普通列表的布局規(guī)則。手機端的側邊抽屜距離屏幕右側56dp其障。

側邊抽屜支持滾動银室。如果內容過長，設置和幫助反饋可以固定在底部。抽屜收起時蜈敢，會保留之前的滾動位置辜荠。

列表較短不需要滾動時，設置和幫助反饋跟隨在列表后面抓狭。

10. 設置界面

設置和幫助反饋通常放在側邊抽屜中伯病。如果沒有側邊抽屜，則放在Appbar的下拉菜單底部否过。

設置界面只能包含設置項午笛，諸如關于、反饋之類的界面苗桂，入口應該放在其他地方药磺。

設置項使用通欄分隔線來分組。7項以下不必分組煤伟。如果某項獨立一組癌佩，考慮把它放在頂部（重要）或放在底部的“其他”一欄中（不重要）。設置項較多時嘗試合并便锨，比如把兩個相關的勾選項合并成一個多選項围辙。設置項非常多時，使用子界面鸿秆。

作者：可樂橙