设计直观的搜索体验

你好 我是Rob Apple设计团队的设计师 今天 我将讲解 如何为你的App设计 直观的搜索体验 搜索是帮助用户查找 和浏览内容最重要的工具之一 以及发现内容 随着App不断提供 更丰富的内容和体验 搜索赋予用户超能力 能够精准直达 所需内容 无需花时间 费力搜寻 打开App时 搜索往往是 用户第一个寻找的功能 无论是在Pages中找回文稿 还是在Apple TV上查找电影 还是在Apple Music中 探索新的艺术家和流派 搜索在让这些交互 流畅自如方面发挥着关键作用 这就是为什么设计 出色的搜索体验 是你App的重要组成部分

通过Liquid Glass 我们引入了新模式 让iOS上的搜索 更符合人体工程学 并充分利用 iPad和Mac的大屏优势 本节中 我将首先 介绍搜索栏 以及它支持的 核心行为和交互 然后 我将概述 各种搜索模式 及其可用选项 以及如何最佳选择 搜索在App中的位置 最后 我将介绍 一些通用最佳实践 以及如何让输入文本 和过滤搜索结果等常见交互 尽可能直观流畅 让我们先来了解 搜索栏 Apple为开发者 提供了搜索组件 其中包含核心元素 以及人们搜索时 期望的交互 例如 前置搜索图标 在视觉上将界面 确定为搜索栏 占位文本 提示用户 在何处输入搜索词 清除按钮 在输入文本后显示 在iOS上 当搜索获得焦点时 会出现一个额外的 取消按钮 让用户退出搜索 同时收起键盘 根据搜索栏的位置 它将自动采用 正确的显示样式 例如 放置在工具栏时 使用玻璃效果 或放置在App滚动区域时 使用标准内容样式 如果你的App有独特的 品牌和图标体系 请确保保留 搜索栏的核心元素 任何自定义图标 都应与所替换的符号相似 放大镜等符号 已成为搜索功能的 通用识别符号 现在 让我们探索 一些可用的搜索模式 以及如何选择 适合你App的方案 从iOS开始 在iOS上 搜索可放置为 工具栏中的字段或按钮 标签栏中的标签 或置于顶部工具栏下方的字段 或App内容区域中 重要的是 搜索的放置位置 直接影响激活时 搜索栏的动画目标位置 当搜索放置在 底部工具栏时 搜索栏将优雅地 向上动画至键盘上方 优化可及性 和键盘输入 当搜索作为字段 内联放置时 激活时保持在顶部 避免App底部出现界面 在决定搜索放置位置时 需要考虑两个问题 第一个问题 用户如何在我的App中导航 这将帮助你了解 是否需要适配 标签栏等特定组件 第二个问题 我的搜索范围是什么 某些放置位置可能影响 用户的感知 他们认为自己在搜索的内容 让我们通过Apple 自家App来实践这一点 在Mail App中 大部分导航 通过邮件列表进行 每个视图上方 都有上下文工具栏 这是将搜索放置在 底部工具栏的绝佳示例 这是最符合人体工程学的位置 并且紧邻App中的 其他主要操作 此位置还清晰表明 激活后 你将搜索邮件 根据工具栏中 相邻项目的数量 字段宽度会 自动调整 同时容纳前置 和后置操作 如果需要两个以上 其他工具栏项目 搜索也可以从按钮开始 点击后动画展开为字段

