设计实用高效的图表

♪ ♪

Halden: 大家好 我是 Halden Lilian: 我是 Lilian Halden: 今天 我们将向开发者展示 如何设计一张有效的图表 Lilian: 图表是能让您的 App 更具吸引力和信息量的 强大工具 人们可以用天气预报图表 来制定计划 依靠股价图表来进行财务决策 用健身数据来反映自己的活动 并设定新的目标 Halden: 当您在 App 中设计图表时 您首先需要设计 App 的体验 通过确定 App 的需求 您可以决定何时使用图表 如何使用图表 以及哪种设计系统能统一图表

要了解这一设计过程中 重要的第一步 请参阅今年的讲座 “Design App Experiences with Charts” Lilian: 在这次演讲中 我们将深入到 设计过程的下一部分 如何设计图表 特别是设计一个有效的图表 这意味着专注于 您想要交流的方面的图表 它要易于理解 对残疾人来说也易于使用 为此 我们将在一个 App 中 为在旧金山和库比蒂诺 销售国际煎饼的 餐车设计图表 这个成品 App 有一个完整的图表系统 用于辅助计划并管理煎饼的销售 今天 我们将专注于 如何设计这些图表之一 它可视化了过去 30 天的煎饼销量 Halden: 好的图表设计 始于确定图表的目标 对于我们 App 的这个页面 我们的目标是传达 过去 30 天里煎饼的销量如何 这样的目标可以有很多方向 对我们的餐车老板来说 能看到最近的销售模式可能很有用 这能使他们 了解销售的波动情况或范围 从而了解这些波动有多大 确定值对于调查特定日期可能很有用 其他有用的数据可能为 最大销量 异常天数 或者一周中天数或地点之间的比较 这样的例子不胜枚举 对于我们的餐车车主来说 这些数据中哪一个最重要 有效的图表集中于一些关键信息上 设计图表时要有意图 对于煎饼的销售 我们的餐车老板 主要想了解他们在特定时间 和特定日子的销售情况 这意味着我们将专注于交流模式 范围和值 我们是如何从这三个优先事项中 得出这个图表的呢 让我们一步一步地了解设计过程 Lilian: 我们的设计过程包括五个主题 标记 即图表的视觉构件 如柱状图中的柱形 轴线 它们会为这些标记提供框架 描述 它会使图表更易于理解 易于解释 交互 这使人们能对数据 进行更深入的探索 它对可访问性至关重要 以及颜色 它可以增加个性 而且 正如我们将展示的第二张图表 它还能提高清晰度 Halden: 我们的第一步是 确定我们的图表需要什么形式 使用被称为标记的可视化构建模块 “标记” 是柱状图中的柱形 折线图中的直线及散点图中的点 它们是表示数据项的可视化元素 标记有许多种 使用任何一种标记 您都能有丰富的方式来表示数据 以柱形图为例 您可以将它们排列起来 以表示数据随时间的变化 您也可以把它们堆叠起来以显示比例 不同类别是如何累加的 或者您可以把它们并排放在一起 来比较不同类别之间的值 这些只是众多使用标记 表达数据的丰富方式中的几个例子 那么 对于我们的图表来说 哪些选项比较合适呢 当涉及到标记时 您需要针对您的目标和数据进行设计 正如我们之前所决定的 我们的图表应该集中在 过去 30 天煎饼销售的三个方面 模式 范围和个体值 在选择标记时 我们要密切注意模式 这对我们的餐车老板很有用 这能让他们看到销售的 任何波动或变化轨迹 首先是横轴上的时间 以及纵轴上的煎饼销量 这些轴是不完整的 我们稍后再把它们填好 一个标记选择是用点 来代表每天的煎饼销量 当我们设想像这样平滑的数据图表时 点图看起来很棒 但真实的数据很少会如此完美 在真实的数据中 我们可以看到 使用点很难找出任何模式 尽早使用真实数据 测试您的设计是很重要的 虽然点标记非常适合 揭示一些深层模式 比如识别数据中的异常值或集群 但我们的需求还要求了别的东西 为了使销售模式更易于发现 我们可以用线标记连接销售计数 线条很好地表现了变化的速率 在这里 模式和轨迹是清晰的 但是 如果在一个月内 我们的餐车需要隔日关闭五天呢 在这种情况下 销售模式就变得不那么清晰了 因为连接远距离值的片段 变得比值本身更为突出 记住要针对数据中的各种场景 进行设计 在我们的图表中 柱形标记是一个更灵活的选择 在这里 0 是可见的 不会造成干扰 这张图读起来也很直观 白色越多 销量越高 由于销售是累计的 所有柱形的视觉重量会 直接对应过去 30 天内的销量

