可被发现的设计

你好 我是李佳宝 原型设计团队的设计师 我的同事梅琳德雷尔 稍后会加入 我们很高兴能够谈论 如何设计易于发现的 用户界面 你的app有很棒的功能 但如果这些功能不明显 大家可能不知道这些功能存在 所以 今天 我们将讨论 大家如何了解你的app可以做什么 如果你的界面是易于发现的 则代表大家应该能够看着屏幕 并且在触碰任何东西之前 就知道他们可以做什么以及如何做 让我们通过一个示范 来探索提高app 可发现性的不同方法 几年来 我们的团队一直致力于 开发一款精品app 用来寻找最好的吐司 今年 我们的app正扩展到制作吐司 向你介绍 Toasty！ 最先进的智能吐司食谱生成器 你可以从精选的吐司中选择食谱 你可以看到你的朋友制作的精美吐司 你甚至可以通过拍摄你面前的 吐司照片来生成食谱 大家会如何了解所有功能？ 让我们在新手教学中 一一介绍给你听 我们会告诉大家如何浏览吐司 以及如何从图片生成食谱 对了 还有 关于如何在Toasty中 拍照的所有说明 特别是为了达到最好的效果 好吧 只不过 让我老实说 我总是跳过这些新手指南 我甚至不会阅读内容 那大家怎么会 想要阅读我制作的新手指南呢？ 当我打开这个Toasty app时 这些指南只是我和美味吐司 之间的障碍 即使大家有耐心阅读每个指南 但他们以后怎么会记住所有内容？ 你需要一个自身就易于发现和学习的界面 而不是笨拙的教学 因为边做边学 比阅读说明列表 有趣且有效 因此 这里有五个基本要素 可以让你的app更容易被发现 首先 对你的功能进行排序 这样你就可以看到最重要的功能 第二 使用大家熟悉的文字和符号 来提供视觉提示 第三 使用手势进行流畅的引导 但要提示手势 第四 内容分类要符合大家的行为规律 第五 传达对个性化内容的 控制感 这些概念可能看起来很基础 在某种程度上 是没错 它们是如此基础 我们认为这都是理所当然的 但是这里有一些细微差别 可能不太明显 值得一一解释 因为你的app只有一次机会 去给人们留下良好的第一印象 所以 首先 优先考虑重要的功能 界面里并非所有的像素都生而平等 这很好 因为我们所有功能的重要程度也不同 你app里最重要的部分 应该要立刻被大家看见 而那些相对次要的部分 则可以通过一些导航去找到 在设计Toasty时 我们列出了app中 所有重要的功能 这些功能太多了 不可能 将所有功能都放进一个屏幕中 我们确实需要优先考虑 哪些功能是重要的 这样我们就不会试图将所有功能 都塞到一个屏幕上 因此 我们根据功能的重要性 来进行排序 浏览吐司食谱和查看我的食谱 是非常重要的 “设置”和“关于我们”不太重要 尤其是“关于我们”页面 使用你的app的人 可能想了解app的开发人员 以报告问题或提出建议 但这并不是他们最想做的 三件事之一 在设计app时 请尝试从用户的角度 了解什么是重要的 太棒了！ 所以 我们有十个主要功能 我们知道大家喜欢干净的界面 所以 我们要把 所有非必要的功能都放到一个选单中 干净简单 对吧？ 你以前可能见过这个图标 它被称为汉堡选单 当大家在手中测试我们的界面时 我们发现 当汉堡选单关闭时 大家会不知道里面有什么 这三条横杠没有传达任何 有关内部功能的信息 因此 我们决定使用 标签栏导航系统 它出现在app的底部 让大家可以在不同的部分之间 快速切换 这样做更好 因为你可以立即看到 app最重要的功能

