以图表形式组织数据可让信息传达更清晰并更具视觉吸引力。

一个有效的图表会突显数据集中的一些关键信息,帮助用户深入了解并制定决策。例如,用户可能会使用图表来:
若要了解如何设计图表以提升使用体验,请参阅数据图表化;有关开发者指南,请参阅 Creating a chart using Swift Charts。
图表由多个图形元素组成,这些元素描绘数据集中的值并传达这些值的相关信息。

标记是数据值的可视化展示。你可以通过提供一组或多组数据值,将每个值分配给一个标记来创建图表。若要指定你要显示的图表样式(如条形图、折线图或散点图),你可以选取标记类型,如条形、线或点(有关指南,请参阅标记)。在图表中描绘单个数据值的一般任务称为绘制,包含标记的区域称为绘图区。
为了描绘值,每种类型的标记都会使用由比例决定的视觉属性,比例将数字、日期或类别等数据值映射到位置、颜色或高度等视觉特征。例如,条形标记可以使用特定的高度来表示值的大小,使用特定的位置来表示值出现的时间。
为了向用户提供理解图表视觉特征所需的上下文,你可以提供几种不同形式的描述性内容。
你可以使用坐标轴来帮助定义由一组标记表示的数据的参考框架。许多图表会在绘图区的边缘显示一对坐标轴(一个水平轴和一个垂直轴),每个坐标轴代表一个变量,如时间、数量或类别。
一个坐标轴可包含作为参考点的刻度,其用于帮助用户在坐标轴上直观地定位重要的值,如 0、50% 和 100%。许多图表会显示网格线,每条线从刻度开始延伸到整个绘图区,以帮助用户直观地估计标记不在坐标轴附近的数据值。
你还有多种方法来描述图表元素,以帮助用户理解数据并突显你要传达的关键信息。例如,你可以提供标签来命名坐标轴、网格线、刻度或标记等项目,以及提供为使用辅助技术的用户描述图表元素的辅助功能标签。若要提供上下文和其他详细信息,你可以创建描述性标题、副标题和注释。你也可以按需创建图例,它描述了与标记位置无关的图表属性,例如使用颜色或形状来表示不同的值类别。
清晰且准确的描述可以使图表更易于理解;若要了解提高图表可访问性的其他方法,请参阅增强图表的可访问性。
根据你要传达的数据相关信息选择标记类型。部分最常见的标记类型有条形、线和点;有关此类及其他标记类型的开发者指南,请参阅 Swift Charts。
条形标记在图表中很有用,它可以帮助用户对比不同类别中的值,或者查看不同部分在整体中的相对比例。条形图尤其适用于帮助用户理解随时间变化的数据,每个值都可以表示一个总和,例如一天中的总步数。

线标记还可以显示值如何随时间而变化。在折线图中,一条线连接了一系列数据中的所有数据值。线的斜率揭示了数据值之间的变化幅度,并且可以帮助用户直观了解总体趋势。

点标记可帮助你将各个数据值描绘成差异直观的标记。点标记组可以显示数据的两个不同属性之间的关系,帮助用户检查单个数据值并识别离群值和群集。

考虑组合使用标记类型来使图表意图更清晰。例如,如果使用折线图来显示随时间的变化,你不妨在折线顶部添加点标记来突显单个数据点。组合使用点与线可以帮助用户了解总体趋势,同时还可以将他们的注意力吸引到单个值上。
根据图表的含义使用固定或动态的坐标轴范围。在固定范围内,坐标轴的上下界始终不会改变,而在动态范围内,上下界可随当前数据而变化。当特定的最小值和最大值对所有可能的数据值都有意义时,请考虑使用固定的范围。例如,用户会希望显示电池当前电量的图表能包括最小值 0%(完全耗尽)和最大值 100%(完全充满)。

相反,当可能的数据值变化很大,并且你想让标记填充可用的绘图区时,请考虑使用动态范围。例如,“健康” App 的“步数”图表中 Y 轴范围的上界会发生变化,以使特定时段内的最多步数最接近图表的顶部。

