🔥 热搜 🔥
百度今日热点微信公众平台贴吧opggdnf私服百度贴吧知乎dnf公益服百度傻逼
分类
社会娱乐国际人权科技经济其它
🔥 热搜 🔥
上海习近平新疆鄂州父女瓜乌鲁木齐疫情H工口小学生赛高习明泽芊川一笑图包印尼排华
分类
社会娱乐国际人权科技经济其它
查看原文
其他

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

UI设计达人 2023-07-30

The following article is from 体验进阶 Author 设计师ZoeYZ

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

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

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



煎饼销售案例

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




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


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

🧩 图形
🌡️ 坐标
🗒️ 说明
👋 交互
🌈 色彩



🧩 图形

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


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


那么具体该用哪种呢？

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


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


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




🌡️ 坐标

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


坐标跨度

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


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

纵坐标最大值为 3,000

纵坐标最大值为 1,500

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



刻度数量

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

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


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


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


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




🗒️ 说明

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

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


图表标题会更清晰一些：


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


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




👋 交互

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

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


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


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




🌈 色彩

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

上色前

上色后

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

用颜色代表信息类型

用颜色代表气温高低

用颜色代表重点信息

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


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


含义

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

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



主次

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

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


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


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



搭配

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


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


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




总结

苹果设计师总结出的这套图表设计方法，虽然比较简单，但思路清晰，我看了后也觉得有所收获。

希望对大家有帮助，请记得把文章转发到你的朋友圈，点个在看，咱们一起加油吧！

主页君个人微信

添加主页君个人微信领取：大厂设计规范及组件库、免商中文字体、样机、作品集等



推荐阅读

（点击标题可跳转阅读）

拆解B端产品，总结界面框架设计的3原则
佩服智行设计师，能搞定这么复杂的列表
Zoom这个新功能，求腾讯会议借鉴一下！
回复 灵感 下载UI设计灵感合辑
点个 “ 在看” 好文不断

您可能也对以下帖子感兴趣

文章有问题？点此查看未经处理的缓存