利用图表设计 App 体验

Nicholas：大家好 我叫 Nicholas Felton 是人机交互界面团队的设计师 今天我将讨论如何使用图表 创造出色的 App 使用体验 图表很适合用于传达复杂信息 我们在 Apple 常常使用图表来优化产品

健康图表帮助我们 了解我们的身体情况 健身图表激励我们保持锻炼 天气图表 帮助我们根据天气计划日程

我们知道开发者也喜欢这些图表 我们在每个类别中 都看到了很棒的例子 从 Strava 中 详细的训练分析 到 Duolingo 中 有趣的进度图 图表随处可见 如果设计得当 它可以显示数据中的微妙之处 而这些微妙之处 是您无法通过文本轻松表达的 除了实用性之外 图表也能帮助您 突显 App 的个性 并为用户界面添加视觉趣味

为了演示如何使用图表优化 App 让我们看看为卖煎饼的餐车车主 打造的一款 App 帮他们卖煎饼 该 App 目前有一个 用于输入订单的选项卡 另一个用于查看最近交易 这可以很好地跟踪销售情况 但这些信息可能更有用 今年 我们将推出 Swift Charts 有了这个框架 为 Apple 设备制作图表变得前所未有得容易 在接下来的讲座中 我将分享 在 Apple 设计图表时 所遵循的原则 我们将应用这些概念来创建图表 为餐车 App 提供更丰富的信息 为了建立良好的图表体验 我们应该考虑三件事 何时使用图表 如何使用图表 以及它们在图表设计系统中 如何相互关联 让我们从讨论 何时在 App 中使用图表开始 下面是一些图表可以优化 所呈现信息的一些常见情况 显示历史值或预测值时 图表可以形象地展示数据的变化

通过可视化整体的一部分 我们可以使用图表来显示 某事正在完成、进行中或清空

在比较项目或类别时 我们可以 很容易地用图表来评估它们的价值

要决定这些方法 是否适合您的 App 请首先考虑用户需要怎样的体验 图表将如何支持您的 App 的核心目标 如果使用得当 图表可以提供重点 作为 App 创建者 您可以可视化许多东西 但只有最重要的信息才应该制成图表 对于用户来说 图表是一个强烈的信号 图表会将用户注意力引向到 您希望他们理解的信息上 食品车 App 的目标是 优化使用商户的运营效果 如果我们能用图表把交易清单 变成可操作的信息 食品车 App 使用者 将会喜欢这种优化 以下是我们知道对食品车车主 有帮助的一些关键信息 查看近期销售情况 了解受欢迎产品 知道每天售卖的最佳位置

当您设计您的 App 图表时 请记住图表应该引导用户 关注 App 中最重要的信息 既然我们已经确定了 我们想要传达的内容 来看看如何使用图表来实现这一点

用一个随时间变化的图表 来展示近期销售情况 再合适不过 可以使用柱状图 来显示过去 30 天中 每一天的销售总额 我们等会添加纵坐标 首先 它需要一个描述 来告诉用户该图表呈现什么

像“过去 30 天的销售额” 这样的标题标注了图表的元素 但并没有传达更多信息 我们如何总结所显示的信息呢？

图表应附有描述图表内容的文本 就算单独阅读文字 它也可以传达许多信息 加上售出的煎饼总数 标题就变成了一个自成一体的描述 现在用户可以从文本中 快速获得关键信息 而图表提供了更多详细信息

当图表不直观时 用一个完整的句子 来描述可以更容易被理解 例如：“过去 30 天的总销售额 为 1,234 个煎饼”

构建图表的另一种方法是解释数据 例如：“过去 30 天的销售额 增长了 12% 总计 1,234 个煎饼” 这将帮助用户理解 最近的销售水平是高还是低 是增加还是减少 这样可以使描述更有意义 特别是当对数据不熟悉时

这些方法中的每一种 都是创建图表的好方法 但这个总览图只是呈现 我们的销售数据的方式之一 我们还能做些什么来呈现这些交易？

