谷歌官方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上的演讲视频当然也极具价值（无法直接访问）。

作为开发者，为啥我们要关心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条 】