如果你不熟悉Material Design，請一口吃下這篇干貨！

為您準(zhǔn)備了最新的 Material Design設(shè)計(jì)規(guī)范，請伴隨筆記一口吃掉。

一、安卓是什么？

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

1. 在我國的飛速發(fā)展

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

二、安卓的尺寸

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

△ 主流安卓設(shè)備分辨率占比 數(shù)據(jù)圖表來自友盟

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

△ 安卓主流分辨率表

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

1. DP單位

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

△ PPI計(jì)算公式

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

dp*ppi/160 = px

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

2. SP單位

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

3. 三大金剛鍵

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

△ 三大金剛鍵

4. 切圖方法

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

5. .9切圖

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

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

△ 畫四條線規(guī)定內(nèi)容（比如文字）和可拉伸區(qū)域（無圓角方便拉伸）的位置

6. 設(shè)計(jì)方法

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

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

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

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

三、什么是Material Design？

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

1. Material Design的隱喻

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

四、設(shè)計(jì)理念

Material Design 的設(shè)計(jì)中有很多設(shè)計(jì)理念是需要我們深度學(xué)習(xí)的，我們要學(xué)習(xí)這套理論的思維模式，其實(shí)就算我們不準(zhǔn)備使用 Material Design，對我們的設(shè)計(jì)思維提高也是一個(gè)很有益處的思考過程。

1. Z軸的概念

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

△ Material Design中的Z軸

2. Z軸的投影

不同投影暗示了不同元素的高度，我們可以理解為如同我們桌子上的幾張紙層疊在一起，那么我們認(rèn)為重要的紙?jiān)谄渌垙堉埃耐队笆亲罡叩摹Ｋ栽?Material Design 中投影最高的代表Z軸最高值，也是最重要的內(nèi)容。

△ 2dp、6dp、12dp、24dp的投影區(qū)別

△ 在正面和側(cè)面來觀看，1dp和8dp海拔高度產(chǎn)生出陰影大小的不同

3. 界面中的Z軸應(yīng)用

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

△ APP中不同的Z軸高度

△ 頂部應(yīng)用欄（A）、卡片式設(shè)計(jì)（B）和懸浮球FAB（C）高度的對比

△ 界面中海拔高度對照

五、組件

組件是 Material Design 區(qū)別于 iOS 等其他設(shè)計(jì)的重要標(biāo)識(shí)，當(dāng)我們看到 FAB 時(shí)我們就知道這是 Material Design；當(dāng)我們看到底部欄的獨(dú)特設(shè)計(jì)時(shí)我們也能知道這是 Material Design。想做一款原汁原味的 Material Design 就要了解組件的特征。讓我們開始吧！

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

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

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

△ FAB是一個(gè)頁面中最顯眼的設(shè)計(jì)，但并不是每個(gè)頁面都需要FAB

FAB的尺寸

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

可交互的FAB

FAB 可以是一個(gè)跳轉(zhuǎn)走的功能，也可以是一個(gè)展開子菜單。這個(gè)有趣的交互是從Path應(yīng)用中學(xué)到的：點(diǎn)擊前是某個(gè)圖標(biāo)的樣式，點(diǎn)擊后 FAB本身變成了關(guān)閉按鈕，而且會(huì)彈出2個(gè)以上的子菜單圖標(biāo)矩陣。

△ 可交互的FAB

擴(kuò)展形FAB

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

△ 擴(kuò)展形FAB

△ Reply的自定義FAB設(shè)計(jì)

2. 底部應(yīng)用欄（App bars: bottom）

底部應(yīng)用欄用于顯示屏幕底部的導(dǎo)航和按鍵操作。底部應(yīng)用欄比較類似 iOS設(shè)計(jì)中的 Tab欄，但是不同于Tab欄的是底部應(yīng)用欄通常不會(huì)等分為幾份，而是放置一些 FAB、導(dǎo)航等的功能性圖標(biāo)，并且講究排版的節(jié)奏感。

△ 底部應(yīng)用欄

△ 底部應(yīng)用欄上的圖標(biāo)必須為2個(gè)以上（不算FAB）

底部應(yīng)用欄的組成

底部應(yīng)用欄由以下部分組成：①容器；②導(dǎo)航抽屜控制；③浮動(dòng)操作按鈕（FAB）；④動(dòng)作圖標(biāo)；⑤更多菜單控件。

△ 底部應(yīng)用欄的組成

△ 以FAB為中心的底部應(yīng)用欄版式

