【翻譯】Android 應用該是個啥樣子？

惑者發表於2012-01-03

特別說明：歡迎大家積極參與【iTran樂譯】第2期！

對於應用該是個啥樣子以及如何運作，Android 平臺並沒有硬性的準則。谷歌一開始就很明確，他們沒有計劃規定什麼是可接受的，什麼不是。這裡有一系列《UI準則》，但多數只是關注像圖示（icons）、部件（widget）和選單（menu）這樣的小玩藝。平臺面世以來，曾出現過成千上萬套不同應用 UI 方案，應用的觀感非常不統一。現在，隨著平臺的成熟和應用數量的激增，Android UI 的交匯點正在出現。某些 UI 特性已經成為通用標準，其中的一些甚至已經通過某種方式成為了 SDK 庫的一部分。不久，使用者可以期待應用能以更加統一的方式運作。某些控制和互動模型將成為 Android 整體體驗的一部分。

在本文中，我想從某個較高的層次來總結 Android UI 的常見功能。之前我曾寫過一些關於 UI 模式的文章，但從未從巨集觀的角度來看待過這個問題。現在，我想將它們歸攏起來，以展現我對 Android 應用看起來應該是啥樣子的觀點。

冰淇凌三明治

就在不久之前，最新的 Android 版本（4.0）釋出了。該版本中出現了有“史”以來數量最多的使用者體驗改進。很自然，這些改進將會影響將來 Android 應用的外觀。一些改進可以向前移植到舊版本，但是並不是所有的都可以。本文主要討論當下 Android 應用的外觀。我們可以期待很快就看到 ICS UI 的變革，但事實是：市場上有差不多 200,000,000 部 Android 裝置執行從 2.1 到 2.3 之間的版本。

應用登入畫面

很多應用都使用了儀表盤（Dashboard） UI 模式。如果應用的主功能超過一項，此介面將會是個非常不錯的起點。儀表盤展現了應用最重要的功能，並提供了簡便的快捷訪問方式。

enter image description here

Android 使用者都非常熟悉儀表盤。如果運用得當，該方法能夠讓使用者在第一眼看到應用時產生“賓至如歸”的感覺。

enter image description here

通用應用程式畫面

實際的窗體畫面總是以多種形式出現，但只有少數特性變得非常通用且為使用者所學習掌握和期待。螢幕頂端的操作條（Action Bar）非常通用而且易於把握概念。

左上角扮演著應用圖示或者 Home 圖示的角色。點選操作即可把使用者帶到應用的首頁。新的動作條將使用者帶到上一級畫面而不是首頁這種做法是毫無意義的。
動作條的中間將會扮演提供畫面標題的角色，同時顯示應用的品牌顏色或當前應用子功能的顏色。
螢幕的右上角會放置代表當前畫面的最重要可執行功能的圖示。在畫面的這個部分，應當只有與當前畫面內容相關的動作。但搜尋功能已成為此規則的一個常見例外情況。

enter image description here

請查閱 Jake Wharton 的 ActionBarSherlock 圖書館專案瞭解操作條的實現。

列表畫面

列表是 Android UI 中最常見的部件之一。在展示資料時，如果不知道資料量將會有多大，它將會很有用。當然，列表也有自己的弊端。為較好地展示列表內容的全貌，每個條目應相對較小。但另一方面，如果把大量資訊塞到狹小的區域內，可能會導致使用者難以使用列表及查閱要互動的條目。

針對在 Android 中如何使用列表如果有些準則這是件好事。使用者已經習慣於某些特定的元素和功能，如果列表遵循了某個類似的方法，使用者的學習曲線將會更為平緩。

列表畫面的動作條

列表畫面可使用操作條來展示整個列表所指向的目標操作。請注意，列表畫面的操作條不應當是使用者對某個（或多個但不是全部）列表條目執行操作的位置。

列表項和勾選框

