美文网首页@产品设计
【PM】移动设计模式—搜索篇

【PM】移动设计模式—搜索篇

作者: 陶然听说 | 来源:发表于2017-09-15 08:03 被阅读65次
Alfred

今天继续探讨如何帮助用户找到内容——「搜索」过程产品设计

我们先看一个完整的搜索用户体验流程:有一个用户小明,进入一个APP之后,通过搜索功能查找相关内容,系统反馈结果,小明对结果进行浏览,最终找到目标对象。

整理抽象后的流程为:搜索入口(功能入口)→搜索页(关键词输入)→搜索结果页(相关数据列表)→目标结果页(详情页)。

下面我们按照这四个步骤分别探讨可能的设计方案,以帮助我们提高产品搜索功能的使用体验。

一、搜索入口

设计规范:Android/iOS

两大移动平台都有标准的搜索控件,尽量按照平台规范设计,使用原生控件。

设计层面:整体性、规范性、美学性。

技术层面:标准化组件,开发成本低、兼容性好、体验流畅。

PS:Android版本跨度较大,考虑部分原生控件兼容性稍差,可根据实际需求重新设计。

二、搜索页

关键词联想、关键词排序、热门搜索、搜索历史

1. 有效的关键词联想。当用户输入文字时,使用有效的自动提示,诸如词根识别、文本预测等都可以降低用户的输入难度、操作强度,有助于加快搜索提高效率。

京东(iOS)

2. 联想关键词排序。阅读顺序为从上到下。根据关键词相关性、文本匹配算法确认联想出的关键词排列顺序,提供最短路径,节省消耗。

若联想出的关键词,已经找到目标对象,则点击后直接跳转至目标结果页。

微信(iOS)

3. 显示最近搜索记录。提供搜索历史主要用于再次查询,帮助用户节约时间和精力。符合基本的可用性原则:尊重用户的付出。

搜索记录数量不宜过多,尽量不使用滚动条,太多的信息会造成过载且意义不大。若有必要,可以提供入口查看所有记录。

4. 可提供热门搜索。用户没有明确的搜索目标,推荐部分关键词,给用户提供选择,帮助用户了解趋势。 同时,推荐的关键词可以提高转化。非必须项,根据产品属性选择使用,推荐性、商业性较弱的产品,可不使用。

京东(iOS)

5. 显示搜索进度。从「搜索页」到「搜索结果页」的过渡,需要给出搜索进度提示,可使用动画特效完成转场,降低焦虑感。注意区分短等待与长等待。

三、搜索结果页

关键词回显、结果排序、结果数量、显式方式选择、过滤器

1. 回显用户在「搜索页」输入或选择的内容。再次查询是信息检索中关键的一步。在搜索框中留下初始的关键词,方便用户进行再次查询,让用户不至于重复输入。

2. 反馈准确或相关的结果。以合理的方式确定结果优先级,并把所有重要的结果放置在前面。关联性(优先级)排序:准确>相关>推荐。最好能基于自己数据库里的数据范围做匹配或推荐,提高准确度。

3. 纠正拼写错误。打字容易出错,尤其移动场景。 如果用户输入了错误的关键词,为避免因没有返回结果导致用户不得不再次输入关键词的不适,提供两种设计方案:

3.1 系统直接按照预测判断的正确关键词反馈结果,给出提示。

3.2 在结果页告知输入错误,提供建议关键词,或直接给出建议关键词之后的结果。

京东(iOS)

4. 显示搜索结果数量及分页。告知用户具体数量及位置,帮助用户在进行内容比较时快速定位;指导用户后续动作,如需要花费多长时间浏览、是否需要再次搜索。

5. 选择合适的结果页布局方式:列表、网格。若只有图片或关键文本信息,采用网格形式;若需要展示更多细节信息,采用列表形式。

5.1 提供展示方式切换选择。

5.2 网格布局形式的图片要适中,基于展示需求及美学性。

6. 提供过滤器。必要的筛选条件可以提高效率节省精力。一次搜索系统返回的结果过多时,通过排序和筛选条件缩小搜索结果范围,帮助用户更快更精准找到目标内容。

6.1 提供全站(综合)及分类查询。

6.2 排序及筛选条件分开设置。

6.3 筛选选项不宜过多(≦5个)。

6.4 提供筛选选项默认值。

6.5 若只有一个Filter入口,提供多选设置。

6.6 回显已设置选项值。

7. 尽量不直接显示"无结果"。原则上帮助用户寻找替代品。给出相似/相近关键词推荐;给出相似/相近内容推荐;文案友好。

四、目标结果页

一个关键原则:目标结果页与搜索结果页的关键信息显示应前后一致,否则容易造成用户的担忧。具体的内容设计及界面设计放在下一个系列更新。

一个优秀搜索产品基本要求:快速准确找到用户想要的。如果有可能,不要让用户花精力去找,直接提供给他。

愿你更进一步。


完。

相关文章

  • 【PM】移动设计模式—搜索篇

    今天继续探讨如何帮助用户找到内容——「搜索」过程产品设计。 我们先看一个完整的搜索用户体验流程:有一个用户小明,进...

  • 移动应用设计细节分析——导航

    移动设计模式整理分析——导航篇 产品导航设计优缺点分析 8种移动APP导航设计模式大对比 1.扁平式导航 1.1 ...

  • VIM常用快捷键

    插入模式: 光标移动: 查找/搜索 拷贝/粘贴 删除

  • Vim常用命令

    光标移动 插入模式 编辑 关闭 搜索 视觉模式 剪切和复制 窗口命令

  • 设计模式-介绍

    设计模式说到设计模式,想必入行一段时间的猿们都有所了解。不管是百度还是google,搜索设计模式,都会有很多搜索结...

  • [译] Twitter的搜索设计,23种潜藏的高级搜索

    最近在设计公司产品的搜索框,对一些产品的搜索模式进行了调研。在Medium上找到一篇关于Twitter搜索的文章,...

  • 交互那些事儿——搜索模式探索

    本篇是关于移动端搜索模式的学习总结,通过搜索的方式、搜索结果的排序和筛选三方面来总结。 一、搜索模式 1、模态搜索...

  • iOS 标签开发(collectionView)

    前言 目前iOS 移动端开发搜索,或者标签都喜欢用自适应宽度的设计模式,节约布局。目前大多开发都是利用 table...

  • iOS分层架构设计

    大家都知道,在移动设计开发中有很多种模式,最常用的单例设计模式、MVC设计模式、工厂设计模式、KVO、通知、代理等...

  • 《移动应用UI设计模式》之搜索、分类和过滤

    一、搜索 移动应用常见搜索模式 1.显性搜索 ▪ “显性搜索要求用户执行明显的搜索操作并浏览搜索结果。”▪ 这是应...

网友评论

    本文标题:【PM】移动设计模式—搜索篇

    本文链接:https://www.haomeiwen.com/subject/lozjsxtx.html