談到應(yīng)用程序設(shè)計(jì)，對(duì)設(shè)計(jì)師來(lái)說(shuō)，Android就像是房間里的大象。很多設(shè)計(jì)師會(huì)更希望這是iOS，在那里所有任何人都只需要關(guān)心iPhone手機(jī)，iPad和App Store。然后沒(méi)有人可以忽略Android，它目前已占據(jù)智能手機(jī)中最大的市場(chǎng)份額，且已經(jīng)被廣泛用于從平板電腦到電子閱讀器等各種產(chǎn)品?？傊雀璧腁ndroid平臺(tái)正在迅速遍地開(kāi)花，品牌廠商們很難不注意到。

讓我們一起面對(duì)吧。Android多型號(hào)的設(shè)備以及形狀的諸多因素，讓其設(shè)計(jì)感覺(jué)像是一場(chǎng)艱苦的戰(zhàn)斗。其神秘的文檔使得設(shè)計(jì)和生產(chǎn)在一開(kāi)始就顯得很難。在網(wǎng)上找有關(guān)Android設(shè)計(jì)的網(wǎng)絡(luò)資源，你會(huì)發(fā)現(xiàn)很少有幫助的東西。

如果這一切讓你感到沮喪（而且如果這是你不為Android設(shè)計(jì)應(yīng)用程序的原因），你并不孤單。幸運(yùn)的是，Android現(xiàn)在已經(jīng)開(kāi)始著手解決有關(guān)多種設(shè)備和屏幕尺寸的問(wèn)題，而且設(shè)備制造商們也正慢慢達(dá)到標(biāo)準(zhǔn)，并最終降低其復(fù)雜性。

這篇文章將幫助設(shè)計(jì)師熟悉在開(kāi)始使用Android開(kāi)發(fā)所需的各種知識(shí)，并提供合適的資源給開(kāi)放團(tuán)隊(duì)。我們將討論的主題包括：

• 解密Android屏幕密度，
• 通過(guò)設(shè)計(jì)模式學(xué)習(xí)Android設(shè)計(jì)基礎(chǔ)，
• 設(shè)計(jì)開(kāi)發(fā)人員需要的資產(chǎn)，
• 如何獲取屏幕截圖，
• 什么是Android 3?未來(lái)還有什么？

Android智能手機(jī)及顯示屏尺寸

啟動(dòng)任何數(shù)字設(shè)計(jì)項(xiàng)目之前，首先必須先了解硬件。對(duì)于iOS應(yīng)用程序來(lái)說(shuō)，那是iPhone和iPod Touch。而Android，涉及到幾十種設(shè)備和制造商。從哪里開(kāi)始呢？

Android智能手機(jī)所支持屏幕的基準(zhǔn)是T – Mobile G1——Android平臺(tái)的第一款面世設(shè)備，其配備了320 × 480像素的HVGA屏幕。

HVGA表示“半尺寸影像圖形數(shù)組”（或一半大小的VGA），是目前智能手機(jī)的標(biāo)準(zhǔn)顯示大小。iPhone 3GS，3G和2G都使用這一相同的配置。

T-Mobile G1是面世的第一款A(yù)ndroid設(shè)備，也是第一款支持Android基準(zhǔn)屏幕的手機(jī)。

為簡(jiǎn)單起見(jiàn)，Android將屏幕尺寸（屏幕從左上角到右下角的對(duì)角線長(zhǎng)度）分為四個(gè)級(jí)別：小，正常，大和超大。

兩款普通的Android智能手機(jī)尺寸（圖片來(lái)源于 Google I/O 2010）

320 × 480被認(rèn)為是Android屏幕的“正常”尺寸。至于“超大”的，想象一下平板電腦。然而，當(dāng)今最流行的Android智能手機(jī)配備的是WVGA（即寬VGA）800+×480像素的高清顯示器。那么，是什么讓“正常”迅速發(fā)生變化。