Lilian: 太好了 我们已经选好了一个标记 使煎饼销售的模式很容易看清 但是 我们还需要遵循 易访问设计的一个重要原则 对于以视觉方式显示的所有信息 还需要设计 如何以非视觉方式表示它 换句话说 您需要确保这些标记 和它们所表示的信息 也可以通过 VoiceOver 来访问 VoiceOver 是一个屏幕阅读器 它可以让人们通过盲文 或语音阅读屏幕上的信息 这样盲人和其他人就可以在 不看的情况下使用 App

VoiceOver: 1234 个煎饼 Lilian: 您可以使用 VoiceOver 来浏览内容 比如图表上的元素 VoiceOver: 5 月 8 日 54 个煎饼 5 月 9 日 36 个煎饼 1 年 两个按钮中的第二个 Lilian: 您也可以用它来互动 VoiceOver: Selected: 一年 二选二 Lilian: 通过一个叫 Audio Graphs 的功能 VoiceOver: Audio Graph Lilian: 播报图表 VoiceOve:r 播放 Audio Graph

完成 Lilian: 为了使您图表上的标记不可见 您需要 1 设计 VoiceOver 如何在数据值上导航 2 使用 Audio Graphs 方便的是 使用 Swift Charts API 实现的图表 会自动包括标记的可自定义 可访问标签 和 Audio Graph 的执行 要了解更多关于 Audio Graphs 和 Swift Charts 的知识 请查看开发者文档 去年的演讲 “Bring accessibility to charts in your App” 以及今年的演讲 “Hello Swift Charts” 太棒了 我们为我们的目标和数据设计了标记 并使它们在 VoiceOver 中可访问 通过我们的决定 我们解决了 “过去 30 天里 煎饼的销量如何”这个问题的一部分 尤其是销量模式 现在我们的餐车老板 可以看到他们最近销量的波动了 但是这些波动的范围 和特定日子的数值 是什么呢 Halden: 为此 我们将设计轴线 轴框架标记为它们的值提供了参考 比如 在我们的煎饼销量图表中 当我们用开始和结束日期标记横轴时 很明显 我们的图表显示的是 从 5 月 8 日到 6 月 6 日的 30 天 那么纵轴呢 这些值完全取决于餐车的销量 对于这样的轴线 考虑范围是很重要的 范围可以是固定的 也可以是动态的 一个固定范围的例子是 设置 App 中电池图表的纵轴 我们知道电池电量 总是 0 到 100% 将纵轴固定在这个范围 可以帮助我们一眼看到电池是满的 空的 还是介于两者之间的某个位置 虽然改变这个图表的纵轴范围 会让人感到困惑 但对于其他图表来说 这可能是必要的 想想健康 App 中的步长计数图表 它会用一个动态范围 由于没有固定的最大步长数 动态调整纵轴的范围 来拟合数据是有意义的 这样 即使步数很低 柱形图也可以充分利用 可用的垂直空间 使波动更容易被看到 让我们回到煎饼销售图表 和步数一样 餐车能卖出多少煎饼 是没有限制的 因此 让我们使用动态范围 来自动调整 纵轴的上限 以适应数据 注意下限仍然是 0 当使用柱形标记时 这样做通常是一个好主意 因为它会保持柱形的高度有意义 这样一来 高两倍的柱形图 就代表了两倍的销量 虽然每个轴的下限和上限标签 是有帮助的 但我们仍然需要更多的结构 来解释图表中间的销量 这就引出了我们的下一个概念 我们需要调整轴网格线 和标签的密度 网格线会为您提供参考点 以估计标记的值 网格线越多 估计这些值就越容易 有些图表根本不需要网格线和标签 比如健康 App 中的趋势盘 这些图表往往是另一个视图中 对更大图表的前瞻 所以您只需要 了解数据的模式就可以了 网格线和标签会增加干扰 网格线和标签会出现在 后续的详细图表中 您可能会希望 更精确地分析它们中的值 早些时候 我们指出我们的餐车所有者 想要检查他们的销量范围和值 现在 我们有两条水平网格线 一条在 0 处 另一条大约在 当月最大销量处 这对于估计图表中间的 销量范围太少了 同时 太多的网格线和标签 会让人注意力分散 在这里 有七条水平网格线 可能会让人不知所措 要平衡这些因素 选择合适的密度 由于我们的图表的背景和使用目的 更有效的方法是 使用约四条水平网格线 并随着轴范围的变化进行调整 请注意 当我们放置 这些网格线和标签时 我们要使用直观的值 使图表更容易理解 在本例中它是 20 的倍数 同样地 让人们以七天为单位 来看时间是很直观的 这就给了我们 30 天为一个周期的 5 条网格线 因此 我们通过考虑它们的范围 及自定义网格线 和标签的密度来设计坐标轴 为了让我们的图表更有效 我们已经前进了很长一段路 但图表是复杂的视觉元素 我们的例子在变得易于理解前 还需要一些工作 我们该如何以一种 快速而直观的方式 传达标记和轴线背后的含义呢 Lilian: 这就引出了 我们的下一个话题 描述 描述对于构建图表的目的 并使其变得易于理解非常重要 在图表之前使用说明或文本 来提供背景 使图表更容易理解 它们可以清楚地表明我们的图表 反映了过去 30 天煎饼的销量 这个文本可以是简短的 并且应该是一个图表周围的 用户界面的一部分 当我们在 App 的 UI 中 查看这张图表时 屏幕标题 “总销售额” 已经提供了一些上下文 而分段控件上的 “30 天” 标签 则快速确定了我们的时间范围 这是个开始 我们还需要说明纵轴显示的是什么 我们看到的是销售额吗 还是煎饼的数量 一种解决方案是添加一个轴标签 我们可以在纵轴上方写明 “已售出的煎饼” 但它很小且偏到一边去了 我们希望这张图表的意义显而易见 另一种方法是使用标题 将数据置于背景中 通过使用 “售出的煎饼” 作为图表的标题 图表的意义居于正前方且在中心 提供这种上下文对于构建图表 非常重要 我们可以通过总结图表的主要结论 来更好地说明这些内容 很多图表都使用了这种方法 例如 天气中的降水图表上的文字 描述了主要情况 在这个例子中 它是 “预测有小雨 预计小雨将在 9 分钟后开始 持续 36 分钟”