那些极简的用户界面 可能无法使用或难于使用 因为大家不知道该做什么 因为当我们隐藏界面元素 让app看起来简约的同时 我们增加了大家找不到功能的风险 他们甚至可能会忘记 你最喜欢的功能存在 在另一种极端情况下 如果所有功能都同样重要 而我必须用六个选项卡按钮 将它们全部塞进一个空间会怎么办？ 但是太多的标签 会减少每个标签的可点击区域 并增加app的复杂性 这会使大家 更难找到信息 听着 我知道 你遇到过这些情况 有些人认为 一切都要先展示出来 而有些人则想把一切都隐藏起来 以获得更干净的外观 要同时兼顾这两方面是很困难的 你必须在优先事项 做出艰难的决定 这样才能达成平衡 在你的app中 哪些功能值得 显示在前面和中心位置？ 应该是app最重点的功能 或者是大家经常使用的功能 Toasty的主要特色 是浏览吐司食谱 查看我的食谱 拍照生成食谱 大家浏览吐司 并收集一组食谱的频率最高 我们将这些功能分为两个界面 我们将界面命名为 “为你推荐”和“食谱” 我们将这些屏幕放置在最明显 和最容易到达的地方 标签栏 额外的好处是 它符合屏幕的人体工程学 易于预期中的高频率操作 拍照是为了在我的食谱页面 生成一个新的食谱 这是一个重要的功能 所以 我们在顶部 放了一个显眼的按钮 在其他食谱之前 搜索栏位于顶部 非常明显的位置 位置离我的拇指比较远 但没有关系 因为我们认为 相对于我们的标签栏操作 搜索是大家使用频率相对较低的操作 我们列表中的其余功能 与我的个人偏好有关 因此我们将它们放入顶部的 个人资料图标中 我的偏好不会经常改变 所以如果需要额外点击 才能进入也没关系 总结本节 优先考虑重要功能 使基本功能立即可见 要找到其他操作和导航 请使用视觉提示来引导注意力 视觉提示是引导大家 去往特定内容或操作的元素 我们如何看待视觉提示 首先要了解你的受众 了解你的受众是关键 因为这有助于你了解 什么需要说清楚 什么可以被大家推测到 首先 想一想你的产品是给谁用的？ 就Toasty而言 我们的产品 是为了喜欢吐司的人准备的 他们可能不是专业厨师 但仍想借助食谱 自行制作美味吐司 Toasty是给普通用户的app 而不是专业工具 所以 花时间和精力 来学习这个app是不太能被接受的 也就是说 大家不太可能想要 或认为有必要 去看大量的操作说明 比方一个多步骤的新手指南 相反 我们希望提供 尽可能多的视觉提示 让他们在使用app的过程中 清楚app的使用方法 那么 我们要问 大家已经知道了什么？ 我们假设大家可以推断这个图标 与吐司有关 因为作为吐司爱好者 他们很自然会遇到 类似这种形状的面包 我们的图标与现实世界息息相关 但是 嘿！ 我们可以依赖的不仅仅是大家在现实世界 的生活经验 我们可以期待 人们对常见的数字模式有所熟悉 因为大多数使用Toasty的人 都不是第一次使用手机 例如 使用iOS的人 会将前往上一个屏幕的操作 与点击导航视图 左上角的V形符号连结在一起 因为大家习惯这种交互 所以我们不需要添加额外的视觉提示