從Android SDK中的仿真器樣機(jī)獲得的各種屏幕配置圖。 （圖片：Android開(kāi)發(fā)者網(wǎng)站）

為了測(cè)試方便，我使用了摩托羅拉Droid X，其屏幕為WVGA。同樣，從Android的標(biāo)準(zhǔn)看來(lái)這屬于“大”。

顯示器尺寸不同對(duì)于那些想創(chuàng)建單個(gè)尺寸適合所有的布局的設(shè)計(jì)師來(lái)所真算是非常具有挑戰(zhàn)性的。我發(fā)現(xiàn)，最好的辦法是設(shè)計(jì)一套布局為320 × 480（基準(zhǔn)），另一套為320 ×533（可視為“大”尺寸屏幕）。

雖然這給設(shè)計(jì)師和開(kāi)發(fā)人員的工作帶來(lái)額外負(fù)擔(dān)，如摩托羅拉Droid和HTC Evo等稍大一點(diǎn)手機(jī)所需的更大尺寸屏幕，可能需要在基準(zhǔn)布局上做一些修改已更好地利用多余的空間。

關(guān)于網(wǎng)點(diǎn)密度（Screen Densities），你應(yīng)該知道的一些東西

屏幕尺寸只是問(wèn)題的一部分！開(kāi)發(fā)人員一般不考慮屏幕的分辨率，而是它的密度。以下是開(kāi)發(fā)人員指南（Developers Guide）里提到的Android對(duì)這些內(nèi)容的定義：

• 分辨率(Resolution)

屏幕物理像素的總和。

• 網(wǎng)點(diǎn)密度

屏幕物理面積內(nèi)所包含的像素?cái)?shù)，通過(guò)以DPI（每英寸點(diǎn)數(shù)）來(lái)計(jì)量。

• 密度無(wú)關(guān)像素（Density-independent pixel , DP）

這是一個(gè)虛擬的像素單位，定義布局的UI，在為以密度無(wú)關(guān)（density-independent）的方式表達(dá)布局的維度和位置，而定義布局的時(shí)候，會(huì)使用到這個(gè)概念。密度無(wú)關(guān)像素就相當(dāng)于160 dpi屏幕上的一個(gè)物理像素，這對(duì)“中等”密度的屏幕系統(tǒng)來(lái)說(shuō)算是基準(zhǔn)密度。在運(yùn)行時(shí)，系統(tǒng)根據(jù)實(shí)際使用中的屏幕密度處理任何必要的DP單位的換算。DP單位和屏幕像素的轉(zhuǎn)化公式很簡(jiǎn)單：像素= DP*（DPI/160）。例如，對(duì)于一個(gè)240 dpi的屏幕，1個(gè)DP等于1.5物理像素。在定義應(yīng)用程序的UI時(shí)，通常使用DP單位，以確保UI在不同密度的屏幕上得以正確顯示。

好像有點(diǎn)混亂，但在這里有些東西你必須知道的。在屏幕尺寸方面，Android將屏幕密度分成四個(gè)基本密度：lDPI（低），mDPI（中等），hDPI（高）以及xhDPI（特高）。這非常重要，因?yàn)槟惚仨氁詌DPI，mDPI和hDPI密度形式輸出所有圖形內(nèi)容（如位圖）?，F(xiàn)在，我們假設(shè)xhDPI只適用于平板電腦。

這意味著所有非繪制圖形（如在運(yùn)行時(shí)不能由Android自動(dòng)按比例轉(zhuǎn)變的圖形），需要通過(guò)“中等”（即320× 480）的基準(zhǔn)屏幕布局來(lái)轉(zhuǎn)換。