通常，列表項自身僅包含很少的文字和圖片元素。常見的情況是，每個列表項都有一個勾選框，用於選擇一個或多個列表項來執行操作。

將勾選框放在列表項的最左端有以下幾個好處：

我們習慣於在所選專案的左邊看到勾選框。無論是在網頁、桌面程式使用者介面還是在移動裝置的某個地方都是這樣。
在列表項的邊上放置一個勾選項允許我們給勾選框建立更大的點選區域，並由此讓使用者能夠更輕鬆地區分是對某個列表條目進行點選還是選擇。
條目左邊的圖形部件建立了便捷的視覺化提示，用於告訴使用者某個條目結束而另一個條目開始，使使用者對列表的快速掃描更加輕鬆。

次要條目控制

一些條目需要更多的互動可能性，而不僅僅是選擇（勾選框）或者導航（點選）。這種控制方式的最常見用例是對行條目進行標註星號或者新增書籤。次要控制的唯一正常位置是條目的最右端。其它任何位置都將導致點選區域方面的問題。

enter image description here

Aldiko 和 Google Mail 是恰當運用列表的出色範例。Aldiko 選擇將勾選框放在右邊，因為它們有可見的支配資料夾圖示，如果再在其後放置一個勾選框將使得 UI 在感覺上失去平衡。

enter image description here

永無止境的列表

很多列表中所包含的專案都要通過網路連線來載入。在此情況下，載入過程可能會花上一些時間，列表將生成新的列表項的速度可能會趕不上使用者滾動操作的速度。當使用者滾動到列表的底部時，應用應當自動開始獲取更多列表項。指示器（Indicator）告訴使用者更多正在載入的條目將會出現在列表的尾部。在其中使用像進度條這樣的載入動畫是個不錯的想法。使用者會把動畫和正在執行中的任務關聯起來。

enter image description here

到達列表的底部時，Android Market 和 Twtter 都會自動載入更多的列表項。

enter image description here

單行操作——長按——快速操作

給使用者提供一種無須先進入條目畫面即可對單行條目執行操作的方法。由於電話和平板裝置沒有滑鼠右鍵（實際上也沒有左鍵），一種觸控式螢幕特定的“右鍵點選”藉此產生。通過長按某個條目，使用者表明他們想要對該特定條目執行某個操作。

有種叫做快速操作的使用者介面模式，可用於顯示某個條目對應操作。最初所使用的圖形方法幾乎都已經絕跡了，但其概念猶存。通常是某種形式的覆蓋選單，顯示了一份非常簡單的操作列表。通常只有 3 到 5 項。無論在視覺化方面快速操作是如何實現的，有幾點是必須謹記的：

不要覆蓋選中的條目！特別是在刪除操作時，如果能夠始終看到要操作的目標條目，使用者的信心將會倍增。
只顯示簡單的操作。需要大量互動的操作應當在單獨的條目畫面中處理，而不是在快速操作當中。

enter image description here

Aldiko、Asto 檔案管理器和 Google+ 在快速操作中均使用了多種不同的視覺風格。無論使用哪種風格，它們都通過長按畫面中某個條目來呼叫。

Aldiko 和 Astro 都是良好的設計範例，但 Google+ 卻打破了在使用單獨彈出選單時隱藏目標條目這一規則。我希望他們能夠在將來的版本中修正這一可用性缺陷。

enter image description here

多條目操作

如果列表中使用了我前面談到的勾選框控制元件，就可以允許使用者選擇多個條目。通過選擇多個條目，使用者看錶明要對所有選中條目執行某個操作的意圖。處理針對多個條目的操作的常見方法是在畫面的底部增加一個 UI皮膚，一旦使用者選中某個勾選框，則提供多個可用操作的按鈕。一段漂亮的滑動動畫將會給 UI 新增不少平滑和精緻的感覺。當最後一個選項被選中或者操作執行後，該皮膚將會自動消失。

enter image description here