flutter學習之二Material Design設計規範

前言：

　最近在自學flutter跨平臺開發，從學習的過程來看真心感受不是那麼一件特別容易的事。不但要了解語法規則， 還要知曉經常使用控件，和一些擴展性的外延知識，因此套一句古人的話「路漫漫其修遠矣，無將上下而求索」。

關於Material Design     

如下是摘錄的一篇很是好的關於「Material Design」的文章，傳送門

一、安卓是什麼？

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

1. 在我國的飛速發展

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

2、安卓的尺寸

因爲安卓是一個野蠻生長的市場，沒有如蘋果同樣嚴格的硬件生產規範，形成了安卓屏幕尺寸很是雜亂。從下圖咱們就能夠看到，市場上的安卓屏幕尺寸簡直是一場噩夢。大小不一的屏幕中，但使用率最高的是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等於多少像素了：

好比這個設備的 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設計規範和如何使用這種設計風格構建咱們的產品界面。

 

3、什麼是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似 乎是一個很好的解決方案，在最大限度保證可讀性的基礎上有一些咱們熟悉的物理現實的影子。因此必定程度上它既是擬物的也是扁平的。

4、設計理念

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）高度的對比

 

 

△ 界面中海拔高度對照

 

5、組件

組件是 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 的顯著標志。其實卡片式設計咱們能夠理解爲一個小的單元，在這個單元裏的信息邏輯關係更加緊密。若是一個單元的信息過多很容易讓用戶在閱讀時發生串行現象，卡片式設計就能有效地規避這個問題。

卡片式設計的組成

卡片式設計包含如下組成部分：①容器卡容器。它容納全部卡元素，容器的尺寸由元素佔據的空間決定。②縮略圖（可選）。縮略圖能夠放置頭像、圖標和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 給咱們提供了一個相似跑馬燈的動畫。這樣不只能夠傳遞狀態，而且不佔用多餘的空間。

△ 狀態指引

6、排版

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水槽來建立列之間的分隔

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

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

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

 

7、色彩

Material Design 的配色靈感來源於現代主義設計和路標等標識，因此它的色彩選擇都很是鮮亮，顏色在明度和純度上都較爲適中，在咱們設計 APP 時這些顏色可以突出信息而且令人愉悅。Material Design 很是重視背景和文字的色彩對比，須要最大化地保證文字的可讀性。在配色的時候注意三個原則：

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

△ Material Design配色

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

1. 色表參考

Material Design 提供給咱們一大堆建議的色值可供參考，若是配色時您有選擇恐懼症，能夠嘗試使用官方提供的配色色表做爲參考。若是自選顏色的話，必定要注意顏色不能夠選比較「髒」的顏色。

△ 色表參考

2. 界面中的色彩

在界面中咱們須要考慮狀態欄、頂部導航欄、底部應用欄和 FAB 在色彩上的關係。狀態欄和頂部導航欄通常採用鄰近色設計，相似 iOS導航欄和狀態欄的一體化設計。底部應用欄和 FAB 在顏色上通常使用對比色，用以強調 FAB 的重要性。

頂部導航欄色彩

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

△ 頂部應用欄的色彩

底部應用欄

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

△ 底部應用欄色彩

界面總體配色

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

△ 界面總體配色

強烈的對比色

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

△ 強烈的對比色

8、文字

關於 Material Design 在安卓設備上使用的字體，我想你們都應該瞭解了：中文使用思源字體，英文使用 Roboto字體。其餘 Google 免費字體也所有均可以在安卓Material Design 中使用（下載網址：Fonts.google.com）。

1. 字體單位

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

△ 字體單位對比

2. 字體大小

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

△ 字體大小參考

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

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

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

9、語言支持

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

△ 不一樣文化中誕生的文字

 

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

 

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

 

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

 

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

 

10、產品圖標

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

△ 可以體現品牌感的產品圖標

1. 圖標的網格和參考線

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

△ 網格和參考線

△ 不一樣形狀的網格佈局

網格

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

△ 放大四倍進行圖標設計

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

2. 圖標的處理

圖標的設計在 Material Design 中是比較自由的，可是因爲自由也可能會出現一些表現手法上的問題。這裏有一些建議能夠幫助咱們更好地瞭解圖標設計中可能遇到的問題。

△ 顏色自己是沒有Z軸的，因此不要由於顏色的關係增長多餘的陰影

△ 重疊的表面層數要注意，由於太多的圖層可能使圖標過於複雜

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

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

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

11、系統圖標

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

△ 系統圖標

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. 圖標的品牌感

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

△ 圖標的品牌感

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

12、形狀

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

△ 可自行定義的形狀

△ 獨特的形狀能夠引發用戶的關注

△ 形狀也能夠表示內容被選中

1. 品牌感

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

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

十3、交互

1. 空狀態Empty states

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

△ 空狀態

2. 警告對話框Alert dialog

警告對話框可讓用戶預知下一步會發生什麼，並提供選擇來取消這個行爲。好比刪除操做一般都會提示用戶是否肯定要刪除。

△ 警告對話框

3. 閃屏launch screens

閃屏可使用像蘋果平臺上 APP 那樣的圖形，好比微信的閃屏頁或開眼的動態閃屏等。除了閃屏頁的圖形動態設計以外，咱們也可使用內容的佔位符做爲啓動頁，這樣用戶會預知咱們即將載入大概什麼樣的內容。

△ 閃屏

4. 圖像 images

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

△ 圖像的設計

5. 新手引導Onboarding

Material Design 建議產品設計新手引導界面，以此來幫助用戶瞭解該程序是如何操做和有什麼樣的獨特功能。一般新手引導會由插圖、功能描述、註釋文本、啓動圖標、焦點組成。這裏和 iOS 的設計比較一致，可是你們要注意功能描述文本和註釋文本的大小比例。

△ 新手引導的設計

6. 離線功能Offline states

有些功能會由於無網絡而沒法徹底使用。這時一樣須要咱們設計一些狀態來表示如今是無網絡的，讓用戶感知這個狀態。固然，無網絡不表明什麼也作不了，咱們一樣能夠在無網絡的狀態下提供給用戶一些操做的選擇，好比離線功能或者從新鏈接網絡的按鈕等。

△ 離線功能

十4、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來。