数据可视化设计指南-下

　　·如果没有标题，会使人丧失对图表的整体把握，不知所云。

　　·对图表主题进行阐述，表达指标。

　　·如果标题足以表达清楚图表含义，则不用显示副标题。

　　·当图表的结论是单一且唯一时，标题可以加入结论性的信息，有助于让用户在最初接触信息的时候就能明白图表说明了什么，如下图：

　　·标签：解释图表中展示数值的内容。

　　·标题：解释数据的度量单位（如果图表中的度量单位显而易见则不用显示）。

　　·辅助用户浏览图表和进行数值比较。

　　·图形上显示的数据值，空间充足时应当显示，空间不够时无需显示。

　　·解释图表中展示数据所用到的符号、图案和颜色的含义（如果图表中只有一个数据系列则不用显示）。

　　·当鼠标悬停在某个点上时，会以提示框的形式显示对应的数据的信息，比如该点的值，数据单位等。

　　·标准格式为：标题：数量（百分比），例如：民事一审案件：46（32%）。

　　·百分比不需要则不显示。

　　·在图表中进行标记，进行文案汇总或异常点标记。

　　·标记方式：数据点标记文案说明。

　　·表明图表中的数据来源，让图表看起来来源清晰、可靠（如果无需注释则不用显示）。

　　数据可视化始终面临着无限（海量）数据与有限屏幕空间的冲突，因此有效解决不同端、不同屏幕尺寸下内容的适配问题，能够在有限的空间内帮助用户更快地理解信息和更快的分析洞察。

　　·体现数据的主要信息、保留图形的特征。

　　·为了信息展现尽量的完整与美观，图表的布局规则会相对灵活和细致。

　　·在优先保障图表原有结构的原则下，从空间充足到空间局限的过程中，响应策略依次有显示、省略、换行、旋转、抽样、缩放、换位、转化、隐藏。

　　·显示：空间充足时完整显示。

　　·省略：针对文本组件，部分文本用...显示。

　　·换行：针对文本组件，文本结尾换行显示。

　　·旋转：针对文本组件，文本旋转角度显示。

　　·抽样：依据空间大小，省略显示部分数据。

　　·缩放：依据空间大小缩放显示，适用于一部分指标型文本和图形元素。

　　·换位：依据空间大小改变组件的位置，例如图例在图标的顶部、右侧的位置转换。

　　·转化：依据空间大小改变组件的形态，例如针对数值型文本的单位变化。

　　·隐藏：空间不足时全部隐藏。

　　·图表的配色需要符合项目的主题，一个项目中的图表配色统一，能够让画面更协调。为了与场景视觉上和谐，可以考虑邻近色搭配。

　　·避免使用过多的颜色。在实际应用中，经常会出现大量颜色使用的误区，建议高亮重要的数据（不超过 8 个），其他数据默认置灰，通过图例交互进行查看。

　　·数据反馈的规则从简。相同分类的数据，反馈的规则尽量保持为一种。例如当使用柱形的高度来反馈数据时，就不需要再加上颜色的维度去反馈数据了。

　　·选择准确的色板。对应自己的数据，按照数据特性选用准确的色板。例如下图中不同分类的数据应选用分类色板（左图），相同分类的数据应选用连续色板（右图）。

　　·解释颜色的含义。当图表中出现不同颜色时，需要向读者解释颜色代表的含义。

　　·浅色背景（文本驱动型）：适合展示大量的数据信息，具有简约、活力感，浅色让页面更有呼吸感，会让阅读更有效率，能够让用户更专注于内容。颜色排布标准以左图的顺序为准。

　　·深色背景（视觉驱动型）：适合展示数据简单、图片为主的信息，具有科技感、未来感，深色背景能够衬托出明亮的色彩，会让图片看起来更突出，整个页面的布局看起来更加时尚。颜色排布标准以左图的顺序为准。

　　·选择默认字体微软雅黑，图表中的主要字体建议为16px，字体最小字号为14px。

　　交互式图表是通过悬停、点击、框选、过滤、平移、下钻、联动等交互动作，得到信息提示、颜色高亮、钻取等方式的反馈，从数据中获取更深层次的分析和信息。

　　·悬停：查看具体数据信息。

　　·点击：标记关注数据。

　　·框选：放大局部数据。

　　·过滤：通过滑块聚焦重点信息。

　　·平移：数据量大，空间有限，通过拖动探索更大的数据空间。

　　·下钻：聚焦到感兴趣的数据子空间，也可以返回至上一级。

　　·联动：跨视图展示数据对象间的联系，可同时观察数据的不同特性。

　　在数据可视化叙事过程中，可以使用信息轮播、动画等效果自动切换数据信息以推进可视化故事的叙述。

　　·动画与过渡效果可以增加可视化页面的丰富性和可理解性，增加用户浏览的反馈效果。

　　·可以增强重点信息或者整体画面的表现力，吸引用户的注意力，加深印象。

　　·适量原则：动画不易使用过多，避免过度设计。

　　·易理解原则：注意对简单的形变、适当的时长等方面的控制，降低用户的认知负担。

　　用户查看数据可视化页面的基本逻辑：先大体，后局部，最后聚焦兴趣点进一步探索，这是一个由表及里的过程（表层 > 中层 > 底层）。

　　·是什么：用户主要通过浏览的方式来获取数据。常见于传统数据图表、汇报型图表、大屏等。

　　·为什么：当图表中有用户看不懂的信息时，用户期望有人告诉他为什么会这样，从而进行图表交互，例如图表下钻，查看进一步数据。

　　·怎么办：用户期望有获取预见性的解决建议。常见于智能化决策系统，对数据进行解读与分析，给出预警或建议。

　　举个例子：某法院的审管办研究2017年-2019年共享汽车交通事故责任纠纷案件量不断上升的相关情况、寻找原因并作出应对决策。

（1）数据获取

（2）信息加工

　　·通过点击节点，进一步查看数据的具体特征。

（3）解决方案

　　·针对以上数据及法律风险，分析造成这一现象的原因并做出应对决策，标记至节点处。

　　·设计时首先思考用户关注的重要指标，应该重点突出该数据的展示区域，弱化或去掉不重要的信息展示。

　　·将关联的指标放在相邻或靠近的位置，减少用户认知上的负担并提高信息传递的效率。

　　·移动端用户的需求：由于移动端屏幕小，可承载的内容少，因此要传达出关键信息，要醒目、显眼、一目了然，用户追求的更多的是高颜值的可视化。

　　·单一数据显示统计值时，可以结合业务场景考虑加上同比增长指标、目标完成度等关联信息。

　　·横向导航：顶部tab导航、底部tab导航、tab滑动标题、轮播导航。

　　·纵向导航：陈列馆式导航、卡片式导航、列表导航、折叠式导航。

　　·一张卡片放置一个主题内容。

　　·将相关性高的页面组合呈现在一个卡片里。

　　·将全局视角中最关键的指标，以平铺的方式展示在整个页面中，帮助决策者做决策。

　　·当指标重要性平均时采用左图布局，当需要强调主题时采用右图布局。

　　·决策者用来监控全局数据，并附带图表辅助解读。

　　·决策者用来监控全局数据，围绕一个主题，展现多个维度的关键指标，并帮助用户快速发现异常点。

　　·针对同一主题的多个维度分析。

常用于数据报表细节信息的展现。