网页设计 » 视觉设计 » 设计了100张图表后,我学到了哪些经验?

设计了100张图表后,我学到了哪些经验?

发表于: 视觉设计. 评论
Sponsor

我是一名图表设计狂热分子,在写本科毕业论文的时候,由于执着于画出完美图表,导致花在做图表的时间比写文字内容还要多。当时的想法是,期望用图表来展示收集到的大量数据,为我的论文课题做定量研究分析。在我看来,图表中的组成元素能够完美的平衡数据与视觉效果,比如曲线,折线,点阵等等形式。

上个月,团队开展了新项目,打算做一款高级数据分析工具,由我负责设计其中的图表。我首先想到的是,从旧论文图表中获取灵感,然而等看到曾经设计的图表时,我就坚决地放弃了这个想法。

7年前设计的图表,如今看起来惨不忍睹。图表有限的空间内堆积了大量的信息,让人短时间内无法从图表中获取有效的信息。下图是我花了几分钟,设计了一张同样糟糕的图表来做证明。

糟糕的图表设计

自从看了自己设计的旧图表,我自信心受挫。不过最后决心借着这次的工作机会,在图表设计上大干一场。

我在几周时间内设计了上百张图表。期间根据用户的反馈,不断地迭代和更新。在这个过程中,我逐渐掌握了设计一张合格图表的方法和技巧。在下面的6个部分中,将会逐步的分析我的设计过程:如何设计图表,如何迭代以及为什么选用这种形式的图表?

一、绘制草图

第一张草图复用了工作中设计的旧图表,做了简单的迭代

优点

图表参数不多,没有设计X轴和Y轴的说明文字,非常简洁清晰

缺点

基于高级数据分析工具的产品特性,我们来分析其缺点。

首先,图表内的数据量少,很难看出潜在的设计缺陷;其次,控件太少,能操作的功能不多,无法达到高级分析工具该有的多功能属性;最后,面对实际情况中的大量潜在数据,需要多种数据处理的方式,而图表中暂未出现,因此可扩展性不高。

学习点

保持图表简洁和易读性。判断的标准是用户一看即懂,不需要花费时间去学习。

保证上一条,同时思考如果图表增加更多的数据和功能,应该如何设计(高级分析工具肯定需要支持大量数据展现和分析)。

二、增加功能和数据

优化了第一部分的草图,能展示更多的基础数据和高级数据,此外还增加了过滤数据的功能

优化点

增加时间过滤器

鼠标悬停在折线图的数据点时,使用气泡浮层来展示详细的数据

在鼠标悬停的时候,需要一根垂直的直线来指示并确定数据点

折线不能为圆润的曲线。因为圆角不能准确地向用户指明,当前鼠标悬停的数据点

对比移动端的设计,web端有更多的空间可以利用,可以使用更大的字体

需要有水平直线来对应X轴上的数字

优点

图表更加清晰,展现了更详细的日活数据,可以让用户了解自己APP的运营情况。折线变得不再圆润,锐角可以更加准确地指示数据点,这样鼠标悬停时可以轻松查看数据点的详细数据。同时X轴的日期在图表的最下方单独成列显示,易读性很强。

缺点

由于时间过滤器和Y轴的数字全部挤在了折线图的右上角,界面布局略显杂乱;图表中500点以下几乎没有数据,因此Y轴的数字划分并不合理,需要做调整;折线采用了红色,让开发同事误以为是错误状态(产品设计中红色一般代表着错误)。

学习点

高级图表同样可以不展示过多的信息,在界面上保持简洁。但需要引导用户通过操作去达到自己的行为目标(比如时间过滤器,鼠标悬停时气泡弹框展示数据)。

把Y轴的数字移到图表左边

评估图表中各组件的颜色,判断是否会引起用户对当前界面的误解

三、优化组件样式和增加细节

每个组件的样式都尝试做下优化,比如突出折线的颜色或增加X轴的一些细节,这样会使图表看起来更清晰。在图表的设计迭代过程中,不需要像我现在这样,又从头开始设计图表。可以针对有问题的组件,比如坐标轴,一个一个去进行优化。所有组件优化好,图表自然而然也就相对完美了。

Graph: Part 3

优化点

将图表内折线的颜色改成深绿的辅助色

将Y轴数字移到图表左侧。

在X轴和日期之间增加垂直指示线,使得日期的易读性更强

