為您準備了最新的 Material Design設計規范，請伴隨筆記一口吃掉。

一、安卓是什么？

想象一下，過年同學聚會上，大家把手機都放在飯桌前，除了各種型號的 iPhone 之外，你還能看到什么品牌的手機呢？我猜一定會有 OPPO、VIVO、魅族、小米、華為、三星對嗎？也許還有一加、錘子、聯想等手機品牌。這些手機全部都是使用了 Android底層構架的設備，也就是我們所說的安卓手機。它們和蘋果手機似乎沒什么共同點：硬件的外觀、桌面系統設計、價格都不一樣，怎么可能是一種系統呢？這個要從安卓的誕生說起了。有一個極客名叫安迪·魯賓（Andy Rubin），他曾經在蘋果工作過，后來他離開蘋果開始了漫長的創業之路，可他的項目似乎從來都不怎么順利。直到2003年，他創立了安卓公司，安卓是一個基于 Linux 的開放源代碼的操作系統，他當時的計劃是免費把安卓系統提供給手機生產商，然后在預裝了安卓系統的手機上提供增值服務。由于免費開源加上性能出眾，在2014年搭載安卓系統的設備就超過了100億部。當時諾基亞的塞班系統和很多其他的手機操作系統稱霸著手機操作系統市場，而安卓像一匹黑馬一樣殺了個突然襲擊。后來大家都知道了，諾基亞銷聲匿跡，連微軟的 windowsphone 操作系統現在也很少聽到了。再后來，谷歌收購了安卓，有了谷歌母公司的資源，安卓的發展就更加順風順水，在2017年全球智能手機市場有85%的設備都使用了安卓系統?？梢哉f當今世界除了蘋果的 iOS操作系統之外，幾乎全部都是安卓的天下。就連我們周圍的一些智能設備、銀行的手寫簽名系統、ATM機等都大量采用了安卓操作系統。需要注意的是安卓是一套像 Windows 的操作系統而并非像蘋果一樣的軟硬件打包產品。

1. 在我國的飛速發展

由于安卓是一套性能非常好的底層框架，但是用戶體驗和設計上都是白紙，于是很多開發商會基于安卓系統的底層系統開發交互良好、視覺設計更佳的表現層部分，這種開發被叫做安卓rom開發。在中國，很多公司抓住了安卓的免費午餐發展出了自己的手機品牌，比如小米就是通過優化安卓底層框架，加上自身研發的、用戶體驗非常好的交互和視覺，完成了 MIUI—— 一款基于安卓的手機操作系統包。沒錯，最早小米并不是靠硬件取勝，而是靠 MIUI 創業的。當時手機市場上的操作系統都不太注重用戶體驗，MIUI 無疑讓大家打開了新世界的大門，于是很多人開始把自己的三星或者其他手機刷成 MIUI系統，由于刷機會讓手機發燙，他們也自嘲是「發燒友」，就產生了發燒友文化。后來小米自己開始生產手機就更加有粉絲基礎了。與此同時國內MP3大廠魅族也開始了自己的手機研發，搭載了優化性能和體驗的flyme，同樣基于安卓底層框架開發。幾乎每一個國內手機品牌都會有一套自身的 rom系統，比如小米有MIUI，魅族有flyme，錘子有Smartisan，聯想有聯想樂OS，華為有華為rom等?；诿赓M的安卓底層框架要比自己開發操作系統節省巨大的經費和資源，所以這些公司可以迅速崛起。所以我們中很多人都是安卓手機的用戶。

二、安卓的尺寸

由于安卓是一個野蠻生長的市場，沒有如蘋果一樣嚴格的硬件生產規范，造成了安卓屏幕尺寸非常雜亂。從下圖我們就可以看到，市場上的安卓屏幕尺寸簡直是一場噩夢。大小不一的屏幕中，但使用率最高的是720P和1080P。

△ 主流安卓設備分辨率占比 數據圖表來自友盟

要想讓我們的 APP 同時在這么多種屏幕下都顯示完美，在上圖中我們可以看到，用戶量目前最高的是720P和1080P。我們建圖時一般使用1080P的分辨率來進行設計。在以下五個尺寸中我們使用切圖進行適配：

△ 安卓主流分辨率表

其他的分辨率我們可以使用自適應的方法進行適配。這就是目前安卓設備的主流適配方式。為了方便大家查詢每個設備大小的 dp值和 px值，Material Design 為我們準備了一個網站來查詢主流安卓設備的尺寸（網址：https://material.io/tools/devices/）。

1. DP單位

Dp 是獨立密度像素的簡稱（Density-independent pixels）。是安卓設備上的基本單位，如同蘋果設備上的 pt 一樣，dp 與我們建圖時的 px單位需要通過分析設備的 PPI值來換算。大家還記得 PPI公式嗎？

△ PPI計算公式

那如果我們有了一個設備的 ppi值，然后使用公式即可知道這個設備里1dp等于多少像素了：

dp*ppi/160 = px

比如這個設備的 PPI值是320，那么：1dp x 320ppi/160 = 2px。則，這個設備上1dp等于2像素。（也就是和iPhone 6類似的高清屏）。在給安卓設計稿做標注時，我們可以在像素大廚等標注軟件中選擇我們做圖的分辨率（如：xxhdpi），然后標注單位中可以選擇 dp單位，這樣我們標注的單位數值和安卓開發工程師使用的單位就一致了。否則安卓工程師要進行二次換算把我們標注的 px單位換算成 dp單位才可以進行工作。在下文中，我寫到的大部分設計尺寸的單位都是dp，也就是說我們要針對不同的屏幕進行換算，比如在 hdpi下，1dp經過換算等于1.5px；而在 xhdpi下，1dp=2px。

