技术头条 - 一个快速在微博传播文章的方式     搜索本站
您现在的位置首页 --> 信息和交互 --> 长选项表单元素的移动交互设计

长选项表单元素的移动交互设计

浏览:1355次  出处信息

    在处理一个很多选择项的表单元素时,网站设计师可以用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新版,并拍砖。

QQ技术交流群:445447336,欢迎加入!
扫一扫订阅我的微信号:IT技术博客大学习
© 2009 - 2024 by blogread.cn 微博:@IT技术博客大学习

京ICP备15002552号-1