图表设计窍门

 图表设计窍门

数据可视化为传达信息的最好方法之一，它可以直观地呈现数据，快速吸引用户注意力。可如果设计师对图表设计有偏差，在界面呈现上可能会对用户产生错误引导，因此笔者结合自己的工作对图表设计分享窍门，希望每位设计师都能成为良好数据搬运工。

下面我将从功能、交互和UI深挖图表设计各个知识面，敲黑板划重点咯。

https://shorturl.at/sHNVZ

概念

图表可屏幕显示，可直观展示统计时间或数量等，对知识挖掘和信息直观生动感受起关键作用的图形结构，为一种很好的将数据直观可视化的方法。

如果说表格可以承载数据的全面，那么图表可以完美展现数据的特点和变化，表格无法做到它对数据的解读能力。

 

使用场景

(1) 分析数据差异情况。对于分类数据，可以通过分析数据来了解不同分类的差异，例如柱状图。对于流程数据，可以通过分析数据了解数据的变化趋势，例如折线图。

(2) 分析数据关联情况。展现数据相互关系和数据流向。例如桑葚图。

(3) 查看数据分布情况。对于错综复杂的变量关系，可以通过图表来找出规律。例如利用气泡图进行回归分析。

(4) 了解数据构成情况。发现各变量占多少，例如饼图。

 

原则

(1) 轻量。众所周知表格可以承载数据的全面，可将相同数据用可视化展示时，设计师若想将所有信息堆砌在图表上，显得图表非常笨重，因此增加了用户的思考时间。在此建议明确你图表类型特点，将信息展示在图表上或分层展示图表，比如数据钻取功能。

(2) 直观。设计师应该将数据信息清晰而直观地表达出来，使用户一眼就能洞察事实，更快地发掘商业价值作出决策。

(3) 美感。缺乏美感的数据可视化仅为数据展示。美感包括整体协调美，例如对图表各个元素（标题、网格、坐标轴、缩略轴、图例、提示信息、预警线和辅助线等）进行合理排版和使用协调色彩。还有局部细节美，例如设计师根据流行趋势给图表加上渐变色。

 

功能

我将用一复杂图表类型当作示范。

标题。包括左对齐、居中对齐和右对齐。在选择某种对齐方式前，请兼顾图例摆放位置。

栅格。

(1) 根据数据特点选择横纵向辅助线，横向引导线增强水平方向导视。纵向引导线增强垂直方向导视。

(2) 线状建议用虚线，因为不是用户确定值。

坐标轴。坐标轴包括X坐标轴、Y坐标轴和次坐标轴。

(1)X轴刻度方向的改变，如果维度过多，则横向刻度的展示范围有限。在没有缩略轴的情况下，需要适当改变刻度的角度(0~90度为宜)节省空间，可要遵从人的阅读习惯为从左到右的规则。

(2)Y轴初始值定为0，如果不是，则无法体现数据的全面。如果数据波动小有意义（例如，股票市场数据），你可以截断刻度以显示这些差异。

(3)Y轴刻度值尽量转化为千位分隔符，如K，M，B。

(4)Y轴最大值取值要恰当，保证图表占据2/3以上。

         缩略轴。包括滑面和滑柱。

(1) 拖动滑柱滑动，增加或减少滑面，从而改变查看密度。

(2) 拖动滑面滑动，保持滑面长度，进行前后移动。不改变查看密度，只改变查看范围。

         图例。离散型数据包括横向排列和纵向排列，连续型数据包括连续图例。

(1) 所有图表类型的排列方式要统一，所以要考虑整体的图表为适合横向排列，或纵向排列。

(2) 所有形式总长度超过内容区换行或换列。

(3) 不同类型的图例样式要有所区分。

(4) 连续型数据通过渐变色来展示数据大小变化。

         提示信息。包括查看单个数据和多个数据。

(1) 单变量浮层提示内容为相同维度下选择的变量。多变量浮层提示内容为相同维度下所有的变量。

(2) 提示内容遵从表单规范，按照冒号对齐。

(3) 拓展 - 直联表图例为展示所有变量，交叉表图例“变量和列维度的排列组合。

预警线。数据超过阈值就会报警，帮助用户监控数据。

         预警线建议用实线，用警示颜色引起用户注意，最好用邮件或短信通知用户。

         辅助线。用户设置某值作为数据参考，例如设置平均分为参考数值。辅助线建议用虚线，仅起参考作用。

 

交互

加载方式。加载动画建议使用和图表相关的样式。

排除异常值。允许用户剔除高度异常点，因为异常值会影响用户对整个图表的分析。

数据钻取。单击某个数据可以看到该数据详细信息，变换分析粒度。

 

UI

适配

(1) 增减留白。图表大小固定不变，只增减留白地方。

(2) 等比缩放。图表长宽都以相同比例缩放。

颜色

(1) 颜色主题

1) 深背景。适合较少信息内容。

优点 - 可以通过布局建立良好视觉层次，深层次地反映内容，且视觉吸引力强，给人以高端视觉感受。

缺点 - 可读性低。页面太过聚集，所以对留白平衡要求较高。

2) 浅背景。适合较多信息内容。

优点 - 可读性高，增加了页面空间。

缺点 - 内容不聚集，页面显得太空。

(2) 确保颜色数量足以满足数据系列在图表里展示。

1) 使用成熟色板，例如Flat UI Colors和Material Design Colors。

2) 使用流行元素

3) 使用情绪板，情绪板为一种借助于图，启发和探索用户体验，然后再作用于视觉设计的研究方法。 可以调查、形成具有指导意义的风格感受和设计元素。

(3) 颜色生成规则。一个变量统一用一种颜色，再依次出每个变量颜色。 使得色彩和谐且具有美感。

(4) 视觉缺陷。世界上有一部分人群有视觉缺陷，他们无法通过颜色来精准区分图表维度和变量。作为设计师不能忽略这部分较为庞大的特殊群体。

 

布局

视觉层级要符合逻辑层级，利用信息引导用户阅读。每个元素要保持一致，保证布局整体协调。

插画

符合主题和整体基调，简单易懂，数据可视化具有一定认知门槛，有时需要插画来提高用户认知力。

留白

信息过多容易造成视觉压力，适当留白可以增强用户对信息认知能力。

字体

避免衬线字体，字体要保证清晰可见。字体大小适中，太小影响阅读，太大容易占用图表控件。

 

总结

先懂数据，再谈可视化

为此我们要了解图表类型的适用场景和局限，可以常看几类图表类型，轻松玩转数据可视化。了解这些可以帮助大家通过UI。例如展示各地区人口密度，可以用柱状图来展示，可我们发现用地图会更加接近用户期望。

为了数据，过度可视化

有时设计师在图表上很难展现自己的设计功力，从而会给图表增加过多视觉效果。

真实数据，友好可视化

数据产品不要试图去掩盖问题，要反映真实数据，暴露问题，和用户一同解决。例如对数据阈值进行监测，预警线为很友好的可视化方式。

（感谢天使在知乎上传以上图文，若有侵权请告知）