談到應用程式設計,對設計師來說,Android就像是房間裡的大象。很多設計師會更希望這是iOS,在那裡所有任何人都只需要關心iPhone手機,iPad和App Store 。然而沒有人可以忽略Android,它目前已佔據智慧手機中最大的市場份額,且已經被廣泛用於從平板電腦到電子閱讀器等各種產品。總之,谷歌的Android平臺正在迅速遍地開花,品牌廠商們很難不注意到。
讓我們一起面對吧。Android多型號的裝置以及形狀的諸多因素,讓其設計感覺像是一場艱苦的戰鬥。其神祕的文件使得設計和生產在一開始就顯得很難。在網上找有關Android設計的網路資源,你會發現很少有幫助的東西。
如果這一切讓你感到沮喪(而且如果這是你不為Android設計應用程式的原因),你並不孤單。幸運的是,Android現在已經開始著手解決有關多種裝置和螢幕尺寸的問題,而且裝置製造商們也正慢慢達到標準,並最終降低其複雜性。
這篇文章將幫助設計師熟悉在開始使用Android開發所需的各種知識,並提供合適的資源給開放團隊。我們將討論的主題包括:
- 解密Android螢幕密度,
- 通過設計模式學習Android設計基礎,
- 設計開發人員需要的資產,
- 如何獲取螢幕截圖,
- 什麼是Android 3?未來還有什麼?
Android智慧手機及螢幕尺寸
啟動任何數字設計專案之前,首先必須先了解硬體。對於iOS應用程式來說,那是iPhone和iPod Touch。而Android,涉及到幾十種裝置和製造商。從哪裡開始呢?
Android智慧手機所支援螢幕的基準是T – Mobile G1——Android平臺的第一款面世裝置,其配備了320 × 480畫素的HVGA螢幕。
HVGA表示“半尺寸影像圖形陣列”(或一半大小的VGA),是目前智慧手機的標準顯示大小。iPhone 3GS,3G和2G都使用這一相同的配置。
T-Mobile G1是面世的第一款Android裝置,也是第一款支援Android基準螢幕的手機。
為簡單起見,Android將螢幕尺寸(螢幕從左上角到右下角的對角線長度)分為四個級別:小,正常,大和超大。
兩款普通的Android智慧手機尺寸(圖片來源於 Google I/O 2010)
320 × 480被認為是Android螢幕的“正常”尺寸。至於“超大”的,想象一下平板電腦。然而,當今最流行的Android智慧手機配備的是WVGA(即寬VGA)800+×480畫素的高清顯示器。那麼,是什麼讓“正常”迅速發生變化。
從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螢幕 多)。
要調整不同的裝置螢幕密度,我們需要在四個密度大小之間按照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。)
使用四種不同網點密度,最終圖片會如上所示。
做完了所有影像後,你可以按照以下方法歸類圖片:
推薦的資料夾及檔案的歸類和命名方法。在準備星型圖片時,可以將所有未完成的圖片命名為ic_star,不需要對應密度來換名稱。
你可能會對怎麼設定PPI(每英寸畫素)感到困惑。只要將其保留於標準的72PPI,並對應地調整影像即可。
採用Android的設計模板
客戶經常問,是不是可以將其iPhone應用程式設計模板應用到Android上。如果你想尋找捷徑,使用類似WebKit和HTML5來建立移動網頁瀏覽器的應用程式可能會是一個更好的選擇。而要開發原生的Android應用程式,答案是否定的。為什麼呢?由於Android的介面與iPhone非常不同。
最大的區別是用於翻到前幾頁的“返回”鍵。Android裝置上的返回鍵是固定的,無論什麼應用程式都會用到。這既可能是物理部件,也可能是螢幕下方的獨立於任何應用程式的虛擬固定按鍵,如最近釋出的Android3.0平板電腦那樣。
Android 2.0 智慧手機上的物理“返回”鍵
獨立於應用程式本身的“返回”鍵可以給其他如logo,標題或選單等元素在螢幕的上方留下更多空間。這種瀏覽設定與iOS大不相同,而且還有很多其 他與眾不同之處,Android稱之為“設計樣板”。根據Android所說,設計樣板是“反覆出現的問題的一般解決辦法。”下面是Android 2.0的主要設計樣板。
控制皮膚(Dashboard)
這種樣板解決了應用程式中多層次瀏覽的問題。它給諸如Facebook,LinkedIn和Evernote等多種應用程式提供了平板解決方案。
Facebook和LikedIn所採用的控制皮膚設計樣板
活動框(Action Bar)
活動框是Android最重要的設計模板和與眾不同之處。它的工作原理非常類似於傳統網站的banner,左邊有標誌或標題,導航項在右邊。活動框的設計非常靈活,允許在選單懸停和放大搜尋框。它一般用作一個全域性功能,而非單個程式。
Twitter所採用的活動框設計樣板
搜尋框(Search Bar)
這為使用者提供了一個簡單的按類別搜尋的方法,並提供搜尋建議。
Google Seach程式所採用的活動框設計樣板
快速活動欄(Quick Actions)
這種設計樣式和iOS的彈出動作有點相似,為使用者提供了額外的文字行動。例如,點選應用程式的照片,可能會觸發快速活動欄,讓使用者共享該照片。
Twitter所採用的快速活動欄設計樣板
隨同構件(Companion Widget)
小構件允許應用程式在使用者主螢幕上顯示通知。與iOS上以臨時模態對話方塊形式推送通知不同,隨同構件始終保留在主螢幕上。(提示:想你的Android裝置選擇構件,只需點選並按住螢幕上的任意空白區域就可以。)
Engadget, New York Times以及Pandora所採用的隨同構件
使用既定的設計樣板對於保持使用者直觀和熟悉的體驗是非常重要的。沒有使用者希望在Android裝置上的體驗iPhone的感覺,也沒有Mac使用者希望在自己的Mac OS 環境裡體驗微軟。瞭解了設計樣板,是學習Android語言以及給使用者設計最優體驗的第一步。你的開發人員也會感謝你!
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解壓縮到桌面上的一個資料夾;
- 安裝Java SE SDK
在Android裝置上:
- 開啟“設定”(程式選單裡)
- 點選“應用程式”;
- 點選“開發”;
- 檢視“USB 除錯”
好了,有趣的來了:
- 將Android裝置通過USB介面連線到計算機,並允許Windows安裝的所有驅動程式。其中一個驅動程式可能無法找到,你可能需要去到“控制皮膚”的“Windows裝置管理器”。在那裡,找到這個裝置(旁邊有黃色警告圖示),並右鍵單擊。
- 選擇給裝置“更新/安裝”驅動程式。
- 轉回到桌面。開啟Android SDK資料夾並選擇SDK中的Setup.exe。
- 允許其自動重新整理SDK作業系統的列表,並選擇安裝所有軟體包。
- 一旦完成後,退出應用程式。
- 返回到桌面上的已開啟的Android SDK資料夾,開啟“工具”資料夾。
- 點選“ddms”檔案,開啟Dalvik Debug Monitor。
- 從“Name”對話方塊中選擇裝置。
- 在應用程式的頂部選單中,開啟“裝置”選單,選擇“螢幕捕捉… …”,一個裝置螢幕捕獲視窗將開啟,你應該就可以看到Android裝置的啟動螢幕了。
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。過往的物理“返回”按鈕,這回被位於螢幕底部的由軟體生成的固定導航按鍵和系統狀態列取代。
Android 3.0裡固定的導航按鈕及系統狀態列
在整合了2.0版中所有的設計樣板的同時,Android 3.0在視覺上給人帶來很多新鮮感。唯一的區別是,活動欄已更新到包括標籤,下拉選單已經其他小東西。當使用者選擇在螢幕上顯示單個或多個元素時,活動欄還可以改變它的外觀。
Android 3.0 裡包含各種選單的活動欄
另一項新增到Android 3.0框架的新功能是一個“片段”(fragments)的機制。片段是一種可以根據螢幕的方向和尺寸來調整佈局大小和位置的自包含元件。這可以在螢幕大 小的侷限下,通過給設計師和開發人員以調整佈局的彈性,藉以解決多種外形的設計難題。螢幕元件可以被拉長,疊壓,展開和摺疊,顯示和隱藏。
圖例顯示“片段”的用途
這個被吞口水地稱為冰淇淋三明治的未來Android版本,承諾把這個功能放入Android智慧手機裡,讓設計人員和開發人員使用“一體適用”的 策略來開開發程式。這對設計師和開發者來說可能是模式的轉變,他們要學習思索利用可以拉長,堆放,擴大或隱藏的拼圖來設計應用程式。總之,這將允許 Android作業系統在任何地方執行(無限的可能性!)。
一語箴言
多玩一玩Android手機和平板電腦,花一些時間下載應用程式和瀏覽它們的介面。想要基於Android設計,必須將自己沉浸在這個環境裡和深入地瞭解它。這聽起來很廢話,但當聽說甚至產品經理都沒有Android裝置的時候,你就明白我的意思了。
原文:Dan McKenzie
譯文:Alex Chow