2. SP單位

SP 是獨立縮放像素的簡稱（Scale-independent Pixel）。Android平臺允許用戶自定義文字大?。ㄐ?、正常、大、超大等等），當文字尺寸是「正常」狀態時，1sp=1dp=0.00625英寸，而當文字尺寸是「大」或「超大」時，1sp就大于1dp。就好比我們在電腦中調整桌面字體后，只有字體大小發生改變，而窗口和圖標不會改變一樣。默認情況下1SP=1DP。所以我們在設計安卓界面時，標記字體的單位選用SP單位。很多標注軟件諸如藍湖和像素大廚都支持SP單位標記字體。

3. 三大金剛鍵

安卓本來底部應該有三個金剛鍵：「返回」、「HOME」、「任務列表」。這三個金剛鍵是安卓交互的一部分，安卓平臺上的應用程序交互基于三大金剛鍵。這三個鍵一般都在底部，方便手指點擊，也就是說這三個按鍵應該是最常用的操作。但是由于很多用戶比較青睞 iPhone 的單獨 home鍵設計，所以很多廠商會在硬件上隱藏掉三大金剛鍵或僅僅像 iPhone 一樣保留 home鍵。其實安卓還可以開啟三大金剛鍵的虛擬鍵，也就是在底部會常駐半透明的三個按鍵（也因此安卓本來不鼓勵第三方APP設計底部TAB欄，因為這樣會出現兩個底部常駐區域，顯得很臃腫）可是很多廠商想讓產品接近 iPhone 的樣子，不僅手機上有 home鍵，而且也不展開虛擬三大金剛鍵。所以本來安卓APP 是不需要自己設計返回鍵的，但是由于廠商硬件的問題，保險起見在安卓平臺上的 APP 也都會像在蘋果平臺一樣在左上角加上返回圖標。

△ 三大金剛鍵

4. 切圖方法

安卓沒有@3x和@2x的文件后綴來區分每套切圖，而是采用文件夾的區分方式。比如我們切出五套不同分辨率的切圖，那么不同的分辨率應該按照：drawable-mdpi、drawable-hdpi、drawable-xhdpi、drawable-xxhdpi、drawable-xxxhdpi的文件夾來存放各套切圖。

5. .9切圖

.9是 andriod平臺開發里的一種特殊的圖片形式，文件擴展名為：.9.png。比如有一個氣泡bubble，那么它的.9切圖命名格式就是：bubble.9.png。這種圖片能告訴程序這個圖片哪部分可以被拉伸，哪部分不要拉伸。我們要做的就是使用 Photoshop 的鉛筆工具，把鉛筆設置成1px大小，透明度100%，顏色選擇#000000純黑色，然后在我們的切圖邊緣畫出1像素的橫豎線，然后把這張圖命名后綴加上.9，就和系統打好了暗號了。后續，開發人員在開發環境就可以設置哪些部分可以拉伸哪些需要保留了。噢對了，我們畫的黑色「暗號」是不會顯示給用戶的。

△ 不固定位置的切圖需要.9來規定拉伸范圍

△ 畫四條線規定內容（比如文字）和可拉伸區域（無圓角方便拉伸）的位置

6. 設計方法

由于安卓設備ROM設計不相同、屏幕尺寸不相同、而且三大金剛鍵也不一定存在，所以在這種情況下做設計讓設計師很頭大。一般來說，目前主流采取的設計方法有三種：

第一，直接延續 iOS平臺上的設計。直接用給iPhone準備的設計稿更改切圖的大小即可最快速地得到安卓切圖了，這種方法太簡單太粗暴，但是目前是最快的。如果我們在使用 Photoshop 設計界面，可以使用 Cutterman 直接切出五套安卓切圖。連設計稿尺寸都無需修改。不過如果使用 sketch 或 XD工具則需要按照安卓尺寸進行設計稿的調整才能輸出正確的切圖。這種適配方式很常用，比如微信、支付寶在安卓平臺上的版本都是和蘋果端一致的。

第二，為安卓提供專屬的設計稿。這種方式會花一定的時間，其實也是根據 iPhone設計稿以安卓的特點：比如尺寸（1920x1080px）、直角、字體（中文為思源字體）、信息條的樣式等進行微調，然后切出相應的切圖來即可。比如網易云音樂等 APP 在 iOS 和安卓平臺上有一些細微的差距。

第三，按照安卓最新的 Material Design規范來進行單獨的安卓版界面設計。這個是最花時間的，但是是最規范的。Google 為旗下全線產品提供了一個類似蘋果HIG 的設計規范，并且有獨特的設計語言。如果公司允許，使用 Material Design來設計安卓版是最好的。比如知乎、印象筆記等產品采用了 Material Design 的設計方式。下面的部分我將為您詳細介紹 Material Design設計規范和如何使用這種設計風格構建我們的產品界面。

三、什么是Material Design？

