曹竞羽 · UX 设计师

1.数据可视化大屏设计流程

对于设计师来说数据可视化大屏设计基本流程为 6 个阶段：开启项目、分析梳理、调研用户和需求、设计大屏、沟通开发、交付（具体流程见下图）。

可视化大屏项目简要设计流程图

 

 

2.设计师做数据可视化大屏的分析思路

2.1.问题分析

首先：数据可视化大屏本身是一个解决方案。

当客户说：我们要一个数据可视化大屏来说明xxx”时，是直接提出了一个解决方案。而作为设计师，我们需要追根溯源，了解“解决方案”的本质是解决什么问题。设计师最终解决的表面上是数据可视化大屏，实质上是解决了客户面临的问题。

如果我们不去分析问题，而是按照客户的要求直接做解决方案，可能发生以下情况：

1. 客户：大屏这么贵，性价比不高
2. 客户：大屏不实用
3. 客户：大屏不好用

因此客户说：我们要一个数据可视化大屏来说明xxx”时，作为设计师按照问题分析流程去操作：

• 发现问题：当前发生了怎样的问题
• 定义问题：具体要解决怎样的问题
• 分析问题：为什么产生这个问题
• 提出解决方案：有哪些解决方案，为什么客户选择数据可视化大屏这个解决方案，每个解决方案（尤其是数据可视化大屏）的优缺点是什么
• 确定解决方案：确定是否用数据可视化大屏作为解决方案，是否还有更好的方案

问题分析流程

对于设计师来说，得到确定的解决方案和梳理问题分析逻辑同等重要。不仅仅要通过调研和采访针对客户的数据可视化方案再进行一次问题分析流程，还要清晰了解到最终选择数据可视化大屏的原因和具备的优势。

举例说明：

某项目中客户说到：我们要一个数据可视化大屏来展示营销活动情况。

按照上述的问题分析思路，按照问题分析流程去了解背景。通过客户进行访谈，了解到当前问题是：活动状态不透明，领导层难以快速直观地了解活动详情。

顺着上述问题问题思路，整理出下图的分析内容：

由此可以得到对于该问题有多种解决方案，它们各有千秋，但是数据可视化大屏相比起其他方案有以下重要优势：

• 认知减负
• 产品实现模板化
• 系统实时可交互
• 数据信息的视觉传达效果好
• 数据信息的视觉效果好
• 降低数据分析成本
• 降低数据查找成本

最终我们可以得出：数据可视化大屏确实是最适合展示活动情况的方案。

2.2.解决方案分析

了解到根源问题和问题分析后，设计师还需要针对数据可视化大屏这一方案进一步详细分析。

一般而言，设计师较为熟悉的是针对于 app 的方案分析方法，下面通过对比，说明出数据可视化大屏的分析点。

对于软件 app 的交互体验来说，我们一般从人、事件、行为进行痛点和机会点分析。

在此类 app 分析中，使用的场景和原因各不相同。甚至于对于不同的人，使用同一个app 的目的和期待也是不同的。因此剧本的每一步都有很大的不确定性。

对于数据可视化大屏项目，因为大屏是固定放置在固定地点，使得使用时间、使用地点变得更为固定，因此剧本的很多步骤都是非常确定的。

值得一提的是，在数据可视化大屏项目中，不仅仅体验会对用户造成影响，数据形态、数据质量、数据呈现效果甚至数据呈现的含义都会对用户的产生影响。

在场景化剧本下，可能发生以下情况：

1. 用户使用大屏时，无法快速读取所需信息，心情不好
2. 用户使用大屏时，上手难，查找数据耗时长，心情不好
3. 领导使用大屏时，发现数据非常糟糕，心情不好
4. 部门 a 使用大屏时，发现自己部门绩效数据非常糟糕，心情不好

对于数据可视化大屏，设计师需要对于大屏使用对象是谁（角色定位）、对象关心什么（主题和数据）、如何用数据支撑（可视化效果和数据内容）。这一步往往通过对客户的访谈完成。

3.设计师需要了解用户

3.1.明确用户

