B端图表视觉设计思考（二）
一、图表视觉层级
图表能够承载大量数据信息，同时视觉元素较多，如果只是凭借设计师的审美喜好进行视觉设计，没有整体信息读取考量，
可能会导致重要信息未能凸显，降低用户读取效率。
为清晰传达信息，进一步提升读取效率，我们采用元素重要程度与视觉强度相绑定的方法。依据元素重要程度，将图表元素
分为三类，分别为“底层元素”、“中层元素”和“顶层元素”，并依据不同视觉强度分别设计三类元素。底层元素最弱，顶层元素
最强。通过这种方法，梳理图表元素的前后关系，能够清晰把握元素视觉层次，保证信息传递效率。
1. 底层元素设计
在各类图表中，我们把辅助说明数据的轴线、刻度等定义为底层元素。为了减少视觉干扰，最大程度突出主图形，底层元素
全部使用浅灰色进行设计。我们发现，当元素与背景颜色的明度对比在1.2:1时，人眼较难看到元素；当对比度在2.0:1时，
视觉强度过强，易吸引用户注意力。
通过元素视觉强度的调研及视觉尝试，最终确定元素与背景对比度在1.6:1左右，视觉强度偏弱但人眼能够看清的程度。以保
证元素视觉不突兀，只在需要查看时可以被发现。
2. 中层元素设计
中层元素的内容包括数据图形、数据线段等承载主要数据信息的元素，是图表中表达数据的关键元素。与底层元素相比，中
层元素采用更低明度与更高饱和度的数据色来表现，使元素从页面中凸显出来，保证可读性。同时在样式上适当加入渐变、
描边等样式，丰富视觉层次，带来美观的视觉感受。
3. 顶层元素设计
我们把顶层元素定义为图表高亮信息，内容包括悬停样式、悬停后的详细数据说明等。在设计上为保证视觉样式突出，使用
深灰色、强调色等强对比度样式，并辅以动画、投影等手法保证明显的视觉强调效果，保证顶层信息最有效的传达给用户。
4. 最终效果
通过层级梳理，并绑定元素重要程度和视觉强度的方法，设计后图表主次信息均按重要程度进行对应视觉强度的展示，让用
户能够在第一时间接收到最重要的信息，提升信息读取效率。
