一口吃掉 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）用於按鈕和交互態。
界面整體配色
強烈的對比色
這個案例中，選擇中的狀態使用了和背景對比強烈的粉色，並且讓上面的角進行彎曲提醒用戶這個選項被選擇中了。
強烈的對比色
文字
字體單位
在安卓設備上有一個特別需要大家注意的單位，叫做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的主題編輯器，這個主題編輯器可謂是生產力的大殺器了，比如更改某個樣式即可應用到全局、圖標的不同風格隨意進行切換、字體樣式隨意調整等。
（下載地址：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 拍攝的竅門
TAG:龐門正道 |