Android UI設計

讓我們一起面對吧。Android多型号的裝置以及形狀的諸多因素，讓其設計感覺像是一場艱苦的戰鬥。其神秘的文檔使得設計和生産在一開始就顯得很難。在網上找有關Android設計的網絡資源，你會發現很少有幫助的東西。

解密Android螢幕密度，

通過設計模式學習Android設計基礎，

設計開發人員需要的資産，

如何擷取螢幕截圖，

什麼是Android 3?未來還有什麼？

Android智能手機及顯示屏尺寸

Android智能手機所支援螢幕的基準是T – Mobile G1——Android平台的第一款面世裝置，其配備了320 × 480像素的HVGA螢幕。

HVGA表示“半尺寸影像圖形數組”（或一半大小的VGA），是目前智能手機的标準顯示大小。iPhone 3GS，3G和2G都使用這一相同的配置。

<a href="http://www.boxui.com/blog/wp-content/uploads/2011/07/194457BEC.jpg"></a>

T-Mobile G1是面世的第一款Android裝置，也是第一款支援Android基準螢幕的手機。

為簡單起見，Android将螢幕尺寸（螢幕從左上角到右下角的對角線長度）分為四個級别：小，正常，大和超大。

<a href="http://www.boxui.com/blog/wp-content/uploads/2011/07/1945039Ex.jpg"></a>

兩款普通的Android智能手機尺寸（圖檔來源于 Google I/O 2010）

320 × 480被認為是Android螢幕的“正常”尺寸。至于“超大”的，想象一下平闆電腦。然而，當今最流行的Android智能手機配備的是WVGA（即寬VGA）800+×480像素的高清顯示器。那麼，是什麼讓“正常”迅速發生變化。

<a href="http://www.boxui.com/blog/wp-content/uploads/2011/07/194508An8.png"></a>

從Android SDK中的仿真器樣機獲得的各種螢幕配置圖。 （圖檔：Android開發者網站）

為了測試友善，我使用了摩托羅拉Droid X，其螢幕為WVGA。同樣，從Android的标準看來這屬于“大”。

顯示器尺寸不同對于那些想建立單個尺寸适合所有的布局的設計師來所真算是非常具有挑戰性的。我發現，最好的辦法是設計一套布局為320 × 480（基準），另一套為320 ×533（可視為“大”尺寸螢幕）。

雖然這給設計師和開發人員的工作帶來額外負擔，如摩托羅拉Droid和HTC Evo等稍大一點手機所需的更大尺寸螢幕，可能需要在基準布局上做一些修改已更好地利用多餘的空間。

關于網點密度（Screen Densities），你應該知道的一些東西

螢幕尺寸隻是問題的一部分！開發人員一般不考慮螢幕的分辨率，而是它的密度。以下是開發人員指南（Developers Guide）裡提到的Android對這些内容的定義：

分辨率(Resolution)

螢幕實體像素的總和。

網點密度

螢幕實體面積内所包含的像素數，通過以DPI（每英寸點數）來計量。

密度無關像素（Density-independent pixel , DP）

這是一個虛拟的像素機關，定義布局的UI，在為以密度無關（density-independent）的方式表達布局的次元和位置，而定義布局的時候，會使用到這個概念。密度無關像素就相當于160 dpi螢幕上的一個實體像素，這對“中等”密度的螢幕系統來說算是基準密度。在運作時，系統根據實際使用中的螢幕密度處理任何必要的DP機關的換算。DP機關和螢幕像素的轉化公式很簡單：像素= DP*（DPI/160）。例如，對于一個240 dpi的螢幕，1個DP等于1.5實體像素。在定義應用程式的UI時，通常使用DP機關，以確定UI在不同密度的螢幕上得以正确顯示。

