谷歌官方Android UI設計祕笈:第一部分

我們都知道,有JavaSE、JavaEE開發經驗的人入手Android開發並不非常困難,但UI設計是一個難點。(詳情請閱讀《程序員》2010年第9期中盛大何小杰的文章“Android開發經驗談”。)

最近,Google 的官方開發者博客發佈了名爲“Android User Interface Design Tips”(Android UI設計技巧)的幻燈片,非常實用。谷安(谷奧的Android子站)將PPT的前兩個部分做了簡單翻譯,本文在谷安文章的基礎上進行了編輯、整理和補充,更正了少量誤譯,刪去了一些沒有信息量的幻燈片。

此外,CSDN TUP第三期活動活動報道)上,谷歌中國的工程師劉昌皓曾經講解過類似的主題,推薦大家參考閱讀劉昌皓的演講實錄

類似的內容也在Google I/O大會上曾經宣講過,YouTube上的演講視頻當然也極具價值(無法直接訪問)。

P2

作爲開發者,爲啥我們要關心UI?

因爲UI越好,用戶會感覺你的軟件質量越好,第一印象更好;於是他們會給你更好的評分;

於是你的軟件會有更好的排名;於是,會有更多人裝你的軟件,你也就能賺到更多錢。


這個 PPT 包含5個部分(本文爲前兩個部分):
1.  五不要和九要
2.  設計理念和各種考慮因素
3.  必須使用的 UI 框架特性
4.  新的 UI 設計模式
5.  圖標和準則

1. 五不要和九要

五不要


1不要照搬其他平臺上的UI設計。應該讓用戶感覺是在使用一個真正的 Android 軟件,在你的品牌顯示和平臺整體觀感之間做好平衡。
2不要過度使用模態進度條和確認對話框。
3不要使用固定的絕對定位佈局。
4不要使用px單位,使用dp;如果是文本,使用sp。
5. 不要使用太小的字體。 

 

九要

 



1. 所有資源都要針對高分辨率屏幕創建(縮小總比放大好)
2. 需要點擊的元素要夠大
3. 圖標設計要遵循 Android 的準則
4. 要使用適當的間距(margins, padding)
5. 要支持D-pad和trackball導航
6. 要正確管理活動(activity)棧
7. 要正確處理屏幕方向變化
8. 要使用主題/樣式、尺寸和顏色資源來減少界面冗餘
9. 要和視覺與交互設計師合作!!!

 

 

2. 設計理念和考慮因素


設計理念
1. 乾淨而不過於簡單
2. 關注內容而非修飾
3. 一致,吸引人,少量簡潔的變化
4. 使用雲端服務(同時在PC桌面和手機上同步用戶使用場景)來加強用戶體驗

 


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


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


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


給予用戶適當的回饋
1. 交互式的UI元素最少需要反映出4種不同的狀態 (default,disabled,focused,pressed)
2. 保證操作的結果是清晰可見的
3. 多給予用戶進度提示,但是不要干擾他們當前的操作



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


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

如果錯誤是可能發生的,那它就一定會發生。

- Donald Norman, The Design of Everyday Things 作者


設計上的考慮因素
1.  屏幕的物理尺寸
2.  屏幕密度
3.  屏幕的方向(豎向和橫向)
4.  主要的UI交互方式(觸屏還是使用D-pad/trackball)
5.  軟鍵盤還是物理鍵盤


設計上的考慮因素
6. 瞭解不同設備之間的相異之處是非常重要的!
7.  閱讀CDD(兼容性定義文檔),瞭解設備可能的差異
8. 瞭解屏幕尺寸和密度分類(網絡資料

 (未完待續)

文章轉載自:谷安——谷奧Android專題站 [http://android.google.org.cn]

本文地址:http://android.google.org.cn/posts/android-ui-developments-part-i.html

【 發表評論 1條 】

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