恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

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

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
深入理解搜索和筛选功能在产品设计中的异同
0.0°
2018-10-29 原创文章 经验/观点 举报 3256 17 5 5

笔者从用户诉求、信息层级、界面表现三个层次上,试图对两者的边界进行厘清,并分别给出一些设计切入点。

Image title



一次设计评审会上,作为设计师的我们和研发方针对“搜索和筛选到底是不是一回事?”这一问题产生了认知差异。


核心分歧点在于:研发哥哥认为从数据层面来讲,搜索和筛选是一回事。而从用户的感知来看,我们认为两者是不同的。

Image title

剖析字面意:搜索是寻求,搜查,发现之意;而筛选则是对分离的两种或两种以上物质按照某种特性进行选择的操作过程。显而易见,两者性质不同。


而在产品设计中,两者的差异从哪些细节中体现呢?


Image title


本文中,笔者欲从用户诉求、信息层级、界面表现三个层次上,试图对两者的边界进行厘清,并分别给出一些设计切入点。以期在今后的设计中,对同类问题建立更为清晰的判断和思考。


Image title


无论是搜索还是筛选,用户无非想要从海量信息中获取到自己想要的信息,只是结果的细粒度不同,它可以是一类信息,也可以是某一个精确的信息点。


因此,两个功能背后用户诉求的细粒度有精确和模糊之别,这决定了用户与系统的交互方式,以及功能的选择。如想吃 「零食」和想吃「德芙榛仁葡萄干巧克力」就是两个不同细粒度的查询需求。


当想要找的内容清晰具体,用户一般通过键入关键词(数据输入)的方式搜索。而当用户游离在模糊的区间时,通常使用到筛选功能来聚焦。通过浏览过滤器(Filter)所提供的信息,逐级选择出想要的内容。


Image title


Image title


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


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


Image title


Image title


界面表现属于行为层,行为层由心理层决定。回到第一部分提到的用户诉求,诉求的强弱决定了搜索和筛选两个功能点在界面中的比重与布局。


如出行类、问答社区类应用,用户的查询诉求就相对强烈。而微信在即时通讯和搜索两个功能点的权衡,就强调即时聊天而隐藏掉了搜索框。这个典型的例子将搜索功能降弱了一个优先级。


分类属于一种广义的筛选,像电商的分类导航在界面中的比重较高且位于界面重要的位置。


Image title


这里所谓的比重,其实是界面上的相对概念。因此,作为交互设计师,初步整理需求后,依据产品定位明确划分出搜索和筛选两个功能相较于其他功能点的优先级,以规划界面的比重与布局。


Image title


在技术保障的前提下,交互设计师可通过以下矩阵的不同维度对两个功能的设计进行预判:


Image title


Image title


厘清边界的目的是为了构建合理、友好的搜索与筛选流程。如何做呢?其核心点是力求高效。以下分别是搜索和筛选功能在设计中可以去提升体验的切入点:


一、搜索

根据矩阵对两个功能进行进行初步判断后,交互设计师需要与利益相关者进行密切沟通。结合用户需求和开发难度,对以下细分功能点进行取舍,最终搭建出一套友好的搜索流程:

  • 历史搜索
  • 热门与推荐搜索
  • 预加载(猜你喜欢、预设文案)
  • 自动填充
  • 模糊匹配(智能纠错、拼音与同义词匹配)
  • 分类搜索

Image title


二、筛选

筛选部分的设计应把重点放在筛选类目逻辑关系的梳理上。在这一前提下匹配相应的筛选控件,深入思考以下三点:


1、筛选类目和筛选值的设定是否符合用户预期

  • 合理的分类
  • 具有预测性
  • 避免晦涩难懂的文案
  • 突出优先级
  • 界定筛选值的边界


2、控件的选择是否合理

除了最常见的时间筛选器、下拉列表筛选外,标签、开关、tab/卡片、滑块(slider)、步进控件(stepper)也常被应用于筛选功能。设计师依据筛选类目和筛选值的属性,将用户需求与筛选控件进行匹配。


Image title


Image title


笔者仅梳理了典型场景和对应的控件。实际情况中,设计师应根据个性化的业务需求加以分析补充。


3、多个筛选项间的联动关系

当筛选项是多维度的时候,需考虑筛选项间的联动关系。并且在筛选的过程中给予用户及时的反馈。

  • 包含关系
  • 递进关系
  • 并列关系
  • 互斥关系

Image title


以上就是笔者关于搜索与筛选功能的一些思考。通过对本文的阅读,希望今后进行搜索和筛选功能的相关设计时,能够对两者建立清晰的判断,并结合场景深入思考,设计出合理高效的搜索、筛选流程。


Image title

 

作者:SF_UED,顺丰科技用户体验设计部,简称SFUED (SF. Tech User Experience Design)是顺丰科技的核心设计团队,负责顺丰相关产品的用户体验设计与研究。微信公众号:SFUED

本文由 @SF_UED 原创发布于UI中国。未经许可,禁止转载。

题图来自 Unsplash,基于 CC0 协议


更新:2018-10-29

收藏

17人已收藏

  • 6

    作品

  • 17

    粉丝

  • 0

    关注

  • 插画入门,没你想的那么难
  • 译文 | 深度解析3条设计心理学原则,提升设计方案说服力!
  • 忽略了间距,设计稿怎么改都觉得乱乱的!
  • 设计师,拿什么拯救你的“搜商”

    猜你喜欢

      2018-10-29 原创文章 经验/观点 举报 3256 17 5 5

      深入理解搜索和筛选功能在产品设计中的异同

      0.0°

      你确定要举报深入理解搜索和筛选功能在产品设计中的异同

      如果查出恶意举报,十天内禁止提交任何举报申请。

      0/200

      上传证据: 超过10M的附件请使用网盘地址

      点击上传附件

      对谁可见:

      全部设计师
      • 全部设计师
      • 推荐设计师和认证设计师

      您确认要推荐?

      该作品发布时间:2018年10月25日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      5
      17
      5

      账号或密码错误,请重新输入

      账号或密码错误,请重新输入

      登录

      手机号

      发送验证码 120s 验证码错误

      登录
      第三方账号登录