[设计] 搜索UX设计要点摘录

本文内容来自《设计搜索体验-搜索的艺术和科学》这本书，把核心内容做了摘要

---

一、搜索的用户类型

• 双纬度新手（技术应用水平、金融知识都差）

  • 特性：频繁修改搜索词；经常执行返回操作；时间耗费更多

• 领域专家/技术新手（技术应用水平差、金融知识强）

  • 特性：使用高级术语；评估搜索结果页更有效；后退

• 领域新手/技术专家（技术应用水平高、金融知识差）

  • 使用高级搜索格式；自信地点击浏览（可以随意离开搜索页）；评估搜索结果页比较困难

• 双维度专家（技术应用水平、金融知识都强）

  • 特性：浏览更多结果页；浏览更深入；更快速

Paste_Image.png

二、信息觅食理论

用户为获得其信息需求，非常依赖某些被称之为 **“信息气味” **的线索帮助引导他们到达目的地：信息气味的设计：描述性标题：能准确的描述该链接，并能够被感知可点击
命中高亮：在搜索结果的描述中，高亮命中的关键字
清晰的标签：对该搜索结果进行分类的标签的提示

三、信息搜索的阶段

• 引发：用户明确自己的信息需求，伴随着不确定性和顾虑
• 选择：缩小信息搜索范围
• 探索：探索更多选择和可能性
• 制定：关键转折点，所有信息都被制定成一种特定的、实实在在的要求
• 收集：在制定阶段，问题和需求被明确后，用户开始在特定的区域进行搜索
• 行动：根据获得的信息采取行动

我们要帮助用户完成：

• 无限的探索：简化浏览体验、免去初始查询，并帮助用户调查沿途的信息和可能的意外发现
• 信息管理：书签、待读列表、收藏....
• 监测：用户第一次没有完成信息搜索任务，可能会在同一个地方多次重复进行搜索动作，要帮助他保存搜索词和筛选条件。

四、情境下的搜索体验

• 多义词场景

  • 用户搜索“Java”是寻找一种编程语言or印尼的一个岛屿or一种咖啡的名称？

• 用户不同意图场景

  • 用户搜索“olympics”是下一届主办国的地点、最新的比赛、还是这项赛事的历史？

五、搜索模式设计

• 验证：用户检查特定的项目，希望确定它是否满足某些条件

  • 验证搜索结果：鼠标悬停的时候，出现更多的关键信息
  • 验证搜索请求：在搜索下拉框给出一定的关键词组合

• 了解探索：了解你要去哪里和你去过哪里

  • 已浏览和未浏览的区别设计
  • 最近搜索词提示
  • 相关搜索词提示

• 制定搜索请求

  • 通用搜索框
  • 范围搜索：下拉列表
  • 内搜索：大搜索下的一个分面导航菜单的搜索框
  • 高级搜索：高级搜索表单
  • 自动补全
  • 自动建议
    下图为高级自动建议搜索示例

Paste_Image.png

• 即时结果：在搜索框就给出一定的结果

Paste_Image.png

【您是不是要找】提示
自动更正功能
局部匹配：几个关键字组合没有搜索结果，但是不返回零搜索结果，而是给出部分关键字命中的关键字
给用户探索的相关搜索：搜苹果公司给三星公司的一些提示

六、搜索结果的展示和操控

显示搜索结果

• 基本原则：如何让用户一眼快速定位到他真正想要寻找的信息，注意信息区分度和信息密度的合理取舍
• 结构搜索结果：对搜索结果进行内容概括，分类、强调
• 搜索结果预览：
• 搜索结果的回答和直达区：搜今天天气怎么样，直接在顶部给出气候信息

搜索结果页

基本原则

• 输入功能

• 信息功能

  • 搜索结果的个数
  • 支持搜索词重写（您是不是要找、自动更正）
  • 相关文字描写，和URL超链接标题
  • 页面预览
  • 相关元数据：如引用、相关文章、社会数据（赞、评价....）

• 控制功能

  • 分面的导航菜单
  • 搜索的工具菜单
  • 页码
  • 高级搜索选项和帮助

• 个性化功能（当登录时）

  • 个人资料、设置、通知..

页面布局

• 竖排列表布局
• 横排画廊式布局
• 根据搜索主体的属性来进行个性化的设计

Paste_Image.png Paste_Image.png

• 混合搜索结果：多种类型的搜索结果同时展示在一个页面上

Paste_Image.png

• 零搜索结果页面
  • 将零搜索页面看成一个一个为查询重写的页面
  • 给出清楚的信息和有用的建议

操控搜索结果

• 分页

• 排序和筛选

• 阐明查询条目：在确定用户真的目的之前，都是一个猜测游戏

  • 给出相关搜索：比如搜“MP3”，可能是播放器，也有可能是文本内容，一个巧妙的方式就是给出相关搜索（ “music player”、“ipod”）
  • 分类选择器

• 比较：多用于电商网站，用于分析和比较

七、分面搜索

分面是指事物可以被归类为借个基本独立的属性和纬度。分面导航的重要原则是，通用引导有效导航使查询零结果的降到最低
分面的语义

• 单选分面：分面值是互斥的，每次只能选择一个分面
• 多选分面：多选分面要么是选择 “或”，要么选择“和”关系

分面的布局

• 纵向布局
• 横向布局
• 混合布局

Paste_Image.png

默认状态

• 默认收起
• 默认展开
• 展开和收起混合

分面展现形式

• 超链接
• 复选框形式，是多选分面的理想展示形式
• 范围滑块（谷歌finance 市值选择）
• 输入框
• 颜色选择器
• 标签云
• 数据可视化：对大量和定性的数据信息进行聚合、组织和总结，用来展现关键指标、模式和整体状态

显示额外值

• 默认展示所有值
• 可扩展容器：如下拉列表
• 独立容器：如更多选择链接
• 内联面包屑（其实就是分类树）

Paste_Image.png

交互模式

• 智能死角可以用来提示当前有可选但是还未选择的值
• 两种交互模型
  • 即时更新模式：用户选择了某分面值之后，结果和分面值立即刷新
  • 两阶段模式：用户可以选择多个分面一起提交。但两阶段不恰当使用可以引起导航状态不同步，导致返回结果为0.设计的时候应该使得每次选择只有一个分面是展开的，如果分面值的是连续的（多选“和”），那应该用即时更新模式