如果你正在构建大家可能不熟悉的 独特设计或交互方式 则应提供说明文字或界面元素 以帮助大家理解该做什么 即使是可识别的图标 也可能让人搞不清楚 那是一本书吗？ 最喜欢的报纸？ 通过添加文本标签 我们阐明了每个图标的含义： 浏览推荐的吐司种类 查看保存的食谱 即使是我们熟悉的相机图标 也可能有很多用途 例如拍照 扫描文件或QR码 当我们添加标记 “新增”按钮的文本时 我们澄清了此按钮用于拍下吐司 以新增食谱 除了能够明确指示行动的 视觉提示之外 你还可以提供帮助大家理解 如何使用该操作的视觉提示 以搜索栏为例 大家对搜索图标和操作已经很熟悉了 但对可以输入的内容却一无所知 因为我们还没有让他们了解 如何在app中进行搜索 我们称之为空白页问题 当你设计界面时 向大家展示一个巨大的 空白的白色屏幕 可能会导致人们犹豫不决 因为当他们面前没有任何东西时 大家不知道 他们想要做什么 你可以通过提供不同选项 来指导大家解决这个问题 因此 我们决定提供 可能输入类型的范例 例如按成分、地点或朋友进行搜索 通过这种方式 大家可以快速发现 不同的搜索方法 除了用文字和视觉引导大家 你还可以使用动画和互动反馈 来循序渐进地进行教学 例如 在Toasty中 我们能够扫描真正的吐司 使用相机生成食谱 并为该食谱 设置封面照片 这是一个独特的功能 所以我们必须指导大家如何使用 吐司轮廓暗示吐司保持在中间位置 并保持一定距离 在你把吐司纳入视图之前 快门按钮会保持失效状态 我们告诉你 这是因为相机正在寻找吐司 当相机处于合适的角度时 轮廓在视觉上会发生变化 然后 有触感反馈 来提示你为吐司 拍照的推荐时刻 这些动画和视觉提示 有助于确保大家在遇到相关信息时 获得我们的指示 而不是在刚进入app的时候 因此 设计你的app时 要考虑到大家 已经具备的知识 以及他们何时需要额外的帮助 第三 提示手势操作 在你的app中使用手势 会使你的app 感觉更流畅 更有互动性 而不是只通过点击来浏览 手势非常适合作为某些操作 或导航的快捷方式 但手势操作是不可见的 所以可能无法被立即发现 首先 作为一般规则 在平台上使用公认的手势 如果你在发明一种新手势 请尝试模仿现实生活中的互动 大家在学习和熟悉新手势时 会有困难 在游戏和其他沉浸式app中 自定义手势 可以成为体验中有趣的一部分 而在其他app中 最好使用标准手势 这样就不需要花费额外的力气 来发现或记住它们

标准手势包含点击、滑动、长按 平移、捏合和旋转 大家通常希望这些标准手势 在整个系统和每个app中 都能发挥相同的作用 有些体验没有标准的手势 如果是新手势 请确保将交互方式与现实世界的行为 保持一致 例如 在用Apple Pencil随手写时 我们可以将要删除的文字划掉 该手势在现实世界中以相同的方式 运作以创建熟悉的互动 在我的食谱中 我们使用捏合 来显示更多食谱 类似于照片app 使用相同手势 捏合以显示更多照片 大家应该熟悉这个标准手势 但即使是一些大家熟悉的手势 也会让人困惑 例如 经常使用社交媒体app的人 可能熟悉双击点赞 但是经常使用照片和地图的人 可能会希望双击放大 在设计Toasty时 我们为点赞 显示了一个清晰的“喜欢”图标 但也包括双击手势作为快捷方式

这就引出了第二点 使用手势作为快捷方式 而不是替代 因为手势 无论多么直观 仍然是不可见的 如果没有办法通过查看界面 来了解如何使用手势 那么将手势视为操作的加速器 你仍然应该有一个主要的方式 来执行相同的操作 并且清晰易读 第三 通过转场动效 让手势更容易被发现 在我的食谱中 我们可以点击吐司来查看食谱 要返回到所有食谱 我们使用向下滑动作为快捷方式 与“照片”app类似 你可以向下滑动 从浏览一张照片返回到所有照片 尽管这是一个常见的手势 但我们保留了一个明确的返回按钮 因为我们不能假设 每个人都知道这个手势 手势具有方向性 点击后V形仍然会触发 向下滑动的动画 这暗示你也可以向下滑动来返回 因此 请确保你的转场方式 与相关手势的动作一致 我们想让大家通过向左或向右滑动 来浏览食谱 但是仅通过看屏幕 大家不会知道他们可以这么做 因此 让我们提供视觉提示 在任一侧添加较小的吐司图像

