设计稿

Demo 链接

问题

如果只看一眼图表,尝试问自己以下几个问题:

解读

设计指引

数据

date
time
1月
1,055万
2月
1,280万
3月
754万
4月
580万
下载源数据 ( .json 格式)
(0 KB)Download
当我们拿到数据时,可以看到一组为时间序列数据(日期时间维度),另一组为数值(度量),同样数值随着时间的推进有增有减。根据图表用法,我们能判定当前数据适合用折线图来表示。具体可参见折线图的图表用法

给谁看

有了图表类型后,我们来分析下做出来的图表给谁看,这将直接决定我们需要在图上放多少信息。关心公司盈利趋势变化的目标群为公司的决策人、投资者等。给他们做图表时,简明扼要是前提,因果清晰也很重要。

看什么

既然目标受众是决策人、投资者等,他们必然关心整体趋势以及涨跌原因。设计者可以在折线上进行一些标记,进行解读说明。根据衍生指标计算、求和等,设计者能得到月均盈利额以及月均利润。

开始设计

标题

我们给其命名为“某水产公司 2017 年盈利变化”。它表明当前看的是 17 年盈利数据。如果你的图表不需要标题,可以隐藏他们。

副标题

如果图上已能说明问题,那你可能不需要副标题,同样你也可以不显示他们。

标记

当用户看到图上的异常点时,如果可视化设计者已知道答案,那么不妨通过标记方式写出来,告诉用户这里发生了什么,以及为什么会发生。这些标记紧跟相应区域,它不写在图表统一的下方,不需要用户在图上寻找对应点,避免视线来回扫描。“有效”“清晰”的传达观点,我们在图上花更多时间制作更好的图表是帮助用户节省破译的时间。 因此我们在图上增加了三个标记点,以便解释盈利的波动原因。

数据来源

如果你的数据引用自其他平台,那么最好添加一个“数据业源”,它符合“真实”的可视化设计原则,让用户觉得你的数据是可信的,透明的,权威的。

均值线

用户在看趋势图时,如果图上仅有一根折线,没有相应的比较数据会大大降低对数据的理解,毕竟没有“没有对比就没有分析”,因为我们此图可以加上一根历史累计收益的均值线,方便比对数据。均值的的使用请 查看 Api 文档,或查看使用教程

颜色通道

当仅有一根折线时显得很单薄,建议在强化趋势、相对波动区间的信息时使用面积图。 查看面积图图表用法如上面例子中红色代表盈利,绿色代表亏损。通过对比色,强化差异,辅助识别趋势。

零轴

在直角坐标系的图上,经常会遇到正负数的轴,而零值线是一个分界岭,我们建议凸显零值线而非带数值标签的轴。这样便于区分正负数,而不是强调负数。

求反馈

该文档对你有帮助吗?如果觉得不错请赏“稻谷”,如果有任何意见建议,欢迎留言探讨