現在的Android手機界面樣式千差萬别，因為手機廠商都有自己獨立的一套主題系統，不同品牌的Android手機主題和交互方式也有很大的區别。

這裡就針對Android原生Material Design（Google 公司推出的設計語言，翻譯為“質感設計”）進行分解，讓大家清楚Material Design中的一些設計規範。Material Design的設計規範細緻入微，有很多的設計非常巧妙。

要注意一點，我們必須掌握這些設計規範，但是不應該拘泥于設計規範，而是要去打破它（實際上，Google官方應用也沒有全部遵循設計規範，所以不要被條條框框限制住）。

Android的設計原則

Material Design的核心理念是還原最真實的體驗，保留最原始的形态、空間和過渡變化。其Material最為重視的就是跨平台的适配性，通過規範化保障了體驗的高度一緻，這是Google最為獨特的地方。

Material Design的作用是統一規範，在平台自适配的同時降低了開發和學習成本。如下圖所示，白色的卡片和導航根據不同機型進行有效地适配，Material Design遵循這一理念，不僅統一了各平台的視覺，而且有效地降低了開發成本。

Material Design的适配

» 核心視覺載體（魔法紙片）

Material Design中的“魔法紙片”是最重要的信息載體元素，紙片可以層疊、合并或分離，擁有現實中的厚度、慣性和反饋，同時擁有液體的一些特性，能夠自由伸展變形，改變形狀。在處理紙片内容時，例如縮小紙片時，内容大小保持不變，多張紙片可以拼接成一張，而且紙片可以在任何位置憑空出現，如圖所示。

魔法紙片

» 層級空間

在Material Design中引入了Z軸空間，元素離底部越遠，投影越重，其中每個元素的基本厚度為1dp，如圖所示。

層級空間

» 動畫

Material Design可以還原真實世界的動畫運動軌迹，例如加速和減速、急速開始、急速停止等，如圖 所示。強調動畫不隻是為了裝飾，更是為了表達出界面、元素之間的關系。

還原真實世界的動畫運動軌迹

在Material Design的動畫效果中經常會用到水波效果，該效果可以更好地體現操作的位置和與控件按鈕之間的關系，如圖所示。

水波效果

Material Design的轉場動畫效果可以強調界面與界面之間的關系和層級。點擊圖片或按鈕後會以圓心點放大的動畫進行過渡，有效地體現了頁面與頁面之間的切換關系，如圖所示。

轉場動畫

子父關系的過渡

子父關系的過渡

在Material Design中，可以巧妙地運用有序的動畫來引導用戶的閱讀視線，這樣不僅讓界面變得生動活潑，也可以加強用戶對界面層級的理解，如圖所示。

用動畫引導閱讀視線

Android的控件設計規範

Android的界面設計中控件主要包括按鈕、卡片、對話框、列表、分割線、菜單、加載方式、選擇框和輸入框等。

» 按鈕

Android的按鈕控件分為懸浮型按鈕、色塊型按鈕和圖形化按鈕等，層級依次遞減。懸浮型按鈕使用的配色在界面中比較突出，按鈕中的圖案比較簡明，主要作用是加強用戶對按鈕的操作性，有時候為了避免遮擋，按鈕會在下拉的時候自動隐藏，如圖所示。

懸浮型按鈕

色塊型按鈕從視覺上看起來點擊性很強，給用戶一種想觸碰它的感覺，所以通常放在頁面中最重要的按鈕上，以方便用戶進行尋找，如圖所示。

色塊型按鈕

圖形化按鈕在視覺上看起來比較“輕”，用在界面中時，在視覺上會給人一種整體的感受，經常用在按鈕比較多或按鈕重複比較多的界面中，這樣會讓界面顯得更為平衡，如圖所示。

圖形化按鈕

» 卡片

Android的卡片規範統一設計為2dp的圓角，如圖1所示。在界面中需要展現多種内容或是在内容塊中包含了豐富的操作，例如點贊、滑動條和評論等操作時，一般都會用到卡片進行設計，如圖2所示。

圖1 卡片設計規範

圖2 卡片的用途

» 對話框

Android的對話框中内容由标題、正文和操作按鈕組成，對話框四周的留白通常為24dp，如圖所示。Android的對話框分為有操作項對話框、不帶操作項對話框和全屏對話框。

對話框設計規範

有操作項對話框如下圖所示，在設計時需要注意以下四點。

①點擊對話框的區域，不會關閉對話框。

②取消的操作放在對話框的左邊。

③操作項的文案要具體，不能隻寫“是”和“否”。

④完成選項操作後，需要确定後才會提交。

有操作項對話框

無操作項對話框如下圖所示，在設計時需要注意以下兩點。

①點擊對話框中的列表項會直接發出操作，并關閉對話框。

②點擊對話框外的區域将會關閉對話框。

無操作項對話框

