Android UI 設計規范

1. 基礎常識

1.1 主流屏幕尺寸

標識	屏幕尺寸
hdpi	480 * 800
xhdpi	720 * 1280
xxhdpi	1080 * 1920

1.2 圖標尺寸

標識	啟動圖標尺寸	菜單圖標尺寸
mdpi	48 * 48 （160 DPI ）	24 * 24
hdpi	72 * 72（240 DPI）	36 * 36
xhdpi	96 * 96 （320 DPI）	48 * 48
xxhdpi	144 * 144（480 DPI ）	72 * 72
xxxhdpi	192 * 192 （640 DPI）	96 * 96

1.3 顏色值

Android 定義顏色color時有6位或8位值的區別，6位（如：#0470C4）就是RGB，值8位（如：#1E000000）頭兩位是透明度，后6位是RGB值，00是完全透明，FF是完全不透明，比較適中的透明度值是 1E。

不透明度16進制值

格式如#00FFFFFF，前兩位代表不透明度的十六進制。00表示完全透明，FF就是全不透明。依次遞增。

不透明度	16進制值
100%	FF
95%	F2
90%	E6
85%	D9
80%	CC
75%	BF
70%	B3
65%	A6
60%	99
55%	8C
50%	80
45%	73
40%	66
35%	59
30%	4D
25%	40
20%	33
15%	26
10%	1A
5%	0D
0%	00

1.4 標注

• Android 設計規范中間距單位是 dp，dp 在 Android 機上不同的密度轉換后的 px 是不一樣的，所以按照設計圖的 px 轉換成 dp 也是不一樣的。
  現在，多數標注工具都支持 dp 標注功能，比如 MarkMan，如果UI設計者是按照1280*720的尺寸設計的效果圖，在標注時選擇xhdpi即可：

 

使用 MarkMan 進行 dp 標注

DP/PX在線轉換工具：http://pixplicity.com/dp-px-converter/

• 字體大小單位是 sp。

1.5 切圖

注意：切圖素材文件大小盡量保持 <= 200Kb，主要為png格式。

2. Material Design相關

Material Design，中文名：質感設計，是由 Google 推出的全新的設計語言，谷歌表示，這種設計語言旨在為手機、平板電腦、台式機和“其他平台”提供更一致、更廣泛的“外觀和感覺”。

 

 

想要深入了解 Material Design，還是建議有空通讀一遍官方文檔。不過，牢記以下要點，基本能做到90%了。實際上，Google 官方的應用也有不遵照規范的地方，不能太拘泥於條條框框。

Material Design 中文版文檔

2.1 核心思想

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

 

 

Material Design 是最重視跨平台體驗的一套設計語言。由於規范嚴格細致，保證它在各個平台使用體驗高度一致。

2.2 材質與空間

• 材質

 

 

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

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

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

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

• 一項操作不能同時觸發兩張紙片的反饋

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

• 紙片不能互相穿透

• 紙片不能彎折

• 紙片不能產生透視，必須平行於屏幕

• 空間

 

 

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

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

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

2.3 動畫

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

• ** easing **

 

 

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

• ** 水波反饋 **

 

 

 

 

 

 

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

• ** 轉場效果 **

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

 

 

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

 

 

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

 

 

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

• ** 細節動畫 **

 

 

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

2.4 顏色

 

 

 

 

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

 

 

 

 

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

 

 

 

 

小面積需要高亮顯示的地方使用輔助色。
其余顏色通過純黑#000000與純白#ffffff的透明度變化來展現（包括圖標和分隔線），而且透明度限定了幾個值。

 

 

 

 

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

2.5 圖標

• ** 桌面圖標 **

 

 

 

 

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

• 不要給彩色元素加投影

• 層疊不要超過兩層

• 折角不要放在左上角

• 帶投影的元素要完整展現，不能被圖標邊緣裁剪

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

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

• 不能透視、彎曲

• ** 小圖標 **

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

 

活動區域

 

修飾區域

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

 

 

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

 

 

 

 

小圖標的顏色使用純黑與純白，通過透明度調整：
黑色：[54% 正常狀態] [26% 禁用狀態]
白色：[100% 正常狀態] [30% 禁用狀態]

2.6 圖片

• ** 選用圖片 **

 

 

 

 

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

• ** 圖片上的文字 **

 

 

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

 

 

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

• ** 提取顏色 **

 

 

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

• ** 圖片加載過程 **

 

 

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

 

 

2.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字符（英文）左右。

2.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上留白更多，距離與尺寸要相應增大。

2.9 組件（Components）

• 底部導航（Bottom navigation）

 

 

 