位圖的要求和準(zhǔn)備網(wǎng)頁(yè)打印圖形差不多。如果您有打印經(jīng)驗(yàn)，你就會(huì)知道，一個(gè)72PPI的圖像在放大打印時(shí)會(huì)顯得非常像素化和模糊。相反，你需要根據(jù)矢量圖來(lái)重做圖像或使用高解析度照片，然后將文件的分辨率設(shè)置成大約為300PPI，這樣就才能在不犧牲圖像質(zhì)量的條件下打印。Android的屏幕密度的工作原理也是如此，除非我們只想改變圖像的大小而不改變文件的分辨率（如標(biāo)準(zhǔn)72 PPI就可以）。

比方說(shuō)，你從基準(zhǔn)線設(shè)計(jì)的屏幕（記住“基線”布局設(shè)置在320×480）上獲取了一個(gè)100×100像素的位圖圖標(biāo)。將相同的100 ×100圖標(biāo)配置在lDPI屏幕，該圖標(biāo)會(huì)顯得很大很模糊。同樣地，將其配置在hDPI屏幕上，它會(huì)顯得太?。ㄓ捎谠O(shè)備的每英寸的點(diǎn)數(shù)比mDPI屏幕多）。

要調(diào)整不同的設(shè)備屏幕密度，我們需要在四個(gè)密度大小之間按照3:4:6:8縮放比例。 （對(duì)iPhone來(lái)說(shuō)，它很容易：只需以2:1的比例在iPhone 4和3GS之間切換。）使用這些比率，通過(guò)簡(jiǎn)單的計(jì)算，我們就可以創(chuàng)造四個(gè)不同的版本的位圖，以供開(kāi)發(fā)生產(chǎn)：

• 75×75對(duì)應(yīng)低密度屏幕（如×0.75）;
• 100 ×100對(duì)應(yīng)中等密度的屏幕（基準(zhǔn)）;
• 150×150對(duì)應(yīng)高密度屏幕（× 1.5）;
• 200×200對(duì)應(yīng)超高密度顯示屏（× 2.0）。 （我們只考慮Android智能手機(jī)的應(yīng)用程序上的lDPI、mDPI以及hDPI。）

使用四種不同網(wǎng)點(diǎn)密度，最終圖片會(huì)如上所示。

做完了所有圖像后，你可以按照以下方法歸類(lèi)圖片：

推薦的文件夾及文件的歸類(lèi)和命名方法。在準(zhǔn)備星型圖片時(shí)，可以將所有未完成的圖片命名為ic_star，不需要對(duì)應(yīng)密度來(lái)?yè)Q名稱(chēng)。

你可能會(huì)對(duì)怎么設(shè)置PPI（每英寸像素）感到困惑。只要將其保留于標(biāo)準(zhǔn)的72PPI，并對(duì)應(yīng)地調(diào)整圖像即可。

采用Android的設(shè)計(jì)模板

客戶(hù)經(jīng)常問(wèn)，是不是可以將其iPhone應(yīng)用程序設(shè)計(jì)模板應(yīng)用到Android上。如果你想尋找捷徑，使用類(lèi)似WebKit和HTML5來(lái)創(chuàng)建移動(dòng)網(wǎng)頁(yè)瀏覽器的應(yīng)用程序可能會(huì)是一個(gè)更好的選擇。而要開(kāi)發(fā)原生的Android應(yīng)用程序，答案是否定的。為什么呢？由于Android的界面與iPhone非常不同。

最大的區(qū)別是用于翻到前幾頁(yè)的“返回”鍵。Android設(shè)備上的返回鍵是固定的，無(wú)論什么應(yīng)用程序都會(huì)用到。這既可能是物理部件，也可能是屏幕下方的獨(dú)立于任何應(yīng)用程序的虛擬固定按鍵，如最近發(fā)布的Android3.0平板電腦那樣。

Android 2.0 智能手機(jī)上的物理“返回”鍵