有很多方法来展示要点 从句子描述 到对比历史数据的图示符 对于我们的图表 我们将采用一种简单的方法 让我们将图表标题 改写为 “总销量 1234 个煎饼” 从而为我们的图表 作出一个主要结论 这一说明以具体的值 为我们的图表奠定了基础 并总结了最关键的信息 提供与数据相关的描述 并总结关键要点 有助于读者理解图表 这使得图表对每个人都更易于理解 它设置了期望或查找的内容 这对某些检查图表细节 特别耗时或有挑战的残疾人 特别有帮助 说到可访问性 在图表中使用 Audio Graphs 为 VoiceOver 添加了重要的说明 有了 Audio Graphs VoiceOver: Audio Graph Lilian: VoiceOver 可以用非视觉的方式 描述坐标轴是什么 VoiceOver: 描述图表 x 轴是时间 y 轴是销量 有一个数据系列 Lilian: Audio Graphs 还提供了 一些关于数据的摘要 包括一个您可以自定义的摘要 这些描述 尤其是对 x 轴和 y 轴的描述 对于图表的非视觉传达至关重要 如果 Audio Graphs 不可选 请确保 VoiceOver 仍然可以 通过其他方式直接访问 这些类型的描述 比如通过可访问文本标签 Halden: 现在我们提供了上下文 总结了主要的要点 并使用了 Audio Graphs 或类似的描述源 我们的图表包含了所有重要的部分 但我们可以通过互动 让它变得更高效 您可以设计交互 使人们能够更深入地探索 并理解他们的数据 例如 您可以使用交互 来突出显示图表的各个部分 以探索它们的数据 如何适合更广泛的背景 或在日 周 月和年之间切换 我们有机会通过互动 来提升我们的煎饼销量图表 我们的餐车老板会发现 能看看某一天 到底卖出了多少煎饼非常有用 我们可以通过一个交互式工具提示 来提供这个功能 它会允许我们触摸图表 来突出显示并读取这些特定的值 为了让这些基于触摸的互动 更容易使用 要确保使用了较大的触摸目标 因此 不要在我们的图表上 设置与标记相同大小的触摸目标 而要在图表的整个高度 添加填充和拉伸目标 这会使我们的工具提示更易使用 因为您可以触摸图表的任何部分 包括条形图上方的空白区域

