分面搜索(Faceted Search)

简介: <p><strong>介绍</strong></p> <p>  分面是指事物的多维度属性。例如一本书包含主题、作者、年代等分面。而分面搜索是指通过事物的这些属性不断筛选、过滤搜索结果的方法。可以将分面搜索看成搜索和浏览的结合。<br><span id="more-1401"></span><br><strong>应用场景</strong></p> <p>  分面搜索作为一种有效的搜索方

介绍

  分面是指事物的多维度属性。例如一本书包含主题、作者、年代等分面。而分面搜索是指通过事物的这些属性不断筛选、过滤搜索结果的方法。可以将分面搜索看成搜索和浏览的结合。

应用场景

  分面搜索作为一种有效的搜索方式,已经被用在电子商务、音乐、旅游等多个方面。

  拍拍网
  下图是拍拍网中挑选T恤的页面,可以看到拍拍网将T恤分成款式、衣长、尺码、颜色等分面。

分面搜索(Faceted Search)

  谷歌音乐
  谷歌音乐的挑歌页面,将歌曲分为节奏、声调、音色、年代、流派等分面。

分面搜索(Faceted Search)

  Bing的旅行搜索
  将航班分成经停次数、往返时间、航空公司、价格等分面。

分面搜索(Faceted Search)

  另外提一点,在sns类网站中,用户填写个人资料的同时也是在为自己建立分面信息。如QQ空间中个人资料的填写。

分面搜索(Faceted Search)

分面搜素的优势

  1.分面搜索支持用户根据自己的需要选取不同的分面进行筛选,而不必按照网站预先设定的单一方式寻找。
  2.分面搜索允许用户自己创建搜索路径,并且可以随时扩大和缩小结果范围。
  3.分面搜索只展现有对应结果的选项,避免了无搜索结果的情况。并且一般在搜索前提示用户该选项内包含的结果数量,给用户良好的操作前提示。

分面搜索设计tips

  分面搜索出现的位置
  分面搜索的功能和表现都与导航相似,其出现的位置一般在网页的左侧或顶部。一般来说放在左侧有利于展示更多分面内容,并且容易在其他页面重复使用。不过在Like.com中,设计师将分面选项放在顶部,同样得到不错的效果。

分面搜索(Faceted Search)

  灵活使用分面
  分面不但可以用来筛选结果,也可以用来对结果排序。电子商务网站中常用风格、品牌等分面筛选搜索结果,而价格、信誉、上架时间等分面则用来排序。

  有时用户并不明确自己的目的,因此提供宽松的筛选方式更符合这部分用户的预期。Bing的旅行搜索中选择航班时,用户可以通过滑块来选择某个时间段起飞的航班。

分面搜索(Faceted Search)

  如果可能,在同一分面中支持多选。并且可以随时取消分面选项,扩大结果范围。在有货中,用户可以在网页左侧同时选择多个品牌。

分面搜索(Faceted Search)

  只展示分面中的部分选项,经过一步操作再查看全部内容。如Yahoo Shopping中服装风格的展示。

分面搜索(Faceted Search)

问题探讨

  分面搜索的功能全面,但是要做到让用户容易使用,确实比较困难。这里针对分面之间的独立性说些个人看法,仅用来抛砖引玉,欢迎大家提出更多观点。

  分面之间的独立性
  在确定分面时,如果将不同分面的内容混杂在一起,会影响用户的选择。例如,下面例子中,将女装按照“类目”分面划分成21个选项。其中雪纺衫和针织衫2个选项混合了“类别”和“材质”2个分面,与衬衫选项并列在一起,用户可能会困惑,雪纺衫不能是衬衫吗?

分面搜索(Faceted Search)

  解决的方法:
  1.拆分“类别”和“材质”2个分面,用户可以通过“类别:衬衫>材质:雪纺”的方式搜索到雪纺衫。
  2.在衬衫中包含雪纺衫的内容,这样用户无论选择衬衫还是雪纺衫都不会漏掉关于雪纺衫的内容。
  3.也许在分类时,设计师对雪纺衫和衬衫有明确的定义,只是用户并不明白其中的奥妙,因此可以增加相关的图形或文字说明,让用户理解分类的规则。例如PriceGrabber.com中给选项加上图形说明。

分面搜索(Faceted Search)

参考文献

  [1](美)莫维里(Morville,P.),(美)罗森费尔德(Rosenfeld,L.),Web信息架构:设计大型网站.北京:电子工业出版社,2008.8
  [2](美)卡尔巴赫(Kalbach,J.),Web导航设计.北京:电子工业出版社,2009.3

  • (本文出自Tencent CDC Blog,转载时请注明出处) 

目录
相关文章
|
7天前
|
数据采集 存储 API
手动给docusaurus添加一个搜索
如果algolia不能自动配置的话,我教你手动给docusaurus添加一个搜索
手动给docusaurus添加一个搜索
|
14天前
|
前端开发 JavaScript 容器
一个可搜索的表格
一个可搜索的表格
|
18天前
|
移动开发 前端开发 JavaScript
uVIew Search 搜索
uVIew Search 搜索
17 0
|
5月前
|
前端开发
react实现多条件搜索——可模糊搜索
react实现多条件搜索——可模糊搜索
79 0
|
11月前
|
SQL Java
白话Elasticsearch04- 结构化搜索之使用terms query搜索多个值以及多值搜索结果优化
白话Elasticsearch04- 结构化搜索之使用terms query搜索多个值以及多值搜索结果优化
460 0
|
移动开发 算法
秒懂算法 | A*搜索
本篇内容包括了A*搜索算法的原理精解以及2个例题。
252 1
秒懂算法 | A*搜索
|
数据采集 搜索推荐 前端开发
11、搜索服务
根据分类、关键字匹配课程名称,课程内容、难度等级搜索,搜索方式为全文搜索,搜索节点分页显示。
65 0
|
搜索推荐 安全 Java
搜索
搜索
81 0
|
存储 缓存 自然语言处理
一切为了搜索
Elasticsearch是​ 基于Lucene搜索架构的一个分布式、RESTful 风格的搜索和数据分析引擎