△ FAB側(cè)對齊的底部應(yīng)用欄版式

△ 沒有FAB的底部應(yīng)用欄版式

△ FAB和底部應(yīng)用欄重疊的版式

△ FAB插入設(shè)計(jì)的底部應(yīng)用欄版式

△ 錯(cuò)誤的版式：FAB脫離底部應(yīng)用欄并且占了多余的空間

底部應(yīng)用欄的層級

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

△ 底部應(yīng)用欄的層級

3. 頂部應(yīng)用欄（App bars: top）

頂部應(yīng)用欄和我們 iOS 中所使用的導(dǎo)航欄很類似，但不完全一樣。頂部應(yīng)用欄中標(biāo)題并非居中而是像報(bào)紙一樣左對齊的，這是因?yàn)?Material Design 認(rèn)為閱讀應(yīng)該如在報(bào)紙上一樣按照從左到右的順序排列。并且圖標(biāo)左側(cè)最多可放置一個(gè)系統(tǒng)圖標(biāo)，右側(cè)可放置多個(gè)系統(tǒng)圖標(biāo)。

△ Material Design中的頂部應(yīng)用欄

△ 頂部欄可變?yōu)檫x擇狀態(tài)時(shí)的工具欄

頂部應(yīng)用欄的組成

頂部應(yīng)用欄所包含的組成部分：①頂部欄容器；②抽屜式導(dǎo)航圖標(biāo)（可選）；③ 標(biāo)題（可選）；④系統(tǒng)圖標(biāo)（可選） ；⑤更多按鈕（可選）。

△ 頂部應(yīng)用欄的組成

突出標(biāo)題

頂部應(yīng)用欄可改變高度以凸顯標(biāo)題（類似蘋果的大標(biāo)題設(shè)計(jì)）。同時(shí)這么做也可以讓標(biāo)題容納更多的文字，比如新聞APP 就需要這個(gè)特性。

△ 突出標(biāo)題的設(shè)計(jì)

頂部應(yīng)用欄可以嵌入圖片

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

△ 頂部應(yīng)用欄嵌入圖片的樣式

4. 背板設(shè)計(jì)（Backdrop）

在應(yīng)用引發(fā)的某個(gè)操作中，可設(shè)計(jì)背板來承載某些選項(xiàng)和輔助信息。背板的設(shè)計(jì)在 iOS 中比較類似 Action Sheet 但又更加個(gè)性化。

△ 背板設(shè)計(jì)示例

背板設(shè)計(jì)的輔助控件

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

△ 背板設(shè)計(jì)的輔助控件

△ Crane APP所使用的背板設(shè)計(jì)

△ SHRINE所使用的背板設(shè)計(jì)使用了增強(qiáng)品牌感的直角

5. 橫幅（Banner）

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

△ 橫幅形式的對話框

△ 如果搭配底部導(dǎo)航來設(shè)計(jì)，那么橫幅可以直接置頂顯示

6. 底部導(dǎo)航（Bottom navigation）

底部導(dǎo)航的設(shè)計(jì)和 iOS 類似，它也是將底部寬度等分為多個(gè)圖標(biāo)的點(diǎn)擊區(qū)域，并且配以輔助文字信息方便用戶理解圖標(biāo)背后的功能。底部導(dǎo)航是底部應(yīng)用欄的一個(gè)有力補(bǔ)充。

△ 底部導(dǎo)航的設(shè)計(jì)如同iOS中的Tab欄

△ OWL APP中的個(gè)性化底部導(dǎo)航欄

7. 按鈕（Buttons）

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

△ 按鈕的四種樣式

△ 和圖像結(jié)合非常好的文字按鈕

△ 權(quán)重不會(huì)搶戲的線性按鈕

△ 使人有點(diǎn)擊欲望的按鈕

△ 突出功能的切換按鈕

△ 按鈕文字應(yīng)該清晰簡潔，不應(yīng)該讓人困惑

8. 卡片式設(shè)計(jì)（Cards）

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

卡片式設(shè)計(jì)的組成

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

△ 卡片設(shè)計(jì)的組成

卡片設(shè)計(jì)的分割線

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

△ 卡片設(shè)計(jì)的分割線

△ Owl的頁卡設(shè)計(jì)

9. 紙片（chips）

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

△ 紙片的應(yīng)用

△ 紙片的交互態(tài)

△ Reply的紙片設(shè)計(jì)

10. 對話框（Dialogs）

