您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

移动互联网的设计模式-选择器

原创文章 分类: 经验/观点 版权:
6266 40 220 0
2019-01-24
35.3
首页推荐

在移动互联网产品中,有很多内容都为用户提供了选择器,但是由于选择的类别不同,选择器的形式也会有很大的差别。本文主要对应用较广泛的滚轮选择器、地区选择器、时间选择器展开讨论,梳理了一下他们的主要形式和使用场景,下面我们就来逐一认识下他们吧!

Image title

选择器,就是将本该手动输入的一些复杂结果,转化成一系列的选项集合供用户选择,它把复杂繁琐的输入过程简化成了滑动或点击的单一动作,同时将储存在用户大脑里的记忆转化为看得见的外在知识,不仅使用户的操作行为变得简单,而且很大程度上减轻了用户的记忆负担,是非常重要的交互控件。


在移动互联网产品中,有很多内容都为用户提供了选择器,但是由于选择类别的不同,选择器的形式也会有很大的差别。本文主要对应用较广泛的滚轮选择器、地区选择器、时间选择器展开讨论,梳理了一下他们的主要形式和使用场景,下面我们就来逐一认识下他们吧!



• 滚轮选择器 •


首先,我们来了解一下什么是滚轮选择器。如下图1,它将选项集合逐一排列,并在视觉上做出滚轮的效果,暗示滑动的动作,用户只通过一个简单的行为就可以选中自己想要的选项,有没有一种很“爽”的感觉呢?滚轮选择器最早出现于iOS系统中,随后便被广泛应用,虽然有些滚轮的视觉效果被弱化了,但是用户操作的行为还是一致的(如下图2中Android系统内的滚轮选择器)。

Image title


滚轮选择器不仅广泛地应用于时间、地区的选择上,在很多场景中我们都可以看到它的身影。比如下图3,4中旅行APP中对舱位和航空公司的选择,以及图5求职APP中对个人状态的选择等等。但是,逐渐地滚轮选择器暴露出在使用时的一些弊端,比如,当选项类别较多时,手指会容易发生误触碰,用户操作的时候就需要小心翼翼;而且,滚轮选择器能显示出的内容有限,如果同一类别下选项非常多时,用户就需要花费很长的时间才能找到自己想要的选项,如果没发现划过了,那就更糟糕了。所以,在使用滚轮选择器时就要注意了,选项类别最好控制在5列以内,而且每一列选项中的内容不能过多,最好能向用户提供合适的默认选项,节约用户选择的时间。

Image title



• 地区选择器 •


对于地区的选择,多应用于旅行、票务等与我们休闲娱乐相关的APP中,地区选择器按其结构样式分,主要包括滚轮式地区选择器、联动式地区选择器和字母式地区选择器。


l 滚轮式地区选择器


滚轮选择器应用于很多APP中的地区选择上,因为它操作方便、面积比较小,当选择多层级的地址时,各层级的信息能够清晰地展示出来,但是就像上文提到的那样,它的缺点也比较明显。我们通过一个例子来说明,下图6是一个需要确定到省市区的选择器,省层级就有31个选项,如果你需要的内容在最底部,那你就需要滑动很久了,问题是用户也不可能记得它的排列顺序,完全是在盲找。更糟糕的是,你需要经历三次这样的体验。而且当你选择的内容信息较长时,就像图7那样,视觉上不仅显得拥挤,而且非常容易引发误触动,干扰其他层级的内容。所以将滚轮选择器应用在地区选择上还是需要慎重的。

Image title


l 联动式地区选择器

联动的意思是指若干个相关的事物,一个运动变化时带动其他事物跟着变化,而这里的联动选择器就是指选择一项后,下一项产生相应变化,确保用户完成下一步的选择。联动式选择器主要应用于需要选择详细地址的APP中,比如地址要具体到某省某市某区甚至某街道时,选择的内容较多,层级也较深,如果提示不得当,用户就很容易迷失方向,所以选择器需要提供明确的方向与反馈,在选错时,还要容易撤回修改。如图8网易严选APP中就合理地采用了联动式的地区选择器,用户选中一层后,自然进入下一层,操作顺畅,一气呵成,选择错误时很容易进行修改。图9自如APP中的地址选择器也属于联动式,方便用户快速选择多级地址。其实滚轮式地区选择器也属于联动式地区选择器的一种,但是联动式地区选择器信息显示更多,用户更容易找到需要的内容,而且不易产生误操作,所以在地区选择的应用上也逐渐代替了滚轮式选择器。

Image title