虽然首选底部工具栏位置 搜索也可以放置 在顶部工具栏中 股市App是这种方式 的绝佳示例 在这里 股票列表底部 被一个表单占据 因此无法放置 底部工具栏或字段 在这里 搜索放置 在顶部工具栏中 点击时同样将字段 向上拉至键盘上方 现在 让我们来了解 另一种导航方式 标签式App 标签栏帮助用户快速切换 App的顶级板块 标签式App通常拥有 多种丰富内容 和可搜索的视图 在这种情况下 通常建议 为搜索创建主要入口点 一个用户能够找到 App内所有相关内容 的单一空间 你可以通过创建搜索标签来实现 使用搜索标签 你有两个选项 第一个是使用标准标签 使搜索与栏中 其他部分保持统一 在这里 切换标签将 导航到着陆页 顶部显示搜索栏 这为呈现任何内容 或建议留有空间 可在搜索前提供帮助 第二个选项 是使用按钮外观 将搜索设为突出标签 这将向用户传达点击后 将立即激活搜索 并弹出键盘 第一种方法适用于 App拥有丰富多样内容的情况 且用户搜索时 可能处于探索状态 例如 Apple TV使用搜索标签 来展示各种类别 以及搜索前的可用分类 这有助于让用户了解 可用的内容 当用户通常明确知道 自己要找什么时 并需要快速访问搜索 我建议采用第二种方法 将搜索设为突出标签 电话App是一个很好的示例 在这里 用户只想 回拨最近通话或联系人 点击搜索即可 立即弹出键盘 这种放置方式确保搜索 始终可见 一触即达 虽然专用搜索标签 非常适合提供统一的 App全局搜索 但有些情况下 仅搜索特定标签也很有用 Apple Music资料库 就是一个很好的示例 在这里 搜索直接内联 放置在内容标题下方 标题和搜索栏中 更具描述性的占位文本 有助于强调你只是在 搜索音乐资料库中的专辑 而非整个App

如果你的App拥有 多个搜索栏 此模式尤为有用 且当位置在搜索范围中 扮演关键角色时 现在 让我们来了解 iPad和Mac 两个平台都提供 更宽的显示屏 并在App中共享 类似的导航模式 因此搜索的设计方法 通常相似 我建议尽量保持 iPad和Mac搜索体验 尽可能保持一致 在两个平台上 你可以将App的主搜索栏放置在 工具栏的后置位置

侧边栏顶部 或专用搜索标签 或板块的顶部 让我们看几个示例 帮你决定 什么最适合你的App 对于需要跨多列信息搜索 的分屏视图App 例如Mail 将搜索放置在 工具栏的后置位置 这是对空间的合理利用 让用户可以浏览结果 同时在详情视图中 保持所选内容可见 这也是用户最常见 且最熟悉的搜索模式之一 在备忘录和文件等App中广泛使用 你还应考虑将搜索 放置在工具栏中 如果你预期搜索结果 将显示在App的详情视图中 例如 在Freeform中 搜索直接过滤下方的白板 如果你的工具栏有 多个项目和组 搜索栏将根据可用空间 缩放或收起为按钮

激活后 搜索展开至 优化文本输入的宽度 并将溢出项目移入菜单 另一种常见模式 是将搜索放置在侧边栏中 例如在设置App中 我建议在需要过滤 直接位于侧边栏中的内容 或导航时放置搜索 如果你的App拥有丰富的详情视图 此方式尤为有用 你需要在所搜索的列表 和相邻视图之间划清界限 举个好例子 让我们来看看股市App 在这里 你可以使用搜索 来查找股票代码并添加至列表 侧边栏的放置位置 清晰表明搜索范围 如果我们将搜索放置在 热门资讯板块上方 可能让用户误以为 是在搜索新闻和资讯 与iOS类似 在iPad和Mac上 你可以将搜索设为专用标签 或侧边栏中的项目 当你拥有丰富的多板块App 例如Apple Music时 这有助于为用户 提供单一搜索入口 搜索App中 所有可用内容 这种更沉浸式的方法 也为展示搜索结果 提供了更大的画布

