Android UI Design Tips(Google官方出品：Android UI 設計指導)——第一部分

發表於 2011 年 08 月 11 日 由 wenjianhua

Android UI Design Tips是Google官方開發人員部落格上發布的一組PPT，旨在指導設計和開發人員如何構建一個卓越的應用程式。

既然是Android他母親寫的，瞭解自己兒子的肯定是自己的父母嘛。

沒錯，這幾組PPT確實很精品。

因此在網上找了些翻譯資料，大多都只翻譯了前面一小部門，後面的我準備參考其它人的隻言片語，勉強翻譯翻譯，第一次翻譯，水準不高，將就看吧。

開始

為什麼我們要關心 UI?

如果一個應用軟體具備良好的使用體驗，那麼：
1.  使用者所感知的軟體品質越好
2.  將給你更高的評分
3.  軟體會有更好的排名
4.  更多人購買或安裝你的軟體

總之，特別是行動裝置 App，UI是一個軟體成功的關鍵。

接下來將討論如下內容：
1.  應該遵循和不應該遵循的設計原則
2.  設計理念和各種考慮因素
3.  你必須使用的 使用者介面架構特性
4.  新的 UI 設計模式
5.  表徵圖和準則

 

1.  應該遵循和不應該遵循的設計原則
錯誤的設計原則
1. 不要照搬其他平台上的 UI 設計。應該讓使用者感覺是在使用一個真正的 Android軟體,在你的品牌顯示和平台整體觀感之間做好平衡。
2. 不要過度使用模態進度條和確認對話方塊（文：意思是，不要經常彈出那些擋了使用者所有操作的對話方塊或進度框。）。
3. 不要使用固定的絕對位置布局。（文：AbsolutLaout，軟體中你若使用此布局方式，意味著，市面上有多少種解析度手機，你就要寫多少份布局檔案）
4. 不要使用 px 單位，使用 dp；如果是文本，使用 sp 。(文：因為Android產品眾多，各自解析度的手機充斥市場。如果使用和解析度相關的單位(px)，很可能導致在其它解析度的手機上看到你意料之外的Size效果。而dp(或者dip)和sp是和螢幕密度相關的（其實是根據320×480為標準計算的）)
5. 不要使用太小的字型。

正確的設計原則

1. 所有資源都要針對高解析度螢幕建立

2. 需要點擊的元素要夠大

3. 表徵圖設計要遵循 Android 的準則

4. 要使用適當的間距(margins, padding)

5. 要支援 D-pad 和 trackball 導航（文：我猜測是“觸控螢幕”和“軌跡球”，“軌跡球”相當與PC上的滑鼠，當使用者滑動軌跡球去指向目標事物時，目標事物需要做出回應。說好懂點，相當於當你的滑鼠划過一個連結或當你的滑鼠移至上方再一個連結上的時候，連結通常會加高亮。如果說“觸控螢幕”只需要關注使用者手指按下的動作，那麼“軌跡球”還要關注“控制項”被選中的動作。）
6. 要正確管理活動(activity)棧（文：activity的lanchmode屬效能夠設定activity在棧中的活動狀態，例如棧內單例或者棧頂單例或者總是建立等。決定於你是否希望使用者重新回到上一個（或更早）的介面，看到“最初的”還是“上一次”的資料。前者通常意味著丟棄使用者上一次填寫的資料、從資料庫查詢更新的資料等等。例如華錄益康項目中，當使用者按HOME鍵回到案頭，然後點擊狀態列（案頭頂部）將出現一個“小人”表徵圖，使用者點擊它將會回到應用程式中來，對於“主介面”或者“圖表介面”來說，就是使用的看到“上一次”資料的方式。取決與他們的lanchmode的設定）。
7. 要正確處理螢幕方向變化。（文：除非萬不得已，否則建議不要強制橫屏或豎屏。躺在床上玩手機的人知道，單手舉在空中久了，手會酸疼，這時候希望橫過屏來雙手操作。雙手舉久了，就想測過身來躺並換成單手舉著。總之，人類這個生物永遠不可能找不到讓自己永遠滿意的舒服的姿勢。因此，保險的做法是，將他任何的使用姿勢都考慮在內。
可是我悲哀的發現，就算我們做到了支援自動橫、豎屏，人類還是不會滿足。因為當你側身單手使用手機的時候，就算豎著拿手機（對於正側身的人來說，手機是豎著的。這時候人的意願應該是想豎屏顯示內容），可是因為手機方向對於地球來說，已經橫過來了，因此，手機內容會變成橫屏。當我使用某款電子書軟體時，這個問題可是煩透我了(我不得不偏著頭看書)，直到用了”QQ Reader”，心情一下子無比歡暢，僅僅因為他支援 “總是橫屏或總是豎屏” 的設定。於是我就這樣成了 “QQ Reader” 的忠實使用者。
迷住一個男人，只需要女人一個妖媚的眼色；迷住使用者，有時候也只需要一個很貼心的細節。）
8. 要使用主題/樣式、尺寸和顏色資源來減少介面冗餘。
（例如，你的軟體（甚至同一個介面）裡有很多文字框，每個文字框的樣式都差不多甚至一樣。那麼你是否每個都要設定一堆啊？如：
<EditText
android:layout_width=”fill_parent”
android:layout_height=”wrap_content”
android:layout_marginTop=”5.0dip”
android:layout_marginRight=”5.0dip”
android:layout_marginBottom=”5.0px”
android:background=”@drawable/login_edit”
android:paddingLeft=”35.0sp”
android:singleLine=”true”
android:saveEnabled=”true”
android:inputType=”text”
/>
還是說這樣稍微好點呢(將修飾成Style裡，讓Style重用)：
<EditText  style=”@style/Style_Edit” />
假如說你的軟體裡有二十個這樣的文字框，你只需複製這一行代碼二十次就可以了。
還有人會猶豫說，我的二十個文字框另外還有些細節的區別怎麼半？
1. 為每種文字框都寫一個Style 。
2. 抽象出幾種間的共同點，用
<style parent=”@style/Base_Edit”>…差異化內容</style>
3. 假如差異的內容並多並且不常見的化，還有個小竅門。例如：
<EditText  style=”@style/Style_Edit”
android:inputType=”password”
/>
這樣就將，Style為普通文字框修改成了密碼框。秘訣在與android解析XML應該用的pull解析器，pull解析器的特徵就是寫在前面的屬性將被先解析到（先觸發事件），因此，android:inputType=”password”因為被寫在了後面，就將覆蓋Style裡面的內容。這樣也完成了樣式差異化。）

