这是数据可视化设计系列文章的第二篇，我们重点探讨设计执行相关的话题，我主要从布局和配色两方面进行阐述。
往期文章：《数据可视化设计浅析与研究（一）》
第一部分： 图表布局
图表的基本构成（来源网易 UEDC）
图表标题
标题一般居中或居左对齐，但是布局时，需要综合考虑副标题、图例甚至筛选器控件等元素的位置。
坐标轴
坐标轴包括 X 坐标轴和 Y 坐标轴，有时还会出现次坐标轴。
1. X 轴刻度方向的改变，如果维度过多，则横向刻度的展示范围会非常有限，为了展示更多内容，通常会用其他替代图表（比如横向柱状图），不能替代的情况下，可以考虑将标注文案进行倾斜（不鼓励）。
2. 数据类刻度值尽量转化为千位分隔符（如 K，M，B），保持简洁，以节省空间。坐标轴上的最大值取值要恰当，保证图表占据 2/3 以上，画面更饱满。
3. 还需考虑坐标轴上的极值。
坐标轴
图例
离散型数据包括横向排列和纵向排列，连续型数据包括连续图例。
1. 所有图表类型的排列方式要统一，所以要考虑整体的图表空间是适合横向排列，还是纵向排列。
2. 所有形式总长度超过内容区换行或换列。
3. 双轴图包含了 2 种图表类型，不同类型的图例样式要有所区分。
4. 连续型数据通过渐变色来展示数据大小的变化，具体渐变颜色定义在下文中有详细介绍。
图例
背景栅格
背景栅格主要用来帮助用户快速读取数据值，方便参考和对比。背景栅格一般有网格线、虚线、点阵、斑马纹等。在设计栅格时，应该尽可能减少对数据的干扰，在合适的场景下，甚至可以去掉背景栅格。
栅格
Hover 态（或点击态）
用户在查看某一项数据指标时，给出明确的反馈和提示。数据详情多时，还会通过浮窗的形式展现。此时该状态下数据可以突出显示，可以变化颜色、增加背景元素（线/面）、或者增加动态变化等。
字体
数据图表的字体一般采用无衬线体，另外需要考虑字体的辨识度，防止在显示上产生歧义。多数情况下，数据图表会运行在不同分辨率的大小屏中，所以在文字排版上。
做到以上几条，我们在设计图表时就可以避免掉绝大多数的坑，不过毕竟图表类型这么多，在实际场景中也会遇到各种情况。总之有这么几条总的原则
1. 保持数据图表简洁、清晰、易读
2. 强调用户关注的数据，帮助用户快速聚焦
3. 弱化次要元素，如栅格、图例等
4. 删除不必要的元素，阴影效果、酷炫动画
5. 合理布局图表的间距、留白等
6. 充分考虑页面的适配效果
7. 最好使用真实的数据进行设计排版
第二部分： 图表配色
考虑到图表颜色在设计中至关重要，我把它单独分出来讨论。由于数据的复杂性和趋势变化，配色方案需要考虑非常多的因素，比如可辨识度、舒适性，还需要考虑特殊人群（色盲色弱人士等）对颜色的可读性等等。在配色过程中我们需要区分背景色和图表配色。
背景配色
背景色一般分为深色、浅色、彩色。在很多 LED 大屏上展现数据时，多采用深色背景，比如即将到来的天猫双十一活动，官方数据展示基本上会用深蓝色作为背景，这样可以减少屏幕拖尾，观看时也不会过于刺眼。深色背景中的图表配色一般不会采用太多的色彩，且图表也不会设计得过于复杂。
中小屏幕的背景选择性更大，中小屏幕背景色选择范围就比较广，浅色、彩色、深色均可以做出很好的设计。在 Web 端，大多数场景下，我们会采用浅色甚至白色作为背景，浅色背景更适合展示大量的数据信息，而且识别度更高。
图表配色
图表配色最关键的一点，就是要有辨识度。
我们可以通过明度上的变化增加辨识度，也可以采用大跨度的不同色相来增加辨识度，另外这两者也可以有机结合，常用于色彩较多的图表中。
明度变化
当我们需要使用单一色相配色时，势必要用明度差来进行设计，明度的跨度也要尽可能大才能更清晰。我们可以通过在灰度模式下配色的辨识度来判断明度差是或否合适。
（Google Material Colors 中的 Light Blue 色卡）
需要注意的是，采用单一色相的配色种类不宜太多，建议不超过 6 种。一旦种类过多，色彩之间的明度差异势必会变小，因而影响辨识度。
色相跨度变化
通过色相跨度来增加颜色辨识度也是我们常用的方式。
色环
需要的颜色较少时，我们尽量避免使用相近的色相，比如同类色和相近色。尽量选择对比色或互补色，这样可以使不同属性数据在图表中展示更加清晰。
美国大选图
所需颜色较多时，建议最多不超过 12 种色相。
通常情况下人在不连续的区域内可以分辨 6〜12 种不同色相。过多的颜色对传达数据是没有作用的，反而会让人产生迷惑。
三种常用的取色方法
01. 色环提取
可以采用色环中同一明度下的不同色调作为图表颜色。前面提到的单色相内取色，也可以在这个色环中进行采集，此外 Google Material Colors 是一个不错的色板，可以结合使用。
02. 借鉴自然界中的色彩
自然界中有非常丰富的渐变色彩，而且被大家所熟知，这些色彩更容易给人们带来愉悦感。
自然界中的色彩
在借鉴过程中，我们需要注意，比如天空经常会出现红、蓝、紫的渐变色，但这颜色的明度会有其规律，通常是浅黄到深紫，但绝对不会出现浅紫到深黄色。还有一些自然界其他的经验配色，比如浅绿色到紫蓝色，浅黄色到深绿色，橙棕色到冷灰色。
03. 渐变与明度叠加取色
在正常渐变色的基础上叠加一层只有明度变化的灰色渐变，形成既有明度差异也有色相跨度变化的配色。
渐变与明度叠加取色
渐变色应用案例
好了，配色部分就探讨到这里。除了以上关键内容以外，我们平时还需要注意数据图表的适配效果、交互细节、以及动画设计方面的问题，由于篇幅的关系暂不展开，以后有机会进一步探讨。
我们在参与此类项目设计时，通常会通过以下的流程去思考：
1. 为谁设计，用户想要什么
2. 明确设计目标和价值
3. 明确数据指标
4. 选择最合适的数据图表
5. 规划设计，输出方案
前三步更多会由产品经理、运营人员去思考并输出结果，最后两步则由我们设计师来完成，这两步也正是这两篇系列文章的主题所在。
在学习过程中，我们每个人可有不同的思考方式和侧重点，以我个人的角度出发：能够读懂常见的数据可视化图表，并从图表中能获取到关键信息。当有一堆数据摆在面前，能根据业务目标选择合适的数据展示类型，并运用设计手段完整的表达给用户。有了这些沉淀，我就能更好的和产品、运营打交道，更多的关注链路上游的信息，从而进一步提升设计的产出质量。
欢迎交流、批评和指正。
原文地址： 花厂设计招待所 (公众号)
作者：又彬
评论0