根据标记类型和图表使用情况定义下界的值。例如,当使用 0 作为 Y 轴的下界时,条形图的效果会很好,因为这样做可以让用户直观地比较各个条形的相对高度,以合理估计它们的值。相反,有时将下界定义为 0 可能会使值之间有意义的差异更难以察觉。例如,心率图表始终使用 0 作为下界可能会模糊静息心率和活动心率读数之间的重要差异,因为此类差异出现在远离 0 的范围内。
在坐标轴的刻度和网格线标签中优先使用熟悉的值序列。例如,如果使用常见的数字序列(如 0、5、10 等),用户可能一眼就知道每个刻度值等于前一个值加 5。尽管像 1、6、11 等此类序列遵循相同的规则,但它并不常见,因此大多数用户可能会花费额外的时间来思考值之间的区间。
根据图表的用例定制网格线和标签的外观。过多的网格线在视觉上会让人眼花缭乱,分散用户对数据的注意力;过少的网格线则会使标记的值难以估计。为了确定图表元素的合适密度和视重,需要考虑以下因素:图表在界面中的上下文、支持的交互方式以及图表所能支持的任务。例如,如果用户可以通过与图表交互来检查单个数据点,那么你可以使用更少的网格线和浅色标签颜色来确保数据在视觉上保持突出。
编写描述以帮助用户在查看图表之前了解其作用。当你提供描述图表目的和功能的多信息标题和标签时,即为用户提供了深入了解和细看详细信息之前所需的上下文。以这种方式提供上下文对于“旁白”用户和具有某种认知障碍的用户而言尤其重要,因为他们在决定深入调查之前,会先依赖于你的描述来理解图表的目的和主要信息。
总结图表的主要信息,使其对所有人都易于理解和有用。虽然使用图表的一个主要原因是显示支持主要信息的数据,但总结关键信息以便用户可以快速掌握仍至关重要。例如,“天气”提供了标题和副标题,简洁地描述了未来一小时的预期降水量,为用户提供了最重要的信息而无需其细看图表的详细信息。

建立一致的视觉层次,以帮助传达各种图表元素的相对重要性。通常你会希望数据本身是关注的重点,同时让描述和坐标轴提供额外的上下文,但不与数据形成竞争关系。
在紧凑环境中最大化绘图区的宽度,以给用户足够空间自在地细看图表。为了使重要的数据良好契合给定的宽度,请确保垂直轴上的标签在不丢失清晰度的前提下尽可能短。你还可以考虑在图表的其他区域(如标题)描述单位,并在绘图区内放置较长的坐标轴标签(如类别名称),前提是这样做不会遮挡重要的信息。
使 App 中的每一个图表都可无障碍访问。与所有信息图一样,图表需要让每个人都可以完全无障碍访问,无论他们以何种方式感知内容。例如,支持描述屏幕内容的“旁白”是必不可少的,它可以帮助用户在无需查看屏幕的情况下获取信息和导览(若要进一步了解“旁白”,请参阅视力)。除了提供描述图表组件的辅助功能标签外,你还可以使用“音频图形”增强“旁白”体验。Audio graphs 为“旁白”提供图表信息,“旁白”会构建一组以语音方式展示图表数据值及其趋势的声音,还可让你呈现提供额外上下文的高级文本摘要。有关指南,请参阅增强图表的可访问性。
让用户进行有意义的数据交互,但不需要通过交互才能显示关键信息。以“股市”为例,用户通常对股票在某段时间内的表现最感兴趣,因此该 App 会显示一个折线图以描绘用户所选时间段内的表现,例如一天、三个月或五年。如果用户想查看更多详细信息,他们可以在折线图中拖移垂直指示线以显示所选时间的值。
让每个人都可以轻松地与图表交互。有时图表标记太小导致无法用手指或指针定位,使得运动控制能力较弱的用户难以使用图表,也让所有用户感到不适。在这种情况下,可以考虑扩展点击目标以包括整个绘图区,从而让用户在整个区域内滑动以显示各种值。
当使用键盘命令(包括全键盘控制)或切换控制时,使交互式图表易于导览。默认情况下,这些输入类型往往以线性序列访问单个屏幕元素,例如数据文件中的值序列。在图表中提供自定义导览体验有两种主要方式。第一种方式是使用辅助功能 API(例如 accessibilityRespondsToUserInteraction(_:))通过图表的信息指定一个可预测的逻辑路径。例如,你不妨让用户沿着 X 轴导览,而不是来回跳转。第二种方式(在展示超大型数据集时特别有用)是让用户在值的子集之间移动焦点,而不是导览所有单独的数据点。请注意,这两种自定义方式还可以增强“旁白”使用体验,即使你的图表不是交互式的。有关指南,请参阅辅助功能。
帮助用户注意图表中的重要变化。例如,如果用户没有注意到标记或坐标轴的变化,他们可能会误解图表。以动画方式体现此类变化可以帮助用户注意到它们,但你还需要以其他方式突显这些变化,以确保“旁白”用户和关闭动画的用户知道这些变化。
将图表与周围的界面元素对齐。例如,将图表的前缘与屏幕中其他视图的前缘对齐通常效果很好。在图表中保持前缘整洁的一种方式是在每条垂直网格线的尾部显示其标签。你还可以考虑将 Y 轴移到图表的尾部,这样刻度标签就不会突出于图表的前缘。如果最终得到的标签看起来与任何内容都无关,那么你可以使用刻度将其锚定到网格线上。
与界面的所有其他部分一样,在图表中使用颜色可以帮助你阐明信息,体现你的品牌以及提供视觉连续性。有关以广受青睐的方式使用颜色的通用指南,请参阅包容性颜色。
避免在图表中仅依靠颜色来区分不同的数据块或传达至关重要的信息。在图表中使用有意义的颜色可以很好地突出差异和关键详细信息,但重要的是要加入其他方式来传达此类信息,这样用户无论是否能识别颜色,都可以使用你的图表。在颜色以外进行补充的一种方式是使用不同形状或图案来描绘数据的不同部分。例如,除了使用红色和黑色或红色和白色外,“健康”还在点标记中使用了两种不同的形状,以代表血压的两个组成部分。