對話框是移動(dòng)端交互中很重要的一環(huán)。Material Design 提供了豐富的對話框形式來供我們使用。我們知道對話框可以分為模態(tài)對話框和非模態(tài)對話框，主要區(qū)別是模態(tài)對話框需要和人交互，非模態(tài)更多是顯示提示信息。我們目前介紹的對話框?qū)儆谀B(tài)對話框，稍后介紹的 snackbar 則屬于非模態(tài)對話框。

△ 左圖為警告對話框，右側(cè)為簡單對話框

△ 左側(cè)為確認(rèn)對話框，右側(cè)為全屏對話框

△ 在用戶選擇前，禁掉確認(rèn)功能防止用戶點(diǎn)擊

11. 分割線（Dividers）

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

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

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

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

居中分割線和標(biāo)題分割線

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

△ 居中分割線和標(biāo)題分割線

△ Owl界面中的分割線

12. 抽屜式導(dǎo)航（Navigation drawer）

抽屜式導(dǎo)航我最早是在蘋果平臺(tái)的應(yīng)用Path 看到的，那時(shí)大概是2011年。Path 不僅設(shè)計(jì)出來了抽屜式導(dǎo)航，甚至還有 FAB。很多產(chǎn)品經(jīng)理都很青睞這款產(chǎn)品，但遺憾的是2018年 Path 關(guān)閉了服務(wù)。雖然 Path 的火爆使得很多 iOS應(yīng)用使用了抽屜式導(dǎo)航的交互，但是蘋果并不建議開發(fā)者使用這種交互形式。因?yàn)槌閷鲜綄?dǎo)航和 Tab欄比較而言 Tab欄的用戶觸發(fā)率更高，而抽屜式導(dǎo)航需要點(diǎn)擊兩次才能觸發(fā)某個(gè)功能，層級較深。但是 Material Design 很青睞這種交互形式，并鼓勵(lì)設(shè)計(jì)師在底部應(yīng)用欄增加一個(gè)導(dǎo)航圖標(biāo)，點(diǎn)擊激活抽屜式導(dǎo)航。

△ 抽屜式導(dǎo)航

抽屜式導(dǎo)航的組成

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

△ 抽屜式導(dǎo)航的組成

13. 頁卡（Tabs）

頁卡常見于頂部應(yīng)用欄，作為應(yīng)用欄的一部分存在。一般由2-3個(gè)頁卡組成。當(dāng)我們點(diǎn)擊其中一個(gè)頁卡時(shí)，應(yīng)用欄下方跳轉(zhuǎn)對應(yīng)內(nèi)容。

△ 頁卡

△ 當(dāng)頁卡過多時(shí)可以使用滾動(dòng)形頁卡

14. 文字輸入框（Text fields）

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

△ 文本輸入框

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

△ Rally的填充形輸入框

15. 圖片組（Image lists）

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

△ 圖片組

圖片組的四種形式

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

△ 排版圖片組示例

△ 瀑布流圖片組示例

16. 滑塊（Sliders）

如果我們在設(shè)計(jì)某個(gè)音樂類的 APP 或者視頻APP 的時(shí)候，音量或者其他設(shè)置都需要一個(gè)滑塊方便用戶進(jìn)行調(diào)節(jié)。那么調(diào)節(jié)的功能就可以使用滑塊來隱喻。

△ 音量滑塊

17. 選擇器（Selection controls）

選擇器在網(wǎng)頁和移動(dòng)端程序中都很常見。在蘋果設(shè)備中我們很少看到單選框、復(fù)選框等選擇器，轉(zhuǎn)而使用按鈕和 Action Sheet 來代替這些不太好點(diǎn)擊的選擇器。但是 Material Design 仍然認(rèn)為選擇器在移動(dòng)端也是可行的，并給出了相應(yīng)的規(guī)范。

△ 選擇器

18. 底部提示欄（Snackbars）

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

△ Snackbars

19. 狀態(tài)指引（Progress indicators）

某個(gè)進(jìn)程加載內(nèi)容時(shí)，需要讓用戶感知到這個(gè)狀態(tài)。Material Design 給我們提供了一個(gè)類似跑馬燈的動(dòng)畫。這樣不僅可以傳遞狀態(tài)，并且不占用多余的空間。

△ 狀態(tài)指引

六、排版

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

1. 響應(yīng)式布局

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

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

列（Columns）

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

△ 在360dp寬度的手機(jī)設(shè)備中，使用4個(gè)列

△ 而在600dp寬度的平板電腦中，通過響應(yīng)式使用8個(gè)列