尝试从其他角度整合细节 总结数据很重要 但当我们找到增加类别 或突出个人记录的方法时 图表就变成了多维的 以下是一些需要考虑的额外视角 在宏观层面 我们寻找描述整个数据集的方法 比如总值或平均值 我们也会查看数据的子集 这些可能是基于时间的 例如比较工作日和周末 或调查与一天时间相关的变化 其他方法可能会根据煎饼的风格 或销售城市对销售进行分类

在微观层面 我们关注单个数据点 最后一笔交易或最大一笔交易 是重要的小细节 您可能会想在图表中将其标注

越仔细地观察数据集 就会发现越多的细节 我们发现的一些数据 可能对食品车车主规划 他们的库存或销售地点有帮助 用这些细节来补充 最近的销售图表会很有用 为此 我们可以在图表下方 使用一组可点击的行 每行提供一个 汇总统计数据 点击后 图表将更新以匹配 我们可以显示每日平均值 或工作日与周末销售 或最佳销售日之间的差异 这些叠加层可能非常有用 但信息量如此之大 需要较大的图表才能有效工作

随着图表功能的增加 其大小也会随之增加 较小的图表往往是静态的 例子包括 Watch 的复杂功能 股票中的重复缩略图 以及健康指数趋势图 静态图表很少单独存在 它们往往在另一个视图中提供 更大图表的预览 因为静态图表通常很小 所以不需要网格线 标签或交互性 因为它们让用户觉得更多额外细节 只需要点击一下就能看到 交互式图表往往更大 并包含更多细节 就像股票和健康中的图表一样 交互式图表的宽度通常 与您的视图相同 但不是全高度 图表中包括轴线和标签 以便可以估计数值

在这种尺寸下 建议使用交互式图表 以获取图表中的精确数值 而且更改时间范围或时间幅度的功能 有助于用户浏览

最大和最具交互性的图表 可供深入调查数据 并且需要最大的垂直空间 随着图表变得越来越强大 逐步引入附加功能十分重要 您应该逐步呈现图表的层次性 以便用户选择 符合他们兴趣的信息级别

在导航层次结构中 使用较高的小型静态图表 为图表的扩展版本提供路径

当您在同一图表的 两个版本之间创建链接时 这个进程应该通过保留数值 背景和状态来保持连续性

请记住 当用户对图表表示兴趣时 他们会想看到更多 他们已经看到的东西 这意味着图表应保持其形状 并应保留早期视图中任何明显的数字

您可以添加信息 但显示不同的内容 可能会令用户失望或迷惑

在我们考虑不同大小图表的功能时 让我们再次访问食品车 App 以确定我们计划的图表的放置位置 我们目前有两个选项卡 一个专门用于下订单 另一个显示销售记录 这些记录是我们将要可视化的 因此用我们的图表来调整此视图 可以帮助了解数据

我们通过将销售移动到 “查看所有销售”导航元素 后面的单独视图来清除选项卡 现在 我们的图表有了一个突出的画面 在这里使用静态图表很合适 这让用户可以一眼看到数据 并决定是否要查看更多内容

这是显示近期销售额的静态图表 点击图表会出现 一个扩展的交互式图表 我们现在有完整的近期销售数据 此交互式图表 具有 30 天和 1 年的视图 层叠样式 和可点击的汇总统计 支持详细分析数据

在开发 App 时 请记住图表需要通过文本描述 来告知内容并需提供关键要点 数据中的细节可以 为您的图表增添丰富性 并且您应在 App 中逐步呈现 图表的层次性

现在我们来看看图表设计系统 当您的 App 包含多个图表时 您就已经创建了一个图表设计系统 在设计多个图表时 请记住以下几点