9. 要和視覺與互動設計師合作

2.  設計理念和各種考慮因素

設計理念
1. 乾淨而不過於簡單(文：讓我想到了一句話–美觀是使用者體驗的一種表達形式，而不是為了美觀而美觀。)
2. 關注內容而非修飾
3. 一致,吸引人,少量簡潔的變化
4. 使用雲端服務(同時在 PC 案頭和手機上同步處理的使用者使用情境)來加強使用者體驗

優秀介面的設計準則
1. 關注使用者
2. 顯示正確的內容
3. 給予使用者適當的回饋
4. 有章可循的行為模式
5. 容忍錯誤

下面將祥述以上五點：

關注使用者
1. 瞭解你的使用者(年齡,技能,文化,是否有身體障礙,對應用的需求,使用的裝置,何時何地如何使用裝置)
2. “使用者優先”的設計心態 (使用者通常是任務導向的)
3. 更早、更頻繁的由真實使用者來測試

 

顯示正確的內容
1. 最常用的操作使用者應該立即可以看到並且使用
2. 次要功能可以放到菜單裡面

給予使用者適當的回饋
1. 互動 UI 元素最少需要反映出 4 種不同的狀態 (default,disabled,focused,pressed)（文：推薦Google自家的 Google Music Android用戶端）
2. 保證操作的結果是清晰可見的。（文：這個我推薦Excel）
3. 多給予使用者進度提示,但是不要幹擾他們當前的操作。
（文：其它常見的替代方式：
1. 常駐通知欄，下劃通知欄能看到當前進度。需要學習RemoteView。
2. 在Title右測顯示小的圓形進度條（一直旋轉那種）。如Gmail等。
3. 像Windows的中的迅雷下載一樣，置頂顯示一個小表徵圖。推薦體驗一下UC迅雷，感覺不錯。WindowManager的針對整個螢幕的addView和removeView機制能夠實現此效果。
4. 像UC瀏覽器那種，螢幕頂部顯示一個橫向的進度條。 ）

有章可循的行為模式
1. 行為模式遵循使用者的期望(正確的操作活動棧,顯示使用者期望看到的資訊和動作)
2. 使用合適的方式來加強功能可見度(可點擊的元素就應該看起來是可以點擊的)
3. 如果使用者完成一項任務需要複雜的操作,重新思考你的設計!!!

 

容忍錯誤
1. 只允許有意義的操作(適當禁用一些 UI 元素)
2. 盡量減少不可回退的操作
3. 允許回退(undo)比使用確定對話方塊更好(實際上,應該盡量少用確定對話方塊,它對使用者是一種幹擾)

如果錯誤是可能發生的,那它就一定會發生。
- Donald Norman《The Design of Everyday Things》作者（文：《設計心理學》，關於Donald Norman的詳細情況在這：http://www.techcn.com.cn/index.php?doc-view-134543.html）

設計上的考慮因素
1. 螢幕的物理尺寸
2. 螢幕密度
3. 螢幕的方向(豎向和橫向)
4. 主要的 UI 互動方式(觸屏還是使用 D-pad/trackball)
5. 軟鍵盤還是物理鍵盤
6. 瞭解不同裝置之間的相異之處是非常重要的
7. 閱讀 CDD(相容性定義文檔),瞭解裝置可能的差異
8. 瞭解螢幕尺寸和密度分類(點擊這裡閱讀)

 

原文見：http://blog.koonet.com/?p=95