好像有點混亂，但在這裡有些東西你必須知道的。在螢幕尺寸方面，Android将螢幕密度分成四個基本密度：lDPI（低），mDPI（中等），hDPI（高）以及xhDPI（特高）。這非常重要，因為你必須以lDPI，mDPI和hDPI密度形式輸出所有圖形内容（如位圖）。現在，我們假設xhDPI隻适用于平闆電腦。

這意味着所有非繪制圖形（如在運作時不能由Android自動按比例轉變的圖形），需要通過“中等”（即320× 480）的基準螢幕布局來轉換。

位圖的要求和準備網頁列印圖形差不多。如果您有列印經驗，你就會知道，一個72PPI的圖像在放大列印時會顯得非常像素化和模糊。相反，你需要根據矢量圖來重做圖像或使用高解析度照片，然後将檔案的分辨率設定成大約為300PPI，這樣就才能在不犧牲圖像品質的條件下列印。Android的螢幕密度的工作原理也是如此，除非我們隻想改變圖像的大小而不改變檔案的分辨率（如标準72 PPI就可以）。

比方說，你從基準線設計的螢幕（記住“基線”布局設定在320×480）上擷取了一個100×100像素的位圖圖示。将相同的100 ×100圖示配置在lDPI螢幕，該圖示會顯得很大很模糊。同樣地，将其配置在hDPI螢幕上，它會顯得太小（由于裝置的每英寸的點數比mDPI螢幕多）。

<a href="http://www.boxui.com/blog/wp-content/uploads/2011/07/194518o7T.png"></a>

要調整不同的裝置螢幕密度，我們需要在四個密度大小之間按照3:4:6:8縮放比例。 （對iPhone來說，它很容易：隻需以2:1的比例在iPhone 4和3GS之間切換。）使用這些比率，通過簡單的計算，我們就可以創造四個不同的版本的位圖，以供開發生産：

75×75對應低密度螢幕（如×0.75）;

100 ×100對應中等密度的螢幕（基準）;

150×150對應高密度螢幕（× 1.5）;

200×200對應超高密度顯示屏（× 2.0）。 （我們隻考慮Android智能手機的應用程式上的lDPI、mDPI以及hDPI。）

<a href="http://www.boxui.com/blog/wp-content/uploads/2011/07/194520SPw.jpg"></a>

使用四種不同網點密度，最終圖檔會如上所示。

做完了所有圖像後，你可以按照以下方法歸類圖檔：

<a href="http://www.boxui.com/blog/wp-content/uploads/2011/07/194521C4o.gif"></a>

推薦的檔案夾及檔案的歸類和命名方法。在準備星型圖檔時，可以将所有未完成的圖檔命名為ic_star，不需要對應密度來換名稱。

你可能會對怎麼設定PPI（每英寸像素）感到困惑。隻要将其保留于标準的72PPI，并對應地調整圖像即可。

采用Android的設計模闆

最大的差別是用于翻到前幾頁的“傳回”鍵。Android裝置上的傳回鍵是固定的，無論什麼應用程式都會用到。這既可能是實體部件，也可能是螢幕下方的獨立于任何應用程式的虛拟固定按鍵，如最近釋出的Android3.0平闆電腦那樣。

<a href="http://www.boxui.com/blog/wp-content/uploads/2011/07/194525Hxc.jpg"></a>

Android 2.0 智能手機上的實體“傳回”鍵

獨立于應用程式本身的“傳回”鍵可以給其他如logo，标題或菜單等元素在螢幕的上方留下更多空間。這種浏覽設定與iOS大不相同，而且還有很多其他與衆不同之處，Android稱之為“設計樣闆”。根據Android所說，設計樣闆是“反複出現的問題的一般解決辦法。”下面是Android 2.0的主要設計樣闆。

控制台（Dashboard）

<a href="http://www.boxui.com/blog/wp-content/uploads/2011/07/194529eIp.jpg"></a>

Facebook和LikedIn所采用的控制台設計樣闆

活動框（Action Bar）

