苹果出了个图表设计官方教程，还不错
苹果全球开发者大会 WWDC 2022 对系统的图表功能做了很多优化，为了鼓励大家多多使用，还贴心地整理了一个教学视频，一步一步向大家展示如何设计图表：
https://developer.apple.com/videos/play/wwdc2022/110340/
这么好的视频却没有中文字幕，所以我就帮大家把主要知识点整理出来，方便大家观看。
煎饼销售案例
假设你要为一家煎饼店设计最近 30 日销售数据图表，会怎么做？
首先想想看图表的人，可能对哪些信息感兴趣：数据趋势、范围、数值、最大值、极端值、对比……
为了更好地展示以上信息，接下来我们将从 5 个纬度来讲图表设计：
🧩 图形
🌡️ 坐标
🗒️ 说明
👋 交互
🌈 色彩
🧩 图形
可选的图表类型数量很多：
但是对于销量这种比较简单的数据，用柱状图、折线图或点阵图就够了：
那么具体该用哪种呢？
点阵图的优势是精准，但缺点是如果数据量少又波动大，容易变成“一盘散沙”，看不出任何趋势。而销售量的趋势变化很重要，就必须排除点阵图了。
折线图很容易看出趋势，但是如果数据波动过大，会出现过多线条干扰视线。煎饼店的日销量很容易受到天气、节假日等突发事件的干扰，一不小心就会像下图那样的干扰波型，所以也要排除。
柱状图既方便看到具体的数据，又能展现出一定的趋势，很适合用在这里。
🌡️ 坐标
确定坐标之前，先想想最大值和最小值是固定的吗？
坐标跨度
固定坐标的最大值和最小值都是确切的，例如电量图表，数值永远在 0-100% 之间：
动态坐标的跨度，则会根据数值自动变化，以确保图形既不会超出坐标轴范围，也不会因为太小而看不清。
纵坐标最大值为 3,000
纵坐标最大值为 1,500
煎饼店近 30 日销售额的数值跨度是难以预估的，所以最好使用动态跨度。
刻度数量
因为不可能在每根柱子上标数字，那样会过于密集，所以刻度是有必要的。
刻度过少不好，阅读图表时会难以估算每根柱子的值：
刻度过多也不好，太多线条会干扰视线：
可能有的图表还需要其它辅助刻度：
对于煎饼店销售额来说，适当的几个刻度就足够了：
🗒️ 说明
光看一张图表是无法理解的，肯定得要有文字辅助说明。
刻度单位是一种方法，不过文字太小了，像下图这样还是看不清。
图表标题会更清晰一些：
如果在标题加上数值，阅读效率会更高：
如果有必要，还可以加上图表描述：
👋 交互
大量的数据，要通过小小的图表来展示，肯定得提供查看更多的交互操作。
例如下面的心跳图，可以通过页签或列表选项，来查看特定时间段和特定时间跨度的数据：
另外，允许点击查看精确数字也是重要的交互功能：
要注意的是，操作区域必须足够大，才能让触摸屏用起来更加方便：
🌈 色彩
和黑白图表相比，有颜色的图表看起来更美观：
上色前
上色后
色彩在图表里更重要的作用是承载信息：
用颜色代表信息类型
用颜色代表气温高低
用颜色代表重点信息
尤其是用图表进行数据对比时，颜色会起到至关重要的作用：
要选择正确的颜色，你需要从含义、主次和搭配出发：
含义
例如国内的股价图中，红色上涨绿色下跌，这其实是一个特例。在西方国家，应该是绿色上涨红色下跌。
所以在为海外市场设计图表时，这些差异要考量在内。
主次
重要程度相似的两组数据，使用的颜色应该看起来同样显眼。
例如下面两条折线，容易让人误把紫红色当成辅助信息。
降低紫红色的明度后，二者看起来平衡多了：
当然，如果你就是想要突出其中一部分数据，也可以利用色彩强调：
搭配
下面这两条折线看起来确实很平衡，但问题颜色太深，在深灰色背景上不够突出：
把颜色调亮之后，好多了：
然而，图表的背景色可能会随着系统而变化，为了让图表在深色和浅色模式都好看，你可能要提供不止一套颜色：
想要学习或者练习体验/交互设计的朋友，可以了解一下「体验设计学习社」。
如果你只是想要多认识一些同行，也可以加入我们无广告的纯粹体验研讨微信群：