一口吃掉 Material Design
安卓是什麼？
想象一下，過年同學聚會上，大家把手機都放在飯桌前，除了各種型號的iPhone之外，你還能看到什麼品牌的手機呢？我猜一定會有OPPO、VIVO、魅族、小米、華為、三星對嗎？也許還有一加、錘子、聯想等手機品牌。這些手機全部都是使用了Android底層構架的裝置，也就是我們所說的安卓手機。它們和蘋果手機似乎沒什麼共同點：硬體的外觀、桌面系統設計、價格都不一樣，怎麼可能是一種系統呢？這個要從安卓的誕生說起了。有一個極客名叫安迪·魯賓（Andy Rubin），他曾經在蘋果工作過，後來他離開蘋果開始了漫長的創業之路，可他的專案似乎從來都不怎麼順利。直到2003年，他創立了安卓公司，安卓是一個基於Linux的開放原始碼的作業系統，他當時的計劃是免費把安卓系統提供給手機生產商，然後在預裝了安卓系統的手機上提供增值服務。由於免費開源加上效能出眾，在2014年搭載安卓系統的裝置就超過了100億部。當時諾基亞的塞班系統和很多其他的手機作業系統稱霸著手機作業系統市場，而安卓像一匹黑馬一樣殺了個突然襲擊。後來大家都知道了，諾基亞銷聲匿跡，連微軟的windowsphone作業系統現在也很少聽到了。再後來，谷歌收購了安卓，有了谷歌母公司的資源，安卓的發展就更加順風順水，在2017年全球智慧手機市場有85%的裝置都使用了安卓系統。可以說當今世界除了蘋果的iOS作業系統之外，幾乎全部都是安卓的天下。就連我們周圍的一些智慧裝置、銀行的手寫簽名系統、ATM機等都大量採用了安卓作業系統。需要注意的是安卓是一套像Windows的作業系統而並非像蘋果一樣的軟硬體打包產品。
在我國的飛速發展
由於安卓是一套效能非常好的底層框架，但是使用者體驗和設計上都是白紙，於是很多開發商會基於安卓系統的底層系統開發互動良好、視覺設計更佳的表現層部分，這種開發被叫做安卓rom開發。在中國，很多公司抓住了安卓的免費午餐發展出了自己的手機品牌，比如小米就是通過優化安卓底層框架，加上自身研發的、使用者體驗非常好的互動和視覺，完成了miui - 一款基於安卓的手機作業系統包。沒錯，最早小米並不是靠硬體取勝，而是靠miui創業的。當時手機市場上的作業系統都不太注重使用者體驗，miui無疑讓大家打開了新世界的大門，於是很多人開始把自己的三星或者其他手機刷成miui系統，由於刷機會讓手機發燙，他們也自嘲是“發燒友”，就產生了發燒友文化。後來小米自己開始生產手機就更加有粉絲基礎了。與此同時國內MP3大廠魅族也開始了自己的手機研發，搭載了優化效能和體驗的flyme，同樣基於安卓底層框架開發。幾乎每一個國內手機品牌都會有一套自身的rom系統，比如小米有MIUI，魅族有flyme，錘子有Smartisan，聯想有聯想樂OS，華為有華為rom等。基於免費的安卓底層框架要比自己開發作業系統節省巨大的經費和資源，所以這些公司可以迅速崛起。所以我們中很多人都是安卓手機的使用者。
安卓的尺寸
由於安卓是一個野蠻生長的市場，沒有如蘋果一樣嚴格的硬體生產規範，造成了安卓螢幕尺寸非常雜亂。從下圖我們就可以看到，市場上的安卓螢幕尺寸簡直是一場噩夢。大小不一的螢幕中，但使用率最高的是720P和1080P。
主流安卓裝置解析度佔比 資料圖表來自友盟
要想讓我們的APP同時在這麼多種螢幕下都顯示完美，在上圖中我們可以看到，使用者量目前最高的是720P和1080P。我們建圖時一般使用1080P的解析度來進行設計。在以下五個尺寸中我們使用切圖進行適配：
安卓主流解析度表
其他的解析度我們可以使用自適應地方法進行適配。這就是目前安卓裝置的主流適配方式。為了方便大家查詢每個裝置大小的dp值和px值，Material Design為我們準備了一個網站來查詢主流安卓裝置的尺寸（網址：https://material.io/tools/devices/）。
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。
SP單位
SP是獨立縮放畫素的簡稱（Scale-independent Pixel）。Android平臺允許使用者自定義文字大小（小、正常、大、超大等等），當文字尺寸是“正常”狀態時，1sp=1dp=0.00625英寸，而當文字尺寸是“大”或“超大”時，1sp就大於1dp。就好比我們在電腦中調整桌面字型後，只有字型大小發生改變，而視窗和圖示不會改變一樣。預設情況下1SP=1PD。所以我們在設計安卓介面時，標記字型的單位選用SP單位。很多標註軟體諸如藍湖和畫素大廚都支援SP單位標記字型。
三大金剛鍵
安卓本來底部應該有三個金剛鍵：“返回”、“HOME”、“任務列表”。這三個金剛鍵是安卓互動的一部分，安卓平臺上的應用程式互動基於三大金剛鍵。這三個鍵一般都在底部，方便手指點選，也就是說這三個按鍵應該是最常用的操作。但是由於很多使用者比較青睞iPhone的單獨home鍵設計，所以很多廠商會在硬體上隱藏掉三大金剛鍵或僅僅像iPhone一樣保留home鍵。其實安卓還可以開啟三大金剛鍵的虛擬鍵，也就是在底部會常駐半透明的三個按鍵（也因此安卓本來不鼓勵第三方APP設計底部TAB欄，因為這樣會出現兩個底部常駐區域，顯得很臃腫）可是很多廠商想讓產品接近iPhone的樣子，不僅手機上有home鍵，而且也不展開虛擬三大金剛鍵。所以本來安卓APP是不需要自己設計返回鍵的，但是由於廠商硬體的問題，保險起見在安卓平臺上的APP也都會像在蘋果平臺一樣在左上角加上返回圖示。
三大金剛鍵
切圖方法
安卓沒有@3x和@2x的檔案字尾來區分每套切圖，而是採用資料夾的區分方式。比如我們切出五套不同解析度的切圖，那麼不同的解析度應該按照：drawable-mdpi、drawable-hdpi、drawable-xhdpi、drawable-xxhdpi、drawable-xxxhdpi的資料夾來存放各套切圖。
.9切圖
.9是andriod平臺開發裡的一種特殊的圖片形式，副檔名為：.9.png。比如有一個氣泡bubble，那麼它的.9切圖命名格式就是：bubble.9.png。這種圖片能告訴程式這個圖片哪部分可以被拉伸，哪部分不要拉伸。我們要做的就是使用Photoshop的鉛筆工具，把鉛筆設定成1px大小，透明度100%，顏色選擇#000000純黑色，然後在我們的切圖邊緣畫出1畫素的橫豎線，然後把這張圖命名字尾加上.9，就和系統打好了暗號了。後續，開發人員在開發環境就可以設定哪些部分可以拉伸哪些需要保留了。噢對了，我們畫的黑色“暗號”是不會顯示給使用者的。
不固定位置的切圖需要.9來規定拉伸範圍
畫四條線規定內容（比如文字）和可拉伸區域（無圓角方便拉伸）的位置
設計方法
由於安卓裝置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）。
Material Design的隱喻
Material Design並不是完全的抽象扁平風格，它從物理現實中學習了諸如質感、投影、加速度、紙張的模擬等隱喻方法，這些都會讓Material Design更容易被使用者理解。其實我們知道Google一直在嘗試不同的設計風格，比如很早之前的長投影設計風格、後來的扁平化設計實驗等。扁平化設計的優勢就是資訊噪音少，而缺點就是情感傳遞不足，而Material Design似乎是一個很好的解決方案，在最大限度保證可讀性的基礎上有一些我們熟悉的物理現實的影子。所以一定程度上它既是擬物的也是扁平的。
設計理念
Material Design的設計中有很多設計理念是需要我們深度學習的，我們要學習這套理論的思維模式，其實就算我們不準備使用Material Design，對我們的設計思維提高也是一個很有益處的思考過程。
Z軸的概念
我們都知道什麼是三維：三維就是X軸（左右）、Y軸（上下）、Z軸（前後）組成的立體世界，而二維就是隻有X和Y軸的平面世界。據科學家說宇宙有十一個維度，人類能體驗到的是四維，除了三維還有一個時間的維度。好啦，扯遠了，回到Material Design中，我們知道手機介面是一個平面二維的空間，而Material Design通過二維的一些表達手段，比如投影、動效等構建出了Z軸（前後）的概念。
Material Design中的Z軸
Z軸的投影
不同投影暗示了不同元素的高度，我們可以理解為如同我們桌子上的幾張紙層疊在一起，那麼我們認為重要的紙在其他紙張之前，它的投影是最高的。所以在Material Design中投影最高的代表Z軸最高值，也是最重要的內容。
2dp、6dp、12dp、24dp的投影區別
在正面和側面來觀看，1dp和8dp海拔高度產生出陰影大小的不同
介面中的Z軸應用
不同的功能使用不同的Z軸高度可以表明他們的重要性和邏輯層級關係。並且這種投影是由程式設計完成的並非切圖，這點需要注意一下。Material Design為第三方開發者提供了動態且真實的投影和Z軸高度設定。
APP中不同的Z軸高度
頂部應用欄（A）、卡片式設計（B）和懸浮球FAB（C）高度的對比
介面中海拔高度對照
元件
元件是Material Design區別於iOS等其他設計的重要標識，當我們看到FAB時我們就知道這是Material Design；當我們看到底部欄的獨特設計時我們也能知道這是Material Design。想做一款原汁原味地Material Design就要了解元件的特徵。讓我們開始吧！
懸浮球 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設計
底部應用欄（App bars: bottom）
底部應用欄用於顯示螢幕底部的導航和按鍵操作。底部應用欄比較類似iOS設計中的Tab欄，但是不同於Tab欄的是底部應用欄通常不會等分為幾份，而是放置一些FAB、導航等的功能性圖示，並且講究排版的節奏感。
底部應用欄
底部應用欄上的圖示必須為2個以上（不算FAB）
底部應用欄的組成
底部應用欄由以下部分組成：1容器 2導航抽屜控制 3浮動操作按鈕（FAB）4動作圖示 5更多選單控制元件。
底部應用欄的組成
以FAB為中心的底部應用欄版式
FAB側對齊的底部應用欄版式
沒有FAB的底部應用欄版式
FAB和底部應用欄重疊的版式
FAB插入設計的底部應用欄版式
錯誤的版式:FAB脫離底部應用欄並且佔了多餘的空間
底部應用欄的層級
底部應用欄的層級分為：1容器（0dp）、 2 底部資訊欄（6dp）、 3 底部應用欄（8dp）、 4浮動按鈕（12dp）、 5頁卡（16dp）。
底部應用欄的層級
頂部應用欄（App bars: top）
頂部應用欄和我們iOS中所使用的導航欄很類似，但不完全一樣。頂部應用欄中標題並非居中而是像報紙一樣左對齊的，這是因為Material Design認為閱讀應該如在報紙上一樣按照從左到右的順序排列。並且圖示左側最多可放置一個系統圖標，右側可放置多個系統圖標。
Material Design中的頂部應用欄
頂部欄可變為選擇狀態時的工具欄
頂部應用欄的組成
頂部應用欄所包含的組成部分：1 頂部欄容器、 2 抽屜式導航圖示（可選）、 3 標題（可選） 、4 系統圖標（可選） 、5 更多按鈕（可選）。
頂部應用欄的組成
突出標題
頂部應用欄可改變高度以凸顯標題（類似蘋果的大標題設計）。同時這麼做也可以讓標題容納更多的文字，比如新聞APP就需要這個特性。
突出標題的設計
頂部應用欄可以嵌入圖片
為了減少視覺層級，頂部應用欄中也可以嵌入圖片來增強介面的整體感。圖為一個使用了嵌入圖片頂部欄的照片應用。
頂部應用欄嵌入圖片的樣式
背板設計（Backdrop）
在應用引發的某個操作中，可設計背板來承載某些選項和輔助資訊。背板的設計在iOS中比較類似Action Sheet但又更加個性化。
背板設計示例
背板設計的輔助控制元件
1 背板設計隱藏時，後層控制元件可以提供有關前層的輔助資訊。2 背板設計啟用時，後層會顯示與前層相關的控制元件。這樣可變的設計可以讓使用者更加方便地找到需要的功能。
背板設計的輔助控制元件
Crane APP所使用的背板設計
SHRINE所使用的背板設計使用了增強品牌感的直角
橫幅（Banner）
橫幅可不光是廣告哦，橫幅是頂部欄下面的第一個凸顯區域，顯示突出的訊息和相關的可選操作。它可以是一個對話，也可以是一個提示或者包含圖形的設計。
橫幅形式的對話方塊
如果搭配底部導航來設計，那麼橫幅可以直接置頂顯示
底部導航（Bottom navigation）
底部導航的設計和iOS類似，它也是將底部寬度等分為多個圖示的點選區域，並且配以輔助文字資訊方便使用者理解圖示背後的功能。底部導航是底部應用欄的一個有力補充。
底部導航的設計如同iOS中的Tab欄
OWL APP中的個性化底部導航欄
按鈕（Buttons）
按鈕是最常見的元素，在這裡Material Design為我們提供了多種多樣的按鈕設計風格。由於不同的功能和環境，按鈕可以使用：1.純文字按鈕（這種按鈕只有加粗帶色彩的文字，可以理解為可點選的連結）；2.線性按鈕（這種按鈕有一個線框來說明點選區域，比較不顯眼）；3.填充按鈕（這種按鈕較為明顯）；4.切換按鈕（這種按鈕使用率低於其他按鈕形式）。
按鈕的四種樣式
和影象結合非常好的文字按鈕
權重不會搶戲的線性按鈕
使人有點選慾望的按鈕
突出功能的切換按鈕
按鈕文字應該清晰簡潔，不應該讓人困惑
卡片式設計（Cards）
卡片式設計同樣是Material Design的顯著標志。其實卡片式設計我們可以理解為一個小的單元，在這個單元裡的資訊邏輯關係更加緊密。如果一個單元的資訊過多很容易讓使用者在閱讀時發生序列現象，卡片式設計就能有效地規避這個問題。
卡片式設計的組成
卡片式設計包含以下組成部分：1 容器卡容器。它容納所有卡元素，容器的尺寸由元素佔據的空間決定。2 縮圖（可選）。縮圖可以放置頭像、圖示和logo。3.標題文字（可選）。標題文字通常是卡片中最重要的標題，一般文字較大。4 小標題（可選）。小標題可以放置文章署名或標記位置等資訊。5 多媒體（可選）。卡片可以包括各種媒體，包括照片和視訊等。6 輔助文字（可選）。通常是對於多媒體的描述資訊。7 按鈕（可選）。8.圖示（可選）。
卡片設計的組成
卡片設計的分割線
如果卡片中的內容元素不屬於一個邏輯，那麼可以使用一條分割線來分隔成兩個區域。但是注意，分割線需要使用非常輕的顏色，並且左右不要通過去，以保證卡片的完整性。
卡片設計的分割線
Owl的頁卡設計
紙片（chips）
紙片通常是輸入框中多個元素的組合，紙片有選中態和互動態等豐富的互動。比如郵件新增郵件人的操作就是在一個輸入框內新增一個紙片的操作，這樣的紙片可以承載頭像和文字雙重資訊。
紙片的應用
紙片的互動態
Reply的紙片設計
對話方塊（Dialogs）
對話方塊是移動端互動中很重要的一環。Material Design提供了豐富的對話方塊形式來供我們使用。我們知道對話方塊可以分為模態對話方塊和非模態對話方塊，主要區別是模態對話方塊需要和人互動，非模態更多是顯示提示資訊。我們目前介紹的對話方塊屬於模態對話方塊，稍後介紹的snackbar則屬於非模態對話方塊。
左圖為警告對話方塊，右側為簡單對話方塊
左側為確認對話方塊，右側為全屏對話方塊
在使用者選擇前，禁掉確認功能防止使用者點選
分割線（Dividers）
分割線在我們設計介面中非常常見。資訊的分割按照輕重依次是：面的分割、線的分割、留白的分割。用以區分一個面中不同功能或者不同邏輯的分割線非常常用。那分割線有哪些呢？
全出血分割線和插入式分割線
左圖為全出血分割線，右圖為插入式分割線。全出血分割線給人的感受是資訊完全獨立，而插入式分割線更方便我們閱讀並準確找到當前閱讀的位置。
全出血分割線和插入式分割線
居中分割線和標題分割線
如果資訊閱讀曲線沿中心進行，那我們可以給使用者提供居中分割線保證閱讀順序。如果資訊需要標題進行區分，同樣可以使用帶小號標題的標題分割線。
居中分割線和標題分割線
Owl介面中的分割線
抽屜式導航（Navigation drawer）
抽屜式導航我最早是在蘋果平臺的應用Path看到的，那時大概是2011年。Path不僅設計出來了抽屜式導航，甚至還有FAB。很多產品經理都很青睞這款產品，但遺憾的是2018年Path關閉了服務。雖然Path的火爆使得很多iOS應用使用了抽屜式導航的互動，但是蘋果並不建議開發者使用這種互動形式。因為抽屜式導航和Tab欄比較而言Tab欄的使用者觸發率更高，而抽屜式導航需要點選兩次才能觸發某個功能，層級較深。但是Material Design很青睞這種互動形式，並鼓勵設計師在底部應用欄增加一個導航圖示，點選啟用抽屜式導航。
抽屜式導航
抽屜式導航的組成
1 容器（可選）。 2 頭部（可選）。通常為使用者個人資訊。3 分割線（可選）。 4選中態。
5選中態的文字。 6 沒有啟用的文字。 7 小標題。 8 底層介面（不可操作）。
抽屜式導航的組成
頁卡（Tabs）
頁卡常見於頂部應用欄，作為應用欄的一部分存在。一般由2-3個頁卡組成。當我們點選其中一個頁卡時，應用欄下方跳轉對應內容。
頁卡
當頁卡過多時可以使用滾動形頁卡
文字輸入框（Text fields）
使用者需要輸入文字資訊時會使用到文字輸入框。文字輸入框的樣式Material Design也做了漂亮的樣式供我們參考。
文字輸入框
圖1為填充形輸入框 圖2為線框輸入框
Rally的填充形輸入框
圖片組（Image lists）
如果我們構建一個如朋友圈或者相簿的介面，那麼我們應該如何排列一組圖片呢？怎麼樣排列才能夠讓使用者感覺有秩序感並且友好呢？
圖片組
圖片組的四種形式
1，正常圖片組。正常圖片組的每張圖片大小一樣，間距統一併且通常會窄一些，給人秩序感和統一感。這種圖片組的形式要求圖片源顯示出來是統一大小的。
2，排版圖片組。有一點像微軟Metro的排版，圖片按照柵格分割，最大尺寸的圖片等於四個小圖拼起的高寬，寬尺寸的圖片寬度等於兩個小片的寬度相加。
3，照片牆圖片組。照片牆圖片組結構比較鬆散，適合影象尺寸不均等的內容展示，效果如同家居中的照片牆。
4，瀑布流圖片組。這個大家應該比較熟悉了，有點像國內的花瓣瀑布流，圖片寬度全部相等，由於高度不等會展現出如同瀑布一樣的形式。
排版圖片組示例
瀑布流圖片組示例
滑塊（Sliders）
如果我們在設計某個音樂類的APP或者視訊APP的時候，音量或者其他設定都需要一個滑塊方便使用者進行調節。那麼調節的功能就可以使用滑塊來隱喻。
音量滑塊
選擇器（Selection controls）
選擇器在網頁和移動端程式中都很常見。在蘋果裝置中我們很少看到單選框、複選框等選擇器，轉而使用按鈕和Action Sheet來代替這些不太好點選的選擇器。但是Material Design仍然認為選擇器在移動端也是可行的，並給出了相應的規範。
選擇器
底部提示欄（Snackbars）
我們在一些不希望被打擾的介面中（比如遊戲、視訊、閱讀類應用等）經常會出現一些提示資訊，這些資訊如果用警告對話方塊彈在遊戲前並必須我們點選確認，那我們會怎麼樣？罵人對不對。所以我們需要一個對使用者不那麼打攪、並且資訊無需確認操作的資訊提示工具欄，那麼就是底部提示欄了。
Snackbars
狀態指引（Progress indicators）
某個程序載入內容時，需要讓使用者感知到這個狀態。Material Design給我們提供了一個類似跑馬燈的動畫。這樣不僅可以傳遞狀態，並且不佔用多餘的空間。
狀態指引
排版
Material Design支援了不同螢幕的解析度，主流的可以使用不同的切圖來區分，而很多不是很主流的機型就不能靠切圖來一一適配了，只能使用諸如響應式佈局等形式。在前面的文章我介紹過柵格系統（Grid Design），在安卓適配中因為響應式佈局需要縮放內容的緣故，所以我們需要在排版中考慮柵格系統。
響應式佈局
Material Design也意識到了安卓螢幕解析度太多的這種情況，它的解決思路是使用如網頁中響應式佈局的做法，根據螢幕進行等比例的縮小或放大。為了保證縮放的顯示效果，Material Design要求我們在設計之初就使用柵格系統（Grid Design），這樣可以更有效地進行響應式佈局。
柵格系統三要素：1 列（Columns） 2 水槽（Gutters） 3 邊距（Margins）
列（Columns）
列建立的時候要考慮整體的寬度，然後進行整除。然後我們做介面的時候可以和列對齊，就達到了所有寬度都是倍數或有聯絡的效果了。在平面設計中，柵格系統是為了讓介面更有秩序感，而在UI設計中，除了視覺的要求還有來自自適應需要整除元素的要求。
在360dp寬度的手機裝置中，使用4個列
而在600dp寬度的平板電腦中，通過響應式使用8個列
水槽（Gutters）
水槽是用來區別內容的，被作為列之間的留白使用的。在響應式佈局中，列的寬度是不變的，然而水槽的寬度是可變的。
在寬度為360dp的手機介面中使用16dp的水槽
而在600dp寬度的平板裝置中使用26dp的水槽
邊距
邊距是柵格和螢幕之間的距離，在不同的螢幕上我們可以根據手指點選方便程度給予不同的邊距當做安全距離，同時也可以解決列和水槽無法被整除的一些情況。
在360dp的手機裝置上使用了16dp的邊距
在600dp的平板電腦裝置上使用了24dp的邊距
可自定義柵格系統
我們設計的介面由於內在的邏輯關係需要，不能直接套用很多固定的柵格系統版式。那麼可以根據需求進行自定義柵格系統。比如資訊間的水槽就要考慮資訊之間的邏輯關係。所以不要死板地使用柵格系統，根據自己的需要去自定義才是好的設計。
為了讓使用者感知影象是緊密相關的，這個案例中網格使用了8dp水槽
為了讓使用者認為專輯是各個獨立的，這裡使用了較大的32dp水槽來建立列之間的分隔
錯誤案例：這裡使用了太大的水槽，使介面顯得分裂
在不同裝置中的柵格系統建議
在蘋果產品平臺中的柵格系統建議
色彩
Material Design的配色靈感來源於現代主義設計和路標等標識，所以它的色彩選擇都非常鮮亮，顏色在明度和純度上都較為適中，在我們設計APP時這些顏色能夠突出資訊並且使人愉悅。Material Design非常重視背景和文字的色彩對比，需要最大化地保證文字的可讀性。在配色的時候注意三個原則：1.分級。我們可以使用不同的顏色來告訴使用者哪些是可互動的，哪些是裝飾；並且色彩與資訊的邏輯關係應該是相關的，重要的元素應該使用最突出的顏色。2.清晰。文字和背景一定要有色彩反差，也就是常說的“黑紙白字”和“白紙黑字”。3.品牌。一個產品的品牌與調性體現在移動端應用程式上就是主色調了，比如網易系的紅色、QQ音樂的綠色等，能讓人時刻都明白自己在什麼產品上。
Material Design配色
主色和輔助色使用同色系的樣式
色表參考
Material Design提供給我們一大堆建議的色值可供參考，如果配色時您有選擇恐懼症，可以嘗試使用官方提供的配色色表作為參考。如果自選顏色的話，一定要注意顏色不可以選比較“髒”的顏色。
色表參考
介面中的色彩
在介面中我們需要考慮狀態列、頂部導航欄、底部應用欄和FAB在色彩上的關係。狀態列和頂部導航欄一般採用鄰近色設計，類似iOS導航欄和狀態列的一體化設計。底部應用欄和FAB在顏色上一般使用對比色用以強調FAB的重要性。
頂部導航欄色彩
頂部的狀態列使用了深紫色，然後導航欄使用了稍淺一點的紫色，保持頂部色彩統一令使用者感知這部分同屬一個邏輯關係。
頂部應用欄的色彩
底部應用欄
這個案例中底部欄使用了輔助色藏藍，而FAB使用了很明顯的橙色。這樣可以強調FAB功能的重要性，並且底部應用欄藏藍向後退讓出使用者關注焦點。
底部應用欄色彩
介面整體配色
這個應用程式的主色調是粉紅色（100）。因為粉色與黑色搭配會顯得髒，所以深色使用了黑色的變體（粉紅色900）。另外，二級顏色（粉紅色50）用於按鈕和互動態。
介面整體配色
強烈的對比色
這個案例中，選擇中的狀態使用了和背景對比強烈的粉色，並且讓上面的角進行彎曲提醒使用者這個選項被選擇中了。
強烈的對比色
文字
關於Material Design在安卓裝置上使用的字型，我想大家都應該瞭解了：中文使用思源字型，英文使用Roboto字型。其他Google免費字型也全部都可以在安卓Material Design中使用（下載網址：Fonts.google.com）。
字型單位
在安卓裝置上有一個特別需要大家注意的單位，叫做sp。dp是我們測量安卓間距、圖片尺寸、按鈕控制元件高度和寬度的單位，而字型卻有一個單獨的單位sp。那這個SP單位和iOS的字型、網頁中的字型轉換率是怎樣的呢？請看下圖。
字型單位對比
字型大小
在安卓裝置上字型大小同iOS裝置一樣，我們可以自由地使用合適的字號。同時Material Design給了我們一個參考表。
字型大小參考
標題中使用H6字號的效果
解釋文字使用了Subtitle 1 字號效果
正文不僅僅可以使用無襯線字型，也可以根據需求使用襯線字型
語言支援
Material Design對世界眾多語言和字型進行了思考，這一點非常值得我們學習。除了我們使用的中文字型“思源”之外，還有對阿拉伯語、韓語、日語等非西文體系的支援。
不同文化中誕生的文字
“同樣語義不同語言的長度不同”問題
希伯來語言是從右到左顯示
不同文字的高度不同，在設計介面時需要給不同文字留出空間
水平和垂直文字顯示的設計
產品圖示
產品圖示是我們在設計介面的時候體現品牌和功能性的圖示。圖示以簡單、大膽、友好的方式傳達產品的核心理念和意圖。雖然每個圖示在視覺上都是不同的，但品牌的所有產品圖示都應該通過設計方式來進行表現層面的統一。
能夠體現品牌感的產品圖示
圖示的網格和參考線
如果我們想設計一個48dp的圖示，那麼我們可以把畫布放大到400％（192 x 192 dp）來設計，這時可以顯示4dp的邊緣。通過保持這個比例，任何變化都將按比例放大或縮小，這樣可以在畫面恢復到100％（48dp）時保持鋒利的邊緣和正確的對齊。
網格和參考線
不同形狀的網格佈局
網格
網格儘量使用4的倍數構建，比如4dp。網格對於我們設計圖示有很好的參考作用，有利於我們發現橫縱上沒有對齊的細節。而參考線是由黃金比例和不同形狀但面積相等的幾何形模板組合而來，同樣就要很好的參考作用。
放大四倍進行圖示設計
在網格的輔助下可以設計出大小均衡的圖示
圖示的處理
圖示的設計在Material Design中是比較自由的，但是由於自由也可能會出現一些表現手法上的問題。這裡有一些建議可以幫助我們更好地瞭解圖示設計中可能遇到的問題。
顏色本身是沒有Z軸的，所以不要因為顏色的關係增加多餘的陰影
重疊的表面層數要注意，因為太多的圖層可能使圖示過於複雜
不要在圖示上使用過多的層級和分割
手風琴是指圖示扁平陰影的處理。這裡不要使用過多的手風琴層次，顯得臃腫
不要用奇怪的透視扭曲產品圖示
系統圖標
系統圖標是我們在構建介面時負責表意功能和資訊的圖示。通常系統圖標尺寸不如產品圖示那樣大，但是需要讓使用者第一時間理解它所表達的內容並不簡單。系統圖標設計簡單，現代，友好，每個圖示都儘可能簡化以表達最基本的特徵。
系統圖標
字型圖示
如果需要，我們也可以把圖示變成字型格式來節省空間。同時這麼做對於放大縮小都是非常方便的。同樣Material Design提供了一些可供下載的現成免費圖示供我們參考（下載地址：https://material.io/tools/icons）。
Material Design系統圖標
圖示的分類
謝天謝地，終於有設計規範願意把圖示做一個正式的分類了。Material Design把圖示分為填充圖示（Filled）、線性圖示（Outlined）、圓角圖示（Rounded）、雙調圖示（Two-Tone）、尖角圖示（Sharp）。那麼系統圖標可以使用任何適合產品的風格。
造型接近幾何形
儘量使用幾何形的造型，不要使用太過鬆散的造型。太鬆散的造型會引起使用者不必要的關注。
造型接近幾何形
圖示留出邊距
圖示應該留出一定的邊距，保證不同面積的圖示視覺顯示一樣大。如果多個圖示具有類似的邏輯層級，且同時在介面出現，注意它們的大小應儘量相等。
圖示需要間距
使用網格構建圖示
設計圖示時記得對齊畫素網格
圖示的組成
圖示由以下部分組成：1.描邊末端；2.圓角；3.反白區域；4.描邊；5.反白邊緣；6.留白。
圖示的組成
邊角
邊角半徑預設為2dp，內角應該是方形而不要使用圓形。圓角建議使用2dp的單位。
邊角
描邊粗細統一
圖中的圖示使用了2dp的描邊以保持圖示的一致性。如果沒有特殊原因，不要使用一種以上的描邊粗細，保證圖示視覺上的統一。
描邊粗細統一
圖示末端的處理
描邊末端應該是直線並有角度的，留白區域的描邊粗細也應該是2dp。描邊如果是斜度45度，那麼末端應該也是斜度45度為結束。
圖示末端的處理
圖示點選區域
圖示應該提供充分的留白和操作區域便於使用者手指的點選，比較類似iOS的處理方式，圖示大小接近手指點選區域7mm-9mm，如果不夠的話就增加透明的點選熱區。
圖示點選區域
圖示點選狀態
未點選圖示顏色為#000000，透明度為87%。點選態圖示顏色為#000000，透明度為38%。
圖示的點選狀態
圖示的品牌感
下面這個案例中圖示和介面內容的直角相互呼應，體現了自身的品牌感。
圖示的品牌感
1 品牌圖示 2 鋒利角度的圖示 3 應用中的直角圖示
形狀
Material Design過去的版本中對形狀規定較為死板，最新的Material Design在形狀上可謂是非常自由了。菱形、半圓形、圓角都可以使用，這些充滿個性的形狀可以幫助我們構建更酷的介面。
可自行定義的形狀
獨特的形狀可以引起使用者的關注
形狀也可以表示內容被選中
品牌感
我們可以在整個應用程式中使用體現品牌感的視覺語言，以一致的方式將形狀、顏色、弧度等特徵設計介面的不同元素。這樣有助於提升品牌的整體印象。當用戶看到某種顏色或者形狀時，就會想到我們的產品。
介面中使用了統一的形狀增強品牌感
互動
空狀態Empty states
空狀態應該和品牌一致，可以使用幽默和可愛的情感化設計來和使用者產生親和感，但是不應該體現可操作性。不要使用口號和可點選的暗示。
空狀態
警告對話方塊Alert dialog
警告對話方塊可以讓使用者預知下一步會發生什麼，並提供選擇來取消這個行為。比如刪除操作通常都會提示使用者是否確定要刪除。
警告對話方塊
閃屏launch screens
閃屏可以使用像蘋果平臺上APP那樣的圖形，比如微信的閃屏頁或開眼的動態閃屏等。除了閃屏頁的圖形動態設計之外，我們也可以使用內容的佔位符作為啟動頁，這樣使用者會預知我們即將載入大概什麼樣的內容。
閃屏
影象 images
在我們設計的APP中一個影象可能會被裁切成多個尺寸，比如1:1、3:4、16：9等，甚至是圓形或正方形。這時需要保持影象的核心區域在任何尺寸中都顯示到。
影象的設計
新手引導Onboarding
Material Design建議產品設計新手引導介面，以此來幫助使用者瞭解該程式是如何操作和有什麼樣的獨特功能。通常新手引導會由插圖、功能描述、註釋文字、啟動圖示、焦點組成。這裡和iOS的設計比較一致，但是大家要注意功能描述文字和註釋文字的大小比例。
新手引導的設計
離線功能Offline states
有些功能會因為無網路而無法完全使用。這時同樣需要我們設計一些狀態來表示現在是無網路的，讓使用者感知這個狀態。當然，無網路不代表什麼也做不了，我們同樣可以在無網路的狀態下提供給使用者一些操作的選擇，比如離線功能或者重新連線網路的按鈕等。
離線功能
Material Theme Editor
如果您在使用Sketch，那麼接下來是一個福利了。Material Design釋出了針對sketch的主題編輯器，這個主題編輯器可謂是生產力的大殺器了，比如更改某個樣式即可應用到全域性、圖示的不同風格隨意進行切換、字型樣式隨意調整等。
（下載地址： ofollow,noindex" target="_blank">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