Android外文翻譯系列 － Android應用程式應該是什麼樣的？

前言

    Android平台沒有給出具體的文檔說明Android應用程式應該怎麼樣設計以及怎麼樣工作。Google從一開始就表明他們沒有打算規定Android應用程式什麼是可以接受的什麼是不可以接受的。Android官方也提供了一些列的UI指導文檔，但是這些文檔大部分關注一些小的方面，比片（icon），小組件(widgets)和表單(menus)。

    從Android平台建立起到現在，對於應用程式的UI以及程式應該看起來應該怎麼樣感覺起來應該怎麼樣，有成千上萬種的想法，遠遠不能統一。但是隨著平台越來越成熟，越來越多的應用程式逐漸開始統一UI。某些UI功能已經被開發成庫，甚至有些已經定義到Android SDK庫裡面。不久的將來，使用者會越來越希望應用程式能夠使用相同的方式工作。某些控制(controls)和互動(interaction)模式將會成為增強Android使用者體驗的重要組成部分。這篇文章我想要總結下Android UIs如何在更高層次(Higher level) 下工作。以前我零零散散地寫了很多關於UI patterns的東西，現在我想將它們整合在一起用來說明我所認為的“Android應用程式應該是什麼樣的”。

冰淇淋三明治（Ice Cream Sandwich）

    之前發布的Android 4.0版本，很大程度上提升了平台的使用者體驗。這些改變很自然地影響了未來Android應用程式應該怎麼樣。一些提升可以移植到之前的版本，但並不是全部。這篇文章我主要將Android應用程式現在應該怎麼樣。Android發展到4.0版本之後，UI有了很大的發展，但是事實上我們有超過200.000.000Android裝置在2.1～2.3Android版本上運行。

 

 

應用程式的落地屏風(App Landing Screen)

    很多應用都採用|Dashboard UI|模式作為應用程式一開始開啟的視圖-App Landing Screen。如果你的應用程式有超過一個的主要功能(main function)，|Dashboard UI|模式將會是一個很好的選擇。一個Dashboard展示了應用程式的最主要的功能，並在一個螢幕中提供了這些功能的快捷連結。

 

    Dashboard對於Android手機使用者來說是相對比較熟悉的。如果你的應用程式在第一屏使用|Dashboard UI|模式恰到好處，那麼將會讓使用者使用起來有一種很熟悉的感覺，將極大地提升使用者體驗。使用|Dashboard UI|的應用程式例子如下。

一般應用程式螢幕(General Application Screen)

    一般而言，不同的(activity)螢幕使用不同的形式展示很少且單一的功能，而且使用者認可而且期待這樣。在螢幕的最上部使用一個操作欄(Action Bar)是非常常見而且易於使用者接受的。

   

• 在操作欄的最左邊有一個應用程式圖示或者首頁(home)表徵圖，使用者點擊這個表徵圖可以返回應用程式的首頁。
• 在操作欄的中間是螢幕的標題列，這的背景顏色最好迎合你的商標顏色或者和整個應用程式一致。
• 在操作欄的最右邊有一些指定某些重要操作的表徵圖。這部分的操作只是和這個螢幕內容相關。Search功能似乎在這兒十分常見。

    常見的應用程式案例如下：

 

     Action Bar實現可以研究下Jake Wharton's ActionBarSherlock library project。

 列表形式螢幕(List Screen)

    列表(Lists)是Android UI裡面非常常見的一個組件。在展示資料時候它也非常的有用，尤其在展示那些你不能確定數量的資料方面。Lists同樣也有缺點，為了在列表容器中比較好看地展示，列表的每一項的內容都相對比較少。另一方面列表容器中將大量的資訊擁塞在一個很小的地區裡面會使使用者很難使用列表，很難於列表中的選項進行互動。

     如果有一些指導告訴你的使用者如何在Android中使用列表(Lists),那將更好的提升使用者體驗。Android使用者在列表(元素、功能)方面已經有以下的使用經曆，如果你的列表(Lists)，遵守以下類似的方法，那麼你的使用者將會更加容易去使用你的應用程式。

• 列表螢幕上的操作欄(Action Bar on List Screen)

        列表螢幕上可以使用操作欄來顯示與整個列表相關的操作，例如全選等。需要注意的是操作欄上的操作不應該是針對某一個List Item的操作。

