重磅教程！幫你全面徹底搞定MATERIAL DESIGN的學習筆記

自從Material design發布以來，可樂橙就在一直收集相關素材與資源，研究別人的作品。這套設計風格非常鮮明，帶有濃郁的Google式嚴謹和理性哲學，深得我心。 實際上，光是研究素材和別人作品，就能發現一些明顯的規律，做出幾分相似的設計。這樣半吊子的狀態一直保持到現在，最近有時間通讀一遍官方的設計指南，終 于有了深入的理解。在 朋友的項目 中實踐了一番，雖然很抱歉拿朋友開刀，不過他對整體效果似乎還算滿意。

Material design的設計規范細致入微，需要消化好一陣子。越讀越感受到它的妙處，假如每個細節都嚴格遵照Material design的思想來設計，哪怕你不是設計人員，你的產品也一定不會難用和難看。當然，作為設計師，要求就更高了。設計文檔本身，就提供了一種很好的方 式，幫你從各個角度思考和構建自己產品的規范。但在這之前，先要好好整理一下學習筆記。要打破規矩，必先掌握規矩。

由于只是筆記，我會寫得盡量簡單。并且省略掉一些可樂橙認為設計師都已經掌握的信息。想要深入了解Material design，還是建議有空通讀一遍官方文檔。不過，牢記以下要點，基本能做到90%了。實際上，Google官方的應用也有不遵照規范的地方，不能太拘 泥于條條框框。

一、核心思想

aterial design的核心思想，就是

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

二、材質與空間

材質

Material design中，最重要的信息載體就是 魔法紙片 。紙片層疊、合并、分離，擁有現實中的厚度、慣性和反饋，同時擁有液體的一些特性，能夠自由伸展變形。

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

1. 紙片可以伸縮、改變形狀；
2. 紙片變形時可以裁剪內容，比如紙片縮小時，內容大小不變，而是隱藏超出部分；
3. 多張紙片可以拼接成一張；
4. 一張紙片可以分裂成多張；
5. 紙片可以在任何位置憑空出現；

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

1. 一項操作不能同時觸發兩張紙片的反饋；
2. 層疊的紙片，海報高度不能相同；
3. 紙片不能互相穿透；
4. 紙片不能彎折；
5. 紙片不能產生透視，必須平行于屏幕；

空間

Material design引入了z軸的概念，z軸垂直于屏幕，用來表現元素的層疊關系。z值（海拔高度）越高，元素離界面底層（水平面）越遠，投影越重。這里有一個前提，所有的元素的厚度都是1dp。

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

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

三、動畫

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

easing

動畫要貼近真實世界，就要重視easing。物理世界中的運動和變化都是有加速和減速過程的，忽然開始、忽然停止的勻速動畫顯得機械而不真實。考慮動畫的easing，要先考慮它在現實世界中的運動規律。

水波反饋

所有可點擊的元素，都應該有這樣的反饋效果。通過這個動畫，將點擊的位置與所操作的元素關聯起來，體現了Material design動畫的功能性。

轉場效果

通過過渡動畫，表達界面之間的空間與層級關系，并且跨界面傳遞信息。

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

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

相似元素的運動，要符合統一的規律。

細節動畫

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

四、顏色

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

Appbar背景使用主色，狀態欄背景使用深一級的主色或20%透明度的純黑。

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

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

延伸閱讀： 《超方便！Material Design專用在線配色工具》

五、圖標

桌面圖標

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

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

1. 不要給彩色元素加投影；
2. 層疊不要超過兩層；
3. 折角不要放在左上角；
4. 帶投影的元素要完整展現，不能被圖標邊緣裁剪；
5. 如果有折痕，放在圖片中央，并且最多只有一條；
6. 帶折疊效果的圖標，表面不要有圖案；
7. 不能透視、彎曲；

常規形狀可以遵循幾套固定柵格設計。

小圖標

優先使用material design默認圖標。設計小圖標時，使用最簡練的圖形來表達，圖形不要帶空間感。

小圖標尺寸是24dp X 24dp。圖形限制在中央20dp X 20dp區域內。

小圖標同樣有柵格系統。線條、空隙盡量保持2dp寬，圓角半徑2dp。特殊情況相應調整。

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

六、圖片

選用圖片

描述具體事物，優先使用照片。然后可以考慮使用插畫。

圖片上的文字

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

對于帶有文字的大幅圖片，遮罩文字區域，不要遮住整張圖片。

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

提取顏色

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

圖片加載過程

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

七、文字

字體

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