Material Design 不僅僅是安卓陣營產品的設計規范和風格，甚至它鼓勵設計師和開發者把這種風格用在蘋果設備和 windows設備上。作為設計規范，它很包容，卻有時又非常嚴格。使用了 Material Design 的產品給人很強的統一感和秩序感。如果從歷史來看的話，Google 的產品從來沒有一個正式嚴格的視覺規范。甚至每個產品線都有自己的設計風格和自己的品牌。但2011年后，拉里佩奇掌握了 Google 的控制權后，他改變了那種過去「程序員主導一切」的情況，他召集了谷歌最好的設計師一起重新設計了所有產品的語言，終于在2014年的 Google I/O 上推出了 Material Design，宣告 Google 重視設計的時代來了。Google旗下的電腦、穿戴設備、電視等設備都可以使用 Material Design 作為視覺規范，甚至 Google 鼓勵開發者在 iOS平臺也使用 Material Design。Google 的 Material Design 并不是簡單的扁平設計，而是一種注重卡片式設計、紙張的模擬、使用了強烈對比色彩的設計風格。這種風格形成了獨一無二的 Material Design。Material Design 的目標是創建一種優秀的設計原則和科學技術融合的可能性（Create）、并給不同平臺帶來一致性的體驗（Unify）、并且可以在規范的基礎上突出設計者自己的品牌性（Customize）。以下的內容根據 Material Design 最新規范（2018）來進行分析和闡述，如果大家感興趣也可以移步到 Material Design官方網站來閱讀更多內容（網址：https://material.io）。

1. Material Design的隱喻

Material Design 并不是完全的抽象扁平風格，它從物理現實中學習了諸如質感、投影、加速度、紙張的模擬等隱喻方法，這些都會讓 Material Design 更容易被用戶理解。其實我們知道Google一直在嘗試不同的設計風格，比如很早之前的長投影設計風格、后來的扁平化設計實驗等。扁平化設計的優勢就是信息噪音少，而缺點就是情感傳遞不足，而 Material Design似 乎是一個很好的解決方案，在最大限度保證可讀性的基礎上有一些我們熟悉的物理現實的影子。所以一定程度上它既是擬物的也是扁平的。

四、設計理念

Material Design 的設計中有很多設計理念是需要我們深度學習的，我們要學習這套理論的思維模式，其實就算我們不準備使用 Material Design，對我們的設計思維提高也是一個很有益處的思考過程。

1. Z軸的概念

我們都知道什么是三維：三維就是X軸（左右）、Y軸（上下）、Z軸（前后）組成的立體世界，而二維就是只有X和Y軸的平面世界。據科學家說宇宙有十一個維度，人類能體驗到的是四維，除了三維還有一個時間的維度。好啦，扯遠了，回到 Material Design中，我們知道手機界面是一個平面二維的空間，而 Material Design 通過二維的一些表達手段，比如投影、動效等構建出了Z軸（前后）的概念。

△ Material Design中的Z軸

2. Z軸的投影

不同投影暗示了不同元素的高度，我們可以理解為如同我們桌子上的幾張紙層疊在一起，那么我們認為重要的紙在其他紙張之前，它的投影是最高的。所以在 Material Design 中投影最高的代表Z軸最高值，也是最重要的內容。

△ 2dp、6dp、12dp、24dp的投影區別

△ 在正面和側面來觀看，1dp和8dp海拔高度產生出陰影大小的不同

3. 界面中的Z軸應用

不同的功能使用不同的Z軸高度可以表明他們的重要性和邏輯層級關系。并且這種投影是由編程完成的并非切圖，這點需要注意一下。Material Design 為第三方開發者提供了動態且真實的投影和Z軸高度設置。

△ APP中不同的Z軸高度

△ 頂部應用欄（A）、卡片式設計（B）和懸浮球FAB（C）高度的對比

△ 界面中海拔高度對照

五、組件

組件是 Material Design 區別于 iOS 等其他設計的重要標識，當我們看到 FAB 時我們就知道這是 Material Design；當我們看到底部欄的獨特設計時我們也能知道這是 Material Design。想做一款原汁原味的 Material Design 就要了解組件的特征。讓我們開始吧！

1. 懸浮球 FAB（Buttons: floating action button）

懸浮球可能是 Material Design 中最明顯的標志了。一個圓圓的小球固定在屏幕的某個位置，它特別顯眼，讓你無法忽視它。同時它也是當前頁面最重要的主線操作，比如在郵箱的頁面中，FAB 很可能是發郵件的按鈕。并且一個頁面中只有一個 FAB，這讓這個小球更加顯眼了。

△ FAB在APP的右下角位置并且常駐屏幕

△ FAB是一個頁面中最顯眼的設計，但并不是每個頁面都需要FAB

FAB的尺寸

FAB 默認尺寸 (56 x 56dp) 和 Mini尺寸 (40 x 40dp)都可以選擇，在不同的頁面和不同的情況下我們可以使用不同大小的FAB。

可交互的FAB

FAB 可以是一個跳轉走的功能，也可以是一個展開子菜單。這個有趣的交互是從Path應用中學到的：點擊前是某個圖標的樣式，點擊后 FAB本身變成了關閉按鈕，而且會彈出2個以上的子菜單圖標矩陣。

△ 可交互的FAB

擴展形FAB

沒錯，這種懸浮按鈕我們好像已經很熟悉了，可您可能不知道它也是 FAB！這種帶文字異形并且不隨屏幕滾動的按鈕屬于擴展形的 FAB。

△ 擴展形FAB

△ Reply的自定義FAB設計

2. 底部應用欄（App bars: bottom）

底部應用欄用于顯示屏幕底部的導航和按鍵操作。底部應用欄比較類似 iOS設計中的 Tab欄，但是不同于Tab欄的是底部應用欄通常不會等分為幾份，而是放置一些 FAB、導航等的功能性圖標，并且講究排版的節奏感。

△ 底部應用欄

△ 底部應用欄上的圖標必須為2個以上（不算FAB）

底部應用欄的組成