獨(dú)立于應(yīng)用程序本身的“返回”鍵可以給其他如logo，標(biāo)題或菜單等元素在屏幕的上方留下更多空間。這種瀏覽設(shè)置與iOS大不相同，而且還有很多其他與眾不同之處，Android稱(chēng)之為“設(shè)計(jì)樣板”。根據(jù)Android所說(shuō)，設(shè)計(jì)樣板是“反復(fù)出現(xiàn)的問(wèn)題的一般解決辦法?！毕旅媸茿ndroid 2.0的主要設(shè)計(jì)樣板。

控制面板（Dashboard）

這種樣板解決了應(yīng)用程序中多層次瀏覽的問(wèn)題。它給諸如Facebook，LinkedIn和Evernote等多種應(yīng)用程序提供了平板解決方案。

Facebook和LikedIn所采用的控制面板設(shè)計(jì)樣板

活動(dòng)框（Action Bar）

活動(dòng)框是Android最重要的設(shè)計(jì)模板和與眾不同之處。它的工作原理非常類(lèi)似于傳統(tǒng)網(wǎng)站的banner，左邊有標(biāo)志或標(biāo)題，導(dǎo)航項(xiàng)在右邊。活動(dòng)框的設(shè)計(jì)非常靈活，允許在菜單懸停和放大搜索框。它一般用作一個(gè)全局功能，而非單個(gè)程序。

Twitter所采用的活動(dòng)框設(shè)計(jì)樣板

搜索框（Search Bar）

這為用戶(hù)提供了一個(gè)簡(jiǎn)單的按類(lèi)別搜索的方法，并提供搜索建議。

Google Seach程序所采用的活動(dòng)框設(shè)計(jì)樣板

快速活動(dòng)欄（Quick Actions）

這種設(shè)計(jì)樣式和iOS的彈出動(dòng)作有點(diǎn)相似，為用戶(hù)提供了額外的文本行動(dòng)。例如，點(diǎn)擊應(yīng)用程序的照片，可能會(huì)觸發(fā)快速活動(dòng)欄，讓用戶(hù)共享該照片。

Twitter所采用的快速活動(dòng)欄設(shè)計(jì)樣板

隨同構(gòu)件（Companion Widget）

小構(gòu)件允許應(yīng)用程序在用戶(hù)主屏幕上顯示通知。與iOS上以臨時(shí)模態(tài)對(duì)話框形式推送通知不同，隨同構(gòu)件始終保留在主屏幕上。（提示：想你的Android設(shè)備選擇構(gòu)件，只需點(diǎn)擊并按住屏幕上的任意空白區(qū)域就可以。）

Engadget, New York Times以及Pandora所采用的隨同構(gòu)件

使用既定的設(shè)計(jì)樣板對(duì)于保持用戶(hù)直觀和熟悉的體驗(yàn)是非常重要的。沒(méi)有用戶(hù)希望在Android設(shè)備上的體驗(yàn)iPhone的感覺(jué)，也沒(méi)有Mac用戶(hù)希望在自己的Mac OS環(huán)境里體驗(yàn)微軟。了解了設(shè)計(jì)樣板，是學(xué)習(xí)Android語(yǔ)言以及給用戶(hù)設(shè)計(jì)最優(yōu)體驗(yàn)的第一步。你的開(kāi)發(fā)人員也會(huì)感謝你！

Android設(shè)計(jì)必備材料

OK，既然你已經(jīng)著手設(shè)計(jì)Android應(yīng)用程序和并準(zhǔn)備使之成為現(xiàn)實(shí)。那還有什么可以提供給開(kāi)發(fā)人員的嗎？這里有一個(gè)快速交付清單：