在指示Y轴数字的水平线之间居中增加一条辅助线,这样不用气泡弹框显示,也可以很容易查看数据点的值。

折叠时间过滤器来为高级用户提供数据过滤功能,也可以避免影响到大多数不需要此功能的普通用户。

优点

前面总结的优点这里同样适用。由于折叠过滤器和改变了Y轴数字的位置,折线图的右上角空间布局变得平衡合理。虽然未折叠的过滤器可以直观地提供多种过滤选项,但是看起来会很杂乱 。图表增加了水平的辅助线,但是仍然保持简洁性和易读性。

缺点

其实折叠过滤器并不是提供给高级用户的最佳设计方案,但是用户只要操作过过滤器,就会形成路径记忆,在产品的其他功能再次使用。

学习点

优化图表中组件的样式,添加一些细节,增强图表的易读性

只做必要的优化和细节添加,同时必需保持图表的简洁清晰

同事看过折线图后,提出对于图中的数据类型,条形图是否更合适

虽然有好有坏,但我们需要重新思考整个设计。好处:图表设计还有改进的空间。坏处:目前的图表已经花费了大量时间。

四、重新设计图表

目前设计的折线图,两个相邻端点之间的差值有统计意义,但是折线的斜率是没有统计意义的。我们需要考虑图表的适用数据类型和场景,必要情况下可能要重新设计其他类型的图表。

左侧的图表,以消费金额为例,统计个人信用卡的每日消费情况。使用折线图可以统计a点和b点间具体的金额差值,即15号和16号个人消费的日差额。

右侧的图表,以参会人数为例,统计每日参会人数。在a点和b点间,即15号和16号之间,我们可以知道这两天参会人数的差值,但无法统计某个具体时间点的参会人数,因为没有记录每秒的减少人数。我们只能判断从15号到16号的参会人数在减少,从a点到b点的连线其实只是表示一个下降趋势。

Graphs: Part 4

学习点

考虑数据类型,使用场景和用户需求,选择合适的图表类型并统计需要的数据,才能正确展现结果。(比如上图中无法统计每秒减少的参加晚会人数)

五、新的图表设计

基于同事的反馈和自己的思考,我设计了一版条形图。很明显图中X轴的数字易读性比折线图更好。

Graph: Part 5

优化点

在图表中使用条形替代折线来展示数据

优点

每个日期都有一个条形对应,相比多个日期之间却只有一条折线,用户确实更加容易阅览,X轴数字易读性更佳。

缺点

条形之间的空白过大,需要调整单个条形和整个图表左右端之间的绝对距离

六、图表设计总结

在整个设计过程中,有一些前面几个Part没有提到的设计技巧和图表,这里补充上来做个总结。

1.越简单越好

左侧的折线图,支出和收入的数据我用了2个图表来分开展示,两者之间可以通过点击tab,快速切换查看。右侧的图表,我将2条折线放在一张图表上,看起来效果还不错。但是如果在右图中增加第3条或者第4条折线,整个图表将会杂乱无章且易读性极差。在图表中找数据变得像个猜图游戏。

2. 突出重点

条形图设计最好可以清楚地展示每个条形的详细数据。像左侧的图表,选择某一个条形后,其他条形会弱化(降低透明度)显示,可以突出当前条形及相关数据。同时其他条形并没有消失,用户仍然可以进行数据的对比。而右侧的图表,没有进行弱化处理,无法突出当前选择的条形,易读性相对较差。

3. 表格字体与比例字体

在图表中使用比例字体并不一定不合适。但是如果是包含大量数据的表格和图表,单独使用表格字体才是最佳的选择。因为表格字体的数字等宽,可以保持列对齐,易于阅读。我们可以把它做为比例字体的辅助字体,仅在图表中使用。

原文:https://medium.com/@william.bengtsson/learnings-from-designing-graphs-9033e9034ca0
作者:William Bengtsson
译者: luserry(微信ID:caiyunyisheji)

推荐:查看最受欢迎的 301 个设计网站 → http://hao.shejidaren.com
交流:为设计新人提供的设计交流群,请加入UI设计交流群,分享经验、接单、求职、聊设计。
赞助商链接
赞助商链接
设计达人微信交流社区:shejidaren888
喜欢这篇文章吗?欢迎分享到你的微博、QQ群,并关注我们的微博,谢谢支持。
版权:除非注明,本站文章均为原创文章,转载请联系我们授权,否则禁止转载。

{ 发表评论 }