底部應用欄由以下部分組成：①容器；②導航抽屜控制；③浮動操作按鈕（FAB）；④動作圖標；⑤更多菜單控件。

△ 底部應用欄的組成

△ 以FAB為中心的底部應用欄版式

△ FAB側對齊的底部應用欄版式

△ 沒有FAB的底部應用欄版式

△ FAB和底部應用欄重疊的版式

△ FAB插入設計的底部應用欄版式

△ 錯誤的版式：FAB脫離底部應用欄并且占了多余的空間

底部應用欄的層級

底部應用欄的層級分為：①容器（0dp）；②底部信息欄（6dp）；③底部應用欄（8dp）；④浮動按鈕（12dp）‘⑤頁卡（16dp）。

△ 底部應用欄的層級

3. 頂部應用欄（App bars: top）

頂部應用欄和我們 iOS 中所使用的導航欄很類似，但不完全一樣。頂部應用欄中標題并非居中而是像報紙一樣左對齊的，這是因為 Material Design 認為閱讀應該如在報紙上一樣按照從左到右的順序排列。并且圖標左側最多可放置一個系統圖標，右側可放置多個系統圖標。

△ Material Design中的頂部應用欄

△ 頂部欄可變為選擇狀態時的工具欄

頂部應用欄的組成

頂部應用欄所包含的組成部分：①頂部欄容器；②抽屜式導航圖標（可選）；③ 標題（可選）；④系統圖標（可選） ；⑤更多按鈕（可選）。

△ 頂部應用欄的組成

突出標題

頂部應用欄可改變高度以凸顯標題（類似蘋果的大標題設計）。同時這么做也可以讓標題容納更多的文字，比如新聞APP 就需要這個特性。

△ 突出標題的設計

頂部應用欄可以嵌入圖片

為了減少視覺層級，頂部應用欄中也可以嵌入圖片來增強界面的整體感。圖為一個使用了嵌入圖片頂部欄的照片應用。

△ 頂部應用欄嵌入圖片的樣式

4. 背板設計（Backdrop）

在應用引發的某個操作中，可設計背板來承載某些選項和輔助信息。背板的設計在 iOS 中比較類似 Action Sheet 但又更加個性化。

△ 背板設計示例

背板設計的輔助控件

①背板設計隱藏時，后層控件可以提供有關前層的輔助信息。②背板設計激活時，后層會顯示與前層相關的控件。這樣可變的設計可以讓用戶更加方便地找到需要的功能。

△ 背板設計的輔助控件

△ Crane APP所使用的背板設計

△ SHRINE所使用的背板設計使用了增強品牌感的直角

5. 橫幅（Banner）

橫幅可不光是廣告哦，橫幅是頂部欄下面的第一個凸顯區域，顯示突出的消息和相關的可選操作。它可以是一個對話，也可以是一個提示或者包含圖形的設計。

△ 橫幅形式的對話框

△ 如果搭配底部導航來設計，那么橫幅可以直接置頂顯示

6. 底部導航（Bottom navigation）

底部導航的設計和 iOS 類似，它也是將底部寬度等分為多個圖標的點擊區域，并且配以輔助文字信息方便用戶理解圖標背后的功能。底部導航是底部應用欄的一個有力補充。

△ 底部導航的設計如同iOS中的Tab欄

△ OWL APP中的個性化底部導航欄

7. 按鈕（Buttons）

按鈕是最常見的元素，在這里 Material Design 為我們提供了多種多樣的按鈕設計風格。由于不同的功能和環境，按鈕可以使用：①純文字按鈕（這種按鈕只有加粗帶色彩的文字，可以理解為可點擊的鏈接）；②線性按鈕（這種按鈕有一個線框來說明點擊區域，比較不顯眼）；③填充按鈕（這種按鈕較為明顯）；④切換按鈕（這種按鈕使用率低于其他按鈕形式）。

△ 按鈕的四種樣式

△ 和圖像結合非常好的文字按鈕

△ 權重不會搶戲的線性按鈕

△ 使人有點擊欲望的按鈕

△ 突出功能的切換按鈕

△ 按鈕文字應該清晰簡潔，不應該讓人困惑

8. 卡片式設計（Cards）

卡片式設計同樣是 Material Design 的顯著標志。其實卡片式設計我們可以理解為一個小的單元，在這個單元里的信息邏輯關系更加緊密。如果一個單元的信息過多很容易讓用戶在閱讀時發生串行現象，卡片式設計就能有效地規避這個問題。

卡片式設計的組成

卡片式設計包含以下組成部分：①容器卡容器。它容納所有卡元素，容器的尺寸由元素占據的空間決定。②縮略圖（可選）?？s略圖可以放置頭像、圖標和logo。③標題文字（可選）。標題文字通常是卡片中最重要的標題，一般文字較大。④小標題（可選）。小標題可以放置文章署名或標記位置等信息。⑤多媒體（可選）。卡片可以包括各種媒體，包括照片和視頻等。⑥輔助文字（可選）。通常是對于多媒體的描述信息。⑦按鈕（可選）。8.圖標（可選）。

△ 卡片設計的組成

卡片設計的分割線

如果卡片中的內容元素不屬于一個邏輯，那么可以使用一條分割線來分隔成兩個區域。但是注意，分割線需要使用非常輕的顏色，并且左右不要通過去，以保證卡片的完整性。

△ 卡片設計的分割線

△ Owl的頁卡設計

9. 紙片（chips）

紙片通常是輸入框中多個元素的組合，紙片有選中態和交互態等豐富的交互。比如郵件添加郵件人的操作就是在一個輸入框內添加一個紙片的操作，這樣的紙片可以承載頭像和文字雙重信息。

