Material Design

 

Material design

摘自於 優設^beta @ 十萬個為什麼 　　

---

 

 

 

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

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

因爲只是筆記，我會寫得儘可能簡單。而且省略掉一些可樂橙認爲設計師都已經掌握的信息。想要深刻了解Material design，仍是建議有空通讀一遍官方文檔。不過，牢記如下要點，基本能作到90%了。實際上，Google官方的應用也有不遵守規範的地方，不能太拘泥於條條框框。

1、核心思想

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

Material design是最重視跨平臺體驗的一套設計語言。因爲規範嚴格細緻，保證它在各個平臺使用體驗高度一致。不過目前還只有Google自家的服務這麼作，畢竟其餘平臺有本身的規範與風格。

2、材質與空間

材質

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

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

• 紙片能夠伸縮、改變形狀
• 紙片變形時能夠裁剪內容，好比紙片縮小時，內容大小不變，而是隱藏超出部分
• 多張紙片能夠拼接成一張
• 一張紙片能夠分裂成多張
• 紙片能夠在任何位置憑空出現

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

• 一項操做不能同時觸發兩張紙片的反饋
• 層疊的紙片，海報高度不能相同
• 紙片不能互相穿透
• 紙片不能彎折
• 紙片不能產生透視，必須平行於屏幕

空間

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

全部元素都有默認的海拔高度，對它進行操做會擡升它的海拔高度，操做結束後，它應該落回默認海拔高度。同一種元素，一樣的操做，擡升的高度是一致的。

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

3、動畫

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

easing

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

水波反饋

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

轉場效果

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

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

多個類似元素，動畫的設計要有前後次序，起到引導視線的做用。

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

細節動畫

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

4、顏色

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

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

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

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

黑色：[87% 普通文字] [54% 減淡文字] [26% 禁用狀態/提示文字] [12% 分隔線]
白色：[100% 普通文字] [70% 減淡文字] [30% 禁用狀態/提示文字] [12% 分隔線]

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

5、圖標

桌面圖標

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

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

• 不要給彩色元素加投影
• 層疊不要超過兩層
• 折角不要放在左上角
• 帶投影的元素要完整展示，不能被圖標邊緣裁剪
• 若是有摺痕，放在圖片中央，而且最多隻有一條
• 帶摺疊效果的圖標，表面不要有圖案
• 不能透視、彎曲

常規形狀能夠遵循幾套固定柵格設計。

小圖標

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

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

小圖標一樣有柵格系統。線條、空隙儘可能保持2dp寬，圓角半徑2dp。特殊狀況相應調整。

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

黑色：[54% 正常狀態] [26% 禁用狀態]
白色：[100% 正常狀態] [30% 禁用狀態]

6、圖片

選用圖片

描述具體事物，優先使用照片。而後能夠考慮使用插畫。

圖片上的文字

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

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

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

提取顏色

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、佈局

全部可操做元素最小點擊區域尺寸：48dp X 48dp。

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

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

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

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

9、組件

Bottom sheets

一般以列表形式出現，支持上下滾動。

也能夠是網格式的。

Buttons

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

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

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

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

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

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

Cards

即便在同一個列表中，卡片的內容和佈局方式也能夠不同。

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

在如下狀況考慮使用卡片：

• 同時展示多種不一樣內容
• 卡片內容之間不須要進行比較
• 包含了長度不肯定的內容，好比評論
• 包含豐富的內容與操做項，好比贊、滾動條、評論
• 本該是列表，但文字超過3行
• 本該是網格，但須要展示更多文字

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

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。

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

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

10、設置界面

設置和幫助反饋一般放在側邊抽屜中。若是沒有側邊抽屜，則放在Appbar的下拉菜單底部。

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

設置項使用通欄分隔線來分組。7項如下沒必要分組。若是某項獨立一組，考慮把它放在頂部（重要）或放在底部的「其餘」一欄中（不重要）。設置項較多時嘗試合併，好比把兩個相關的勾選項合併成一個多選項。設置項很是多時，使用子界面。

11、易用性

無障礙設計

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

• 沒有聲音
• 沒有色彩
• 手機開啓了高對比度模式
• 手機畫面放大
• 沒有視覺信息，使用屏幕閱讀器
• 只能經過語音控制
• 以上多項結合

並注意如下問題：

• 無鼠標、純鍵盤操做。鼠標懸停顯示信息，也要經過其餘方式展示。
• 考慮大字號狀況下的使用體驗。
• 不要只經過顏色表達某些信息。
• 音頻信息也要提供文字或其餘視覺呈現。
• 爲圖片和視頻提供備用的文字信息。

本地化

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