通常来说：

领导层：关注指挥型、决策型数据

管理层：关注汇报型、解释型数据

执行层：关注监控型、探索型数据

值得注意的是，很多情况下，大屏的制作者、使用者、观看者并不是同一类人。他们对大屏的理解和需求也不一样。设计师应该更多考虑使用者、观看者的职位和角色。

3.2.明确用户目的

通常来说：

领导层：目的在于定位问题、辅助决策

管理层：目的在于展示业绩、目标达成情况

执行层：目的在于平铺数据、分析问题

其他更多可能：

数据分析及风险事件处理，帮助团队对事件迅速作出响应，高效协作

展示产品能力、进行产品宣传

展示工作业绩、呈现社会价值

举例说明：

某数据大屏项目中，领导层的目的是：

• 监控销售情况：正在发生的销售状态和可能趋势（发生了什么？）、值得注意的风险（需要哪个团队？需要团队做什么？）
• 涉及追责：销售团队的工作进展好坏
• 不涉及深入分析原因：只展示进展情况，不分析背后的成因

执行层-营销团队的目的是：

• 了解所负责销售大致情况，避免活动不佳引起关注和追责
• 了解所负责销售大致情况后自主展开进一步的分析和调研

4.设计师需要了解需求

4.1.探索用户需求

在和客户沟通需求时，一开始客户并不一定能完全、清晰说出自己想要什么。作为设计师，我们需要通过设计思维，逐步引导客户表达他们的需求，充分与客户合作做出的设计稿。

借用双钻模型的思路，下图展示了探索的思路。

在第一步，客户很可能只有主题和简单的表达内容，并不能很好的展示全面主题下的数据。设计师需要做出粗略的设计稿并且给出更多的建议、适当提出问题，以便客户输出更多的想法。

我们收集到想法后，进行汇总分析，制作出低保真设计稿。在第二步中，设计师可以根据数据进行图表的各类尝试，并提供给客户选择。

通过了解到客户的想法，设计师可以完成最终的高保真设计稿，进入交付。

双钻模型

 

4.2.明确总需求

向客户询问“大屏主题”后必须进一步询问主题下一层的数据需求。注意不要只关注需求，更要关注需求从哪里来，为什么有这样的需求，设计师也可以思考需求将如何呈现。

举例说明：

某数据大屏项目中，大屏主题是营销活动情况监控：选择具体活动，展示活动具体信息。

需求成因：

1. 优先了解大型活动的情况
2. 了解活动进展情况
3. 了解活动进展相关数据

数据项目比起其他c端或者b端项目，设计师需要了解很多数据相关的内容，例如：

• 了解哪些大型活动定义
• 活动进展好坏的定义
• 活动进展主要影响因素。
• 数据目标、核心指标
• 数据维度
• 数据展现情况

采取草图绘制的方式进行沟通。一方面可以在沟通和碰撞中激发出客户更多的灵感和想法，另一方面可以给客户基础的大屏认知。

举例说明：

通过某数据大屏项目的错误方式和正确方式，来说明如何和客户沟通需求。

🙅错误方式：

直接给出了非常详细的设计稿，如下图所示。客户看到设计稿后非常惊喜，但并不意味着是一个很好的开始。过于详细的设计稿，使得客户的思维被局限在设计稿上，没有得到更多的信息输入和灵感，而是讨论设计稿上细节问题（文本、颜色、字体等）。

并且，客户通常会更希望设计师按着他们的想法和要求走。如果一开始就提供下图的设计稿，客户会在意细节而非整体结构，因此很难说服客户，提供更合适的设计。

🙆 正确方式：

第一步展示粗略的设计稿，如下图所示。在粗略的设计稿上，询问了逻辑规则、展示目的、文本等问题，再进行下一步的设计。不仅仅是了解更多客户的想法和思路，还给予了客户更多的发挥空间，也减少了设计的更改变化。

这里也可以用来向客户说明为什么方案在左边，方案数据信息在右边更适合用户使用和阅读。从大的结构框架开始和客户核对。