通过在连续的颜色区域之间添加视觉分离来帮助理解。例如,在标记堆叠于单行或单列的条形图中,通常会为每个标记分配不同的颜色。在这种设计中,于标记之间加入分隔符可以帮助用户区分各个标记。

使用 Swift Charts 创建图表时,除了描述其值的每个标记(或每组标记)都有一个默认辅助功能元素外,还会有一个默认的 Audio graphs 实现方法。
考虑使用“音频图形”为“旁白”用户提供有关图表的更多信息。你可以通过提供“旁白”朗读的图表标题和描述性摘要来自定义 Swift Charts 提供的默认“音频图形”实现方法,以帮助用户理解图表的目的和主要特性。如果不使用“音频图形”,则需要提供图表的结构和目的的概述。例如,你需要标识图表的类型(如条形或折线),解释每个坐标轴代表的内容,以及描述坐标轴上下界等详细信息。
重要信息
与需要一个描述性辅助功能标签的图像不同,图表通常需要为每个重要元素或交互式元素提供一个辅助功能标签。根据图表的目的及其标记的范围和密度,你需要决定是否有必要描述每个标记,或者描述标记组能否改善辅助功能体验。在某些情况下,使用单个辅助功能标签为图表提供简洁且高级的描述是有意义的,例如在可显示图表更详细版本的按钮中使用图表的小版本。
编写支持图表目的的辅助功能标签。例如,“地图”使用代表某一段路线海拔变化的图表展示骑行路线的海拔。该图表的目的是让用户了解整个路线的地形,而不是提供个别的海拔高度。出于此原因,“地图”提供了辅助功能标签,总结了某一段路线的海拔变化,而不是提供各个时刻的标签。相比之下,“健康”为“步数”图表中的每个条形提供了辅助功能标签,因为该图表的目的是为用户提供各跟踪时段的实际步数。

下方指南可帮助你为图表元素编写有用的辅助功能标签。
通过辅助技术隐藏坐标轴和刻度的可见文本标签。坐标轴和刻度标签可帮助用户直观地评估图表的趋势以及估计标记值。“旁白”用户可以通过辅助功能标签和“音频图形”来获取标记值和趋势信息,因此他们通常不需要可见标签中的内容。
无针对 iOS、iPadOS、macOS、Apple tvOS、visionOS 的额外考量因素。
通常应避免在 watchOS App 中需要复杂的图表交互。尽可能地优先显示用户一眼就能看到的有用信息,并在有价值时支持简单的交互。如果你还提供了另一个平台上的 App 版本,请考虑用其显示更多详细信息并支持与图表的更多交互。例如,watchOS 中的“心率”会显示佩戴者当天的心率数据图表,而 iPhone 上的“健康” App 则会显示多个不同时间段的心率数据,并可让用户细看单个标记。
有0人收藏了本文