使用大家熟悉的图表 从常见的图表样式开始 有助于用户理解 如果用户已经使用过类似的图表 他们就更有可能理解您的图表 柱状图和折线图是大部分人 日常见到和使用的图表 而点状图不太常见 可能需要 额外的指南 以确保它被正确解释 如果您想做一些独特的事情 就应该介绍清楚 如活动的上线流程所示 活动圈介绍完毕后 它们被分开以显示移动 锻炼和站立

理想情况下 新图表是 App 的 核心 而不是补充 您突出显示一个新奇图表 会激发用户 去探索和理解它

在创建辅助图表时 熟悉的形式更重要 因为它们不会有同样关注度

差异很重要 图表之间的差异 是某事发生改变的信号 为了证明这一点 让我们从 最近销售图表的两份副本开始 我会慢慢更新右边的图表 来传达不同的信息 并且将展示设计是如何演变 以显示这些区别 首先 我将更改右侧图表的时间范围 它现在显示过去 12 个月的 销售额 而不是显示最近的销售额 我更改了描述并更新了图表 以显示 12 个月的数据 此修改只需进行很小的改动 如果我想更改右侧图表中 显示的数据类型 仅更改描述可能还不够 文本的这种更改很容易被用户忽略 因此需要进行更多的更改 为这些图表中的每一个 提供不同的颜色会有所帮助 现在 用户更容易 注意到这些图表是独特的 创造这种差异使现在用户更有可能 会去阅读描述文本

最后 我想更新右边的图表 显示过去 12 个月中 每个月的每日销售额范围 这需要同时更改描述 以及数据的表示方式

为了强调这一变化的重要性 可以修改柱形的样式 右边的图表现在传达了 一个不同的主题 不同的时间范围和不同的指标 设计有目的地与众不同 以确保用户注意到这些差异 我们可以将这些设计原则 应用于餐车 App 所需的 另外两个图表

为了补充最近的销售数据 我想添加另一个图表 来显示最受欢迎的煎饼款式 显示最受欢迎煎饼款式的一种方法是 比较每种煎饼的销售数据 由于我们对过去 30 天的 整体情况感兴趣 我们只需要一个柱状图 来比较煎饼款式的受欢迎程度

如果我把柱状图分开 可以更清楚地比较它们的大小 但这又看起来像一个时间序列图

通过水平柱状图 我可以突出 这张图表和近期销售图表之间的差异

水平方向也可以容纳更长的条形长度 而无需增高销售选项卡的条形高度 在这个预览图表中 我省略了标签 只关注顶部样式

在详细视图中 每个条形都带有标签 并且相对数值是可见的

在我们的最后一张图表中 我们希望显示 食品车每周每天运行的 两个城市的销售情况 为此 我们需要做一些专门的工作 此图表是一周中每天的销售额 在这种情况下 我们想单独查看每一天 这是在过去 30 天内在一周中 每一天的日均销售额 由于食品车在 库比蒂诺和旧金山都有运营 我们需要拆分这些条形 来代表每个位置 最后 我们将这些条形图转换为线条 以便查看每日的变化趋势 我已将此图表添加到销售选项卡 并添加了数据总结描述 在这种情况下 过去 30 天内的最佳销售日 是星期日 在旧金山 随后的详细信息页面是我们将添加到 App 中的最后一个图表 它用两条线形趋势提供了更多的 交互性和详细信息

现在 我们已经勾画出了一组 我们计划添加到 煎饼餐车 App 的图表 使用图表显示最近的销售额 热门产品 以及最热门的日期和地点 将显著提高此 App 的实用性

在开发 App 时 请记住使用常见的图表形式 来帮助用户理解 并有意在图表之间制造差异 来使用户更容易理解图表的不同 在这次讲座中 我们讨论了何时使用图表 如何使用图表以及它们在 图表设计系统中如何相互关联 应用这些图表设计原则 将帮助您在 App 中更清晰 且更具吸引力地传达数据 如欲继续学习图表设计 您可以观看“设计有效的图表” 或者对于 Swift Charts 的介绍 或是“Hello Swift Charts”