第二步则是讨论图表形式，如下图所示。在现有的设计基础上，给出更多的图表可能性，不仅可以帮助客户梳理需求和目的，也能进一步确定图表的类型。

第三步才是确定最终样式，如下图所示。此时可以和客户核对文本、颜色、数据量等细节。

4.3.明确数据需求

数据可视化大屏的首要重点就是数据，但是数据不是凭空出现的，也不是随机选择的，而是业务分析师、数据分析师根据业务整理出的核心关键数据。

作为设计师虽然不参与数据的整理分析工作，但是也需要了解数据的由来等信息，才能更好的理解大屏的产品含义和目的。

• 数据是如何得出的：构建 X 问题 – 提出假设 & 选择指标 – 数据采集-数据分析-梳理需要的数据指标和监测维度
• 数据的作用：深入了解业务全貌、快速定位业务问题、明确业务解决方案等
• 数据反馈：用户看到数据后的下一步行动

以常见的基金数据为例进行说明。

基金数据分析的目的：

判断基金的优劣，从而选购基金

为了目的，先需要划分出对目的有影响的指标和数据，比如什么指标会影响基金的优劣。

再详细分析指标的各个维度，除了维度以外，更重要的是数据会反馈怎样的结果，比如最大回撤小是代表波动小。

最后根据所有指标呈现的结果，得到我们目的的结果：基金是否好？是否值得购买？

4.4.明确可视化图表

根据客户对于数据展示的想法和理解，为客户找到最佳的可视化显示方式。

Step 1：了解数据的作用

Step 2：了解展示的目的

Step 3：根据 step 1 和 2 分析出最佳展示可视化图表

很多时候客户会直接说出图表类型，此时应该追溯到数据本身的作用和想要表达的内容。

例如：客户说：“我要一个订单趋势图”。实际上客户想要的是订单量在某段时间的变化，从而展示出订单量波动趋势和未来走势。

设计师应该分析出客户背后隐藏的需求，去确认数据（对应订单量、时间段等），以及确认目的（之前趋势和未来走势），而不是直接确认图表类型（趋势图）。

举例说明：

某数据大屏项目中希望展示订单的商品分布，用于了解在订单中不同商品类型的占比，突出高占比商品类型。因此，可以得出图表要展示占比情况，以及占比情况的对比。

占比来说，很多人会选择饼图、圆环图。但是饼图在展示对比的时候不够明显。最终采取了柱形图，由高到低依次展示车型占比情况。不仅可以展示出占比值，也可以对比出占比值，还能够标注出具体商品类型对应的订单量。

5.了解用户的真实使用感受

除了交互会影响用户的感受，本身数据的表达力和数据展示的信息也会对用户的感受造成影响。

比如数据显示大部分业绩都差，用户肯定感到不快。或者数据很难理解，用户肯定感到费解。

一般来说，测试是最直接了解用户感受说明测试的重要性和目的。同时也要接受客户考虑到其他因素而放弃测试。

举例说明：

某数据大屏项目中，1号部门对于订单的理解是预订单，但是2号部门对订单的理解是订单。1号部门对于差的表达是bad，但是2号部门对差的表达是worse。因此，我们和客户一同统一了相关专业术语，并拉齐各部门的理解和同意，以确保大屏易读性和准确性。

举例说明：

某数据大屏项目中，用户希望了解方案进展是否好。从设计的角度需要细分等级和警示的层级以及标准，并用文本明确划分警示等级。

领导层随时会查看营销活动情况，营销活动部门希望尽可能在领导层上展示出更好的活动情况和进展，突出部门优秀绩效而非不足之处。过于细分的标准和过于醒目的颜色会使得营销活动部门容易受到追责和关注。

因此在文本和颜色的使用上，以及标准的设定上进行了调整。

6.总结

1. 数据可视化大屏是一个解决方案，设计师需要了解背景存在的问题，以及问题的分析流程
2. 在动手设计前，设计师需要了解用户和用户目的、客户需求和数据需求
3. 在设计稿呈现后，设计师需要通过测试和访谈了解用户真实使用感受，并进行改进