总结本节 使用标准的iOS手势 或类似于现实生活中互动的手势 同时 提供一种主要且清晰的方式 来执行相同的操作 并使用动效来暗示手势 这是提升界面可发现性的三种方法 即确保大家可以 轻松地浏览你的app 了解哪些操作是可行的 并且可以立即学会如何操作 作为一般原则 当大家使用你的app时 他们应该能够立即知道要做什么 而无需触摸屏幕 试着了解大家是如何认识事物的 他们从现实世界中知道这一点吗？ 他们从iOS知道这一点吗？ 他们知道这一点是因为 他们以前使用过我们的app吗？ 接下来 我的同事梅琳 将讨论内容的可发现性 谢谢佳宝！ 如果大家找不到 他们要找的内容 那么即便app的功能再易于理解 也将变得毫无意义 最好的app 有你知道如何使用的功能 和你知道如何浏览的内容 Toasty的核心内容 就是吐司食谱 有很多 上百种！ 大家会不断新增食谱 到最后 我们将有上千种食谱 有了这么多内容 我们如何确保大家能够发现 他们想要的吐司种类？ 为了回答这个问题 这是我们的第四个原则： 根据行为分类 将你的app内容分类成 适合大家动机 和自然行为的类别 让我们从选择这些类别开始 我们认为大家会非常兴奋 想找到吐司上的配料 或独特的食材组合 所以 很自然地 在为我们的app选择类别时 我们决定按食材进行分类 大家可以分组选择 牛油果或蓝莓吐司 但这并不是很好 因为可能的食材太多了 按食材分类是一个合理的选择 分类内容的方法有很多 我们知道做选择有多困难 但这无助于决定大家 接下来想要吃什么吐司 食材种类的数量太多了 通过Toasty 我们希望帮助大家 探索和发现新的吐司食谱 因此 我们将自己置于 使用我们app的人的立场 大家在现实生活中如何发现吐司？ 在什么情况下？ 大家对吐司的态度是什么？ 好 他们会发现新的吐司 是在尝试新餐厅 或朋友推荐时 这让我们根据这些推荐 是来自餐厅 还是朋友分享来分类推荐 这两个类别适用于其他动机 而不仅仅是吐司 这是关于更好地了解 你所在地区的餐厅 并与朋友联系 以这种方式发现内容 更有趣也更吸引人 但是我们觉得我们仍然缺少 一个强大的类别 能把独特的个人品味 和他们喜欢的口味串联起来 这就引出了我们的第二点 也就是使用个性化 将内容分类到一个专门区域 该区会显示 来自机器学习引擎的推荐 因为食物口味是因人而异的 所以个性化内容是有意义的 正如我之前所说 我们不能为每种食材都建立一个类别 但我们可以有一个推荐引擎 根据大家喜欢的食材 来定位他们最喜欢的吐司食谱 因此 在现有分类的基础上 我们创建了一个 名为“美味推荐”的新类别 美味推荐展示了由我们自己的 推荐引擎生成的最佳吐司食谱 对于某些类型的app 如果实施得当 个性化内容可以改善app的体验 特别是在处理大量内容时 大家可能会更快地找到 他们可能喜欢的内容 当大家不必在搜索栏中输入内容时 这通常代表你的内容可以被发现 一旦我们将内容分类到 与大家行为相匹配的类别中 我们就需要从视觉上去体现这些划分 这就带到了 关于组织内容的最后一点：

通过一目了然的分类 来可视化内容类别 在设计Toasty的用户界面时 我们首先将每个项目都放在屏幕上 当我们在做吐司食谱时 你已经可以看到数量太多了 同样重要的项目太多了 很难找到你真正想要的东西 而且 没有明确的划分 大家就对现有的分类没有感觉 内容就只是一大盒未分类的吐司食谱 通过将类别分组到不同的逻辑区域 由标题分开 会立即变得更容易理解 大家可以很容易忽略某个类别 并在某个特定区域进行更深入的探索 将内容进行分类可以转化 大家的行为和现实生活的环境 使用个性化 让大家可以更轻松地 找到他们喜欢的东西 最后 通过清晰的划分 在视觉上强化这些类别 现在 让我们转向我们最后一个 也是第五个原则： 传达一种控制感 让大家知道如何轻松地影响 机器学习系统 并对不相关的个性化内容进行处理 首先 让大家对屏幕上的项目 提供显式反馈 显式反馈来自大家的有意的输入 当存在一个选项告诉系统 你想要查看更多或隐藏内容时 这就是显式反馈 如果你明确邀请大家提供反馈 他们就更有可能提供反馈 这将为推荐引擎 提供有用的数据 这些数据将加强相关项目 和内容的可发现性 因此 要注意你如何沟通 并使这些反馈操作可被发现

