码迷,mamicode.com
首页 > 移动开发 > 详细

Android UI Design Tips 笔记

时间:2015-01-12 14:24:41      阅读:198      评论:0      收藏:0      [点我收藏+]

标签:

一、为什么我们要关心 UI?

如果一个应用软件具备良好的使用体验,那么:


1.  用户所感知的软件质量越好
2.  将给你更高的评分
3.  软件会有更好的排名
4.  更多人购买或安装你的软件

二、接下来将讨论如下内容:

1.  应该遵循和不应该遵循的设计原则
2.  设计理念和各种考虑因素
3.  你必须使用的 UI 框架特性
4.  新的 UI 设计模式
5.  图标和准则

 

1 、应该遵循和不应该遵循的设计原则

错误的设计原则

1. 不要照搬其他平台上的 UI 设计。

应该让用户感觉是在使用一个真正的 Android软件,在你的品牌显示和平台整体观感之间做好平衡。

2. 不要过度使用模态进度条和确认对话框

(文:意思是,不要经常弹出那些挡了用户所有操作的对话框或进度框。)。

3. 不要使用固定的绝对定位布局。

(文:AbsolutLaout,软件中你若使用此布局方式,意味着,市面上有多少种分辨率手机,你就要写多少份布局文件)

4. 不要使用 px 单位,使用 dp;如果是文本,使用 sp 。

(文:因为Android产品众多,各自分辨率的手机充斥市场。如果使用和分辨率相关的单位(px),很可能导致在其它

分辨率的手机上看到你意料之外的Size效果。而dp(或者dip)和sp是和屏幕密度相关的(其实是根据320x480为标准计算的))

5. 不要使用太小的字体。

 

正确的设计原则

1. 所有资源都要针对高分辨率屏幕创建

2. 需要点击的元素要够大

3. 图标设计要遵循Android 的准则

4. 要使用适当的间距(margins, padding) 

5. 要支持 D-pad 和 trackball 导航

(文:我猜测是“触摸屏”和“轨迹球”,“轨迹球”相当与PC上的鼠标,当用户滑动轨迹球去指向目标事物时,目标事物需要做出回应。说好懂点,相当于当你的鼠标划过一个链接或当你的鼠标悬停再一个链接上的时候,链接通常会加高亮。如果说“触摸屏”只需要关注用户手指按下的动作,那么“轨迹球”还要关注“控件”被选中的动作。)

6. 要正确管理活动(activity)栈

(文:activity的lanchmode属性能够设置activity在栈中的活动状态,例如栈内单例或者栈顶单例或者总是新建等。决定于你是否希望用户重新回到上一个(或更早)的界面,看到“最初的”还是“上一次”的数据。前者通常意味着丢弃用户上一次填写的数据、从数据库查询更新的数据等等。例如XXX项目中,当用户按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里面的内容。这样也完成了样式差异化。)

 

2.  设计理念和各种考虑因素

设计理念

1. 干净而不过于简单(文:让我想到了一句话--美观是用户体验的一种表达形式,而不是为了美观而美观。)

2. 关注内容而非修饰

3. 一致,吸引人,少量简洁的变化

4. 使用云端服务(同时在 PC 桌面和手机上同步用户使用场景)来加强用户体验

3、优秀界面的设计准则

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)比使用确定对话框更好(实际上,应该尽量少用确定对话框,它对用户是一种干扰)

 

4、设计上的考虑因素


1. 屏幕的物理尺寸
2. 屏幕密度
3. 屏幕的方向(竖向和横向)
4. 主要的 UI 交互方式(触屏还是使用 D-pad/trackball)
5. 软键盘还是物理键盘
6. 了解不同设备之间的相异之处是非常重要的
7. 阅读 CDD(兼容性定义文档),了解设备可能的差异
8. 了解屏幕尺寸和密度分类(点击这里阅读)

 

如果错误是可能发生的,那它就一定会发生。
- Donald Norman《The Design of Everyday Things》作者(文:《设计心理学》,关于Donald Norman的详细情况在这:http://www.techcn.com.cn/index.php?doc-view-134543.html)

 

转载自

http://blog.sina.com.cn/s/blog_8a97a8d50100u2gs.html

 

Android UI Design Tips 笔记

标签:

原文地址:http://www.cnblogs.com/asijack/p/4218183.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!