2022-6-14 博博
在如今这个时代,越来越多的信息和内容呈现开始依赖数据驱动,也开始有更多的场合需要信息图来辅助呈现,对于可视化数据,从来没有像现在的要求这般高。但是另一方面,我们周围充斥着大量错误的图表呈现,希望这篇文章提供的 20 条建议能够帮你设计出更好的信息图。
不同的图表类型所承担的功能是截然不同的,不合理的数据呈现会容易让用户误读。同样的数据可以使用不同的图表呈现出不同方面的特征,因此,在设计信息图之前,先理清需求,再来选择使用哪种图表能够更好地呈现。
当使用数据在0的左右波动,产生正负差异的时候,请使用基线来正确反应正负关系,不要在同一侧来呈现数据,这样很容易带来误读。
和折线图不同,条形图如果从非 0 的位置开始,确实更容易反应趋势,但是给所体现的数据量级和特征是失真的。比如在下面的案例中,B看起来是D的3倍以上,但是实际的情况是,两者差异并不大。所以需要从座标 0 处开始呈现数据,这样会更准确。
对于折线图,需要考虑一下 Y轴上的尺度,因为如果单位太大,那么折线图所呈现出来的波动幅度不够大,趋势的表达也不够清晰。这个时候,建议调整Y轴上的单位大小,确保折线的波动幅度大概占整个Y轴的 2/3 即可。
折线图是使用线条连接特定时间节点的特定数据的一种数据呈现形式,它有助于说明随着时间推移,某些情况的变化,但是当间隔时间频率不对,参差,缺失,那么折线图的数据可能会无法对应,这个时候使用条形图其实是更容易呈现的。
平滑的「折线」在视觉上看起来是愉悦,但是它歪曲了背后的实际数据,也很难读到关键的转折点数据。
通常,为了为了节省可视化设计的空间,设计师会采用双折线来呈现数据,但是在数量级不对等的情况下,折线图会很难读,甚至容易会误导用户,这个时候,建议分开使用2个不同的座标系来呈现,更加易读,同样可以看的出趋势,也不会得出错误的结论。
饼图是最常用但是也是最容易误用的图表之一,在绝大多数的情况下,条形图是更好的选择。如果你决定使用饼图,那么这里有2个基本的建议:
不要超过7个不同的扇区,让饼图尽量简单
你可以将额外的片段分组到「其他」的扇区中
没有合适的文本标签说明的情况下,无论信息图设计得多好都没有意义,直接在图表上进行明确的标识,才会对观看者产生价值,需要观看者自己去关联的设计是失败的。
不要将数值直接放置在饼状图的扇区上,在较小的扇区块上数据会非常难读,相反,使用引线来指引数据对应的区块会是更好的方法。
对于饼状图的切分方式,有2种常见的顺序:
将最大的一块置于12点钟方向,然后顺时针按照大小来排布所有的块
将最大的一块置于12点钟方向,然后在右边放次大的块,右边放置再次的块,基本上就是越大的扇区约靠上。
同样的建议也适用于其他的图表,不要使用字母顺序来进行排列,不要使用笔画排序,而是按照数据大小来进行排列,水平条形图就将最大数据放在顶部,垂直排布则将最大数据的放在左侧,减少阅读的时候的信息分辨的障碍。
饼状图通常是最不容易读的图表,因为它很难对相似的数据进行对比,所以在将它设计成环状的时候,我们可以使用辅助的数据来呈现,但是一定不要牺牲彩色扇区的可读性,这样看起来高级但是并不具备基本的可读性。
不要让不必要的视觉效果来分散用户的注意力,这可能会导致用户对于数据产生误解,通常你应该避免使用:
3D元素和阴影
渐变和失真的色彩
斑马纹或者过多的网格线
装饰性过强的字体
配色是可视化设计当中绕不开的一个重要的部分,在设计的时候可以考虑以下三种不同的配色方案:
使用定性的配色方案,不同的色相对应不同的元素,确保在整体配色的可访问性
使用符合一定顺序(比如明暗)的近似色的配色,呈现出一种连续的色彩变化
横跨冷暖色调的配色方案,将中性色置于中间,用来呈现存在正负关系的数据变化
根据目前的统计数据,大概 12 人当中有一个人存在视觉障碍,有的是色盲,有的是色弱。你的图表设计需要确保兼顾到这一部分用户的需求。
在配色方案当中使用不同饱和度和明暗的色彩
使用去色效果来校验你的配色的对比度
在信息图的排版易读性上同样是有要求的,要避免分散用户的注意力,不会制造视觉障碍:
选择清晰的非衬线字体,避免使用衬线体和过度装饰的字体
避免使用斜体、粗体和全大写字体
确保和背景之间的信息对比度
不要旋转文本
这是一个非常简单的技巧,能够确保用户在阅读的时候足够轻松,不会因为倾斜的文本扭伤脖子或者加重落枕的症状。
如果你的设计项目是面向 Web 或者移动端的交互式图表,那么你需要考虑的第一个问题就是,要用什么样的图标库。如今不同的图表库在功能模块和规则上各不相同,你需要在一开始就基于你的需求和设计想法,做出选择。
信息图本质上是在对数据进行优化处理、呈现的基础上,帮助用户进行探索,最大化地从数据中获得信息洞察,让数据发挥价值。在下面的 iOS Health 应用就是在最大程度地反映数据应有的意义和功能。
对于所有想要在数据的可视化设计上有所建树的同学而言,强烈建议阅读一下 Dona M.Wong 所撰写的《华尔街日报信息图设计指南:呈现数据和事实的注意事项》,本文中很多内容都受到了这本书的启发。
转载请注明:优设网
分享此文一切功德,皆悉回向给文章原作者及众读者.
免责声明:蓝蓝设计尊重原作者,文章的版权归原作者。如涉及版权问题,请及时与我们取得联系,我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
更多精彩文章:大数据可视化界面设计之一:可视化大屏设计快速入门指南
大数据可视化界面设计之九:超全面的数据可视化设计指南:设备篇