在浏览了数百个吐司后 大家最终会看到一个美味的吐司页面 正如佳宝前面提到的 视觉提示是引导大家 前往特定内容或操作的元素 因为我们希望大家告诉我们 他们是否喜欢这个吐司 所以我们决定使用心形按钮 我们向朋友和同事展示了我们的设计 以了解什么是有效的 什么是无效的 我们很快发现 大多数人认为 这个操作代表“新增到收藏夹” 而不是 “我想被推荐更多这样的吐司” 仅仅是心形图标无助于发现 此功能的作用 它的释义是开放性的 并没有明确表明点击它 会对系统产生任何影响 而且 iOS的标准是 你只有在“喜欢”过某个项目之后 才能进而“不喜欢”这个项目 那如果我们不能使用“不喜欢”的图标 那么什么才会是 “少给我看这种吐司”的好输入呢？ iOS推荐反馈图标的指南中 是搭配拇指向上和拇指向下 所以 我们就这么做了 我们把这个更新的设计拿给朋友看了 他们还是感到很困惑 有可能 这个竖起的大拇指代表 其他人会看到他们喜欢这个吐司 他们只是不明白 这会改变他们iPhone中的 推荐引擎

因此 我们更加努力地 想要明确和坦率地 表明操作的结果 使用“推荐这样的吐司”文本标签 会产生明显的后果 因为“推荐”是一个 与推荐引擎 更密切相关的术语 现在 只要看一下屏幕 你就知道点击“更少”按钮后 会发生什么事 未来的推荐将进行调整 以减少推荐香蕉吐司 如果你希望大家轻松地发现 如何提供有用的反馈 那么传达你的系统如何工作 你可以在何处与app进行互动 以及一个人的行为会产生什么结果 是非常重要的 因此 既然我们知道 如何设计反馈和操作 下一步就是要注意 这些操作的输出 因此 为了做到这一点 公开隐式反馈 隐式反馈是当大家与你的app功能 互动时出现的信息 “隐式”代表它发生在 大家无意识地要求它的情况下 例如 在查看食谱 或与朋友分享吐司时 通过公开隐式输入 我们将系统推荐输入源告知大家 进而增加内容的可发现性 和对系统的理解 在Toasty的“为你推荐”选项卡中 我们有“美味推荐”栏位 没有解释会很难理解 这些内容是从哪里来的 为什么我会看到 这些特殊的吐司食谱？ 这是开发人员自己策划的内容 还是机器学习的内容？ 所以 在考虑了这些问题之后 我们新增了一个描述 “因为你新增了牛油果吐司” 添加文本标签 是一种简单但有效的方法 来澄清屏幕上的任何内容 在这种情况下 它可以帮助大家知道 当他们将食谱新增到他们的收藏时 他们将获得更多个性化的推荐 现在 如果大家不希望 他们新增的吐司食谱 被用作获得推荐的输入怎么办？ 如果结果不再有价值 或者根本不如预期 他们该如何编辑个性化内容？ 这些问题将我们带到了 今天课程的最后一点 也就是控制推荐 允许大家根据 他们收到的推荐采取行动 以防他们对结果不满意 让我讲一个小故事来说明这一点 我习惯每天早上吃牛油果吐司 我的大部分食谱 都是从Toasty那里得来的 现在 假设我搬到了一个新的国家 一切都令人兴奋和新鲜 但我在那里意识到一件可怕的事情： 我在任何地方都找不到 或买不到牛油果！ 当我再也买不到那种食材时 却得到美味的牛油果吐司的推荐 会有多糟糕？

