长选项表单元素的移动交互设计
在处理一个很多选择项的表单元素时,网站设计师可以用Select控件轻松解决,如果选项实在太多,顶多用个弹出层。而手机由于屏幕空间有限,这时的交互设计就不那么简单了,像网站那样的Select和弹层的表现,常常不太适用。所以很多设计师会把选项内容放到另一个独立页面,引导用户转场到这个页面去完成选择并转场回来。
转场意味着空间的变化,在交互设计中,这是易用性的大敌之一,移动交互设计中更是如此。手机的交互空间狭小,频繁的转场很容易让用户感到迷失,即便不迷失,也会影响其操纵感。WinPhone的交互设计就有这个问题。如果一个表单,有三五个长Select,在WinPhone上,点击提交表单按钮之前,用户可能就已经被那些Select导致的转场转晕了。
其实iPhone在这个问题上有特别好的解决方案,苹果的交互设计天才,充分利用移动交互设计的独特优势——支持触摸和手势——来解决这个问题。解决方案就是PickView控件,也叫滚轮选取器,如下图所示。这是iPhone众多交互设计创新中耀眼的明星,滚轮占了屏幕的一部分,但用户并不需要转场,直接在当前页面,用手指转动滚轮就可以完成长选项的选择,出色的物理隐喻让用户一看就明白了该怎么操作。用户测试表明,即便是第一次使用iPhone的人在面对PickView这个新事物时,也能很容易地理解和操作。
由于滚轮可以有多个并列,所以它还能够很轻松地处理好多个互相关联的Select项的交互,比如年月日三个并列滚轮。
Android在其4.0之前的版本,并没有类似的控件,但在4.0时,也增加了一个叫Picker的控件。如下图所示。
像酒店预订这类的APP,用户使用中经常要面对长选项表单元素,比如“选择城市”、“选择位置”,我们之前版本的交互方式是引导到独立页面。在这次“米途订酒店”更新的Android 3.0版中,我们把iPhone的PickerView控件借鉴进了Android,用户的掌控感更强了,体验明显提升。下图是改进前后的对比。
销售无第二,设计无第一。设计上总是仁者见仁,智者见智。我们的这种嫁接式交互方案,可能存在争议,不见得大家都认同。文章仅供大家参考,欢迎大家下载米途Android新版,并拍砖。
扫一扫订阅我的微信号:IT技术博客大学习
- 作者:邓熔 来源: 老邓态度
- 标签: 长选项
- 发布时间:2012-05-02 23:49:21
- [70] Twitter/微博客的学习摘要
- [66] 如何拿下简短的域名
- [65] IOS安全–浅谈关于IOS加固的几种方法
- [64] find命令的一点注意事项
- [63] android 开发入门
- [63] Go Reflect 性能
- [61] 流程管理与用户研究
- [59] Oracle MTS模式下 进程地址与会话信
- [59] 图书馆的世界纪录
- [59] 读书笔记-壹百度:百度十年千倍的29条法则