Lilian: 互动不仅仅是触摸 人们使用各种各样的其他方式 与设备互动 这取决于环境或残疾等因素 所以您需要为多种类型的输入 进行设计 使图表交互变得易于使用 换句话说 对于您为触摸 或鼠标点击设计的每个交互 您需要为键盘 语音控制 开关控制 和 VoiceOver 等输入设计相同的体验 当您设计这些交互时 让屏幕上的变化可见 很重要 比如将 Switch Control 或 VoiceOver 的聚焦指示器 调整得大一点 这与我们设计触控目标的方法相同

为 VoiceOver 提供支持的一部分 是您还需要设计良好的 可访问性标签 回想一下在设计标记时 我们是如何确保 VoiceOver 能够导览图表的数据值的 我们这样做是为了当 VoiceOver 导航到其中一个条形图上时 它会读出诸如 “6 月 1 日 36 个煎饼”这样的值 让我们看看是什么 让这个标签成为了一个好的设计 它很简洁 我们不重复不必要的信息 比如 Audio Graphs 已经描述过的 坐标轴名称“时间”或“销售额” 我们要拼出整个单词而不使用缩写 这样 VoiceOver 读出的 就是 “6月” 而不是 “6” 或 6 横线 1 我们要清楚地表明 36 是煎饼的数量 我们还要将与上下文相关的数据值 在本例中是日期 放在前面 这种排序使快速查找特定值 变得更容易

VoiceOver: 5 月 27 日 5 月 28 日 5 月 29 日 5 月 30 日 41 个煎饼 Lilian: 这也使数据更容易解释 尤其是您可以跳到 图表的不同部分 首先获得上下文 让您知道您在哪里

您设计的标签类型 很大程度上取决于图表的目标 例如 地图上关于骑行路线 海拔变化的图表 并不显示单独的数值 而是显示一条路线海拔的 增加和减少模式 并且使用了许多竖条形图 太多以至于无法单独浏览 一个精心设计的可访问性标签 可以在一段条形图上标注 “从 3.6 英里到 4.4 英里 爬升100英尺 下降5英尺” 相反 如果一个图表 是一个按钮内的一个小预览 用于打开同一个图表的更多细节 那么用一个标签总结整个按钮 图表 以及所有内容 可能是有意义的 既然我们已经将交互设计为 图表的重点 可使用性 和可理解性服务 那么我们还有一个话题需要谈到 Halden: 颜色 颜色可以增加图表的个性 增强图表的清晰度 到目前为止 我们的设计都是黑白的 颜色可以让我们的图表 在 App 中更加醒目 但它也能传达更多信息 您可以用颜色来区分类别 比如健身 App 中的三个活动环 您还可以用它来传达强度 比如天气预报中的炎热程度 您甚至可以去掉颜色 来吸引人们对图表特征的注意 在这里 健康 App 会这样做 以突出您一天内的最小和最大心率