水槽（Gutters）

水槽是用來區(qū)別內(nèi)容的，被作為列之間的留白使用的。在響應(yīng)式布局中，列的寬度是不變的，然而水槽的寬度是可變的。

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

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

邊距

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

△ 在360dp的手機(jī)設(shè)備上使用了16dp的邊距

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

2. 可自定義柵格系統(tǒng)

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

△ 為了讓用戶感知圖像是緊密相關(guān)的，這個(gè)案例中網(wǎng)格使用了8dp水槽

△ 為了讓用戶認(rèn)為專輯是各個(gè)獨(dú)立的，這里使用了較大的32dp水槽來創(chuàng)建列之間的分隔

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

△ 在不同設(shè)備中的柵格系統(tǒng)建議

△ 在蘋果產(chǎn)品平臺(tái)中的柵格系統(tǒng)建議

七、色彩

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

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

△ Material Design配色

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

1. 色表參考

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

△ 色表參考

2. 界面中的色彩

在界面中我們需要考慮狀態(tài)欄、頂部導(dǎo)航欄、底部應(yīng)用欄和 FAB 在色彩上的關(guān)系。狀態(tài)欄和頂部導(dǎo)航欄一般采用鄰近色設(shè)計(jì)，類似 iOS導(dǎo)航欄和狀態(tài)欄的一體化設(shè)計(jì)。底部應(yīng)用欄和 FAB 在顏色上一般使用對比色，用以強(qiáng)調(diào) FAB 的重要性。

頂部導(dǎo)航欄色彩

頂部的狀態(tài)欄使用了深紫色，然后導(dǎo)航欄使用了稍淺一點(diǎn)的紫色，保持頂部色彩統(tǒng)一令用戶感知這部分同屬一個(gè)邏輯關(guān)系。

△ 頂部應(yīng)用欄的色彩

底部應(yīng)用欄

這個(gè)案例中底部欄使用了輔助色藏藍(lán)，而 FAB 使用了很明顯的橙色。這樣可以強(qiáng)調(diào) FAB功能的重要性，并且底部應(yīng)用欄藏藍(lán)向后退讓出用戶關(guān)注焦點(diǎn)。

△ 底部應(yīng)用欄色彩

界面整體配色

這個(gè)應(yīng)用程序的主色調(diào)是粉紅色（100）。因?yàn)榉凵c黑色搭配會(huì)顯得臟，所以深色使用了黑色的變體（粉紅色900）。另外，二級顏色（粉紅色50）用于按鈕和交互態(tài)。

△ 界面整體配色

強(qiáng)烈的對比色

這個(gè)案例中，選擇中的狀態(tài)使用了和背景對比強(qiáng)烈的粉色，并且讓上面的角進(jìn)行彎曲提醒用戶這個(gè)選項(xiàng)被選擇中了。

△ 強(qiáng)烈的對比色

八、文字

關(guān)于 Material Design 在安卓設(shè)備上使用的字體，我想大家都應(yīng)該了解了：中文使用思源字體，英文使用 Roboto字體。其他 Google 免費(fèi)字體也全部都可以在安卓Material Design 中使用（下載網(wǎng)址：Fonts.google.com）。

1. 字體單位

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

△ 字體單位對比

2. 字體大小

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

△ 字體大小參考

△ 標(biāo)題中使用H6字號的效果

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

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

九、語言支持

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

△ 不同文化中誕生的文字

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

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

△ 不同文字的高度不同，在設(shè)計(jì)界面時(shí)需要給不同文字留出空間

△ 水平和垂直文字顯示的設(shè)計(jì)

十、產(chǎn)品圖標(biāo)

產(chǎn)品圖標(biāo)是我們在設(shè)計(jì)界面的時(shí)候體現(xiàn)品牌和功能性的圖標(biāo)。圖標(biāo)以簡單、大膽、友好的方式傳達(dá)產(chǎn)品的核心理念和意圖。雖然每個(gè)圖標(biāo)在視覺上都是不同的，但品牌的所有產(chǎn)品圖標(biāo)都應(yīng)該通過設(shè)計(jì)方式來進(jìn)行表現(xiàn)層面的統(tǒng)一。

△ 能夠體現(xiàn)品牌感的產(chǎn)品圖標(biāo)

1. 圖標(biāo)的網(wǎng)格和參考線

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

△ 網(wǎng)格和參考線

△ 不同形狀的網(wǎng)格布局

網(wǎng)格