Roboto有6種字重：Thin、Light、Regular、Medium、Bold 和 Black。

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 超大號文字；

長篇幅正文，每行建議60字符（英文）左右。短文本，建議每行30字符（英文）左右。

八、布局

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

柵格系統的最小單位是8dp，一切距離、尺寸都應該是8dp的整數倍。以下是一些常見的尺寸與距離：

1. 頂部狀態欄高度：24dp；
2. Appbar最小高度：56dp；
3. 底部導航欄高度：48dp；
4. 懸浮按鈕尺寸：56x56dp/40x40dp；
5. 用戶頭像尺寸：64x64dp/40x40dp；
6. 小圖標點擊區域：48x48dp；
7. 側邊抽屜到屏幕右邊的距離：56dp；
8. 卡片間距：8dp；
9. 分隔線上下留白：8dp；
10. 大多元素的留白距離：16dp；
11. 屏幕左右對齊基線：16dp；
12. 文字左側對齊基線：72dp；

另外注意56dp這個數字，許多尺寸可變的控件，比如對話框、菜單等，寬度都可以按56的整數倍來設計。

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

九、組件

Bottom sheets

通常以列表形式出現，支持上下滾動。

也可以是網格式的。

Buttons

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

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

使用懸浮按鈕要遵循以下規則：

1. 建議只用一個懸浮按鈕；
2. 懸浮按鈕可以貼在紙片邊緣或者接縫處，但不要貼在對話框、側邊抽屜和菜單的邊緣；
3. 懸浮按鈕不能被其他元素蓋住，也不能擋住其他按鈕；
4. 列表滾動至底部時，懸浮按鈕應該隱藏，防止它擋住列表項；
5. 懸浮按鈕的位置不能隨意擺放，可以貼著左右兩邊的對齊基線；

懸浮按鈕通常觸發正向的操作，添加、創建、收藏之類。不能觸發負面、破壞性或不重要的操作，也不應該有數字角標。下圖就是懸浮按鈕的錯誤使用：

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

Cards

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

卡片統一帶有2dp的圓角。

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

1. 同時展現多種不同內容；
2. 卡片內容之間不需要進行比較；
3. 包含了長度不確定的內容，比如評論；
4. 包含豐富的內容與操作項，比如贊、滾動條、評論；
5. 本該是列表，但文字超過3行；
6. 本該是網格，但需要展現更多文字；

卡片最多有兩塊操作區域。輔助操作區至多包含兩個操作項，更多操作需要使用下拉菜單。其余部分都是主操作區。

Chips

狹小空間內表現復雜信息的一個組件，比如日期、聯系人選擇器。

Dialogs

對話框包含標題、內容和操作項。點擊對話框外的區域，不會關閉對話框。

通常情況，避免出現滾動條。空間不足時允許滾動，滾動條建議默認顯示。

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

在對話框中改變內容，不會提交數據，點擊確定后，才會發生變化。

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

還有一種簡易對話框，不帶操作項。點擊列表內容觸發相應操作，并關閉對話框。點擊簡易對話框外面，對話框會關閉，操作取消。

對話框可以是全屏式的，全屏對話框上方可以再層疊對話框。左圖是一個普通界面，其中的任何改動立即生效。右圖是全屏對話框，其中任何改動，要點擊保存后才生效，點擊X取消。

全屏對話框右上角的操作項，可以是諸如保存、發送、添加、分享、更新、創建之類的操作，不要使用完成、OK、關閉這樣的含糊措辭。

只有必填項都填了，右上角的操作項才變為可點擊狀態。

內容發生了改變，點左上角的X，需要有個確認對話框，提示是否忽略修改。內容沒有發生改變，點左上角的X，直接退出全屏對話框。

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

Dividers

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

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

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

謹慎使用分隔線，留白和小標題也能起到分隔作用。能用留白的地方，優先使用留白。分隔線的層級高于留白。

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

Grids

網格由單元格構成，單元格中的瓦片用來承載內容。

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

瓦片包含主操作區和副操作區，副操作區的位置可以在上下左右4個角落。在同一個網格中，主、副操作區的內容與位置要保持一致。兩者的操作都應該直接生效，不能觸發菜單。

網格只能垂直滾動。單個瓦片不支持滑動手勢，也不鼓勵使用拖放操作。

網格中的單元格間距是2dp或8dp。

Lists

列表由行構成，行內包含瓦片。如果列表項內容文字超過3行，請改用卡片。如果列表項的主要區別在于圖片，請改用網格。