• 基于基準(zhǔn)320× 480 dpi 的“中等”尺寸的有附注的用戶(hù)體驗(yàn)說(shuō)明表格。包括額外的屏幕，比如當(dāng)“大”尺寸屏幕需要修改布局，或者需要圖景版式時(shí)。
• 對(duì)應(yīng)中型HVGA320×480屏幕和大尺寸的320×533屏幕（基于WVGA800 ×480 hDPI物理像素屏幕）的兩套視覺(jué)設(shè)計(jì)模擬器材。
• 有關(guān)間距，字體大小和顏色，以及任何位圖的指示等規(guī)格文件。
• 保存為透明PNG文件的一個(gè)包含lDPI，mDPI和hDPI版本所有的位圖圖形庫(kù)。如果你還想為小型設(shè)備裝置及或者其他大型設(shè)備開(kāi)發(fā)其他版本的應(yīng)用程序，你需要為“中等”基準(zhǔn)的設(shè)計(jì)準(zhǔn)備一個(gè)lDPI 和mDPI圖集，同時(shí)還需給“大”尺寸版本的準(zhǔn)備hDPI圖集。
• 保存為透明PNG文件的特定密度的應(yīng)用程序圖標(biāo)，包括應(yīng)用程序的啟動(dòng)圖標(biāo)。Android已經(jīng)在這個(gè)問(wèn)題上給開(kāi)發(fā)人員提供了很多精美圖片，還可可以另外下載，包括圖形的PSD模板。

如何截屏

假如你的產(chǎn)品經(jīng)理想要開(kāi)發(fā)人員的架構(gòu)截圖。而開(kāi)發(fā)人員正忙，明天之前都不能給你。你怎么辦？直到現(xiàn)在，Android都還沒(méi)有提供一種內(nèi)置采取截圖（無(wú)賴(lài)吧？）方式。唯一的辦法就是去處理它，這意味著需要假裝一段時(shí)間的開(kāi)發(fā)人員和下載一些可怕的軟件。讓我們開(kāi)始吧！

以下軟件必須在Windows環(huán)境下下載（我是通過(guò)Mac上的Parallels Desktop使用Windows的）。

1. 所有的Android設(shè)備USB驅(qū)動(dòng)程序；
2. Android軟件開(kāi)發(fā)套件（SDK）；
3. Java SE SDK

然后在電腦上：

1. 將USB驅(qū)動(dòng)程序解壓縮到桌面上的一個(gè)文件夾；
2. 將Android SDK解壓縮到桌面上的一個(gè)文件夾；
3. 安裝Java SE SDK

在Android設(shè)備上：

1. 打開(kāi)“設(shè)置”（程序菜單里）
2. 點(diǎn)擊“應(yīng)用程序”；
3. 點(diǎn)擊“開(kāi)發(fā)”；
4. 查看“USB 調(diào)試”

好了，有趣的來(lái)了：

1. 將Android設(shè)備通過(guò)USB接口連接到計(jì)算機(jī)，并允許Windows安裝的所有驅(qū)動(dòng)程序。其中一個(gè)驅(qū)動(dòng)程序可能無(wú)法找到，你可能需要去到“控制面板”的“Windows設(shè)備管理器”。在那里，找到這個(gè)設(shè)備（旁邊有黃色警告圖標(biāo)），并右鍵單擊。
2. 選擇給設(shè)備“更新/安裝”驅(qū)動(dòng)程序。
3. 轉(zhuǎn)回到桌面。打開(kāi)Android SDK文件夾并選擇SDK中的Setup.exe。
4. 允許其自動(dòng)刷新SDK操作系統(tǒng)的列表，并選擇安裝所有軟件包。
5. 一旦完成后，退出應(yīng)用程序。
6. 返回到桌面上的已打開(kāi)的Android SDK文件夾，打開(kāi)“工具”文件夾。
7. 點(diǎn)擊“ddms”文件，打開(kāi)Dalvik Debug Monitor。
8. 從“Name”對(duì)話框中選擇設(shè)備。
9. 在應(yīng)用程序的頂部菜單中，打開(kāi)“設(shè)備”菜單，選擇“屏幕捕捉… …”，一個(gè)設(shè)備屏幕捕獲窗口將打開(kāi)，你應(yīng)該就可以看到Android設(shè)備的啟動(dòng)屏幕了。