網(wǎng)格盡量使用4的倍數(shù)構(gòu)建，比如4dp。網(wǎng)格對于我們設(shè)計(jì)圖標(biāo)有很好的參考作用，有利于我們發(fā)現(xiàn)橫縱上沒有對齊的細(xì)節(jié)。而參考線是由黃金比例和不同形狀但面積相等的幾何形模板組合而來，同樣就有很好的參考作用。

△ 放大四倍進(jìn)行圖標(biāo)設(shè)計(jì)

△ 在網(wǎng)格的輔助下可以設(shè)計(jì)出大小均衡的圖標(biāo)

2. 圖標(biāo)的處理

圖標(biāo)的設(shè)計(jì)在 Material Design 中是比較自由的，但是由于自由也可能會(huì)出現(xiàn)一些表現(xiàn)手法上的問題。這里有一些建議可以幫助我們更好地了解圖標(biāo)設(shè)計(jì)中可能遇到的問題。

△ 顏色本身是沒有Z軸的，所以不要因?yàn)轭伾年P(guān)系增加多余的陰影

△ 重疊的表面層數(shù)要注意，因?yàn)樘嗟膱D層可能使圖標(biāo)過于復(fù)雜

△ 不要在圖標(biāo)上使用過多的層級和分割

△ 手風(fēng)琴是指圖標(biāo)扁平陰影的處理。這里不要使用過多的手風(fēng)琴層次，顯得臃腫

△ 不要用奇怪的透視扭曲產(chǎn)品圖標(biāo)

十一、系統(tǒng)圖標(biāo)

系統(tǒng)圖標(biāo)是我們在構(gòu)建界面時(shí)負(fù)責(zé)表意功能和信息的圖標(biāo)。通常系統(tǒng)圖標(biāo)尺寸不如產(chǎn)品圖標(biāo)那樣大，但是需要讓用戶第一時(shí)間理解它所表達(dá)的內(nèi)容并不簡單。系統(tǒng)圖標(biāo)設(shè)計(jì)簡單，現(xiàn)代，友好，每個(gè)圖標(biāo)都盡可能簡化以表達(dá)最基本的特征。

△ 系統(tǒng)圖標(biāo)

1. 字體圖標(biāo)

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

△ Material Design系統(tǒng)圖標(biāo)

2. 圖標(biāo)的分類

謝天謝地，終于有設(shè)計(jì)規(guī)范愿意把圖標(biāo)做一個(gè)正式的分類了。Material Design把圖標(biāo)分為填充圖標(biāo)（Filled）、線性圖標(biāo)（Outlined）、圓角圖標(biāo)（Rounded）、雙調(diào)圖標(biāo)（Two-Tone）、尖角圖標(biāo)（Sharp）。那么系統(tǒng)圖標(biāo)可以使用任何適合產(chǎn)品的風(fēng)格。

3. 造型接近幾何形

盡量使用幾何形的造型，不要使用太過松散的造型。太松散的造型會(huì)引起用戶不必要的關(guān)注。

△ 造型接近幾何形

4. 圖標(biāo)留出邊距

圖標(biāo)應(yīng)該留出一定的邊距，保證不同面積的圖標(biāo)視覺顯示一樣大。如果多個(gè)圖標(biāo)具有類似的邏輯層級，且同時(shí)在界面出現(xiàn)，注意它們的大小應(yīng)盡量相等。

△ 圖標(biāo)需要間距

△ 使用網(wǎng)格構(gòu)建圖標(biāo)

△ 設(shè)計(jì)圖標(biāo)時(shí)記得對齊像素網(wǎng)格

5. 圖標(biāo)的組成

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

△ 圖標(biāo)的組成

6. 邊角

邊角半徑默認(rèn)為2dp，內(nèi)角應(yīng)該是方形而不要使用圓形。圓角建議使用2dp的單位。

△ 邊角

7. 描邊粗細(xì)統(tǒng)一

圖中的圖標(biāo)使用了2dp的描邊以保持圖標(biāo)的一致性。如果沒有特殊原因，不要使用一種以上的描邊粗細(xì)，保證圖標(biāo)視覺上的統(tǒng)一。

△ 描邊粗細(xì)統(tǒng)一

8. 圖標(biāo)末端的處理

描邊末端應(yīng)該是直線并有角度的，留白區(qū)域的描邊粗細(xì)也應(yīng)該是2dp。描邊如果是斜度45度，那么末端應(yīng)該也是斜度45度為結(jié)束。

