Android 設計規範

時間 2015.3.2
版本 V1.0
翻譯楊鵬
整理趙凱強

本文章是我公司一個大牛之前的公司同事翻譯的Android的Google官方設計指導，經過我整理而成，分享給大家，歡迎轉載，但是請保留出處和翻譯作者。本指導內容詳實、規範，無論是初級開發者還是高級開發者，甚至是公司產品設計和美工，都應該研讀學習，特此推薦！由於文章內容較頗多，所以我分爲幾篇發佈，方便大家閱讀學習。如果對你有幫助，請評論或者頂一下代表支持，謝謝！

還是人多力量大啊，有同學告訴我已經有這樣的資料了，而且整理的非常棒！所以你可以直接到Android官方指導中文版進行後續閱讀，所以本文後續不再發布！這也算是一個教訓，浪費了時間做了無用功，以後做類似工作的時候，也會吸取教訓，先看看有沒有別人已經做好的，共勉！

1.設計原則

本頁對android design需要牢記的3個目標:

Enchant me(使我愉悅)
Simplify my life(簡化我的生活)
Make me amazing(讓我感到驚喜)

詳細闡述了其內涵。

1.1 Enchant me

通過令人驚訝的方式使人愉悅 —— 漂亮的界面，仔細安排的動畫或者合適的聲音效果
真實的對象比菜單和按鈕更有趣
用戶喜歡個性化的印記，這樣使他們有歸屬感，覺得一切盡在掌握。除了提供一個合理而漂亮的默認設置，還應該在不干擾主要任務的前提下，爲趣味性而給可選的個性化留有空間。
手機應對用戶的操作有自學習能力，以輸入法的自動聯想爲例，不要每次都給相同的選項，應該讓用戶優先選擇上次輸入的。

1.2 Simplify my life

保持簡潔 —— 使用簡單的短語。如果句子很長，人們總是會忽略它們。
圖片比文字更容易理解——儘量使用圖片去解釋想法。圖片可以吸引人們注意並且更容易理解。
幫我做決定，但讓我來拍板。首先嚐試猜測用戶的選擇並直接切入正題，而不是詢問用戶。太多的選擇和決定使人們感到不爽。但是萬一猜錯了，允許“撤銷”操作。
只在我需要時，展示我所需要的。人們在同時看到許多選擇時就會手足無措。把任務和信息分拆成細小、容易理解的步驟。將當前並非必要的選項隱藏起來，並讓人們慢慢學習。
讓我知道現在在哪兒。在應中很明顯的地方（如返回鍵圖標），屏幕切換時候使用過渡畫面來表明各屏幕頁面之間的關係。提供任務進度反饋（比如進度條）。
不要弄丟我的東西。將人們花時間做出來的東西保存起來，並且可以隨時隨地獲取。記住設置、個人風格、用戶創建的東西，在手機、平板和各個電腦間同步。使升級變成地球上最容易的事情。
如果界面看起來一樣的話，行爲也要一樣。通過獨特而不是微妙的視覺設計，幫助人們識別功能上的不同。不要使看起來相同的頁面在相同的輸入下卻得到不同的結果。
只在重要的時候打斷客戶操作。好的應用就像一個好的個人助理，幫助人們擺脫各種瑣事。用戶想要保持專注，除非是緊急或者有時效性的事情，才能打斷他們。中斷用戶正常操作很消耗精力而且令人沮喪。

1.3 Make me amazing

支持通用的小技巧。當用戶人們自己搞明白什麼事情的時候，會感覺很好。通過使用其它Android應用已有的視覺模式和通用的方法，讓您的應用更容易上手。例如，滑動手勢就是一種很好的頁面導航快捷方式。
錯不在用戶。當您提示人們做出改正時，要保持和藹和耐心。當使用您的應用時，用戶希望覺得到自己的聰明，而不是一個笨蛋。如果哪裏錯了，提示清晰的恢復方法，但不要讓他們去處理技術上的細節。如果應用能悄悄的搞定問題，那最好不過了。
給予鼓勵。將複雜的任務分解一個個很容易地完成的小步驟。在操作上給予反饋，哪怕僅僅是個微小的光暈。
幫我做複雜的事情。通過完成自己原本無法完成的任務，讓新手覺得自己像個專家一樣。例如，通過幾個簡單步驟，加入幾種照片特效，就能使得攝影新手的照片也很出色。
分清主次——對重要的事情要能夠快速完成（有更大的優化價值）不是所有的操作都一樣重要。事先決定好您的應用中什麼是最重要的，讓這個功能找起來容易，用起來順手，例如相機的快門和音樂播放器的暫停按鈕。

2.UI概述