列表包含主操作區與副操作區。副操作區位于列表右側，其余都是主操作區。在同一個列表中，主、副操作區的內容與位置要保持一致。

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

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

Menus

順序固定的菜單，操作頻繁的選項放在上面。順序可變的菜單，可以把之前用過的選項排在前面，動態排序。菜單盡量不要超過2級。

當前不可用的選項要顯示出來，讓用戶知道在特定條件可以觸發這些操作。

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

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

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

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

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

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

Pickers

日期和時間選擇器是固定組件，在小屏幕設備中，通常以對話框形式展現。

Progress activity

線形進度條只出現在紙片的邊緣。

環形進度條也分時間已知和時間未知兩種。

環形進度條可以用在懸浮按鈕上。

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

下拉刷新的動畫比較特殊，列表不動，出現一張帶有環形進度條的紙片。

Sliders

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

或是可編輯文本框。

非連續的滑塊，需要標出具體數值。

Snackbars toasts

Snackbars至多包含一個操作項，不能包含圖標。不能出現一個以上的Snackbars。

Snackbars在移動設備上，出現在底部。在PC上，應該懸浮在屏幕左下角。

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

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

Snackbars的留白比較大，24dp。

toasts和Snackbars類似，樣式和位置可以自定義，建議遵循Snackbars的規則設計。

Subheaders

小標題是列表或網格中的特殊瓦片，描述列表內容的分類、排序等信息。

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

存在浮動按鈕時，小標題要讓出位置，與文字對齊。

Switches

必須所有選項保持可見時，才用Radio button。不然可以使用下拉菜單，節省空間。

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

單個開關項建議使用Switch。

Tabs

tab只用來展現不同類型的內容，不能當導航菜單使用。tab至少2項，至多6項。

超出6項，tab需要變為滾動式，左右翻頁。

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

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

Text fields

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

激活狀態和錯誤狀態，橫線的寬度變為2dp，顏色改變。

輸入框點擊區域高度至少48dp，但橫線并不在點擊區域的底部，還有8dp距離。

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

整個點擊區域增高，提示文字也是點擊區域的一部分。

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

右下角可以加入字數統計。字數統計不要默認顯示，字數接近上限時再顯示出來。

通欄輸入框也可以有字數統計，單行的字數統計顯示在同一行右側。

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

字數限制與錯誤提示都會使點擊區域增高。

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

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

Tooltips

提示只用在小圖標上，文字不需要提示。鼠標懸停、獲得焦點、手指長按都可以觸發提示。

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

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

Navigation drawer

側邊抽屜從左側滑出，占據整個屏幕高度，遵循普通列表的布局規則。手機端的側邊抽屜距離屏幕右側56dp。

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

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

十、設置界面

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

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

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

十一、易用性

無障礙設計

material design很重視用戶的廣度，應該盡量照顧到殘障人士的體驗。設計時考慮以下使用場景：

1. 沒有聲音；
2. 沒有色彩；
3. 手機開啟了高對比度模式；
4. 手機畫面放大；
5. 沒有視覺信息，使用屏幕閱讀器；
6. 只能通過語音控制；
7. 以上多項結合；

并注意以下問題：

1. 無鼠標、純鍵盤操作。鼠標懸停顯示信息，也要通過其他方式展現；
2. 考慮大字號情況下的使用體驗；
3. 不要只通過顏色表達某些信息；
4. 音頻信息也要提供文字或其他視覺呈現；
5. 為圖片和視頻提供備用的文字信息；

本地化

為阿拉伯語、希伯來語、波斯語用戶設計相反的界面，他們的書寫和閱讀習慣是從右到左的。

十二、資源（需要KX上網）

1. 配色方案 ；
2. 界面模板：手機 ；
3. 界面模板：平板 ；
4. 界面模板：桌面 ；
5. 界面模板：線框圖 ；
6. 英文字體Roboto ；
7. Roboto介紹 ；
8. 中文字體Noto ；
9. 組件集psd ；
10. 組件集ai ；
11. 組件集sketch ；
12. 系統圖標 ；

精華資源兩波：

1. 《新鮮熱辣！一組實用的 Material Design 風格素材！》；
2. 《該跟上潮流了！一大波優質的MATERIAL DESIGN資源免費下載》 ；

實踐

最后，展示一下朋友的項目——云集（http://lydiabox.com）的部分界面。這是一款瀏覽器，也是一個html5應用平臺。功能結構不算復雜，但也有它的特殊性。非常適合用來理解material design，并嘗試做一些變通。