△ 圖標(biāo)末端的處理

9. 圖標(biāo)點(diǎn)擊區(qū)域

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

△ 圖標(biāo)點(diǎn)擊區(qū)域

10. 圖標(biāo)點(diǎn)擊狀態(tài)

未點(diǎn)擊圖標(biāo)顏色為#000000，透明度為87%。點(diǎn)擊態(tài)圖標(biāo)顏色為#000000，透明度為38%。

△ 圖標(biāo)的點(diǎn)擊狀態(tài)

11. 圖標(biāo)的品牌感

下面這個(gè)案例中圖標(biāo)和界面內(nèi)容的直角相互呼應(yīng)，體現(xiàn)了自身的品牌感。

△ 圖標(biāo)的品牌感

△?①品牌圖標(biāo) ②鋒利角度的圖標(biāo) ③應(yīng)用中的直角圖標(biāo)

十二、形狀

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

△ 可自行定義的形狀

△ 獨(dú)特的形狀可以引起用戶的關(guān)注

△ 形狀也可以表示內(nèi)容被選中

1. 品牌感

我們可以在整個(gè)應(yīng)用程序中使用體現(xiàn)品牌感的視覺語言，以一致的方式將形狀、顏色、弧度等特征設(shè)計(jì)界面的不同元素。這樣有助于提升品牌的整體印象。當(dāng)用戶看到某種顏色或者形狀時(shí)，就會(huì)想到我們的產(chǎn)品。

△ 界面中使用了統(tǒng)一的形狀增強(qiáng)品牌感

十三、交互

1. 空狀態(tài)Empty states

空狀態(tài)應(yīng)該和品牌一致，可以使用幽默和可愛的情感化設(shè)計(jì)來和用戶產(chǎn)生親和感，但是不應(yīng)該體現(xiàn)可操作性。不要使用口號和可點(diǎn)擊的暗示。

△ 空狀態(tài)

2. 警告對話框Alert dialog

警告對話框可以讓用戶預(yù)知下一步會(huì)發(fā)生什么，并提供選擇來取消這個(gè)行為。比如刪除操作通常都會(huì)提示用戶是否確定要?jiǎng)h除。

△ 警告對話框

3. 閃屏launch screens

閃屏可以使用像蘋果平臺(tái)上 APP 那樣的圖形，比如微信的閃屏頁或開眼的動(dòng)態(tài)閃屏等。除了閃屏頁的圖形動(dòng)態(tài)設(shè)計(jì)之外，我們也可以使用內(nèi)容的占位符作為啟動(dòng)頁，這樣用戶會(huì)預(yù)知我們即將載入大概什么樣的內(nèi)容。

△ 閃屏

4. 圖像 images

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

△ 圖像的設(shè)計(jì)

5. 新手引導(dǎo)Onboarding

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

△ 新手引導(dǎo)的設(shè)計(jì)

6. 離線功能Offline states

有些功能會(huì)因?yàn)闊o網(wǎng)絡(luò)而無法完全使用。這時(shí)同樣需要我們設(shè)計(jì)一些狀態(tài)來表示現(xiàn)在是無網(wǎng)絡(luò)的，讓用戶感知這個(gè)狀態(tài)。當(dāng)然，無網(wǎng)絡(luò)不代表什么也做不了，我們同樣可以在無網(wǎng)絡(luò)的狀態(tài)下提供給用戶一些操作的選擇，比如離線功能或者重新連接網(wǎng)絡(luò)的按鈕等。

△ 離線功能

十四、Material Theme Editor

如果您在使用 Sketch，那么接下來是一個(gè)福利了。Material Design 發(fā)布了針對 sketch 的主題編輯器，這個(gè)主題編輯器可謂是生產(chǎn)力的大殺器了，比如更改某個(gè)樣式即可應(yīng)用到全局、圖標(biāo)的不同風(fēng)格隨意進(jìn)行切換、字體樣式隨意調(diào)整等。

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

△ 主題編輯器

總結(jié)

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

參考資料：

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

歡迎關(guān)注作者的微信公眾號：「西見」

「郗鑒往期好文」

• 《如果你不熟悉iPhone 設(shè)計(jì)規(guī)范，請一口吃下這篇干貨！》
• 《近兩萬字的干貨！可能是最全面的網(wǎng)頁設(shè)計(jì)基礎(chǔ)知識(shí)全攻略》
• 《近萬字干貨！可能是最全面的交互基礎(chǔ)知識(shí)總結(jié)》