• 清單項目與複選框(List Items and Checkboxes)

        每一個清單項目本身通常包含文字資訊和圖片元素。通常在每一個清單項目上使用一個複選框來選擇一個或者多個選項，從而進行操作。在清單項目的最左邊使用複選框有以下幾個好處：

        1. 這和我們在web，案頭應用已經在手機的其他地方的使用習慣一致。

        2. 在每一個列表選項的邊緣使用複選框可以建立一個具有更大點擊地區的複選框，這可以更方便使用者區別使用Tapping一個列表選項和Selecting一個列表選項。

        3. 在列表選項的最左邊使用一個映像化的組件可以為使用者建立一個虛擬開始和結束通知，從而協助使用者更加快捷的瀏覽列表資訊。

• 次要項的控制（Secondary Item Control）

         某些清單項目相比簡單的選擇(checkbox)和導航(tapping)需要更加豐富的互動操作。最常見的使用案例就是評星starring或者書籤bookmarking清單項目。最常規的放置次要項(Secondary Item Control)的地方就是清單項目的最右邊。任何其他的位置都會與點擊地區相衝突。

 

 

         常見的使用案例就是ALDIKO和Google Mail：

 

• 永遠不要結束列表(Never Ending List)

        許多列表的清單項目都來自網路(Web)，這種情況下，載入資料需要花費時間，因此列表展示清單項目的速度不會向使用者上下滾動列表的速度那樣快。如果這樣的話，使用者滾動到列表的底部，那麼應用程式應該自動的從服務端擷取更多的資料。Indicator會告訴使用者更多的資料將要展示在列表的最下面，包括一些載入的效果，例如載入圖片等。

 

 

        案例Android Market和Twitter

 

• 單行操作-長按-快捷操作(Single Row Action - Long Press - Quick Actions)

        給使用者提供一種針對單行列表選項而不需要進入這個列表選項螢幕的快捷操作能很好的提升使用者體驗。由於手機和平板電腦沒有滑鼠按鍵，因此指定一個類似"right click"作用的操作是很有必要的，而長時間按著某個選項則可以充當"right click"這個角色。

        有一個叫做快捷操作(quick actions)的UI Pattern用來為列表選項顯示快捷操作。 原始圖形化的方式幾乎已經消失，但是這個原理依舊一樣，使用overlay menu的形式來顯示簡單的巨集指令清單，通常操作的數量有3－5個。不管如何?可視化快捷操作(quick actions)，有一些重要點需要注意：

        1. over menu不要覆蓋選定的列表選項。尤其執行刪除操作的時候，如果看到選定的列表選項，更有利於使用者操作。

        2. 只顯示一些簡單的操作。需要與使用者有很多互動的操作最好放在單個列表選項螢幕(A single item screen)的時候處理。

 

        使用案例如下：

 

• 多選項操作（Multi-item Actions）

        如果列表有上面說的複選框，那麼使用者可以同時選擇多條列表選項，通過選擇幾條選項，使用者可以想要對選擇的所有項進行同一操作。通常可以採用在UI面板的底部添加一些按鈕面板用來處理多選項操作。這個按鈕面板在操作結束後自動消失。

 

        使用案例如下：

 

•  更多關於列表的介紹，將在後續教程中陸續翻譯

         By Styling Android's Mark Allison:           ListView – Part 1           ListView – Part 2           ListView – Part 3           ListView – Part 4        And AndroidDevBlog's Cyril Mottier:

           ListView Tips & Tricks #1: Handle emptiness           ListView Tips & Tricks #2: Section your ListView

           ListView Tips & Tricks #3: Create fancy ListViews
           ListView Tips & Tricks #4: Add several clickable areas

 

標籤螢幕(Tabs)

    許多應用程式使用Tabs協助使用者在不同頁面間進行切換。Android從3.0版本以後改變了Tabs的工作方式，而且看起來更加酷。我的觀點是這樣的改變我們應當嘗試著應用到我們的應用程式中，不管程式運行在那個版本的Android手機上。

    簡單地說在Tab頁面的切換方式已經改變，使用者也期望你的應用程式也有這樣的改變。

   

    具體的案例如下：

 

    後續將要介紹的教程如下：

    Ice Cream Sandwich UI feature - Tabs

    ViewPager – Part 1

    ViewPager – Part 2

    ViewPager – Part 3

 

參考外文

http://www.androiduipatterns.com/2011/12/how-should-android-apps-look-like_16.htmlhttps://github.com/JakeWharton/Android-ViewPagerIndicator

如轉載請註明出處 http://www.cnblogs.com/youngC/archive/2012/10/31/2747907.html

QQ： 1321518080