△ 紙片的應用

△ 紙片的交互態

△ Reply的紙片設計

10. 對話框（Dialogs）

對話框是移動端交互中很重要的一環。Material Design 提供了豐富的對話框形式來供我們使用。我們知道對話框可以分為模態對話框和非模態對話框，主要區別是模態對話框需要和人交互，非模態更多是顯示提示信息。我們目前介紹的對話框屬于模態對話框，稍后介紹的 snackbar 則屬于非模態對話框。

△ 左圖為警告對話框，右側為簡單對話框

△ 左側為確認對話框，右側為全屏對話框

△ 在用戶選擇前，禁掉確認功能防止用戶點擊

11. 分割線（Dividers）

分割線在我們設計界面中非常常見。信息的分割按照輕重依次是：面的分割、線的分割、留白的分割。用以區分一個面中不同功能或者不同邏輯的分割線非常常用。那分割線有哪些呢？

全出血分割線和插入式分割線

左圖為全出血分割線，右圖為插入式分割線。全出血分割線給人的感受是信息完全獨立，而插入式分割線更方便我們閱讀并準確找到當前閱讀的位置。

△ 全出血分割線和插入式分割線

居中分割線和標題分割線

如果信息閱讀曲線沿中心進行，那我們可以給用戶提供居中分割線保證閱讀順序。如果信息需要標題進行區分，同樣可以使用帶小號標題的標題分割線。

△ 居中分割線和標題分割線

△ Owl界面中的分割線

12. 抽屜式導航（Navigation drawer）

抽屜式導航我最早是在蘋果平臺的應用Path 看到的，那時大概是2011年。Path 不僅設計出來了抽屜式導航，甚至還有 FAB。很多產品經理都很青睞這款產品，但遺憾的是2018年 Path 關閉了服務。雖然 Path 的火爆使得很多 iOS應用使用了抽屜式導航的交互，但是蘋果并不建議開發者使用這種交互形式。因為抽屜式導航和 Tab欄比較而言 Tab欄的用戶觸發率更高，而抽屜式導航需要點擊兩次才能觸發某個功能，層級較深。但是 Material Design 很青睞這種交互形式，并鼓勵設計師在底部應用欄增加一個導航圖標，點擊激活抽屜式導航。

△ 抽屜式導航

抽屜式導航的組成

①容器（可選）；②頭部（可選），通常為用戶個人信息；③分割線（可選）；④選中態；⑤選中態的文本；⑥沒有激活的文本；⑦小標題；⑧ 底層界面（不可操作）。

△ 抽屜式導航的組成

13. 頁卡（Tabs）

頁卡常見于頂部應用欄，作為應用欄的一部分存在。一般由2-3個頁卡組成。當我們點擊其中一個頁卡時，應用欄下方跳轉對應內容。

△ 頁卡

△ 當頁卡過多時可以使用滾動形頁卡

14. 文字輸入框（Text fields）

用戶需要輸入文本信息時會使用到文字輸入框。文字輸入框的樣式 Material Design 也做了漂亮的樣式供我們參考。

△ 文本輸入框

△ 圖1為填充形輸入框 圖2為線框輸入框

△ Rally的填充形輸入框

15. 圖片組（Image lists）

如果我們構建一個如朋友圈或者相冊的界面，那么我們應該如何排列一組圖片呢？怎么樣排列才能夠讓用戶感覺有秩序感并且友好呢？

△ 圖片組

圖片組的四種形式

• 正常圖片組：正常圖片組的每張圖片大小一樣，間距統一并且通常會窄一些，給人秩序感和統一感。這種圖片組的形式要求圖片源顯示出來是統一大小的。
• 排版圖片組：有一點像微軟Metro的排版，圖片按照柵格分割，最大尺寸的圖片等于四個小圖拼起的高寬，寬尺寸的圖片寬度等于兩個小片的寬度相加。
• 照片墻圖片組：照片墻圖片組結構比較松散，適合圖像尺寸不均等的內容展示，效果如同家居中的照片墻。
• 瀑布流圖片組：這個大家應該比較熟悉了，有點像國內的花瓣瀑布流，圖片寬度全部相等，由于高度不等會展現出如同瀑布一樣的形式。

△ 排版圖片組示例

△ 瀑布流圖片組示例

16. 滑塊（Sliders）

如果我們在設計某個音樂類的 APP 或者視頻APP 的時候，音量或者其他設置都需要一個滑塊方便用戶進行調節。那么調節的功能就可以使用滑塊來隱喻。

△ 音量滑塊

17. 選擇器（Selection controls）

選擇器在網頁和移動端程序中都很常見。在蘋果設備中我們很少看到單選框、復選框等選擇器，轉而使用按鈕和 Action Sheet 來代替這些不太好點擊的選擇器。但是 Material Design 仍然認為選擇器在移動端也是可行的，并給出了相應的規范。

△ 選擇器

18. 底部提示欄（Snackbars）

我們在一些不希望被打擾的界面中（比如游戲、視頻、閱讀類應用等）經常會出現一些提示信息，這些信息如果用警告對話框彈在游戲前并必須我們點擊確認，那我們會怎么樣？罵人對不對。所以我們需要一個對用戶不那么打攪、并且信息無需確認操作的信息提示工具欄，那么就是底部提示欄了。

△ Snackbars

19. 狀態指引（Progress indicators）

某個進程加載內容時，需要讓用戶感知到這個狀態。Material Design 給我們提供了一個類似跑馬燈的動畫。這樣不僅可以傳遞狀態，并且不占用多余的空間。