顯示效果

 

標准示例

• ** 底部動作條（Bottom Sheets） **

 

 

底部動作條是一個從屏幕底部邊緣向上滑出的一個面板，使用這種方式向用戶呈現一組功能。底部動作條呈現了簡單、清晰、無需額外解釋的一組操作。

 

 

 

 

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

 

 

 

 

也可以是網格式的。

• ** 按鈕（Buttons） **

 

 

按鈕由文字和/或圖標組成，文字及圖標必須能讓人輕易地和點擊后展示的內容聯系起來。

主要的按鈕有三種:

• 懸浮響應按鈕（Floating action button）， 點擊后會產生墨水擴散效果的圓形按鈕。
• 浮動按鈕(Raised button)， 常見的方形紙片按鈕，點擊后會產生墨水擴散效果。
• 扁平按鈕(Flat button)， 點擊后產生墨水擴散效果，和浮動按鈕的區別是沒有浮起的效果。

 

懸浮響應按鈕

 

浮動按鈕

 

扁平按鈕

 

 

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

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

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

 

 

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

• ** 卡片（Cards） **

 

 

卡片是包含一組特定數據集的紙片，數據集含有各種相關信息，例如，關於單一主題的照片，文本，和鏈接。卡片通常是通往更詳細復雜信息的入口。卡片有固定的寬度和可變的高度。最大高度限制於可適應平台上單一視圖的內容，但如果需要它可以臨時擴展（例如，顯示評論欄）。卡片不會翻轉以展示其背后的信息。

 

**卡片集**是**卡片**的一個平面布局

 

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

 

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

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

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

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

 

 

** 卡片布局准則 **

字體設計
正文：14 sp 或 16 sp
標題：24 sp 或更大
扁平按鈕：Roboto Medium, 14 sp, 10 sp 字間距

移動設備上的卡片間距
屏幕邊界與卡片間留白：8 dp
卡片間留白：8 dp

內容留白
16 dp

 

 

 

 

• ** 紙片（Chips ） **

 

 

紙片是一種小塊的用來呈現復雜實體的塊，比如說日歷的事件或聯系人。它可以包含一張圖片，一個短字符串(必要時可能被截取的字符串)，或者是其它的一些與實體對象有關的簡潔的信息。Chips 可以非常方便的通過托拽來操作。通過按壓動作可以觸發懸浮卡片(或者是全屏視圖)中的 Chip 對應實體的視圖，或者是彈出與 Chip 實體相關的操作菜單。

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

 

 

 

 

• ** 提示框（Dialogs） **

 

 

Dialogs 用於提示用戶作一些決定，或者是完成某個任務時需要的一些其它額外的信息。 Dialog 可以是用一種 取消/確定 的簡單應答模式，也可以是自定義布局的復雜模式，比如說一些文本設置或者是文本輸入 。

一些復雜的操作，尤其是每個決策都需要相關解釋說明的情況下是不適合使用 Dialog 形式的。

 

 

Dialog 包含了一個標題(可選)，內容 ，事件。
標題：主要是用於簡單描述下選擇類型。它是可選的，要需要的時候賦值即可。
內容：主要是描述要作出一個什么樣的決定 。
事件：主要是允許用戶通過確認一個具體操作來繼續下一步活動。

 

 

• ** 分隔線（Dividers） **

 

 

Dividers 主要用於管理和分隔列表和頁面布局內的內容，以便讓內容生成更好的視覺效果及空間感。示例中呈現的分隔線是一種弱規則，弱到不會去打擾到用戶對內容的關注。

 

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

 

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

 

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

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

 

 

 

通欄分隔線的層級高於內嵌分隔線

• ** 網格（Grids） **

 

 

網格列表是一種標准列表視圖的可選組件。網格列表與應用於布局和其他可視視圖中的網格有着明顯的區別。

 

 

 

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

 

瓦片可以橫跨多個單元格

瓦片內容包括主要內容（primary content）和次要內容(secondary content)。主要內容是有着重要區別的內容，典型的如圖片。次要內容可以是一個動作按鈕或者文本。

 

 

為瓦片內容提供一個默認圖片。
網格只能垂直滾動。單個瓦片不支持滑動手勢，也不鼓勵使用拖放操作。
網格中的單元格間距是2dp或8dp。

• 列表（Lists）

 

 

列表作為一個單一的連續元素來以垂直排列的方式顯示多行條目。

列表由單一連續的列構成，該列又等分成相同寬度稱為行（rows）的子部分。行是瓦片（tiles）的容器。瓦片中存放內容，並且在列表中可以改變高度。

