再议手机交互设计原则

准确地说应该是手机客户端交互设计原则,1个月前尝试写过交互设计原则,谈的比较浅。在手机交互设计方面,国内外可供参考的资料很少,只能靠借鉴网页和软件交互设计的也有经验,再结合自己的手机应用程序的设计经验去研究。

原则的概念

谈及原则,需明白什么才能称的上是原则?对于设计的评价分两种:

  • 什么是好的设计?参照工业设计,在学习《设计心理学》时,书中列举了16种好的设计,美观的、个性化的、符合人机工程学……这些属于描述性文字,不分条件地罗列好的设计,多而全,但不精练。
  • 好的设计是什么?这是个难题,等于给好的设计下定义,是个人日常设计的准则,就像布劳恩的优良设计十项原则。

“什么是好的设计”是总结所有好的设计的全集,“好的设计是什么”是研究所有好的设计的交集,好的设计有什么共同点,追究设计的本质,而不是仅满足于形式。一项好的设计可以编造出各种理由,但要深究其中最重要最本质的那一条。

目的

之所以那么费力地总结设计原则,其目的在于:

  • 评价设计的优劣。
  • 设计有理有据,避免设计的随意性,用户的每一步操作都在预料之中。
  • 便于团队之间的达成共识。开发人员习惯从技术上评估开发难度,设计师从用户体验的角度考虑,这些原则也是说服他们的方法。
  • 加之贯穿在所有产品之后可加强品牌形象的统一性。

五项原则

那么,手机客户端交互设计原则有哪些呢?Google、Apple&Microsoft都有设计原则,原则一大堆,而哪些是适用手机客户端交互设计?照搬不行,手机有自己的缺点和优点。个人将原则重新归结为:

  • 简洁
  • 易于操作
  • 避免输入
  • 信息扁平化
  • 增强交互

这些原则对于手机客户端设计尤为重要,个人也会围绕这五点继续研究。而对于其他交互设计原则,比如一致性、容错性、提供反馈和易于理解等等具有普遍性,这些都是设计师必备的设计技能。不是这些原则不重要,它们是基础。最实用的方法必定简单,因为易于理解和执行。

在上次写的交互设计原则中,屏幕显示、任务、操作方式和使用情境应该归结为设计方法,特别是手机界面的适配性问题,以后会再加以论述;视觉重点的论述有偏差,在iPhone界面中,标签栏在最底部,重要性的等级却不是最低,关于视觉流程参见眼动仪在手机可用性测试中的应用

141

此界面中,“关闭”比“帮助”和“应用管理器”重要,而右边的箭头分散了用户注意力。

后记

有了这些原则,保证设计质量,也能得到设计权力。当领导要以个人意愿修改某项设计时,原则也就派上用场,这一点个人屡试不爽,入行工作8个月即负责客户端的交互设计。得到充分的设计权力之后,个人才有发挥的余地。

Redesign淘宝随身购

淘宝随身购java版1.0已发布近6个月,适配的机型还只是240×320px和320×240px的手机,解压了SuiShenGou_for_NokiaE71_Alpha1.0.jar,发现xml中未定义图片的高宽及间距,不知为何没有完成最后20%的工作,而通过修改图片的大小和xml即可完成界面适配。

taobao

随身购的模式是客户端和浏览器,男装和MP3等功能是放置读取数据并显示在客户端,而点击彩票功能之后跳出客户端进入wap淘宝彩票频道。

jar文件共596k,图片占了345k,有个dat文件91k,估计是字体集。各种手机默认的字体大小不一,加载字体集之后界面显示统一,可以避免因手机默认字体过大而导致的显示不完全等问题。视觉设计挺好,但交互设计部分个人有不同看法,尝试重新设计。

1.去掉左软键的“确定”,一直显示“菜单”。理由:

  • 在主界面使用方向键选择功能,按确定键选中功能,这是选中“菜单”选项最常用最方便的方法。
  • 弹出“菜单”选项有“1.进入”,有了上面的方法之后,这个选项的使用率很低,可以去掉。
  • 按左软键,弹出“菜单”选项之后,按向上或者向下键选择选项,再按左软键才会使用到“确定”,手指放置在方向键就能完成的操作就不必移到左右软键上。
  • 去掉“确定”之后,按左软键可以弹出或者关闭“菜单”选项。