l 字母式地区选择器

也是比较常见的一种选择器,主要应用于只需定位到城市的产品中,层级单一。城市名称按照A——Z的顺序排列,部分选择器在屏幕右侧提供A——Z的字母排列,可以通过点击字母方便用户的查找。例如图10,12306APP中对地址的选择,这类选择器由于选项较多,所以通常根据用户的行为向用户推荐常用和热门选项,节约用户的时间。

Image title


字母式的选择器不仅应用于地区选择,还广泛应用于其他内容,例如图11中应用于通讯录的选择器。但是,这类选择器的缺点也很明显,就是字母太小,供用户点击的区域很小,操作起来比较困难。图12中将字母放大排列,解决了操作困难的问题,但是字母排列的方式,需要用户的视线来回移动,增加了用户搜索的时间,所以在应用字母选择器时,要根据使用场景的不同,向用户推荐合适的选项,提高用户选择的效率。



• 时间选择器 •


另外一个经常需要选择的内容就是对时间的选择,移动端对时间的选择主要有滚轮选择器和日历两种形式,我们从选择时间点和选择时间段两方面来分别对其进行讨论。


滚轮选择器是时间选择器常用的一种类型,年月日、时分秒选项中均按数字的顺序排列,用户知道自己想要选项的大概位置,所以操作效率得到了保障。不论是选择时间点还是时间段,滚轮选择器都是不错的选择,如图13、图14所示。

Image title


对时间点的选择除了滚轮选择器,日历的形式也很常见,主要应用于用户目标需要频繁切换的时候。比如图15、图16中购买火车票时的日期选择器,当用户在某日期下找不到合适的车票时,需要频繁切换,这时候滚轮选择器就不适合;采用日历的形式还可以提供给用户额外的信息,比如哪些日期是可以买票的,哪些日期是可预约的,哪些日期是不能买的,用户一目了然;点击即确定,用户的操作体验也比较流畅。

Image title


对于时间段的选择,多采用日历的形式,以便用户完成两个时间点的选择。按呈现日历的个数分,用于时间段选择的日历形式主要包括三种,分别是:双日历、单日历以及浮层日历的形式。


我们首先来了解一下双日历的形式,如图17,是携程APP自由行功能下的酒店选择页面。同一页面中通过Tab将“入住日期”和“离店日期”分为两个日历来分别选择,选择入住日期后,自动跳转离店日期,同时选择入住日期之前的日期变灰无法选择,逻辑合理但是提示却不够明显,用户需要反应一段时间,而且两个日历的形式无法直观地显示时间段的长度。它的优点是页面简洁,没有过多的干扰因素。

Image title


我们再来看一个单日历的形式,图18是马蜂窝APP中酒店选择的页面,同一个日历中选择两个时间点,时间段的长度很直观地显示出来,在页面的顶部有选择的日期信息,当用户选择完成后,点击确定,完成操作。页面的信息显示比较完整,但是信息内容较多,而且页面中黄色的“5”使页面有一种杂乱和拥挤的感觉;“确定”操作帮助用户确认信息,但是如果想要更改日期,操作的步骤就会增加。

Image title


图19是浮层日历的形式,用户选择第一个日期后会弹出对话框“请选择离店日期”,同时被选日期变为绿色,反馈明显;选择第二个日期后,会弹出对话框告诉用户共几晚,确认信息后点击“完成”,浮层消失,完成选择。相比前两种形式,浮层日历的操作更加顺畅自然、反馈也比较明显,但是在使用时,还是要充分考虑用户在不同场景下的真实需求,才能确定出真正适合用户的选择器。

Image title



• 结语 •


唐纳德·诺曼曾经说“复杂是世界的一部分,但它不应该令人困惑”,设计师的任务就是管理复杂,使生活变得更简单,而选择器就是将复杂的输入过程,变成相对简单的选择过程,我们现在要做的就是要让用户的选择过程变得更简单,以上对几种选择器的介绍与讨论,希望会对你有所帮助。

UImax

17粉丝/0关注

老马识途
世界水日,那些让人眼前一亮的公益广告盘点那些令人绝望的设计

扫描二维码
去手机端查看海报

UImax

TA已经获得2枚勋章啦

  • 成就勋章

    • 特别勋章

    • 身份勋章

  • 已拥有

  • 作品

    创造者才是真正的享受者。

  • 经验

    经验是一所好学校,可它的学生却经常旷课。

  • 活跃

    大神都是从围观群众开始的

  • 拓展

    作品、经验、活跃还不能满足你?

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2019 UI.CN