這一年就快完了，你還沒搞懂Material design嗎?是嫌文檔太長，還是覺得自己英文不好?都沒關(guān)系，我們善良熱情的@十萬個為什麼 幫同學(xué)們通讀了一遍官方的設(shè)計指南，去糙取精，整理出這篇干貨超多的學(xué)習(xí)筆記，打包票學(xué)完基本就掌握90%了，別錯過咯!

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

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

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

　　一、核心思想

　　,aterial design的核心思想，就是把物理世界的體驗帶進屏幕。去掉現(xiàn)實中的雜質(zhì)和隨機性，保留其最原始純凈的形態(tài)、空間關(guān)系、變化與過渡，配合虛擬世界的靈活特性，還原最貼近真實的體驗，達到簡潔與直觀的效果。

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

　　二、材質(zhì)與空間

　　材質(zhì)

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

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

　　紙片可以伸縮、改變形狀

　　紙片變形時可以裁剪內(nèi)容，比如紙片縮小時，內(nèi)容大小不變，而是隱藏超出部分

　　多張紙片可以拼接成一張

　　一張紙片可以分裂成多張

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

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

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

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

　　紙片不能互相穿透

　　紙片不能彎折

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

　　空間

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

　　所有元素都有默認(rèn)的海拔高度，對它進行操作會抬升它的海拔高度，操作結(jié)束后，它應(yīng)該落回默認(rèn)海拔高度。同一種元素，同樣的操作，抬升的高度是一致的。

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

　　三、動畫

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

　　easing

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

　　水波反饋

　　所有可點擊的元素，都應(yīng)該有這樣的反饋效果。通過這個動畫，將點擊的位置與所操作的元素關(guān)聯(lián)起來，體現(xiàn)了Material design動畫的功能性。

　　轉(zhuǎn)場效果

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

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

　　多個相似元素，動畫的設(shè)計要有先后次序，起到引導(dǎo)視線的作用。

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

　　細節(jié)動畫

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

　　四、顏色

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

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

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

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

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

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

　　五、圖標(biāo)

　　桌面圖標(biāo)

　　桌面圖標(biāo)尺寸是48dp X 48dp。

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

　　不要給彩色元素加投影

　　層疊不要超過兩層

　　折角不要放在左上角

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

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

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

　　不能透視、彎曲

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

　　小圖標(biāo)

　　優(yōu)先使用material design默認(rèn)圖標(biāo)。設(shè)計小圖標(biāo)時，使用最簡練的圖形來表達，圖形不要帶空間感。

　　小圖標(biāo)尺寸是24dp X 24dp。圖形限制在中央20dp X 20dp區(qū)域內(nèi)。

　　小圖標(biāo)同樣有柵格系統(tǒng)。線條、空隙盡量保持2dp寬，圓角半徑2dp。特殊情況相應(yīng)調(diào)整。

　　小圖標(biāo)的顏色使用純黑與純白，通過透明度調(diào)整：

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

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

　　六、圖片

　　選用圖片

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

　　圖片上的文字

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

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

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

　　提取顏色

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

　　圖片加載過程

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

　　七、文字

　　字體

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

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

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

　　文字排版

　　常用字號：

　　12sp 小字提示

　　14sp(桌面端13sp) 正文/按鈕文字

　　16sp(桌面端15sp) 小標(biāo)題

　　20sp Appbar文字

　　24sp 大標(biāo)題

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

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

　　八、布局

　　所有可操作元素最小點擊區(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)點擊區(qū)域：48x48dp

　　側(cè)邊抽屜到屏幕右邊的距離：56dp

　　卡片間距：8dp

　　分隔線上下留白：8dp

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

　　屏幕左右對齊基線：16dp

　　文字左側(cè)對齊基線：72dp

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

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

　　九、組件

　　Bottom sheets

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

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

　　Buttons

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

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

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

　　建議只用一個懸浮按鈕

　　懸浮按鈕可以貼在紙片邊緣或者接縫處，但不要貼在對話框、側(cè)邊抽屜和菜單的邊緣

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

　　列表滾動至底部時，懸浮按鈕應(yīng)該隱藏，防止它擋住列表項

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

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

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

　　Cards

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

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

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

　　同時展現(xiàn)多種不同內(nèi)容

　　卡片內(nèi)容之間不需要進行比較