如果列表項內容文字超過3行，請改用卡片。如果列表項的主要區別在於圖片，請改用網格。

 

 

 

 

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

 

 

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

 

 

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

 

 

• 菜單（Menus）

 

 

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

 

 

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

 

 

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

 

 

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

 

 

 

 

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

 

 

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

 

 

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

 

 

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

 

 

• 選擇器（Pickers）

 

 

選擇器提供了一個簡單的方法來從一個預定義集合中選取單個值。

 

日期選擇器

 

時間選擇器

• 進度和動態（Progress & activity）

 

 

 

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

 

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

 

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

 

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

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

 

 

• 滑塊控件（Sliders）

 

 

 

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

 

或是可編輯文本框

 

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

• Snackbars & toasts

 

 

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

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

 

 

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

 

 

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

 

 

Snackbars的留白比較大，24dp。

 

 

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

 

 

• 副標題（Subheaders）

 

 

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

 

 

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

 

 

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

 

 

• 選擇控制（Selection controls）

 

 

開關允許用戶選擇選擇項。一共有三種類型的開關：復選框、單選按鈕和 on/off 開關。

 

單選按鈕（Radio button）

 

復選框（Checkbox）

 

開關（Switch）

• Tabs

 

 

在一個 app 中，tabs 使在不同的視圖和功能間探索和切換以及瀏覽不同類別的數據集合起來變得簡單。

 

擴展的 app bar + tab bar

 

加入檢索 + app bar + tab bar

 

默認的 app bar + tab bar

 

默認的 app bar + 可滾動的 tab bar

 

和 tab 指示器一樣的字體顏色

 

被鎖定滾動的 tab bar

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

 

 

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

 

 

• 文本字段（Text fields）

 

 

文本框可以讓用戶輸入文本。它們可以是單行的，帶或不帶滾動條，也可以是多行的，並且帶有一個圖標。點擊文本框后顯示光標，並自動顯示鍵盤。除了輸入，文本框可以進行其他任務操作，如文本選擇（剪切，復制，粘貼）以及數據的自動查找功能。

 

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

 

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

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

 

 

 

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

 

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

 

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

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

 

 

 

 

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

 

 

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

 

 

 

 

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

 

 

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

 

 

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

 

 

 

 

• 工具提示（Tooltips）

 

 

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

 

 

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

 

 

 

 

• Steppers

 

 

 

 

 

 

• Toolbars

 

 

 

 

2.10 模式（patterns）

• 空狀態（Empty states）

 

 

 

 

• 錯誤（Errors）

 

 

 

 

 

 

• 導航（Navigation）

 

Tabs

 

Bottom navigation bar 1

 

Bottom navigation bar 2

 

Navigation drawer

• 導航抽屜（Navigation drawer）

 

 

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

 

 

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

 

 

 

 

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

 

 

• 通知（Notifications）

 

 

• 權限（Permissions）

 

 

 

 

• 搜索（Search）

 

 

 

 

 

 

• 設置界面（Settings）

 

 

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

 

 

 

 

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

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

 

 

• 點擊刷新（Swipe to refresh）

 

 

 

 

2.11 資源

• 界面模板
  移動設備：Mobile Whiteframe - 2.23 MB (.ai)
  平板設備：Tablet Whiteframe
  - 1.39 MB (.ai)
  桌面環境：Desktop Whiteframe
  - 89.40 MB (.ai)
  線稿（Whiteframes）：
  Whiteframes
  - 14.38 MB (.ai)
  Whiteframes
  - 2.92 MB (.sketch)
• 調色板
  Color Swatches
  - 0.02 MB (.zip)
• 字體
  Roboto Font
  - 1.21 MB (.zip)
  Roboto specimen booklet
  - 1.67 MB (.pdf)
  Noto Font 簡體中文
  - 115.45 MB (.zip)
• 設備標准
• UI組件
  Components sticker sheet for Sketch
  - 23.51 MB (.sketch)
  Components sticker sheet for Adobe After Effects
  - 136.72 MB (.zip)
  Components sticker sheet for Adobe Photoshop
  - 94.86 MB (.psd)
  Components sticker sheet for Adobe Illustrator
  - 50.07 MB (.ai)
• 系統圖標
  System icon sticker sheet
  - 0.39 MB (.ai)

2.12 實踐

知乎安卓客戶端Material Design實戰規范:http://www.tuyiyi.com/v/40056.html

作者：darren_he
鏈接：https://www.jianshu.com/p/b38e81be51ca
來源：簡書
著作權歸作者所有。商業轉載請聯系作者獲得授權，非商業轉載請注明出處。