在BtoC产品设计中,搜索和筛选功能的异同与运用

用户头像
深圳/UI设计师/7年前/1259浏览
在BtoC产品设计中,搜索和筛选功能的异同与运用

不才内容为摘抄整理,些许个人观点,望对你有帮助。

undefined



Part.1 -  用户诉求上的异同


无论是“搜索”还是“筛选”最后目的是相同的:用户无非想要从海量信息中快速获取到自己想要的信息,只是结果的细粒度不同。两者可以是一类信息,也可以是某一个精确的信息点。因此,两者功能背后用户诉求的细粒度有精确和模糊之别,这决定了用户与系统的交互方式,以及功能的选择。  

比如想买 「加湿器」和想买「小熊加湿器」就是两个不同细粒度的查询需求;“想买加湿器”是模糊需求,还需要再做“买啥加湿器”的下一步选择,而“买小熊加湿器”就已经是很清晰具体的需求了。


当用户需求清晰具体,一般会直接点击搜索框进行搜索,再通过键入清晰内容链接的关键词(数据输入)方式搜索。而当用户游离在模糊的区间时,通常使用到筛选功能来聚焦浏览,再通过过滤器(Filter)所提供的信息,逐级浏览选择想要的内容,“筛选”可以辅助用户在这一场景下的商品查找。




2.  信息层级上的异同

从产品层来看,两者功能都是为了帮助用户查询。而从信息组织的层级来讲,当产品需要展示无规律性、多而杂的信息时,系统提供搜索功能以供用户快速触达,检索词由用户指定。

如前面提到,筛选从信息科学的角度来看是浏览的一种方式。当信息有统一且清晰的分类时,系统依据合理的分类为用户提供过滤机制,减少眼前可浏览的信息量,让用户在一个或多个条件下逐步获取到想要的信息。




3.  界面表现上的异同


诉求的强弱决定了搜索和筛选两个功能点在界面中的比重与布局。界面表现属于行为层,行为层由心理层决定,初步整理需求后,依据产品定位明确划分出搜索和筛选两个功能相较于其他功能点的优先级,以规划界面的比重与布局。


搜索)搜索作为大部分互联网产品都具备的功能,直接影响着产品的用户体验。在进行搜索功能的设计时要以简单、高效为核心目标,每一步的细节设计都要反复验证是否脱离了需求和核心目标;如社区类、出行、电商购物类应用,用户的查询诉求就相对强烈。而微信在即时通讯和搜索两个功能点的权衡,强调即时聊天而隐藏掉了搜索框;这个典型的例子将搜索功能降弱了一个优先级。


筛选)如果用户通过关键词搜索得到的结果页面信息量过大,设计过程中,最好加入筛选功能,引入筛选器筛选功能可以帮助用户过滤搜索结果,让用户自行筛选有用的信息,从而在短时间内筛选出期望的内容,否则用户会花大量时间和功夫不断地向下滑动或翻页。尤其在电商类网站或手机中,筛选功能尤为重要,一般在界面中的比重较高且位于界面重要的位置,占到了屏幕空间的三分之一。




Part.2 -   设计切入点 - 搜索


搜索是寻求,搜查,发现之意;而筛选则是对分离的两种或两种以上物质按照某种特性进行选择的操作过程。显而易见,两者性质不同。而在产品设计中,两者的差异从哪些细节中体现呢?

搜索作为大部分互联网产品都具备的功能,直接影响着产品的用户体验。在进行搜索功能的设计时要以简单、高效为核心目标,每一步的细节设计都要反复验证是否脱离了需求和核心目标。


1)历史记录

即使我们对搜索工具了如指掌,有时候仍需要回忆历史搜索信息。历史记录能够在用户重复搜索时提高效率,一般会在数目上做限制,腾讯视频的历史记录最多展示10条,百度搜索最多展示9条,由于受页面空间和时效性的限制,信息量尽量展示10条以内,过多的选择会给用户造成记忆负担,并且占据空间,有损用户体验。此外,历史记录还需要支持删除。


2)热门与推荐搜索

