萬盛學電腦網

 萬盛學電腦網 >> 網頁制作 >> 交互設計 >> Android平板電腦設計:屏幕流創建與設計布

Android平板電腦設計:屏幕流創建與設計布

  UI元素

  如同大家所想的那樣,Android系統竭盡全力把一切做的與它的競爭對手相反(這叫做差異化!)。Honeycomb有其自己的UI規范,並且它現在有一種新的“全息UI”視覺語言,用於諸如選擇時間日期、選擇一個選項,設置音量等日常操作中。了解這種UI語言對創建屏幕流和設計布局至關重要。

Android平板電腦設計:屏幕流創建與設計布 三聯教程

  UI元素的采樣,來自Google I/O 2011演示文稿的一頁幻燈片

  字體

  iPad4.3可以使用多少種字體?答案是57種。

  Android多少種?只有3種。

  是的,它們是 Droid Sans, Droid Serif and Droid Sans Mono.然而有積極的一方面。雖然平台只有這三種字體,但開發人員可以自由地將其他字體綁定他們的應用程序。

  什麼相同?

  對iPad已經熟悉的設計師是幸運的,這兩個平台有一些相似之處。

  觸控手勢

  點擊、雙擊、滑動、拖動、收縮、旋轉和任意滾動。

  拆分視圖和多窗格用戶界面

  拆分視圖是平板電腦中最常見的布局之一。它由兩個並排的窗格組成。當然,你可以為更加復雜的布局增加窗格。

  Ustream的拆分視圖,類別選項在左,內容在右。

  嵌入式多媒體

  兩個平台都允許嵌入音頻、視頻和地圖。

  Youtube 應用程序,具有嵌入式視頻播放器。

  剪貼板

  支持應用程序內外的信息復制和粘貼。

  拖放

  兩個平台都有拖放功能。

  Gmail應用程序中的拖放特性

  設計模式

  Honeycomb沿用了很多在Android 2.0中引入的設計模式,並擴充了它們。如果你對設計模式不熟悉,正如Android中定義的,它們是一種“應對反復出現的問題的一般性解決方案”。設計模式是Android維護者設計的關鍵的用戶界面規范,意圖是助於用戶體驗的一致性、給予設計師和開發人員一個工作模板。它們是可以定制的,所以沒有必要擔憂。

  如前所述,操作欄是Android 用戶界面中最為突出的組成部分,也是這裡的重點所在。

  日歷應用程序中被高亮顯示的操作欄

  圖標或標志

  圖標或標志在操作欄的最左邊。它是可操作的;點擊後用戶被帶到應用程序的主頁屏幕。

  日歷應用程序的圖標

  導航

  下面,我們找了幾種典型的導航形式,下拉菜單形式或標簽菜單形式。Honeycomb使用一個三角圖形指示下拉菜單,並為標簽提供了一系列的下劃線;下劃線通常占據大多數操作欄的自身空間。

  左箭頭也可能出現在圖標或標志抑或標簽的左側,用作返回導航或者取消主要操作。

  三種不同形式的操作欄導航

  常用操作

  常用操作,顧名思義,就是給用戶類似搜索、分享和溢出菜單的東西。它們總是被放置在操作欄的右側,遠離任何標簽。

  日歷應用程序中的常用操作

  溢出菜單

  溢出菜單是常見操作組的一部分,有時候會被一根垂直的線分隔開。這個位置放置多種菜單項,比如設置、幫助和反饋。

  一個溢出菜單

  搜索

  搜索也是常見操作組的一部分。搜索的獨特性在於它的展開和收縮動作。點擊搜索圖標後搜索框展開讓你輸入查詢關鍵詞。點擊“×”取消搜索,此時搜索框收縮,又變成單個按鈕的狀態。這是在有很多操作鍵或圖標需要展示的情況下節約顯示空間的一種方法。

  搜索功能收縮狀態(上方的圖)和展開狀態(下方的圖)。點擊放大鏡展開搜索框,點擊“×”關閉搜索框。

  語境操作

  當某個項目被選中的時候,語境操作會改變操作欄的格式,展示出的選項不同於其他項目。例如,照片應用程序正在展示縮略圖,一旦一張圖片被選中,操作欄就可能發生變化,為編輯這張圖片提供語境操作。

  用戶可以點擊“取消”或操作欄中的“完成”來退出語境操作欄。

  Gmail 應用程序中,點擊和選中郵件的時候就會觸發語境操作欄

  [譯者注:本人英語水平實在有限,而文章專業詞匯又過多,翻譯失實之處請指正。謝謝!]

  本文編譯自一葉苦雨,原文地址。

        系列文章:

        Android平板電腦設計:做得像iPad就行嗎?

  譯文出處:thinkingrain.lofter.com

copyright © 萬盛學電腦網 all rights reserved