標籤：表徵圖 基本 連續 wip div 單元 透明度 sel 方式
1. 基礎常識1.1 主流螢幕尺寸| 標識 | 螢幕尺寸 |
|---|---|
| hdpi | 480 * 800 |
| xhdpi | 720 * 1280 |
| xxhdpi | 1080 * 1920 |
| 標識 | 啟動表徵圖尺寸 | 菜單表徵圖尺寸 |
|---|---|---|
| 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 |
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 |
DP/PX線上轉換工具：http://pixplicity.com/dp-px-converter/
注意：切圖素材檔案大小盡量保持 <= 200Kb，主要為png格式。
2. Material Design相關Material Design，中文名：質感設計，是由 Google 推出的全新的設計語言，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，要先考慮它在現實世界中的運動規律。
所有可點擊的元素，都應該有這樣的反饋效果。通過這個動畫，將點擊的位置與所操作的元素關聯起來，體現了 Material Design 動畫的功能性。
通過過渡動畫，表達介面之間的空間與層級關係，並且跨介面傳遞資訊。
從父介面進入子介面，需要抬升子項目的海拔高度，並展開至整個螢幕，反之亦然。
多個相似元素，動畫的設計要有先後次序，起到引導視線的作用。
相似元素的運動，要符合統一的規律。
通過表徵圖的變化和一些細節來達到令人愉悅的效果
2.4 顏色顏色不宜過多。選取一種主色、一種輔助色（非必需），在此基礎上進行明度、飽和度變化，構成色彩配置。
Appbar 背景使用主色，狀態列背景使用深一級的主色或20%透明度的純黑
小面積需要高亮顯示的地方使用輔助色。
其餘顏色通過純黑#000000與純白#ffffff的透明度變化來展現（包括表徵圖和分隔線），而且透明度限定了幾個值。
黑色：[87% 普通文字] [54% 減淡文字] [26% 禁用狀態/提示文字] [12% 分隔線]
白色：[100% 普通文字] [70% 減淡文字] [30% 禁用狀態/提示文字] [12% 分隔線]
案頭表徵圖建議模仿現實中的摺紙效果，通過扁平色彩表現空間和光影。注意避免以下問題：
不能透視、彎曲
小表徵圖
優先使用material design預設表徵圖。設計小表徵圖時，使用最簡練的圖形來表達，圖形不要帶空間感。
小表徵圖尺寸是24dp X 24dp。圖形限制在中央20dp X 20dp地區內。
小表徵圖同樣有柵格系統。線條、空隙盡量保持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。
常用字型大小：
長篇幅本文，每行建議60字元（英文）左右。短文本，建議每行30字元（英文）左右。
2.8 布局所有可操作元素最小點擊地區尺寸：48dp X 48dp。
柵格系統的最小單位是8dp，一切距離、尺寸都應該是8dp的整數倍。以下是一些常見的尺寸與距離：
另外注意56dp這個數字，許多尺寸可變的控制項，比如對話方塊、菜單等，寬度都可以按56的整數倍來設計。
還有非常多規範，不詳細列舉，遵循8dp柵格很容易找到適合的尺寸與距離。平板與PC上留白更多，距離與尺寸要相應增大。
2.9 組件（Components）底部動作條是一個從螢幕底部邊緣向上滑出的一個面板，使用這種方式向使用者呈現一組功能。底部動作條呈現了簡單、清晰、無需額外解釋的一組操作。
通常以列表形式出現，支援上下滾動。
也可以是網格式的。
按鈕由文字和/或表徵圖組成，文字及表徵圖必須能讓人輕易地和點擊後展示的內容聯絡起來。
主要的按鈕有三種:
最重要且隨處用到的操作，建議使用懸浮按鈕。資訊較多時，選用凸起按鈕可以有效突出重要操作，但注意紙片不要疊太多層。扁平按鈕適合用在簡單的介面，例如對話方塊中。
使用懸浮按鈕要遵循以下規則：
懸浮按鈕有兩種尺寸：56x56dp/40x40dp
卡片是包含一組特定資料集的紙片，資料集含有各種相關資訊，例如，關於單一主題的照片，文本，和連結。卡片通常是通往更詳細複雜資訊的入口。卡片有固定的寬度和可變的高度。最大高度限制於可適應平台上單一視圖的內容，但如果需要它可以臨時擴充（例如，顯示評論欄）。卡片不會翻轉以展示其背後的資訊。
在以下情況考慮使用卡片：
卡片最多有兩塊操作地區。輔助操作區至多包含兩個操作項，更多操作需要使用下拉式功能表。其餘部分都是主操作區。
卡片布局準則
字型設計
本文：14 sp 或 16 sp
標題：24 sp 或更大
扁平按鈕：Roboto Medium, 14 sp, 10 sp 字間距
行動裝置上的卡片間距
螢幕邊界與卡片間留白：8 dp
卡片間留白：8 dp
內容留白
16 dp
紙片是一種小塊的用來呈現複雜實體的塊，比如說日曆的事件或連絡人。它可以包含一張圖片，一個短字串(必要時可能被截取的字串)，或者是其它的一些與實體物件有關的簡潔的資訊。Chips 可以非常方便的通過托拽來操作。通過按壓動作可以觸發懸浮卡片(或者是全屏視圖)中的 Chip 對應實體的視圖，或者是彈出與 Chip 實體相關的操作菜單。
狹小空間內表現複雜資訊的一個組件，比如日期、連絡人選取器。
Dialogs 用於提示使用者作一些決定，或者是完成某個任務時需要的一些其它額外的資訊。 Dialog 可以是用一種 取消/確定 的簡單接聽模式，也可以是自訂布局的複雜模式，比如說一些文本設定或者是文本輸入 。
一些複雜的操作，尤其是每個決策都需要相關解釋說明的情況下是不適合使用 Dialog 形式的。
Dialog 包含了一個標題(可選)，內容 ，事件。
標題：主要是用於簡單描述下選擇類型。它是可選的，要需要的時候賦值即可。
內容：主要是描述要作出一個什麼樣的決定 。
事件：主要是允許使用者通過確認一個具體操作來繼續下一步活動。
Dividers 主要用於管理和分隔列表和頁面配置內的內容，以便讓內容產生更好的視覺效果及空間感。樣本中呈現的分隔線是一種弱規則，弱到不會去打擾到使用者對內容的關注。
謹慎使用分隔線，留白和小標題也能起到分隔作用。能用留白的地方，優先使用留白。分隔線的層級高於留白。
網格列表是一種標準列表視圖的可選組件。網格列表與應用於布局和其他可視視圖中的網格有著明顯的區別。
瓦片內容包括主要內容（primary content）和次要內容(secondary content)。主要內容是有著重要區別的內容，典型的片。次要內容可以是一個動作按鈕或者文本。
為瓦片內容提供一個預設圖片。
網格只能垂直滾動。單個瓦片不支援滑動手勢，也不鼓勵使用拖放操作。
網格中的單元格間距是2dp或8dp。
列表作為一個單一的連續元素來以垂直排列的方式顯示多行條目。
列表由單一連續的列構成，該列又等分成相同寬度稱為行（rows）的子部分。行是瓦片（tiles）的容器。瓦片中存放內容，並且在列表中可以改變高度。
如果清單項目內容文字超過3行，請改用卡片。如果清單項目的主要區別在於圖片，請改用網格。
列表包含主操作區與副操作區。副操作區位於列表右側，其餘都是主操作區。在同一個列表中，主、副操作區的內容與位置要保持一致。
在同一個列表中，滑動手勢操作保持一致。
主操作區與副操作區的表徵圖或圖形元素是列表控制項，列表的控制項可以是勾選框、開關、拖動排序、展開/收合等操作，也可以包含KeyTip、二級菜單等提示資訊。
順序固定的菜單，操作頻繁的選項放在上面。
順序可變的菜單，可以把之前用過的選項排在前面，動態排序。
菜單盡量不要超過2級。
當前停用選項要顯示出來，讓使用者知道在特定條件可以觸發這些操作。
菜單原地展開，蓋住當前選項，當前選項應該成為菜單的第一項。
菜單的當前選項，始終與當前選項水平對齊。
靠近螢幕邊緣時，位置可適當錯開。
菜單過長時，需要顯示捲軸。
菜單從當前選項固定位置展開，不要跟隨點擊位置改變。
菜單到上下留出8dp距離。
選取器提供了一個簡單的方法來從一個預定義集合中選取單個值。
下拉重新整理的動畫比較特殊，列表不動，出現一張帶有環形進度條的紙片。
Snackbars至多包含一個操作項，不能包含表徵圖。不能出現一個以上的Snackbars。
Snackbars在行動裝置上，出現在底部。在PC上，應該懸浮在螢幕左下角。
不一定要使用者響應的提示，可以使用Snackbars。非常重要的提示，必須使用者來決定的，應該用對話方塊。
Snackbars不能遮擋住懸浮按鈕，懸浮按鈕要上移讓出位置。
Snackbars的留白比較大，24dp。
toasts和Snackbars類似，樣式和位置可以自訂，建議遵循Snackbars的規則設計。
小標題是列表或網格中的特殊瓦片，描述列表內容的分類、排序等資訊。
滾動時，如果列表較長，小標題會固定在頂部，直到下一個小標題將它頂上去。
存在浮動按鈕時，小標題要讓出位置，與文字對齊。
開關允許使用者選擇選擇項。一共有三種類型的開關：複選框、選項按鈕和 on/off 開關。
在一個 app 中，tabs 使在不同的視圖和功能間探索和切換以及瀏覽不同類別的資料集合起來變得簡單。
tab只用來展現不同類型的內容，不能當導覽功能表使用。tab至少2項，至多6項。
tab文字要顯示完整，字型大小保持一致，不能折行，文字與表徵圖不能混用。
文字框可以讓使用者輸入文本。它們可以是單行的，帶或不帶捲軸，也可以是多行的，並且帶有一個表徵圖。點擊文字框後顯示光線標，並自動顯示鍵盤。除了輸入，文字框可以進行其他任務操作，如文本選擇（剪下，複製，粘貼）以及資料的自動尋找功能。
輸入框點擊地區高度至少48dp，但橫線並不在點擊地區的底部，還有8dp距離。
右下角可以加入字數統計。字數統計不要預設顯示，字數接近上限時再顯示出來。
通欄輸入框也可以有字數統計，單行的字數統計顯示在同一行右側
錯誤提示顯示在輸入框的左下方。預設提示文本可以轉換為錯誤提示。
字數限制與錯誤提示都會使點擊地區增高。
同時有多個輸入框錯誤時，頂部要有一個全域的錯誤提示
輸入框盡量帶有自動補全功能。
提示只用在小表徵圖上，文字不需要提示。滑鼠移至上方、獲得焦點、手指長按都可以觸發提示。
觸摸提示（左）和滑鼠提示（右）的尺寸是不同的，背景都帶有90%的透明度。
側邊抽屜從左側滑出，佔據整個螢幕高度，遵循普通列表的布局規則。手機端的側邊抽屜距離螢幕右側56dp。
側邊抽屜支援滾動。如果內容過長，設定和協助反饋可以固定在底部。抽屜收合時，會保留之前的滾動位置。
列表較短不需要滾動時，設定和協助反饋跟隨在列表後面。
設定和協助反饋通常放在側邊抽屜中。如果沒有側邊抽屜，則放在Appbar的下拉式功能表底部。
設定介面只能包含設定項，諸如關於、反饋之類的介面，入口應該放在其他地方。
設定項使用通欄分隔線來分組。7項以下不必分組。如果某項獨立一組，考慮把它放在頂部（重要）或放在底部的“其他”一欄中（不重要）。設定項較多時嘗試合并，比如把兩個相關的勾選項合并成一個多選項。設定項非常多時，使用子介面。
知乎安卓用戶端Material Design實戰規範:http://www.tuyiyi.com/v/40056.html
Android UI 設計規範
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