主要为当前时段内比较热点的词汇或产品的新功能,能够为产品带来流量导入和收益,如电商类网页中的热词一般为新产品或高销量产品,视频类网站的搜索热词一般为最新视频或点击量较高的影视剧。




3)预加载(猜你喜欢、预设文案)

4)提供有用的自动输入提示

包括词根识别、文本预测、以及用户输入文本后的相关推荐。通过有效的自动提示,整个搜索进程可以更快,让用户有始有终,从而保证网业务转化率。此功能是用户搜索体验的重要来源,用户通常会快速评估该软件或网站的对自身的价值,而其评估标准则是基于搜索结果的质量。


5)模糊匹配

6)分类搜索



Part.3 - 设计切入点 - 筛选


一、什么时候需要筛选?

筛选的作用是缩小展示范围,排序的作用是更改展示顺序。这两个控件本质上是为了帮助用户更快速地找到自己想要的信息。


筛选控件有时会用于“频道切换”,比如:内容型或电商产品,用tab切换不同频道,每个频道内有自己的形态。而筛选和排序控件共同出现时,更多的是用于列表——即有相同字段的一系列信息。不论是搜索结果的展示,还是已有的列表,比如订单列表的展示,都有可能用到筛选和排序。比如:餐厅列表,有价格、地理位置、评价这些字段,所以可以用这些维度去进行筛选限制或者排序,从而找到用户想去的餐厅。



二、筛选/排序控件类型


1)多重组合式筛选(横向+纵向)

这种出现在电商、美食商品的搜索结果列表中居多,从多个维度进行筛选,再加上一种排序方式的选择


2)标签式筛选

3)Tab+标签式筛选



4)左侧导航行式筛选

5)右侧抽屉式筛选


这种导航式筛选比较适合品种类目特别多,当筛选维度过多的时候,可以考虑使用侧向栏。这种设计的好处是对于相对复杂的层级分类,能够清晰有条理的收纳,尤其是对于购物类的APP能够增加多频道的流量。



6)下拉列表式筛选

当产品不断的发展,功能结构愈发的复杂,过于扁平的tab已经无法满足筛选的需求;其特点就是占用空间小。因为它可以将选项隐藏起来,用户需要点击才能看到所有的选项,因此在有限的空间里可以展示更多的筛选维度。


7)浮层引导式筛选

常用于首次进入APP的时候,帮助用户筛选出自己感兴趣的内容,之后方便后台进行数据统计,然后根据不同用户的喜好推送不同的内容。这样一劳永逸的筛选形式,避免了后期不必要的麻烦。而且全屏展示能够提供更大的展示空间。




8)横条式筛选(标尺/进度条)

在信息量比较大筛选的情况下,有些产品会采用比较新颖的标尺或进度条让用户进行操作,只需要左右滑动即可,可操作性很强,避免了用户填写数值的反感情绪。



总结一下,使用哪一种筛选/排序控件取决于筛选逻辑、使用场景和列表的内容项本身。设计时可以灵活使用和做合适的变动。



22
阅读原文
|
举报
|
13
分享
评论
用户头像
评论你的想法~
表情
喜欢TA的作品吗?喜欢就快来夸夸TA吧!
推荐素材
【新年UI图标】游戏/娱乐icon
【新年UI图标】珠宝icon
拟物风质感写实UI卡片合集源文件
UI 登录界面设计模板包
原创UIUX交互橙红渐变炫酷视觉平面设计作品集模板PSD
Security Camera UI kit
【新年UI图标】影音icon
钱包ui模板
APP/小程序商业项目UI模板|99个高保真UI+79个原型
【新年UI图标】30个图标
高级感金属拟物 UI设计组件库
【新年UI图标】汽车icon
盲盒APP UI设计
我的钱包-UI界面设计-app
手表表盘UI系列
3D卡通UI界面图标可爱插画免扣素
户外旅行飞机情侣假日出行
UI应用平面图标
新能源APP应用UIKit
新拟态风格 UI设计组件库
智能家居中心 简约 UI设计组件库
科技医疗透明柜UI界面设计
UI界面 组件
【新年UI图标】秒杀icon
你可能喜欢
大家都在看
登录注册