是的 没错 那会非常令人沮丧 该app需要停止向我展示 我无法获得的东西

出于这个原因 你应该允许人们对推荐进行编辑 以便让大家感觉自己可以控制 允许他们对令人沮丧 并想要修正的推荐 采取行动 但最重要的是 让这个操作容易找到 并快速执行

在“美味推荐”的栏位 在描述 “因为你添加了牛油果吐司”旁边 我们放置了一个“更多选项”按钮 通过这样做 大家知道他们可以直接 根据推荐采取行动 但是从可发现性的角度来看 你应该已经感觉到这里有些不对劲 我们将所有内容 隐藏在“更多选项”选单后面 大家可能会找不到 也许我们应该更详细地描述一下？ 因此 在我们的最后一个设计中 我们简单地在描述的最后 新增了一个绿色文字按钮 上面写着 “编辑推荐” 点击该按钮后 会向大家呈现不同的选项 “推荐少一点牛油果吐司” 和“停止推荐牛油果吐司” 通过阅读按钮标签 大家应该很容易理解要做什么 并了解这两种操作会产生什么结果 通过使用拇指向下的图标 就像我们为显式反馈所做的那样 我们向大家展示这些按钮 与我们app中其他地方的按钮 具有相同的结果 即显示更多或更少某些内容

因此 请使用描述性的标签 和图标来帮助澄清或强调描述

有些人可能想要提供更具体的反馈 而不仅仅是 “推荐少一点牛油果吐司” 和“停止推荐牛油果吐司” 我的意思是 在很多情况下 “减少推荐”或“停止推荐” 并不是我想要更改推荐的方式 也许大家在这个特殊的日子里 没有心情吃牛油果 他们今天可能希望看到不同的推荐 但将来仍会被推荐使用牛油果吐司 或者他们可能只是不喜欢 “美味推荐”中的 某个特定项目 并想把它删除

为了可发现性 我们应该讨论向推荐引擎提供 什么样的反馈 以及如何给这些动作贴上标签 就连佳宝和我对这里的控制 该怎么做最好 也有不同的看法 因此 要在做出如此困难的 设计决策时充满信心 请制作你的app原型设计 向大家展示 并从他们的反馈中学习 重复这个过程 直到你对结果满意为止 这就是我们讨论的 第五个也是最后一个原则 大家应该感觉到并控制着 你的app个性化内容 他们应该能够快速了解 要提供哪些明确的反馈 以及如何编辑或删除 他们不再重视的内容 让我们回顾一下让你的app 更具可发现性的五个原则

优先考虑重要功能 让你的app的核心功能立即可见 提供视觉提示 用文字来消除歧义 在实际任务中通过动画和交互反馈进行教学 手势提示： 使用动画使手势可被发现 尽可能使用标准手势 如果使用自定义手势 请提供一种清晰的方式 来执行相同的操作 按照行为对内容分类 处理大量内容时 按照人的行为分类 直观地整理这些类别 并使用个性化 以便大家 快速找到他们想要的东西 最后 传达一种控制感 确保用户可以控制app 允许他们进行修正和编辑个性化内容

你可以拥有最具创新性的app 以及最精美的自定义图标 但是在使用你的app时 如果大家搞错或不明白 这些漂亮图标的含义 用户可能会感到困惑 你非常努力地 构建app的功能和内容 所以你会希望大家 能找到这些功能和内容 一般原则是 当大家使用你的app时 他们应该要知道马上能做什么 甚至不用触摸屏幕 想想你的受众 以及他们可能知道什么 他们是从iOS上认识这个图标的 还是从现实世界中认识这个符号的？

伟大的设计需要反复测试 所以 制作一些东西 向大家展示 并从他们的反馈中学习

如果你有兴趣了解更多关于设计原则 以及如何制作使用起来流畅的app 这里有一些我们推荐的视频 谢谢收看！ [音乐]