　　包含了長度不確定的內(nèi)容，比如評論

　　包含豐富的內(nèi)容與操作項，比如贊、滾動條、評論

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

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

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

　　Chips

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

　　Dialogs

　　對話框包含標(biāo)題、內(nèi)容和操作項。點擊對話框外的區(qū)域，不會關(guān)閉對話框。

　　通常情況，避免出現(xiàn)滾動條。空間不足時允許滾動，滾動條建議默認(rèn)顯示。

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

　　在對話框中改變內(nèi)容，不會提交數(shù)據(jù)，點擊確定后，才會發(fā)生變化。

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

　　還有一種簡易對話框，不帶操作項。點擊列表內(nèi)容觸發(fā)相應(yīng)操作，并關(guān)閉對話框。點擊簡易對話框外面，對話框會關(guān)閉，操作取消。

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

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

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

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

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

　　Dividers

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

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

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

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

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

　　Grids

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

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

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

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

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

　　Lists

　　列表由行構(gòu)成，行內(nèi)包含瓦片。如果列表項內(nèi)容文字超過3行，請改用卡片。如果列表項的主要區(qū)別在于圖片，請改用網(wǎng)格。

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

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

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

　　Menus

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

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

　　菜單原地展開，蓋住當(dāng)前選項，當(dāng)前選項應(yīng)該成為菜單的第一項。

　　菜單的當(dāng)前選項，始終與當(dāng)前選項水平對齊。

　　靠近屏幕邊緣時，位置可適當(dāng)錯開。

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

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

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

　　Pickers

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

　　PRogress & activity

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

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

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

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

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

　　Sliders

　　滑塊左右兩邊可以放置圖標(biāo)。

　　或是可編輯文本框。

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

　　Snackbars & toasts

　　Snackbars至多包含一個操作項，不能包含圖標(biāo)。不能出現(xiàn)一個以上的Snackbars。

　　Snackbars在移動設(shè)備上，出現(xiàn)在底部。在PC上，應(yīng)該懸浮在屏幕左下角。

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

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

　　Snackbars的留白比較大，24dp。

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

　　Subheaders

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

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

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

　　Switches

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

　　在同一個列表中有多項開關(guān)，建議使用Checkbox。

　　單個開關(guān)項建議使用Switch。

　　Tabs

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

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

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

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

　　Text fields

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

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

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

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

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

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

　　右下角可以加入字?jǐn)?shù)統(tǒng)計。字?jǐn)?shù)統(tǒng)計不要默認(rèn)顯示，字?jǐn)?shù)接近上限時再顯示出來。

　　通欄輸入框也可以有字?jǐn)?shù)統(tǒng)計，單行的字?jǐn)?shù)統(tǒng)計顯示在同一行右側(cè)。

　　錯誤提示顯示在輸入框的左下方。默認(rèn)提示文本可以轉(zhuǎn)換為錯誤提示。

　　字?jǐn)?shù)限制與錯誤提示都會使點擊區(qū)域增高。

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

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

　　Tooltips

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

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

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

　　Navigation drawer

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

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

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

　　十、設(shè)置界面

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

　　設(shè)置界面只能包含設(shè)置項，諸如關(guān)于、反饋之類的界面，入口應(yīng)該放在其他地方。

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

　　十一、易用性

　　無障礙設(shè)計

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

　　沒有聲音

　　沒有色彩

　　手機開啟了高對比度模式

　　手機畫面放大

　　沒有視覺信息，使用屏幕閱讀器

　　只能通過語音控制

　　以上多項結(jié)合

　　并注意以下問題：

　　無鼠標(biāo)、純鍵盤操作。鼠標(biāo)懸停顯示信息，也要通過其他方式展現(xiàn)。

　　考慮大字號情況下的使用體驗。

　　不要只通過顏色表達某些信息。

　　音頻信息也要提供文字或其他視覺呈現(xiàn)。

　　為圖片和視頻提供備用的文字信息。

　　本地化

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

　　十二、資源(需要科學(xué)上網(wǎng))

　　配色方案

　　界面模板：手機

　　界面模板：平板

　　界面模板：桌面

　　界面模板：線框圖

　　英文字體Roboto

　　Roboto介紹

　　中文字體Noto

　　組件集PSD

　　組件集ai

　　組件集sketch

　　系統(tǒng)圖標(biāo)

　　實踐

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