活動框是Android最重要的設計模闆和與衆不同之處。它的工作原理非常類似于傳統網站的banner，左邊有标志或标題，導航項在右邊。活動框的設計非常靈活，允許在菜單懸停和放大搜尋框。它一般用作一個全局功能，而非單個程式。

<a href="http://www.boxui.com/blog/wp-content/uploads/2011/07/194534PM9.jpg"></a>

Twitter所采用的活動框設計樣闆

搜尋框（Search Bar）

這為使用者提供了一個簡單的按類别搜尋的方法，并提供搜尋建議。

<a href="http://www.boxui.com/blog/wp-content/uploads/2011/07/194536TC1.jpg"></a>

Google Seach程式所采用的活動框設計樣闆

快速活動欄（Quick Actions）

<a href="http://www.boxui.com/blog/wp-content/uploads/2011/07/194539E9Q.jpg"></a>

Twitter所采用的快速活動欄設計樣闆

随同構件（Companion Widget）

小構件允許應用程式在使用者主螢幕上顯示通知。與iOS上以臨時模态對話框形式推送通知不同，随同構件始終保留在主螢幕上。（提示：想你的Android裝置選擇構件，隻需點選并按住螢幕上的任意空白區域就可以。）

<a href="http://www.boxui.com/blog/wp-content/uploads/2011/07/194548fF0.jpg"></a>

Engadget, New York Times以及Pandora所采用的随同構件

Android設計必備材料

OK，既然你已經着手設計Android應用程式和并準備使之成為現實。那還有什麼可以提供給開發人員的嗎？這裡有一個快速傳遞清單：

基于基準320× 480 dpi 的“中等”尺寸的有附注的使用者體驗說明表格。包括額外的螢幕，比如當“大”尺寸螢幕需要修改布局，或者需要圖景版式時。

對應中型HVGA320×480螢幕和大尺寸的320×533螢幕（基于WVGA800 ×480 hDPI實體像素螢幕）的兩套視覺設計模拟器材。

有關間距，字型大小和顔色，以及任何位圖的訓示等規格檔案。

儲存為透明PNG檔案的一個包含lDPI，mDPI和hDPI版本所有的位圖圖形庫。如果你還想為小型裝置裝置及或者其他大型裝置開發其他版本的應用程式，你需要為“中等”基準的設計準備一個lDPI 和mDPI圖集，同時還需給“大”尺寸版本的準備hDPI圖集。

儲存為透明PNG檔案的特定密度的應用程式圖示，包括應用程式的啟動圖示。Android已經在這個問題上給開發人員提供了很多精美圖檔，還可可以另外下載下傳，包括圖形的PSD模闆。

如何截屏

假如你的産品經理想要開發人員的架構截圖。而開發人員正忙，明天之前都不能給你。你怎麼辦？直到現在，Android都還沒有提供一種内置采取截圖（無賴吧？）方式。唯一的辦法就是去處理它，這意味着需要假裝一段時間的開發人員和下載下傳一些可怕的軟體。讓我們開始吧！

以下軟體必須在Windows環境下下載下傳（我是通過Mac上的Parallels Desktop使用Windows的）。

所有的Android裝置USB驅動程式；

Android軟體開發套件（SDK）；

Java SE SDK

然後在電腦上：

将USB驅動程式解壓縮到桌面上的一個檔案夾；

将Android SDK解壓縮到桌面上的一個檔案夾；

在Android裝置上：

打開“設定”（程式菜單裡）

點選“應用程式”；

點選“開發”；

檢視“USB 調試”

<a href="http://www.boxui.com/blog/wp-content/uploads/2011/07/194550fNh.jpg"></a>

好了，有趣的來了：

将Android裝置通過USB接口連接配接到計算機，并允許Windows安裝的所有驅動程式。其中一個驅動程式可能無法找到，你可能需要去到“控制台”的“Windows裝置管理器”。在那裡，找到這個裝置（旁邊有黃色警告圖示），并右鍵單擊。