Android的system UI爲構建您自己的應用提供了基礎的框架。主要包括主屏幕 (Home Screen)、全局設備導航和通知系統(Notifications)。您的應用對於保持統一和美觀的 Android 使用體驗將起到重要的作用。本章的最後，我們將介紹在您的應用中應具有的基本元素。通過閱讀本章，您將會對 Android 用戶界面裏最重要的部分有一個大體的認識。

2.1主屏幕，所有應用，最近應用

主屏幕 (Home) 是一個可以自定義的放置應用圖標、目錄和小工具 (widget) 的地方。通過左右滑動切換不同的主屏幕面板。收藏欄在屏幕的底部，無論怎麼切換面板，它都會一直顯示對您最重要的圖標和目錄。通過點擊收藏欄中間的“所有應用”按鈕打開所有的應用和小工具展示界面。
“所有應用”界面可以瀏覽所有安裝在您設備上的應用和小工具。用戶可以在“所有應用”中通過拖動圖標，把應用或小工具放置在主屏幕的空白區域。
“最近的應用”提供了一個高效的方式去切換最近使用的應用。它能爲正在運行的任務提供清晰的導航。“最近應用”按鈕放置在導航欄的右邊，點擊後將會顯示最近用戶使用的應用。它們按照時間順序排列，最近的放在最下面。點擊將切換到該應用，左右滑動則可以將其移除。

2.2系統欄

UI 欄是屏幕上專門用於顯示通知、設備通信狀態和設備導航的區域。通常 UI 欄會一直和您的應用一起顯示。而當應用需要全屏顯示，例如播放電影和瀏覽圖片的時候，可以臨時隱藏 UI 欄，免去不必要的干擾。

狀態欄：左邊顯示等待操作的通知，右邊顯示時間、電量以及信號強度等。向下滑動狀態欄滑將顯示通知的細節。
導航欄：Android 4.0 新爲手機而設計的導航欄，當設備沒有傳統的物理按鍵時纔會顯示。這裏顯示返回、主屏幕和最近應用按鈕，當運行爲 Android 2.3 或更早的系統所設計的應用時，還會顯示菜單按鈕。
組合欄：在平板上可以將狀態欄和導航欄結合在一起。

2.3通知

通知系統顯示一些簡要的信息，用戶在任何時候都可以從狀態欄訪問它們。它提供升級、提醒以及一些重要但不至於直接打斷用戶的信息。將狀態欄滑下可以打開通知抽屜（notifications drawer）。點擊消息將會打開相關的應用。

大多數的通知有一個單行的標題和單行的信息。所以推薦兩行的佈局。如果需要，您可以增加第三行。可以考慮顯示時間戳。
左右滑動一條通知將會把它從通知抽屜中移除。

2.4通用APP組件

典型的Android應用由操作欄（Action Bar）和應用內容區域組成。

主操作欄：您應用的命令和控制中心。操作欄包括您應用內的導航和最主要的操作。
視圖控制按鈕：使用戶可以在您的應用提供的視圖之間切換。視圖通常由不同的數據和您應用中不同的功能組成。
內容區域：您的應用主要內容的顯示區域。
副操作欄：提供了放置更多操作的空間，它可以放在主操作欄下面或者屏幕的底部。這個例子中，副操作欄將一些不適合放在主操作欄的功能放置在屏幕底部。

3.設備和顯示

Android 驅動了數百萬的手機、平板和其它設備，包括了各種屏幕寬度和比例。利用 Android 靈活的佈局系統，您可以創造出從平板到手機都看起來很優雅的應用。

靈活。對佈局進行放大、縮小或者裁減以適應不同的高度和寬度。
優化佈局。在較大的設備上，利用大屏幕的優勢。設計混合的視圖以顯示更多的內容，提供更簡便的導航。
適用於各種設備。爲不同的像素密度 (DPI) 的設備，提供不同的資源(主要是drawable)，使應用在任何設備上都看起來很棒。

假設策劃部給了一張160*160點陣的圖片，在160dpi的mdpi下，該圖片顯示爲1英寸*1英寸；在320dpi的xhdpi下，顯示爲0.5英寸*0.5英寸，即圖片可能會變得太小。
如果想讓一個爲mdpi設計的圖片，在不同分辨率機器上顯示的大小一樣，可以讓策劃部提供多套圖片，分別放在res目錄中的drawable-mdpi、 drawable-hdpi、drawable-xhdpi中。也可以採用以下公式，分別計算出在當前屏幕上的需要的寬高點陣數，設置到圖片控件上。
當前dpi下的點陣數 = (mdpi下的點陣數 * getResources().getDisplayMetrics().densityDpi) / 160;

那麼您應當如何開始爲多種屏幕設計呢？一種方法是以一個基本的標準 (中等尺寸，MDPI) 開始，之後將其縮放到不同的尺寸。另一種方法是從最大的屏幕尺寸開始，之後爲小屏幕去掉一些 UI 元素。

