如何设计更高效的筛选器，提高用户的决策效率？

honghu2

若何设计更高效的挑选器，提高用户的决议计划效力？

若何帮忙人们在糊口中做出更高效的挑选？本文作者将与咱们分享此话题，enjoy~

1、糊口中的挑选
在平常糊口中咱们经常会跟百般各样的「挑选器」打交道。好比下面这个场景尤其常见，当你身处一个藏书楼，想找某一本你很必要的书时，你会怎样办？



这个时辰凡是会经由过程如下两种路子来解决问题：
精准查找——经由过程电脑检索，找到方潮流下载站针。模胡查找——经由过程书架类目分类，找到方针。
但是，这里电脑和类方针识在全部找书的举动路径中就充任了挑选器的功效。糊口中另有不少诸如斯类的利用场景，好比超市购物、查字典等举动场景。



△ 某超市货架
2、为甚么必要挑选器
挑选器的本色是帮忙人们晋升决议计划效力。据全美2012年调研成果显示，每位成年人天天均匀要做70个选择。但是每一个选择又可能会见对大量的选择工具，这时候人们的决议计划本钱就会跟着平行信息期间的成长而一日千里。

若何帮忙人们在面临大量选择工具时晋升决议计划效力，这就成了挑选设计的抓手，也就是咱们所说的设计机遇点。
3、挪动装备上的挑选器
大量数据调集必要按照分歧用户的分歧需求来举行过滤，也叫做挑选。挑选依靠于用户的选择尺度，从而细化搜刮成果或一组大型工具成果。常见的挑选器设计包含：
直列式挑选器（Onscreen Filter）抽屉/折叠式挑选器（Filter Drawer）列表式挑选器（Filter Form）


上述三类挑选器的设计思绪几近涵盖了市场上绝大大都的利用案例，分歧类型之间的挑选器合用于分歧的利用场景，下面咱们可以来辨别看看各个类型的场景利用。
4、直列式挑选器
与页面的元素排序逻辑和展现方法雷同，屏幕上直接显示工具成果或工具列表。经由过程设计 tab 按钮来挑选方针工具。Google 和baidu都是采纳单排横向式。



△ Google



△ baidu

当我对关头词举行检索后，可以在此根本上对成果举行内容类型的挑选， Google 的挑选器点击最右边的「搜刮东西」时，会分外展现出一列新的挑选条辅助进一步的挑选。



△ Google Play 报亭

Google Play 报停采纳了双排挑选条，按照用户感乐趣的检索词匹配出「内容相干」和「媒体相干」两类挑选偏好。

这种型的挑选器会紧跟检索进口，如许更便于让用户理解下方的单排 tab 元素是基于检索关头词而举行过滤的。按照格局塔定律的靠近性原则，相邻的元素瓜葛会更易让用户理解他们之间的联系关系感化。



△ SXSW 和 Feed a fever news

SXSW 供给了一双排分歧维度的挑选器，Feed a Fever news reader 应用了一个超等简略的组合单排挑选器，经由过程描写+被描写的工具（挑选器）来创建起一个清楚易懂的观点模子。
5、抽屉式挑选器
CNN 消息采纳的是抽屉/折叠式挑选器，经由过程一个 handle 来提醒挑选器的进口，用户经由过程点击可以将被折叠/收起的挑选器浮层展现出来。



△ CNN NEWS

具有成熟且安定的分类/类目系统的内容平台更合适这类抽屉式的挑选器浮层，可以将完备的类目彻底暴光，而且常驻底部的 handle，可以有用的防止暴光衰减的状态。
6、列表式挑选器
作为全世界最大的在线游览公司 Expedia，采纳了列表式的挑选器。但 Expedia 有一点做的很是好，就是在挑选器开展时给用户预期匹配的成果数目。



△ Expadia

在右图中，下方会有一个常驻的 bar，上面展现了按照今朝的挑选项组合后匹配的成果数目，如许能包管用户在挑选器开展的状况下仍然能感知到成果页的成果范畴，确保用户不消担忧由于筛出来的成果太少或没有而频频开展或收起挑选器。



△ Trip advisor 左为初期版本，右为17年12月份的版本

在初期的一些 app 上会采纳对话框式的挑选器，好比说 Trip Advisor，但如今他们也起头采纳列表式的挑选器。

在此布局根本上另有组合设计方法，经由过程单排直列式+列表式，好比携程，如许更合用于较为繁杂的挑选逻辑，而且可以将高频的挑选项作为预期设计提早暴光在单排的直列式挑选项中。



△ 携程
总结
在做列表式挑选器时，尽可能连结选项列表短，防止过量的手势滑动。斟酌一个更长或多选择过滤选项过滤情势。不要过分设计挑选器，一个简略的屏幕挑选器或折叠挑选器凡是就足够了。



在设计挑选器的进程中，咱们要记着咱们的焦点方针是帮忙用户创建一个简略易用的观点模子，来提高用户的决议计划效力。

作者：谢晓聪，卖力网易美学客户端交互，西安美院版画系结业，喜好画画，有本身的创作系列。热中于交互设计钻研人与事物之间的瓜葛。

本文来历于人人都是产物司理互助媒体@网易UEDC，作者@  谢晓聪

题图来自 Unsplash，基于 CC0 协定