Android的一些UI設計

談到應用程序設計,對設計師來說,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

這種樣板解決了應用程序中多層次瀏覽的問題。它給諸如FacebookLinkedInEvernote等多種應用程序提供了平板解決方案。

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的)。

  1. 所有的Android設備USB驅動程序;
  2. Android軟件開發套件(SDK);
  3. Java SE SDK

然後在電腦上:

  1. 將USB驅動程序解壓縮到桌面上的一個文件夾;
  2. 將Android SDK解壓縮到桌面上的一個文件夾;
  3. 安裝Java SE SDK

在Android設備上:

  1. 打開“設置”(程序菜單裏)
  2. 點擊“應用程序”;
  3. 點擊“開發”;
  4. 查看“USB 調試”

好了,有趣的來了:

  1. 將Android設備通過USB接口連接到計算機,並允許Windows安裝的所有驅動程序。其中一個驅動程序可能無法找到,你可能需要去到“控制面板”的“Windows設備管理器”。在那裏,找到這個設備(旁邊有黃色警告圖標),並右鍵單擊。
  2. 選擇給設備“更新/安裝”驅動程序。
  3. 轉回到桌面。打開Android SDK文件夾並選擇SDK中的Setup.exe。
  4. 允許其自動刷新SDK操作系統的列表,並選擇安裝所有軟件包。
  5. 一旦完成後,退出應用程序。
  6. 返回到桌面上的已打開的Android SDK文件夾,打開“工具”文件夾。
  7. 點擊“ddms”文件,打開Dalvik Debug Monitor。
  8. 從“Name”對話框中選擇設備。
  9. 在應用程序的頂部菜單中,打開“設備”菜單,選擇“屏幕捕捉… …”,一個設備屏幕捕獲窗口將打開,你應該就可以看到Android設備的啓動屏幕了。

The Dalvik Debut Monitor.

瀏覽:

  1. 打開Android設備,瀏覽任何頁面。回到計算機上,並在“設備屏幕捕捉”點擊“刷新”。Android設備當前的畫面應該就會出現。
  2. 如果你使用的是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設備的時候,你就明白我的意思了。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章