参考

数据可视化：如何打造高效的仪表盘（2021-03-29）
http://www.woshipm.com/data-analysis/4428138.html
十年沉淀：深入数据可视化Dashboard（2021-04-20）（干货满满）https://mp.weixin.qq.com/s/gaAjPsBOeMF9AOWbo2Kl4g
数据可视化图表应用（京东设计中心JDC 2021-04-09）（内容是基本图表的用法介绍）
https://mp.weixin.qq.com/s/bPFRPZiNfPK5qMl53kW27Q
干货丨最全的数据分析图表说明，看这一篇就够了（2017-10-23）（基本图表用法介绍）
https://coffee.pmcaff.com/article/985598882565248/

基础知识

数据的五种关系
首先，我们需要了解，数据通常包含五种相关关系：构成、比较、趋势、分布及联系。
构成
主要关注每个部分所占整体的百分比，如果你想表达的信息包括：“份额”、“百分比”以及“预计将达到百分之多少”，这时候可以用到饼图。
比较
可以展示事物的排列顺序——是差不多，还是一个比另一个更多或更少呢？“大于”、“小于”或者“大致相当”都是比较相对关系中的关键词，这时候会首选条图。
趋势
是最常见的一种时间序列关系，关心数据如何随着时间变化而变化，每周、每月、每年的变化趋势是增长、减少、上下波动或基本不变，这时候使用线图更好地表现指标随时间呈现的趋势。
分布
是关心各数值范围内各包含了多少项目，典型的信息会包含：“集中”、“频率”与“分布”等，这时候使用柱图；同时，还可以根据地理位置数据，通过地图展示不同分布特征。
联系
主要查看两个变量之间是否表达出我们预期所要证明的模式关系，比如预期销售额可能随着折扣幅度的增长而增长，这时候可以用气泡图来展示，用于表达“与……有关”、“随……而增长”、“随……而不同”变量间的关系。

对信息中包含的5种关系，可以简单归纳如下：
构成：占总体的百分比
比较：项目的排名
趋势：如何随着时间变化
分布：项目的频率情况
联系：变量之间的关系

定义

数据可视化设计就是以数据表现的方式来帮助用户规避风险并做出良好的业务决策。
仪表盘则利用数据可视化的方式，将高度复杂的数据转化为有助于解决用户业务问题的关键要素。

仪表盘需要满足两点要求：

  • 数据应以最直观的形式展示，用户可以马上采取行动。
  • 用户可以灵活操作，根据数据能够预判接下来可能发生的事情。

作用

仪表盘能促使用户注意危险信息并采取相应的措施。
仪表盘可以显示数据类型、趋势和异常数据。
仪表盘可以使用户预测可能发生的事情。
仪表板可以把两个不同的图表连接在一起。
仪表盘可以分析数据的结构和重要信息。
仪表盘可以追逐信息路径、预测信息轨迹。

设计前：需求分析

确定目标用户——列出业务目标——汇总详细信息——定义指标——优先级排序

仪表盘类型

仪表盘主要有两种类型：操作仪表盘和分析仪表盘。
image.png

操作仪表盘的目的是提供当天信息的全面快照，可以对团队的预定目标进行跟踪。 分析仪表盘是一种工具，可以帮助用户分析多个变量中的大量历史数据，从而研究趋势、预测结果、洞察细节，帮助决策者了解公司关键指标，以更好地制定未来的决策。

仪表盘组件

常见的仪表盘组件：

  1. 导航或常用功能/页面的快捷按钮。
  2. 对于正在发生的事情的信息可视化（如指标数据）。
  3. 所有需要用户立即关注的内容（如警报、系统更新、警告）。

Lisa Battle在2016年的UXPA国际会议上发表了题为“为 SaaS和企业应用设计卓越的仪表盘”的演讲，其中仪表盘可以包含10个元素：警报、待办事项、统计信息、当前状态、搜索筛选器、任务操作、社交组件、活动、公告和推送内容。

信息层次结构图

（错别字：待办事项，第三层级）
image.png

设计中：视觉与交互

布局

仪表盘的布局有概要、内容和结论。

  • 概要：界面顶部显示标题，概要显示最重要的信息并汇总仪表盘的主要内容。
  • 内容：仪表板主体，通过可视化形式提供有关概要的更多详细信息。
  • 结论：页面的最后部分是详细信息和用于查找详细信息的操作列表。

根据浏览顺序仪表盘通常分为F布局、Z布局和并列布局。这些形式可以先让用户注意到摘要看板，然后再注意可视化数据，最后关注详细的操作列表。
image.png

F布局将概要放在左侧。随后的详情可视化数据位于右侧，用于提供更多详细信息。 Z布局遵循自上而下的阅读模式，概要信息位于界面顶部。相关的可视化数据位于概要下方，并占据了内容区域的整个宽度。 并排布局用于比较两项指标。这种模式允许用户从左到右扫描，反之亦然，方便比较信息。

图表

下图可以帮助决定哪个图表更适合目前的数据。
image.png
图表类型：
image.png

图形感知级别

克利夫兰的图形感知级别可以帮助调整并选择合适的图形属性，确保有效的传达信息。
image.png

交互模式

常见的交互模式有关键指标下钻模式、详情说明模式、多图表构成模式。
image.png

关键指标下钻模式：该模式通常为可单击的图形，如条形图和环形图。单击某个细分数据可以显示指标的数据详情。 说明模式：此模式使用关键指标面板来驱动仪表盘，并通过数据图表为关键指标提供解释说明。常见说明形式有指标趋势和指标细分。 多图表模式：此模式为一个图表驱动另一个图表。用户可以单击某个细分数据以查看另一个关联数据图。例如，点击某个用户群体（细分）查看用户群体的浏览量（趋势） 。

设计后：可视化测试