在最后这一部分 我将介绍一些关键最佳实践 有助于提升 你的搜索体验 首先 介绍如何利用 搜索建议 当用户在你的App中 使用搜索时 可能意味着他们 最初未找到所需内容 这就是为什么让他们 找到结果 尽可能轻松流畅 至关重要 在许多情况下 用户可能 正在回访之前搜索过的内容 显示最近搜索 可以帮助 用户快速找到之前的结果 无需再次开始输入 在iOS上 最近搜索 应在字段获得焦点时 直接内联显示 在iPad和Mac上 如果搜索栏 位于工具栏或侧边栏 最近搜索可以在菜单中显示 如果你有搜索标签 可以与页面上的其他 内容建议一起呈现 考虑有选择性地 显示最近搜索 在某些App中 只呈现 特定结果会很有帮助 即用户查看或互动过的内容 重要的是考虑 什么对你App中的用户最有帮助 同样重要的是让用户 能够删除最近搜索 可以对单个项目 使用轻扫手势 以及板块标题中的按钮 来清除所有搜索 一旦用户开始输入 尽快显示相关结果 至关重要 在结果旁边 可以集成预测性建议 减少用户输入 完整查询词的需求 这些建议应与用户的输入 直接对应 给人一种搜索自然延伸 的感觉 为帮助用户保持方向感 在视觉上区分用户输入 和建议的预测部分 我还建议限制 显示的建议数量 使搜索结果 更加突出 请记住 当结果和建议 排序高效时 用户通常不需要 输入完整搜索词 搜索的另一个关键方面 是帮助用户精炼或过滤结果 在跨多个位置搜索时 这一点尤为重要 类别或账户 对于App的主搜索栏 通常建议从广泛搜索开始 然后让用户根据需要 缩小结果范围 对于轻量级过滤 Apple提供了一种称为范围栏的控件 在Mail App中 范围栏让用户 可以在查看所有邮箱 和当前邮箱中的结果 之间切换 在Mail等App中 你可能会浏览多个邮箱或位置 这是帮助用户只查看 所需结果的好方法 同时强化搜索范围 对于跨多个类别搜索的App 提供更丰富的结果 缩小选项可能会有帮助 为避免让用户不知所措 考虑只显示相关的过滤条件 以及与用户所查找内容 相关的过滤条件 地图App是一个很好的示例 在这里 过滤条件经过定制 以适应各种地点类型 从餐厅到徒步小径 用户精炼搜索的另一种方式 是使用搜索标记 标记通过特定关键词 过滤结果 在输入时浮现 应用后 标记以高亮文本 形式显示在搜索栏中 用户可以继续 添加搜索条件 这让用户 轻松缩小结果范围 按特定的人物 地点或内容类型筛选 由于标记以文本 形式存在于搜索栏中 它们让用户可以用 更自然的语言应用过滤条件 在照片等App中 甚至可以组合创建个性化过滤条件 例如 查看2021年 在Joshua Tree拍摄的照片 虽然功能强大 但标记的可发现性也较低 因此不要用它们替代 App中更可见的过滤界面 事实上 标记与范围栏 配合使用效果很好 或与其他过滤控件结合 最后 让我们来谈谈 如何优雅地处理失败 在搜索未返回 任何结果的情况下 最好显示经过精心设计的 空状态或无结果视图 完全空白的视图 可能让用户疑惑搜索是否成功 为此 Apple为开发者 提供了内容不可用视图 为搜索配置时 显示搜索符号 标题和副标题 表明未返回任何结果 考虑在此视图中 显示当前搜索文本 帮助用户快速 发现拼写或其他错误

就这些 今天的课程 到此结束 我鼓励你将今天分享的内容 思考你App中的 优化机会 例如 是否有地方可以将搜索 移到底部 以提高可及性 或者你是否有标签式App 可以从搜索标签中受益 最后 你是否充分利用了 建议和过滤条件等工具 让搜索尽可能流畅自如 如需了解更多今天分享的内容 请查阅人机界面指南 如需获取入门工具 你可以探索我们的设计资源 如需深入了解我们的设计系统 我建议观看往年的 这些讲座

我非常期待看到你如何利用 这些更新和指南 在你自己的App中 感谢观看！