△ 狀態指引

六、排版

Material Design 支持了不同屏幕的分辨率，主流的可以使用不同的切圖來區分，而很多不是很主流的機型就不能靠切圖來一一適配了，只能使用諸如響應式布局等形式。在前面的文章我介紹過柵格系統（Grid Design），在安卓適配中因為響應式布局需要縮放內容的緣故，所以我們需要在排版中考慮柵格系統。

1. 響應式布局

Material Design 也意識到了安卓屏幕分辨率太多的這種情況，它的解決思路是使用如網頁中響應式布局的做法，根據屏幕進行等比例的縮小或放大。為了保證縮放的顯示效果，Material Design 要求我們在設計之初就使用柵格系統（Grid Design），這樣可以更有效地進行響應式布局。

△ 柵格系統三要素：①列（Columns）②水槽（Gutters）③邊距（Margins）

列（Columns）

列建立的時候要考慮整體的寬度，然后進行整除。然后我們做界面的時候可以和列對齊，就達到了所有寬度都是倍數或有聯系的效果了。在平面設計中，柵格系統是為了讓界面更有秩序感，而在UI設計中，除了視覺的要求還有來自自適應需要整除元素的要求。

△ 在360dp寬度的手機設備中，使用4個列

△ 而在600dp寬度的平板電腦中，通過響應式使用8個列

水槽（Gutters）

水槽是用來區別內容的，被作為列之間的留白使用的。在響應式布局中，列的寬度是不變的，然而水槽的寬度是可變的。

△ 在寬度為360dp的手機界面中使用16dp的水槽

△ 而在600dp寬度的平板設備中使用26dp的水槽

邊距

邊距是柵格和屏幕之間的距離，在不同的屏幕上我們可以根據手指點擊方便程度給予不同的邊距當做安全距離，同時也可以解決列和水槽無法被整除的一些情況。

△ 在360dp的手機設備上使用了16dp的邊距

△ 在600dp的平板電腦設備上使用了24dp的邊距

2. 可自定義柵格系統

我們設計的界面由于內在的邏輯關系需要，不能直接套用很多固定的柵格系統版式。那么可以根據需求進行自定義柵格系統。比如信息間的水槽就要考慮信息之間的邏輯關系。所以不要死板地使用柵格系統，根據自己的需要去自定義才是好的設計。

△ 為了讓用戶感知圖像是緊密相關的，這個案例中網格使用了8dp水槽

△ 為了讓用戶認為專輯是各個獨立的，這里使用了較大的32dp水槽來創建列之間的分隔

△ 錯誤案例：這里使用了太大的水槽，使界面顯得分裂

△ 在不同設備中的柵格系統建議

△ 在蘋果產品平臺中的柵格系統建議

七、色彩

Material Design 的配色靈感來源于現代主義設計和路標等標識，所以它的色彩選擇都非常鮮亮，顏色在明度和純度上都較為適中，在我們設計 APP 時這些顏色能夠突出信息并且使人愉悅。Material Design 非常重視背景和文字的色彩對比，需要最大化地保證文字的可讀性。在配色的時候注意三個原則：

• 分級：我們可以使用不同的顏色來告訴用戶哪些是可交互的，哪些是裝飾；并且色彩與信息的邏輯關系應該是相關的，重要的元素應該使用最突出的顏色。
• 清晰：文本和背景一定要有色彩反差，也就是常說的「黑紙白字」和「白紙黑字」。
• 品牌：一個產品的品牌與調性體現在移動端應用程序上就是主色調了，比如網易系的紅色、QQ音樂的綠色等，能讓人時刻都明白自己在什么產品上。

△ Material Design配色

△ 主色和輔助色使用同色系的樣式

1. 色表參考

Material Design 提供給我們一大堆建議的色值可供參考，如果配色時您有選擇恐懼癥，可以嘗試使用官方提供的配色色表作為參考。如果自選顏色的話，一定要注意顏色不可以選比較「臟」的顏色。

△ 色表參考

2. 界面中的色彩

在界面中我們需要考慮狀態欄、頂部導航欄、底部應用欄和 FAB 在色彩上的關系。狀態欄和頂部導航欄一般采用鄰近色設計，類似 iOS導航欄和狀態欄的一體化設計。底部應用欄和 FAB 在顏色上一般使用對比色，用以強調 FAB 的重要性。

頂部導航欄色彩

頂部的狀態欄使用了深紫色，然后導航欄使用了稍淺一點的紫色，保持頂部色彩統一令用戶感知這部分同屬一個邏輯關系。

△ 頂部應用欄的色彩

底部應用欄

這個案例中底部欄使用了輔助色藏藍，而 FAB 使用了很明顯的橙色。這樣可以強調 FAB功能的重要性，并且底部應用欄藏藍向后退讓出用戶關注焦點。

△ 底部應用欄色彩

界面整體配色

這個應用程序的主色調是粉紅色（100）。因為粉色與黑色搭配會顯得臟，所以深色使用了黑色的變體（粉紅色900）。另外，二級顏色（粉紅色50）用于按鈕和交互態。

△ 界面整體配色

強烈的對比色

這個案例中，選擇中的狀態使用了和背景對比強烈的粉色，并且讓上面的角進行彎曲提醒用戶這個選項被選擇中了。

△ 強烈的對比色

八、文字

關于 Material Design 在安卓設備上使用的字體，我想大家都應該了解了：中文使用思源字體，英文使用 Roboto字體。其他 Google 免費字體也全部都可以在安卓Material Design 中使用（下載網址：Fonts.google.com）。