全屏對話框右上角的操作項一般是保存、發送、添加、分享、更新和創建之類的操作，這些操作可以是可點狀态，也可以是不可點擊狀态，而左上角一般是取消或返回操作，如圖所示。

全屏對話框

» 列表

Android列表的主操作在左側，輔助操作在右側（輔助操作可以是勾選、開關和展開等），如圖1所示。另外，同一列表的操作手勢是一緻的，如圖2所示。

圖1 Android列表

圖2 列表操作的手勢保持一緻

» 分割線

Android的分割線如下圖所示，在設計時需要注意以下4點。

①列表左邊如果有頭像或圖标元素，其中列表與列表的分割線需要與文字對齊，右邊留白。

②列表在左邊沒有元素時，可以将分割線拉通，使用左右無縫隙的分割線。

③分割線的顔色不要太深，粗細不要超出一個單位（1dp或1px），否則容易導緻割裂感太強。

④在使用通欄分割線進行分割時，内容層級要高于左邊有留白分割線分割的内容。

Android的分割線

» 菜單

在點擊Android的菜單控件時，菜單控件會在當前頁面中展開，其中當前選定中項的背景顔色會顯示為灰色，如圖1所示。如果可以選擇的項目比較多，菜單項會以滾動條的方式進行顯示，用戶可以通過上下滑動的方式找到合适的選項，如圖2所示。

Android的菜單

以滾動條顯示菜單項

» 加載方式

在Android的加載控件中有進度條加載和環形加載兩種方式。其中進度條加載分為已知加載、未知加載、緩沖加載和未知加載查找4種加載方式，這些加載進度條隻出現在卡片的邊緣，如圖所示。

加載進度條隻出現在卡片邊緣

已知加載進度條：這種加載方式是從左往右進行加載，加載的進度條會填充顔色，直到滿格加載完為止，如圖所示。

已知加載進度條

未知加載進度條：這種加載方式表現為有色線條從左往右循環位移，直到加載完畢進度條消失為止，如圖所示。

未知加載進度條

緩沖加載進度條：這種加載方式的進度條首先會從左往右進行預加載，同時進度條會顯示為藍灰色的點狀效果，當完整地讀取數據後進度條才會進行顔色填充，如圖所示。

緩沖加載進度條

未知加載查找進度條：這種加載方式出現的頻率比較低，其加載形式分為兩個動畫組合，首先有色線條會從右往左循環位移表示查找數據，查找到數據後再進行顔色加載，同時顔色會從左往右進行填充，如圖所示。

未知加載查找進度條

環形加載不僅可以在頁面信息加載中使用，還可以在懸浮按鈕中使用，例如點擊下載的按鈕進度條出現在按鈕邊緣，如圖所示。

進度條出現在懸浮按鈕上

環形加載也分為已知加載和未知加載兩種，其中已知加載的效果和進度條的已知加載效果一樣，都會進行顔色加載填充，而未知加載的圓弧不會閉合，如圖所示。

環形加載

» 輸入框

Android的輸入框通常用橫線來設計，粗細為2dp，如圖所示。激活後的輸入框的橫線顔色會高亮顯示，沒有激活的輸入框橫線會顯示為灰色。另外，不可點擊的輸入框文字及橫線都會顯示為灰色效果。

Android的輸入框

» 選擇框

在填寫信息的時候會用到選擇框，例如單選、多選和開關等，其中單選的樣式通常為圓形點，多選為方形加勾選，開關為左關右開，如圖所示。從視覺上來看，有顔色的狀态表示選中狀态，灰色的狀态表示未選定或關閉狀态。

ndroid的選擇框

Android的設計尺寸及單位

在設計界面時，經常會借助栅格系統進行輔助設計，栅格的最小單位為8dp，如圖所示。

栅格系統

在Android系統中，界面大小一般設計為1080px×1920px，其中狀态欄高度為72px，導航欄高度168px，在導航欄中使用的icon的大小範圍為64px×64px，而底部欄的高度則為144px，如圖所示。

界面常用設計尺寸

在信息流的設計中，左右的間距會保持一緻，通常設定為32px，從而保證有足夠的留白，如圖所示。信息流中的文本、圖片和頭像都會依據間距進行左右對齊，以此來保證頁面的規則性。

信息流的留白間距

在1080px×1920px的設計圖中，文字要有主次。把字号大小分為3個級别，例如主文案的昵稱會設置為46px，描述文字會設置為36px，而最小字号的時間等信息文字的大小會設置為30px，如圖所示。

設計圖中的字号設定

在界面中經常會出現單行列表的樣式，這種樣式的高度為144px，列表中的文字字号大小為44px，如圖所示。其中列表被點擊或選中的效果可以統一設置為品牌色的色值，而透明度可以設置為10%，這樣的設計會讓品牌印象貫穿在整個頁面中，更容易讓用戶記住産品的特點。

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!