苹果出了个图表设计官方教程，还不错

苹果全球开发者大会 WWDC 2022 对系统的图表功能做了很多优化，为了鼓励大家多多使用，还贴心地整理了一个教学视频，一步一步向大家展示如何设计图表：

https://developer.apple.com/videos/play/wwdc2022/110340/

这么好的视频却没有中文字幕，所以我就帮大家把主要知识点整理出来，方便大家观看。

煎饼销售案例

假设你要为一家煎饼店设计最近 30 日销售数据图表，会怎么做？

首先想想看图表的人，可能对哪些信息感兴趣：数据趋势、范围、数值、最大值、极端值、对比……

为了更好地展示以上信息，接下来我们将从 5 个纬度来讲图表设计：

🧩 图形

🌡️ 坐标

🗒️ 说明

👋 交互

🌈 色彩

🧩 图形

可选的图表类型数量很多：

但是对于销量这种比较简单的数据，用柱状图、折线图或点阵图就够了：

那么具体该用哪种呢？

点阵图的优势是精准，但缺点是如果数据量少又波动大，容易变成“一盘散沙”，看不出任何趋势。而销售量的趋势变化很重要，就必须排除点阵图了。

折线图很容易看出趋势，但是如果数据波动过大，会出现过多线条干扰视线。煎饼店的日销量很容易受到天气、节假日等突发事件的干扰，一不小心就会像下图那样的干扰波型，所以也要排除。

柱状图既方便看到具体的数据，又能展现出一定的趋势，很适合用在这里。

🌡️ 坐标

确定坐标之前，先想想最大值和最小值是固定的吗？

坐标跨度

固定坐标的最大值和最小值都是确切的，例如电量图表，数值永远在 0-100% 之间：

动态坐标的跨度，则会根据数值自动变化，以确保图形既不会超出坐标轴范围，也不会因为太小而看不清。

纵坐标最大值为 3,000

纵坐标最大值为 1,500

煎饼店近 30 日销售额的数值跨度是难以预估的，所以最好使用动态跨度。

刻度数量

因为不可能在每根柱子上标数字，那样会过于密集，所以刻度是有必要的。

刻度过少不好，阅读图表时会难以估算每根柱子的值：

刻度过多也不好，太多线条会干扰视线：

可能有的图表还需要其它辅助刻度：

对于煎饼店销售额来说，适当的几个刻度就足够了：

🗒️ 说明

光看一张图表是无法理解的，肯定得要有文字辅助说明。

刻度单位是一种方法，不过文字太小了，像下图这样还是看不清。

图表标题会更清晰一些：

如果在标题加上数值，阅读效率会更高：

如果有必要，还可以加上图表描述：

👋 交互

大量的数据，要通过小小的图表来展示，肯定得提供查看更多的交互操作。

例如下面的心跳图，可以通过页签或列表选项，来查看特定时间段和特定时间跨度的数据：

另外，允许点击查看精确数字也是重要的交互功能：

要注意的是，操作区域必须足够大，才能让触摸屏用起来更加方便：

🌈 色彩

和黑白图表相比，有颜色的图表看起来更美观：

上色前

上色后

色彩在图表里更重要的作用是承载信息：

用颜色代表信息类型

用颜色代表气温高低

用颜色代表重点信息

尤其是用图表进行数据对比时，颜色会起到至关重要的作用：

要选择正确的颜色，你需要从含义、主次和搭配出发：

含义

例如国内的股价图中，红色上涨绿色下跌，这其实是一个特例。在西方国家，应该是绿色上涨红色下跌。

所以在为海外市场设计图表时，这些差异要考量在内。

主次

重要程度相似的两组数据，使用的颜色应该看起来同样显眼。

例如下面两条折线，容易让人误把紫红色当成辅助信息。

降低紫红色的明度后，二者看起来平衡多了：

当然，如果你就是想要突出其中一部分数据，也可以利用色彩强调：

搭配

下面这两条折线看起来确实很平衡，但问题颜色太深，在深灰色背景上不够突出：

把颜色调亮之后，好多了：

然而，图表的背景色可能会随着系统而变化，为了让图表在深色和浅色模式都好看，你可能要提供不止一套颜色：

想要学习或者练习体验/交互设计的朋友，可以了解一下「体验设计学习社」。

如果你只是想要多认识一些同行，也可以加入我们无广告的纯粹体验研讨微信群：