1. 字體單位

在安卓設備上有一個特別需要大家注意的單位，叫做 sp。dp 是我們測量安卓間距、圖片尺寸、按鈕控件高度和寬度的單位，而字體卻有一個單獨的單位sp。那這個 SP單位和 iOS 的字體、網頁中的字體轉換率是怎樣的呢？請看下圖。

△ 字體單位對比

2. 字體大小

在安卓設備上字體大小同 iOS設備一樣，我們可以自由地使用合適的字號。同時 Material Design 給了我們一個參考表。

△ 字體大小參考

△ 標題中使用H6字號的效果

△ 解釋文字使用了Subtitle 1 字號效果

△ 正文不僅僅可以使用無襯線字體，也可以根據需求使用襯線字體

九、語言支持

Material Design 對世界眾多語言和字體進行了思考，這一點非常值得我們學習。除了我們使用的中文字體「思源」之外，還有對阿拉伯語、韓語、日語等非西文體系的支持。

△ 不同文化中誕生的文字

△ 「同樣語義不同語言的長度不同」問題

△ 希伯來語言是從右到左顯示

△ 不同文字的高度不同，在設計界面時需要給不同文字留出空間

△ 水平和垂直文字顯示的設計

十、產品圖標

產品圖標是我們在設計界面的時候體現品牌和功能性的圖標。圖標以簡單、大膽、友好的方式傳達產品的核心理念和意圖。雖然每個圖標在視覺上都是不同的，但品牌的所有產品圖標都應該通過設計方式來進行表現層面的統一。

△ 能夠體現品牌感的產品圖標

1. 圖標的網格和參考線

如果我們想設計一個48dp的圖標，那么我們可以把畫布放大到400％（192 x 192 dp）來設計，這時可以顯示4dp的邊緣。通過保持這個比例，任何變化都將按比例放大或縮小，這樣可以在畫面恢復到100％（48dp）時保持鋒利的邊緣和正確的對齊。

△ 網格和參考線

△ 不同形狀的網格布局

網格

網格盡量使用4的倍數構建，比如4dp。網格對于我們設計圖標有很好的參考作用，有利于我們發現橫縱上沒有對齊的細節。而參考線是由黃金比例和不同形狀但面積相等的幾何形模板組合而來，同樣就有很好的參考作用。

△ 放大四倍進行圖標設計

△ 在網格的輔助下可以設計出大小均衡的圖標

2. 圖標的處理

圖標的設計在 Material Design 中是比較自由的，但是由于自由也可能會出現一些表現手法上的問題。這里有一些建議可以幫助我們更好地了解圖標設計中可能遇到的問題。

△ 顏色本身是沒有Z軸的，所以不要因為顏色的關系增加多余的陰影

△ 重疊的表面層數要注意，因為太多的圖層可能使圖標過于復雜

△ 不要在圖標上使用過多的層級和分割

△ 手風琴是指圖標扁平陰影的處理。這里不要使用過多的手風琴層次，顯得臃腫

△ 不要用奇怪的透視扭曲產品圖標

十一、系統圖標

系統圖標是我們在構建界面時負責表意功能和信息的圖標。通常系統圖標尺寸不如產品圖標那樣大，但是需要讓用戶第一時間理解它所表達的內容并不簡單。系統圖標設計簡單，現代，友好，每個圖標都盡可能簡化以表達最基本的特征。

△ 系統圖標

1. 字體圖標

如果需要，我們也可以把圖標變成字體格式來節省空間。同時這么做對于放大縮小都是非常方便的。同樣 Material Design 提供了一些可供下載的現成免費圖標供我們參考（下載地址：https://material.io/tools/icons）。

△ Material Design系統圖標

2. 圖標的分類

謝天謝地，終于有設計規范愿意把圖標做一個正式的分類了。Material Design把圖標分為填充圖標（Filled）、線性圖標（Outlined）、圓角圖標（Rounded）、雙調圖標（Two-Tone）、尖角圖標（Sharp）。那么系統圖標可以使用任何適合產品的風格。

3. 造型接近幾何形

盡量使用幾何形的造型，不要使用太過松散的造型。太松散的造型會引起用戶不必要的關注。

△ 造型接近幾何形

4. 圖標留出邊距

圖標應該留出一定的邊距，保證不同面積的圖標視覺顯示一樣大。如果多個圖標具有類似的邏輯層級，且同時在界面出現，注意它們的大小應盡量相等。

△ 圖標需要間距

△ 使用網格構建圖標

△ 設計圖標時記得對齊像素網格

5. 圖標的組成

圖標由以下部分組成：①描邊末端；②圓角；③反白區域；④描邊；⑤反白邊緣；⑥留白。

△ 圖標的組成

6. 邊角

邊角半徑默認為2dp，內角應該是方形而不要使用圓形。圓角建議使用2dp的單位。

△ 邊角

7. 描邊粗細統一

圖中的圖標使用了2dp的描邊以保持圖標的一致性。如果沒有特殊原因，不要使用一種以上的描邊粗細，保證圖標視覺上的統一。

△ 描邊粗細統一

8. 圖標末端的處理

描邊末端應該是直線并有角度的，留白區域的描邊粗細也應該是2dp。描邊如果是斜度45度，那么末端應該也是斜度45度為結束。

△ 圖標末端的處理

9. 圖標點擊區域

圖標應該提供充分的留白和操作區域便于用戶手指的點擊，比較類似 iOS 的處理方式，圖標大小接近手指點擊區域7mm-9mm，如果不夠的話就增加透明的點擊熱區。

