詳解app設計基本原則「app設計規範和設計指導原則」

現在的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%，這樣的設計會讓品牌印象貫穿在整個頁面中，更容易讓用戶記住產品的特點。