考虑使用颜色来增强效果 最好使用颜色使图表更容易理解 而不是将其作为 传达关键信息的唯一手段 为了帮助解释 让我们使用一个 跟踪 App 中两辆餐车的场景 一辆在旧金山 一辆在库比蒂诺 我们想要修改我们的总销售图表 以便比较这两个地点的销售情况 我们要如何做到呢 我们可以用一条折线表示 每个城市的销售情况 但是我们无法区分 哪条线属于哪个城市 没有标签或布局用于区分两者 我们可以通过在每一行上 放置一个符号来标记每个日子 以阐明这种关联 在这里 我们用圆圈代表旧金山 用正方形代表库比蒂诺 注意 我们现在需要一个图例 我们可以添加颜色来增强这种差异 重要的是在这里的符号上添加颜色 有些色盲患者 可能无法分辨这些线条 这种做法对于 “不以颜色区分” 这样的系统设置尤其重要 在选择颜色来表示数据时 有几点需要考虑 首先 要考虑颜色如何传达意思 例如 红色和绿色 会表示低电量和充电电量 文化也可能影响颜色的含义 在美国 颜色在股票方面的意义是 绿色代表收益 红色代表损失 然而 在中国等一些国家 人们的预期正好相反 红色代表收益 绿色代表损失

对于我们的图表 蓝色和绿色系统工作良好 在不同城市的上下文中 这些颜色没有明显的意义 但是如果我们想自定义颜色 来匹配 App 的外观和感觉呢

当为类别选择颜色时 要平衡视觉重量 如果一种颜色凌驾于另一种颜色之上 就可能隐含层次 比如 我们一开始用深紫色 代表旧金山 用鲜艳的粉色代表库比蒂诺 注意 在这种情况下 库比蒂诺的突出的粉色 与旧金山的暗淡的紫色相比 库比蒂诺看起来更重要 我们可以通过降低饱和度和明度 来解决这个问题 这样好多了 虽然这些颜色选择还需要一些改进 但现在它们的权重相等 并不会暗示一个城市是主要的 而另一个是次要的 注意 调整颜色的视觉重量 是一个工具 有时候 当我们想要将注意力 吸引到图表中的特定值或部分时 使用更有视觉分量的颜色会很有用 健身 App 中的趋势图表 就会使用这种策略 来突出您最近的活动 在选择调色板时 选择有独特视觉特征的颜色 以提高可访问性和可读性也很重要 一条好用的规则是 选择那些容易通过名称区分 并且对比良好的颜色 所以我们不再用代表旧金山的紫色 和代表库比蒂诺的紫粉色 我们用紫色和绿色 我们还要确保它们不仅彼此不同 而且背景也不同 确保颜色之间 以及图表的其他部分 具有很高的对比度 使视觉障碍人士更容易阅读图表 并且使它的整体设计 对每个人来说都更好用 记住 对于色盲的人 也要尝试让您的颜色与众不同 您可以用色盲效果滤镜来检查您的选择 最后 通过设计颜色 来确保您的图表能符合系统设置 适应深色模式 浅色模式 以及增加对比度模式 好了 让我们回顾一下 我们今天做了什么 Lilian: 我们为我们的煎饼餐车 App 设计了一个图表 为此 我们选择了能最有效地 传达我们目标的标记 并在 VoiceOver 中表示它们 我们设置了我们的轴范围和网格线 以便更好地清晰传达值 添加了便于人们了解背景 和概述的说明 结合了互动 按需提供细节 在我们的煎饼图表上方 添加了一抹颜色作为装饰 并进一步使用颜色 来增强我们的第二个图表 以比较我们的煎饼 在不同城市间的销售情况 在这个过程中的每一步 我们都要做出设计决策 以确保我们的图表是重点突出的 易于理解的 可访问的 换句话说 我们做了一个有效的图表 Halden: 记住 我们设计的图表 是 App 丰富背景下的 整个图表系统的一部分 您可以使用相同的设计过程 来制作关于煎饼的其他图表 非常棒 我这会儿都想吃煎饼了 Lilian: 是啊 我也是

Halden: 感谢收看