△ 圖標點擊區域

10. 圖標點擊狀態

未點擊圖標顏色為#000000，透明度為87%。點擊態圖標顏色為#000000，透明度為38%。

△ 圖標的點擊狀態

11. 圖標的品牌感

下面這個案例中圖標和界面內容的直角相互呼應，體現了自身的品牌感。

△ 圖標的品牌感

△?①品牌圖標 ②鋒利角度的圖標 ③應用中的直角圖標

十二、形狀

Material Design 過去的版本中對形狀規定較為死板，最新的 Material Design 在形狀上可謂是非常自由了。菱形、半圓形、圓角都可以使用，這些充滿個性的形狀可以幫助我們構建更酷的界面。

△ 可自行定義的形狀

△ 獨特的形狀可以引起用戶的關注

△ 形狀也可以表示內容被選中

1. 品牌感

我們可以在整個應用程序中使用體現品牌感的視覺語言，以一致的方式將形狀、顏色、弧度等特征設計界面的不同元素。這樣有助于提升品牌的整體印象。當用戶看到某種顏色或者形狀時，就會想到我們的產品。

△ 界面中使用了統一的形狀增強品牌感

十三、交互

1. 空狀態Empty states

空狀態應該和品牌一致，可以使用幽默和可愛的情感化設計來和用戶產生親和感，但是不應該體現可操作性。不要使用口號和可點擊的暗示。

△ 空狀態

2. 警告對話框Alert dialog

警告對話框可以讓用戶預知下一步會發生什么，并提供選擇來取消這個行為。比如刪除操作通常都會提示用戶是否確定要刪除。

△ 警告對話框

3. 閃屏launch screens

閃屏可以使用像蘋果平臺上 APP 那樣的圖形，比如微信的閃屏頁或開眼的動態閃屏等。除了閃屏頁的圖形動態設計之外，我們也可以使用內容的占位符作為啟動頁，這樣用戶會預知我們即將載入大概什么樣的內容。

△ 閃屏

4. 圖像 images

在我們設計的 APP 中一個圖像可能會被裁切成多個尺寸，比如1:1、3:4、16：9等，甚至是圓形或正方形。這時需要保持圖像的核心區域在任何尺寸中都顯示到。

△ 圖像的設計

5. 新手引導Onboarding

Material Design 建議產品設計新手引導界面，以此來幫助用戶了解該程序是如何操作和有什么樣的獨特功能。通常新手引導會由插圖、功能描述、注釋文本、啟動圖標、焦點組成。這里和 iOS 的設計比較一致，但是大家要注意功能描述文本和注釋文本的大小比例。

△ 新手引導的設計

6. 離線功能Offline states

有些功能會因為無網絡而無法完全使用。這時同樣需要我們設計一些狀態來表示現在是無網絡的，讓用戶感知這個狀態。當然，無網絡不代表什么也做不了，我們同樣可以在無網絡的狀態下提供給用戶一些操作的選擇，比如離線功能或者重新連接網絡的按鈕等。

△ 離線功能

十四、Material Theme Editor

如果您在使用 Sketch，那么接下來是一個福利了。Material Design 發布了針對 sketch 的主題編輯器，這個主題編輯器可謂是生產力的大殺器了，比如更改某個樣式即可應用到全局、圖標的不同風格隨意進行切換、字體樣式隨意調整等。

（下載地址：https://material.io/tools/theme-editor/）

△ 主題編輯器

總結

我們可以使用 iOS平臺的 APP設計稿（大部分采用750x1334px）改成安卓的尺寸（大部分采用1920x1080px），然后將狀態欄改為安卓樣式，字體改為思源和 Roboto，并使用切圖工具（比如Cutterman）切出安卓所需的各套切圖（一般為XHDPI、XXHDPI、XXXHDI三套或更多）即可完成粗略地安卓適配。當然我們也可以更適應安卓平臺的生態環境：將返回圖標換為箭頭、更多圖標改為豎排列三個圓點、圖片改為直角等，做這些微調。第三種方式就是我們將 iOS平臺和 Android平臺設計完全區別開來：使用 Material Design 來為安卓設計獨有的設計。Material Design 將 APP 從頭到尾的各個細節都做了指引，給了參考，做了規范。并且這個規范一直在根據生態環境更新。而且學習 Material Design設計規范對于每位設計師都是一個學習的過程，在翻譯本文關于 Material Design 的部分時，我也發現很多我之前忽視掉的設計上的細節，真的是受益匪淺。安卓設計和 iOS 相比，需要注意的問題更多，遇到可能坑我們的地方也更多。同樣更大的挑戰也會鍛煉我們的設計能力，希望您設計出更好的安卓APP來。

參考資料：

• Material Design規范：https://material.io
• 設備分辨率一覽：https://material.io/tools/devices
• Material Design色彩網址：https://material.io/tools/color
• Vr等其他設備設計規范：https://material.io/collections/additional-google-specs
• Material Design圖標庫：https://material.io/tools/icons
• Material Design 的Sketch插件：https://material.io/tools/theme-editor
• 安卓開發指引：https://material.io/develop/android
• 扁平色彩樣式：https://www.materialui.co
• MD色盤：https://www.materialpalette.com

歡迎關注作者的微信公眾號：「西見」

「郗鑒往期好文」

• 《如果你不熟悉iPhone 設計規范，請一口吃下這篇干貨！》
• 《近兩萬字的干貨！可能是最全面的網頁設計基礎知識全攻略》
• 《近萬字干貨！可能是最全面的交互基礎知識總結》