4.主題

主題是一種使得 Android 應用保持統一風格的機制。風格樣式定義了各種構建用戶界面所需要的視覺元素，包括顏色、高度、邊界填充和字體大小。爲了提升各種應用的統一性，Android 爲您在冰淇淋三明治 (Ice Cream Sandwich) 上設計的應用提供了三種系統主題:

Holo Light
Holo Dark
Holo Light with dark action bars

將這些主題應用於您的設計中將使得您的應用很好的和 Android 設計語言融合起來。

爲您應用選擇一款適合的其功能和設計美學的系統主題。如果您希望使您的應用看起來更加與衆不同，那麼從某一款系統主題開始您自己的定製設計比較好。系統主題爲您實現自己的視覺效果提供了一個堅實的基礎。
直接修改系統的這3個主題，可能是會引起很大爭議的處理方式。一方面她保證了安裝的高質量第三方軟件（遵循本指南設計的應用）有着和本地應用一致的外觀，另一方面，她修改了android原有的統一性，很可能會提供一個不完整的獨特style。

5.觸摸反饋

使用顏色和光暈效果來反饋觸摸，強調手勢的效果以及表明哪些操作是可用的。任何時候，用戶觸摸應用中的可操作區域，都應當給予視覺上的響應。這樣可以使得用戶瞭解到他觸摸的是哪個控件，並且表明應用一直在工作。

5.1狀態

大多數的 Android UI 元素都有內置的觸摸反饋效果，包括可以表明元素是否可以操作的視覺效果。注意上圖描述了pressed、focused、disabled、disabled & focused時，所需的背景色、透過比例應如何設置。在定製海信自己的風格時，應參考。

5.2交流

當界面上的操作對象需要對複雜的手勢做出響應時，應當能夠幫助用戶瞭解該操作的結果將會是什麼。例如，在最近應用（Recents）界面，當用戶開始按住一個應用縮略圖並左右滑動的時候，該條目就開始變得暗淡。這樣做可以使得用戶明白滑動可以移除該應用條目。

5.3邊界

當用戶試圖滑出可滑動區域的範圍時，應當在邊界提供視覺的反饋。例如，如果用戶試圖從主屏幕的第一屏向左滑動時，屏幕就會向右傾斜表明不能再往這邊移動了。許多 Android 的可滑動 UI 類 (例如列表 lists 和網格列表 grid lists) 都已經內置了邊界反饋。如果您需要自定義界面時，記住要提供邊界反饋。

6.度量單位和網格

設備之間除了屏幕物理尺寸不同，屏幕的像素密度 (DPI) 也不一樣。爲了簡化您爲不同的屏幕而設計的複雜度，可以將不同的設備按照大小和像素密度分類。按設備大小的兩個類別分別是手持設備 (小於 600 dp) 和平板 (大於等於 600dp)。按像素密度分類的類別有 LDPI、MDPI、HDPI 和 XHDPI。爲不同的設備優化您的應用界面，爲不同的像素密度提供不同的位圖。

600dp大致對應3.75英寸的物理尺寸（約95mm，160dp爲1英寸，按照下圖應爲屏幕寬度），公司T958（4.5吋）屏幕寬約 56mm，Samsung Notes屏幕寬約71mm；公司370 pad寬約90mm，470寬約95mm。從上述數據看，pad和手機的區別還是挺大的。

空間方面的考慮,不同的設備可顯示的 dp (density-independent pixels) 數量（對應可顯示空間）也不相同。

總的來說,可觸摸控件都是以 48dp 爲單位的。一般情況下，48dp 在設備上的物理大小是 9mm (會有一些變化)。這剛好在觸摸控件推薦的大小範圍 (7-10mm) 內，而且這樣的大小，用戶用手指觸摸起來也比較準確、容易。

dp是設備無關的點陣數，160dp對應1英寸，25.4mm，從而48dp對應7.62mm，本文9mm一說不知來源，倒是符合下述不低於7mm的說法。

如果您設計的元素都至少有 48dp 的高度和寬度，那麼可以保證:
- 您設計的元素在任何屏幕上顯示時，都不會小於最低推薦值 7mm。
- 你可以在信息密度和界面元素的可操控性之間得到較好的平衡。

注意留白,界面元素之間的留白應當是 8dp。

上圖信息非常豐富，列表前面的圖片應設計爲32dp的，該圖片上下左右都應該是8dp的留白，而目前代碼中充斥着5、10、15之類隨意的邊界留白值。

