Android UI Design Tips CN.pdf - Google Drive

Android用户界面 设计技巧 2010年7月

为什么我应该关注用户界面 更好的用户界面 可被感知的质量和美观 更高的评级 更好的应用排名 更多的安装/购买

目录-Android用户设计技巧 1.应该做和不应该做什么 2.设计哲学和注意事项

3.应该明确被使用的用户界面框架特性 4.新的UI设计模式 5.图标和指南

应该做和不应该做什么



不要简单从其他 平台上移至用户 界面

—用户在他们的设备上使 用你的应用应该有一种”宾 至如归”的感觉 — 平衡平台和品牌元素



不要过度使用对话 框或模式进度框







不要创建死板的、 绝对位置的布局 不要使用px的单位， 使用dp(对文字使用 sp) 不要使用小字体









对所有资源创建 高精度屏幕的版 本 创建大的、易于 点击的对象(按 钮、列表项) 遵循Android图标 指南

使用恰当的margin 和padding



支持十字键盘和 轨迹球导航



正确处理动作栈



正确方向变化



使用主题/风格、 规格、颜色资源 来减少冗余

协同视觉设计师和交互设计师进行工作

设计哲学和注意事项

Android设计哲学 清晰 vs 简单  内容 vs 形式  不失迷人的一致性 - 优雅的变化  通过云来增强使用体验 - 通过桌面和移动设备来维护用 户的使用场景 

良好界面设计的原则 1. 2. 3. 4. 5.

聚焦于用户 凸显希望用户使用的内容 给予用户恰当的反馈 有章可循的行为模式 有适当的容错性

1.聚焦于用户 

了解你的用户

- 年龄、技能、文化、缺陷等等 - 他们希望通过你的应用来做什么 - 他们使用的哪种类型的设备 - 他们在哪里/何时/如何使用他们的设备 

以”用户优先”的心态进行设计

- 用户通常是任务驱动型的 

尽早和经常性的使用真实的用户进行测试

2.凸显希望用户使用的内容 

最常用的操作应该立刻展现出来并可以使用



次要的功能可以通过“菜单”按钮来使用

3.给予用户恰当的反馈 

可交互的UI元素至少应该有四种状态



确保一个动作的效果是清晰和可见的



显示恰当但不唐突的进度指示器

4.有章可循的行为模式 

和用户的预期保持一致

- 和动作栈进行正确的交互 - 显示用户预期看到的信息和动作(需要测试和观察)



使用恰当的功能暗喻

- 如果某个元素是可点击的，那看起来就应该像可点击的

如果使用上需要复杂的指导说明， 那么重新思考你的设计。

5.有适当的容错性 

限定可操作的操作为有意义的操作

- 在恰当的时候禁用某些UI元素 



控制不可撤销操作的数目 提供“撤销”操作优于提供“确认”对话 框

- 实际上，尽可能少的使用对话框，对话框有较大的侵扰性

如果可能会出错，那肯定会出错。 - 唐.诺曼(Donald Norman)

设计注意事项 

物理屏幕尺寸



屏幕分辨率



横持和竖持



主要的交互方式

-触摸屏 -十字导航键/轨迹球 

物理&虚拟键盘

设计注意事项 



知道设备有几种变种是非常重要的 通读Android兼容性定义文档(CDD)了解可 能的设备用户界面变种

- http://source.android.com/compatibility 

屏幕尺寸&分辨率分类

–http://developer.android.com/resources/dashboard/screens.html

应该明确被使用的用户界面框架特性



资源限定符(Resource qualifiers) 



一个.apk中包含所 有的资源 系统在运行时选 择使用哪些资源

9-patch drawables – foo.9.png



类似CSS3中的border-image



边框像素点指示可拉伸的区域



同时创建 –mdpi 和 –hdpi 的版本

Selector (state list) drawables foo.xml:

Selector (state list) drawables

Layer drawables – XML + PNGs

+

+

Drawable.setColorFilter(0xA4C6 39,...);

=

Rendered output (resizable w/ 9-patch)

新的UI设计模型

新的UI设计模型 

面板



功能栏



快捷操作列表

新的UI设计模型 

面板



功能栏



快捷操作列表

新的UI设计模型 

面板



功能栏



快捷操作列表

新的UI设计模型 

面板



功能栏



快捷操作列表

面板  

我可以用这个应用来做什么？ 有什么新的东西？

面板 – 推荐用法 

用来聚焦于3-6个最重要的选择



用来突出新内容



应该是吸引人的 – 这是给用户留下第一印象的地方

功能栏 

我可以快速的进行什么常用操作？

功能栏 – 推荐用法     

用来在屏幕上展现主要的功能 用来表达应用当前所处位置 在应用中保持一致 提供返回主页的机制 – Logo或者独立的按钮 不要用在上下文相关的功能上

快速操作列表 

我可以对这个对象做些什么？

图标和指南

新的Android图标样式

触感·呈现感·正面·顶部光源 提喻·多样化的形状,质感

图标指南 指南和模板可以访问如下链接： http://developer.android.com/guide/practices/ui_guidelines/icon_design.html

问题？

版权和商标 



Android、Google 是Google公司的注册商标 所有其他的商标和版权归属于各自的商标和版权所有 者