選擇給裝置“更新/安裝”驅動程式。

轉回到桌面。打開Android SDK檔案夾并選擇SDK中的Setup.exe。

允許其自動重新整理SDK作業系統的清單，并選擇安裝所有軟體包。

一旦完成後，退出應用程式。

傳回到桌面上的已打開的Android SDK檔案夾，打開“工具”檔案夾。

點選“ddms”檔案，打開Dalvik Debug Monitor。

從“Name”對話框中選擇裝置。

在應用程式的頂部菜單中，打開“裝置”菜單，選擇“螢幕捕捉… …”，一個裝置螢幕捕獲視窗将打開，你應該就可以看到Android裝置的啟動螢幕了。

<a href="http://www.boxui.com/blog/wp-content/uploads/2011/07/194611jgp.png"></a>

The Dalvik Debut Monitor.

浏覽：

打開Android裝置，浏覽任何頁面。回到計算機上，并在“裝置螢幕捕捉”點選“重新整理”。Android裝置目前的畫面應該就會出現。

如果你使用的是Mac，你可以按照Shift + Command+4的老招來截圖。在Windows中，你可以複制并粘貼到Windows媒體應用中去。

關于Android平闆電腦

Android平闆電腦無論在大小尺寸還是螢幕密度方面都和智能手機有很大的不同。而在螢幕密度方面，我們通常假設所有的平闆電腦都是高清晰和在位圖圖形方面都采用特大型的“xDPI”尺寸。

在2011 CES大會上，廠商們紛紛推出Android平闆電腦，螢幕尺寸也各不相同。然而，快速研究過幾款最流行的型号後，我們可以了解到螢幕主要還是集中在實體像素1280×800和800×480的兩個重要尺寸上。

随着Android 3.0 Honeycomb的釋出，谷歌給裝置制造商提供了的平闆電腦Android UI。過往的實體“傳回”按鈕，這回被位于螢幕底部的由軟體生成的固定導航按鍵和系統狀态欄取代。

<a href="http://www.boxui.com/blog/wp-content/uploads/2011/07/194617LZ5.jpg"></a>

Android 3.0裡固定的導航按鈕及系統狀态欄

在內建了2.0版中所有的設計樣闆的同時，Android 3.0在視覺上給人帶來很多新鮮感。唯一的差別是，活動欄已更新到包括标簽，下拉菜單已經其他小東西。當使用者選擇在螢幕上顯示單個或多個元素時，活動欄還可以改變它的外觀。

<a href="http://www.boxui.com/blog/wp-content/uploads/2011/07/194626aW8.jpg"></a>

Android 3.0 裡包含各種菜單的活動欄

另一項添加到Android 3.0架構的新功能是一個“片段”（fragments）的機制。片段是一種可以根據螢幕的方向和尺寸來調整布局大小和位置的自包含元件。這可以在螢幕大小的局限下，通過給設計師和開發人員以調整布局的彈性，借以解決多種外形的設計難題。螢幕元件可以被拉長，疊壓，展開和折疊，顯示和隐藏。

<a href="http://www.boxui.com/blog/wp-content/uploads/2011/07/194634Iut.jpg"></a>

圖例顯示“片段”的用途

這個被吞口水地稱為冰淇淋三明治的未來Android版本，承諾把這個功能放入Android智能手機裡，讓設計人員和開發人員使用“一體适用”的政策來開開發程式。這對設計師和開發者來說可能是模式的轉變，他們要學習思索利用可以拉長，堆放，擴大或隐藏的拼圖來設計應用程式。總之，這将允許Android作業系統在任何地方運作（無限的可能性！）。

一語箴言

多玩一玩Android手機和平闆電腦，花一些時間下載下傳應用程式和浏覽它們的界面。想要基于Android設計，必須将自己沉浸在這個環境裡和深入地了解它。這聽起來很廢話，但當聽說甚至産品經理都沒有Android裝置的時候，你就明白我的意思了。