后台图表设计思路-山东标梵

做一些自己还欠缺的体系化的设计方法和模型学习
由于最近的工作可能会涉及，所以提前对后台的图表设计这块做一个帮助提高效率的学习。
一、划分图表的视觉层级
我们在设计图表的过程中，常常会遇见的问题是为了追求图表的美观好看，使设计出来的东西不能清晰展现重要的信息，增加用户的理解负担。
对于这样的问题，我们可以按照信息点的重要程度来安排它的视觉强度。通过对信息点元素划为底层、中层、顶层的方式展示出视觉层次。
1）底层：辅助说明的轴线、刻度等。使用浅灰等视觉强度偏弱但是能让用户看清楚的色彩。
由下图对比可见，明度对比里元素：背景=1.6:1左右比较合适：
来源：《超多案例！B 端后台类产品的图表设计思路及方法》百度MEUX
2）中层：承载数据信息的图形。使用更低明度和更高饱和度的色彩使元素凸显，在此基础上，可以进行一些渐变或其他的优化方式，丰富层次。
来源：dribbble-Sass Landing Page Design
3）顶层：悬停样式及对应的具体说明等。使用强对比样式和背景凸显，可以进行交互动效等方式进行强调突出，使重要信息能一目了然地传递给用户。
 二、图表排版
排版对用户的使用体验很重要，所以关于图表排版有以下几个细节注意点：
1）尺寸：做过后台图表设计的同学都知道图表的可展示尺寸对图表的展现影响比较大，不恰当的方式会影响用户读取想看的数据。
来源：《超多案例！B 端后台类产品的图表设计思路及方法》百度MEUX
大号的图表可以详尽展示内容；
中号的图表限制了横纵轴的刻度数量，适用于有一定范围的类别数据查看；
小