The Dalvik Debut Monitor.

瀏覽：

1. 打開(kāi)Android設(shè)備，瀏覽任何頁(yè)面?；氐接?jì)算機(jī)上，并在“設(shè)備屏幕捕捉”點(diǎn)擊“刷新”。Android設(shè)備當(dāng)前的畫(huà)面應(yīng)該就會(huì)出現(xiàn)。
2. 如果你使用的是Mac，你可以按照Shift + Command+4的老招來(lái)截圖。在Windows中，你可以復(fù)制并粘貼到Windows媒體應(yīng)用中去。

關(guān)于Android平板電腦

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

在2011 CES大會(huì)上，廠商們紛紛推出Android平板電腦，屏幕尺寸也各不相同。然而，快速研究過(guò)幾款最流行的型號(hào)后，我們可以了解到屏幕主要還是集中在物理像素1280×800和800×480的兩個(gè)重要尺寸上。

隨著Android 3.0 Honeycomb的發(fā)布，谷歌給設(shè)備制造商提供了的平板電腦Android UI。過(guò)往的物理“返回”按鈕，這回被位于屏幕底部的由軟件生成的固定導(dǎo)航按鍵和系統(tǒng)狀態(tài)欄取代。

Android 3.0里固定的導(dǎo)航按鈕及系統(tǒng)狀態(tài)欄

在集成了2.0版中所有的設(shè)計(jì)樣板的同時(shí)，Android 3.0在視覺(jué)上給人帶來(lái)很多新鮮感。唯一的區(qū)別是，活動(dòng)欄已更新到包括標(biāo)簽，下拉菜單已經(jīng)其他小東西。當(dāng)用戶(hù)選擇在屏幕上顯示單個(gè)或多個(gè)元素時(shí)，活動(dòng)欄還可以改變它的外觀。

Android 3.0 里包含各種菜單的活動(dòng)欄

另一項(xiàng)添加到Android 3.0框架的新功能是一個(gè)“片段”（fragments）的機(jī)制。片段是一種可以根據(jù)屏幕的方向和尺寸來(lái)調(diào)整布局大小和位置的自包含組件。這可以在屏幕大小的局限下，通過(guò)給設(shè)計(jì)師和開(kāi)發(fā)人員以調(diào)整布局的彈性，借以解決多種外形的設(shè)計(jì)難題。屏幕組件可以被拉長(zhǎng)，疊壓，展開(kāi)和折疊，顯示和隱藏。

圖例顯示“片段”的用途

這個(gè)被吞口水地稱(chēng)為冰淇淋三明治的未來(lái)Android版本，承諾把這個(gè)功能放入Android智能手機(jī)里，讓設(shè)計(jì)人員和開(kāi)發(fā)人員使用“一體適用”的策略來(lái)開(kāi)開(kāi)發(fā)程序。這對(duì)設(shè)計(jì)師和開(kāi)發(fā)者來(lái)說(shuō)可能是模式的轉(zhuǎn)變，他們要學(xué)習(xí)思索利用可以拉長(zhǎng)，堆放，擴(kuò)大或隱藏的拼圖來(lái)設(shè)計(jì)應(yīng)用程序?？傊?，這將允許Android操作系統(tǒng)在任何地方運(yùn)行（無(wú)限的可能性?。?/p>

一語(yǔ)箴言

多玩一玩Android手機(jī)和平板電腦，花一些時(shí)間下載應(yīng)用程序和瀏覽它們的界面。想要基于Android設(shè)計(jì)，必須將自己沉浸在這個(gè)環(huán)境里和深入地了解它。這聽(tīng)起來(lái)很廢話，但當(dāng)聽(tīng)說(shuō)甚至產(chǎn)品經(jīng)理都沒(méi)有Android設(shè)備的時(shí)候，你就明白我的意思了。

本文由雷鋒網(wǎng)編譯自smashingmagazine