2.弹出的“菜单”选项加上数字快捷键。

3.去掉非主界面最顶部的功能导航。理由:

  • 随身购的内容是选择商品和查看详情,是最主要的内容,导航是辅助内容,占据了高度为42px的位置,手机屏幕那么小,特别是在横屏幕320×240px手机上,辅助内容能越少越好。
  • 顶部的功能导航操作并不方便。如在选择商品时切换功能时,要多次按向上键,焦点移到“人气”,再按向上键,选择功能;或者按一次左右键把焦点移到“人气”tab栏,再按向上键。如在“宝贝详情”界面上,那只能按多次向上键了,这种操作还不如返回到“主界面”重新选择功能,或者在“菜单”选项中加入导航的功能。

4.去掉导航之后,增加tab,去掉灰色线控制滚动条的功能。

  • 在进入“宝贝详情”界面中,必须按方向键控制灰色线。因为按照控件实现滚动的话,有可能部分内容显示不全。如果灰色线在最底部,此界面不支持焦点的上下循环滚动,要按十多次向上键之后才能切换tab。
  • 去掉导航之后,每个界面中可以多显示2-3行的文字,每个tab中可显示内容增多。“宝贝详情”界面中tab增加至5个,每个tab中显示的内容减少。
  • “立即购买”和“加入收藏”按钮由左右排列改为上下排列,利用按钮实现界面滚动。(效果有待考证)
  • 左右键可以选择tab,上下键选择商品或者“立即购买”和“加入收藏”按钮。

总体而言,现有客户端的交互设计逻辑挺清晰,用户使用习惯的话也没用大问题,但是重新设计之后可以减少很多不必要的操作。

触摸点击区域

touchtargetsizes
屏幕增大,可以显示更多的内容,但是使用触摸屏控件的密度不宜过大,否则不便点击。各个手机和PC操作系统都对可点击的区域都有推荐值:

iPhone:最小29×44px。

Windows Phone:推荐9mm/34px,最小7mm/26px,元素之间的距离最小7mm/26px,元素的可视区域是点击区域的60-100%。对于经常使用、会导致危险性操作(比如删除数据)的界面元素、在屏幕角落并且手指难以点击的元素和子任务中元素(比如拨号),推荐点击区域大于9mm。

Nokia:推荐不小于1cm(0.4″)的点击区域。最小值为:

  • 食指点击7×7mm/1mm间距
  • 拇指点击8×8mm/2mm间距
  • 列表选项之间有5mm间距

Ubuntu:按钮和其他控件的大小取决于成人的手指(16mm-20mm)、手指肚(10mm-14mm)和指尖(8mm-10mm),推荐不小于1cm(0.4″)的点击区域。

(以上译自lukew's blog)

点击的区域是按照物理尺寸计算的,如果按照iPhone去类推其他触摸屏幕的可点区域w×t,假设该触摸屏的精度为d,计算公式是:w/d=29/164,t/d=44/164。(164是iPhone的屏幕精度)

Windows Phone对于危险性的控件建议是增大可点区域,我倒认为应该减小可点区域,对于没有危险性的控件可适当增大,保证元素之间的距离即可。比如手机界面中的“□记住密码”,一般是只有多选框“□”是可点区域,不妨将“记住密码”也包含在内,增加多选框的可点区域。

Swype

Swype是很好的触摸屏输入的解决方案,每分钟输入可以提高到50个字母。

  • 输入时,手指不用抬起和按下,在屏幕上滑行即可,省掉一部分时间。
  • 省去空格输入,每次滑行一次之后,字母后面默认有空格。
  • 英文的猜词、纠正、匹配和修改。

Swype的算法是否利用折线的滑行输入会提高点击的准确率,可以更精准地选中的较小的点击区域呢?