3.屏幕的大小
在考虑手机屏幕大小时,一定要区分物理尺寸与分辨率的关系。物理尺寸的大小和分辨率并非一一对应,例如对于HTC的S1 2.8 英寸,分辨率为320*240;Nokia n81 2.4 英寸,但是分辨率也是320*240。因此,对于相同分辨率大小的图标,在 S1 中看起来就要更大些,但是图标可能就没有那么细腻了。
在视觉设计时,需要首先考虑这个问题,在首次设计时,应该更勤于导入设计视觉图片到目标屏幕中去检验,看看设计是否合适,别到都完成了视觉设计,才发现设计的图标太小或者不够精致。
对于2.8 英寸 及320 * 240 (含)以下的屏幕,在现在来说都是小屏幕界面,在这个档次上,应该是键盘机占主导地位。在键盘机的设计上应该更多地去参考Nokia的规范(对于可用性,Nokia的设计还是无可挑剔的)。
对于3.0 英寸 及 480*320 以上的屏幕,可以认为是大屏幕,并且是以触屏机为主的。【随着屏幕技术的发展,屏幕的密度已经越来越大,这样的值也只是一个参考值。】
1)屏幕信息布局
小屏幕和大屏幕在客户端信息内容的布局上会存在较大的差异。屏幕大时,除了考虑信息架构外,需要考虑在界面上放哪些信息和操作;屏幕小时,更需要考虑信息架构,对信息更好地分屏,信息之间的联系等。
2)不同屏幕设计特点
a) 大屏幕的设计特点:
- 在界面中,展示更多的信息;包括界面内容、导航和操作按钮;
- 大屏幕以触摸屏为主,更多地以手指来直接操作;
- 在屏幕上,显示的信息不宜过多;信息密码过高,不利于信息的搜索。
b) 小屏幕的设计特点:
- 在界面上先展示客户端的功能及结构;
- 以键盘机为主,操作方式;
- 先导航,后显示内容,内容的分屏合理,符合用户的期望。
对于手机的屏幕大小适配,会在未来的博文中再详细赘述。
二、手机客户端的设计原则及适配步骤
1. 客户端的设计原则
1) 手机本身的物理特性受限引起的指南:
a) 客户端的文字输入,必须要降到最低:由于手机在输入上的低效性,在设计的过程中,应尽量减少用户的输入,如果有可能可以设置默认值,或者让用户选择目标值。
b) 客户端的信息结构好,屏与屏之间的逻辑关系清晰:由于手机屏幕都普遍较小,即使有4吋屏,那也只能展示较少的信息量,因此,在手机设计上,更需要有清晰的信息架构,用户知道当前在哪儿,并能返回到哪儿。
c) 客户端的操作、功能不要隐藏太深,重要功能都需要在界面中有适当的提示:由于手机屏幕较小,不能展示所有的信息。因此,对重要的、使用频率高的功能或信息放在最重要的位置,并在首页上展示或指示。
2) 手机的移动特性引起的指南:
a) 客户端的最主要的功能操作,用单手可以完成:手机的使用情景多样性,在很多情景下,用户都只能单手来操作手机,因此,在客户端的设计过程中,需要考虑最重要的核心功能,能否单手操作完成。
b) 客户端的界面必须简洁、操作简单,操作步骤少:由于用户操作情景复杂,在使用客户端的过程可能有额外的认知负荷,因此,在设计客户端的过程中,逻辑必须简单,操作步骤也要减少。
c) 客户端的界面层次不要太深,最好不要超过3级:
d) 客户端的提示包括界面、声音、振动多种形式:用户在操作手机时,往往不会一直盯着手机屏幕看,因此,很多手机状态页面的切换,脱离了用户的视线,这时,必须要提供视觉之外的其他感觉通道的信息(如听觉、触觉等),来对用户做提示。
3)其他原则
a) 客户端UI的适配不必恪守所有的平台都保持一致,只要一些品牌的关键元素能体现即可:
b) 客户端的主要操作方式(框架、导航、按键功能及软键对应方式等)应与所承载的手机操作系统保持一致:客户端都承载在某款具体的手机平台中,而用户会对当前的手机平台很熟悉,因此,在设计的过程中,需要更好地理解当前的手机平台,并使客户端的设计与手机系统的设计逻辑保持一致。
2. 手机客户端设计适配的步骤:
个人认为,客户端的适配要以一个平台为起始,但是要着眼于多个平台。
1) 根据公司的战略,选择一个最先切入的平台;
2) 了解该平台的UI 设计规范,可用的UI 控件及交互原则;
3) 确定切入的屏幕大小,以此来设计第一个客户端,但是要考虑适配其他屏幕的可能性,是自适应来扩展或者缩小;
4) 根据平台及屏幕大小,来选择一款最典型的手机,开始客户端的交互设计。
5) 确定客户端的核心目的。如为娱乐为主的,应在设计方式更娱乐性;功能性完成目的为主的,以更易用性为主;
6) 根据客户端的功能和内容,来设计客户端的信息架构;
7) 根据UCD的原则,来完成客户端的交互原型;
在交互原型的过程中,需要考虑手机适配的三因素(平台、屏幕、触摸/非触摸),以便将来的适配。
原文:http://ued.taobao.com/blog/2011/01/30/mobile-app-design-methods-for-milti-platform/
本文链接:http://www.blueidea.com/design/doc/2011/8304.asp
出处:Taobao.com UED Team
责任编辑:bluehearts
上一页 手机客户端交互适配设计之我见 [2] 下一页
|