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

yangxi_001發表於2016-03-08
Material Design筆記

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

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

一、核心思想

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

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

二、材質與空間

材質

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

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

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

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

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

空間

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

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

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

三、動畫

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

easing

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

水波反饋

 

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

轉場效果

通過過渡動畫，表達介面之間的空間與層級關係，並且跨介面傳遞資訊。

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

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

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

細節動畫

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

四、顏色

 

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

 

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

 

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

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

 

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

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

五、圖示

桌面圖示

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

QQ20141228165008

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

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

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

小圖示

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

icon framework

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

a-21

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

 

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

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

六、圖片

選用圖片

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

圖片上的文字

圖片上的文字，需要淡淡的遮罩確保其可讀性。深色的遮罩透明度在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。

文字排版

常用字號：

  • 12sp 小字提示
  • 14sp（桌面端13sp） 正文/按鈕文字
  • 16sp（桌面端15sp） 小標題
  • 20sp Appbar文字
  • 24sp 大標題
  • 34sp/45sp/56sp/112sp 超大號文字

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

八、佈局

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

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

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

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

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

九、元件

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。

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

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

十、設定介面

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

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

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

十一、易用性

無障礙設計

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

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

並注意以下問題：

  • 無滑鼠、純鍵盤操作。滑鼠懸停顯示資訊，也要通過其他方式展現。
  • 考慮大字號情況下的使用體驗。
  • 不要只通過顏色表達某些資訊。
  • 音訊資訊也要提供文字或其他視覺呈現。
  • 為圖片和視訊提供備用的文字資訊。

本地化

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

十二、資源（需要科學上網）

精華資源兩波：

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

實踐

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

【加上這三篇，Material design學習資料就夠了！】

Material design到底有哪些過人之處？來這兒學習！
《超全面總結！深聊MATERIAL DESIGN引領的設計趨勢》

同樣來自學霸的自學筆記，乾貨滿滿！
《學霸的自學筆記！Material Design設計規範學習心得》

谷歌自家設計師對它的看法與實踐心得：
《超讚！谷歌設計師的Material Design實踐心得》

原文地址：colachan
作者：@十萬個為什麼

相關文章