在上圖例子中，左右兩側的留白爲16dp，可以認爲是8×2，但個人認爲8dp更符合本文檔的寫作初衷。最後，無論如何，設計中應避免5、10dp之類沒有出處的設計。
如果採用160dpi的mdpi機器進行初始設計，160點陣對應160dp，即25.4mm；但如果採用240dpi的hdpi的機器進行初始設計，240點陣纔對應160dp，48dp此時對應72點陣。設計時需要注意對應關係。
設計初的計算是一方面，代碼實現完後，程序員應簡單的用尺子量一下，看自己的觸摸控件是否在7～10mm這個舒適範圍內，體會一下這個範圍，以便能夠一眼看出界面的設計、實現是否合理。

7.字體

Android的英文字體設計基於傳統的印刷排版技術，例如字體縮放、字間距規則和對齊網格。這些技術的成功運用，使用戶可以快速理解屏幕上的信息。爲此，冰淇淋三明治 (Ice Cream Sandwich) 引入了全新的 Roboto 字體家族，它專爲高分辨率屏幕而設計。當前的 TextView 控件默認支持普通、加粗、斜體和加粗斜體這幾種樣式。

Android 界面使用以下的系統默認字體顏色: textColorPrimary 和 textColorSecondary。而在light主題中則使用 textColorPrimaryInverse 和 textColorSecondaryInverse。在系統主題中還支持幾種不同的觸摸反饋的字體顏色。

字體大小上的不同可以創造出有序和容易理解的佈局。不過在同一個界面中使用過多的字體大小則會造成混亂。Android 設計框架建議您使用以下幾種字體大小:

用戶可以在“設置”中調整整個系統的字體大小。爲了支持這一特性，字體的大小應儘量使用可縮放的單位，我們稱之爲 (sp)。測試排版的時候也應當測試這些用到 sp 的佈局。

8.顏色

顏色主要用來突出重要信息。選擇合適您品牌的顏色，並且提供良好的視覺對比效果。注意，色弱的人士可能無法分辨紅色和綠色。

藍色是 Android 調色板中的標準顏色（注意顏色是用於強調某個重要信息的，不是用花花綠綠來賣弄自己的lcd色彩豐富的）。每一種顏色都有相應的深色版本以供使用。

9.圖標

圖標就是屏幕上一個真正的小圖片，它直觀的爲一個操作、一種狀態或一個應用提供了第一印象。

本頁詳細描述了launcher、action bar、contextual、notification這4類圖標的整體及真正有圖區域的大小、設計風格、顏色等信息，新設計的圖標應儘可能遵循這些要求——當前我們的手機設計感覺上基本無視這些規則。

9.1 Launcher

啓動圖標在“主屏幕”和“所有應用”中代表您的應用。因爲用戶可以設置“主屏幕”的壁紙，所以要確保您的啓動圖標在任何背景上都清晰可見。

大小和縮放。移動設備上的啓動圖標大小必須是 48x48 dp。在 Google 市場 (Market) 中顯示的啓動圖標必須是 512x512 像素。
內容。不要留白，48x48dp
樣式。如下圖所示，使用一個獨特的剪影——三維的正面視圖，看起來稍微有點從上往下的透視效果，使用戶能看到一些景深。

9.2 Action Bar

操作欄圖標是一個圖像按鈕，用來表示用戶在應用中可以執行的重要操作。使用簡潔明瞭的圖畫代表將要執行的操作，讓用戶一目瞭然。
使用 Android 圖標來表示一些通用操作，例如“刷新”和“分享”。下面的鏈接提供了一個圖標包，其中包括多種屏幕分辨率，以及對應淺色和深色的 Holo 主題的圖標。包中還有沒有樣式化的圖標，可以自由修改和您自己的主題搭配，並且提供了 Adobe® Illustrator® 源文件，供您做進一步修改。

圖標應當是32x32dp。
整體大小32x32dp,實際內容24x24dp.
形象化，平面，不要小細節，搭配使用平滑和尖銳的輪廓。如果圖畫是長瘦型的，將它轉45度角再填滿內容區（參考上圖中的筆）。線的寬度不應低於2dp。
顏色。Colors: #333333，Enabled: 60% opacity，Disabled: 30% opacity。Colors: #FFFFFF，Enabled: 80% opacity，Disabled: 30% opacity。以上色值分別用於light、dark主題下的ActionBar圖標。

9.3 Small / Contextual Icons

在應用的主體區域中，使用小圖標表示操作或者特定的狀態。例如在 Gmail 應用中，每條信息都有一個星型圖標用來標記“重要”。

小圖標應當是16x16dp。
整體大小是16x16dp，實際內容12x12dp
灰色、中性、平面和簡單。最好使用填充圖標而不是細線條勾勒。使用簡單的視覺效果，使用戶容易理解圖標的目的。
謹慎且有目的的（在特殊情況下）使用非灰色的圖標。例如在 Gmail 應用中，就使用了黃色的星型圖標表示重要的信息。如果圖標是可點擊的，使用和背景形成對比的顏色。