产品设计的基本要素包括-如何设计数据可视化平台

最近，我经常在项目中听到这样的话：“我想要一个炫酷的大数据屏”、“设计要有科技感”、“这个视觉设计没有焦点”……每当听到这些需求时，设计师老师通常有欲哭无泪的感觉。 酷和科技究竟意味着什么？ 客户了解什么样的大数据屏？ 是数据问题还是可视化问题？ ？

本文将结合最近在数据可视化项目中的一些经验产品设计的基本要素包括，谈谈什么是数据可视化，为什么需要可视化设计，以及从设计的角度开始设计数据可视化平台。

1.什么是数据可视化设计？ （什么）

在讲如何设计数据可视化平台之前，我想先讲一下我所理解的数据可视化。

“数据可视化就是把数据变成图表。” 这可能是很多人对数据可视化最直观的理解。 我们工作中常见的Excel图表、Power BI报表等都是数据可视化工具。 它们的功能是将数据转换为图表。 这种用图表的形式来呈现的理解并没有什么错。 从狭义上讲，数据可视化是将抽象数据语言用具体图形表达的过程。

如果我们尝试分别解释数据和可视化会怎样？

数据研究专家 Viktor Mayer-Schnberger 曾说过一句名言：“世界的本质是数据。” 数据可以理解为现实世界的快照吗？ 每个数据点代表了现实生活的一个记录表情包设计，比如便利店刚卖的一杯奶茶，或者社交平台上的一个在线账户。

数据是现实世界的简化和抽象表示。 从更广泛的角度来看，可视化不仅仅是一种工具，而更是一种媒介。 它是一种探索、展示和表达数据意义、讲述数据故事的方式。 数据可视化实际上是数据视觉，以数据为视角来观察和理解现实世界。

2. 为什么需要数据可视化？ （为什么）

可以说，数据可视化可以更好地共享和传达数据信息，数据可视化可以通过设计之美有效缩短信息的传递等等，这些都是需要数据可视化的原因。

更好的方法是使用 DIKW 模型来理解问题的本质。 DIKW系统将数据（Data）、信息（Information）、知识（Knowledge）、智慧（Wisdom）纳入金字塔形的层次体系中，每一层都被赋予了一些比下一层新的特征。 每个人对DIKW模型都有不同的解释。 这里我用一个简单的例子来解读一下我所理解的DIKW模型：

在DIKW金字塔中，每一级的升级都需要数据分析和数据可视化。 数据可视化的最终目标是为用户提供对事物的深刻理解和愿景，甚至帮助用户做出正确的选择。

3.如何设计数据可视化平台？ （如何）

在思考什么是数据可视化以及为什么需要数据可视化之后，如何设计数据可视化可能是一个更实际的问题。 数据可视化如果想要传达给用户，常见的方法是通过可视化平台来展示，比如网页、软件等卡通人物，本节将分析如何设计一个数据可视化平台，从抽象的设计思路到具体界面设计。

3.1 设计前考虑四个基本要素

就像设计产品一样，在设计数据可视化之前，也需要考虑用户是谁、应用场景是什么、可视化的目的是什么。 此外，思考数据是什么尤其重要。

在确定这些问题的答案的过程中，如果我们有足够的时间和资源，我们当然可以使用Persona、Storyboard等方法来总结； 但如果外部条件有限或者项目时间不足，测试一个非常实用的方法是结合研究问自己以下问题。 如果你能回答以下问题，将有助于设计者更好地理解数据、理解业务、理解用户，从而进行数据可视化设计。

用户可以询问

可以询问现场情况

可以询问一下数据

当然，数据相关的问题会由BA、DA等进行分析，但作为可视化设计师，需要对要展示的数据有一个基本的了解。 这将使我们更容易选择合适的图表来传达视觉提示。

你可以询问目的

3.2 目的！ 目的！ 目的！ ——数据可视化的两种Dashboard

“永远思考目的”是我的一位前培训师给我的一句话。 无论是在产品设计、体验设计、交互设计还是可视化设计的过程中，心中始终有一个明确的目的。 帮助设计师保持自己的设计理念，产出优秀的设计。

回到可视化平台的设计，数据平台总结起来有两个目的：探索性数据可视化（Exploratory Data Visualization）和解释性数据可视化（Explanatory Data Visualization）。

探索不同的用户及其目标可以帮助确定可视化和设计逻辑的基本类型。

下面通过两个例子来更清楚地展示操作仪表板和分析仪表板之间的区别：

（Cadabra Studio设计的操作仪表板）

（Shihab Tuhin 设计的分析仪表板）

3.3 用户洞察旅程图

从确定可视化四要素到确定可视化类型，我们逐步实现了从抽象的想法到具体的界面。 数据可视化设计与普通网站的区别在于，可视化会在同一个界面中呈现大量的数据信息和数据图表。 正确规划界面的设计可以让用户更高效地找到问题的答案。

一种有效的方法是通过用户洞察旅程图来设计眼动追踪模式。 用户洞察图与常见的用户旅程图的区别在于，它更关注用户通过数据可视化探索问题答案的过程。 在选择可视化图表的类型和布局图表的位置之前，必须考虑用户来到这个界面时想要解决什么问题，用户需要获取什么信息，用户会得到什么答案等。这个构思过程中，可以利用设计界面的眼动追踪模式来引导用户按照浏览图表的顺序，这里不再详细讨论。

3.4 最后回到最初的问题：如何让视觉设计变酷？

不仅在数据平台的概念设计中，而且在以往的平面设计和APP设计经验中，我们经常听到客户想要设计一个“更酷”或“高端”的设计。 审美是一个非常主观的标准。 面对不同的客户有不同的喜好和不同的项目背景，设计风格当然要灵活改变。 这里我们仅结合过去的项目经验来总结一些设计“炫酷可视化”的通用技巧。

FUI 和 HUD 组合风格

在设计产品之前，设计师一般会参考现有的类似产品设计和设计趋势，并结合品牌的风格来创建情绪板。 如果你想设计一个科技数据可视化，可以参考平视显示器和未来用户界面（Futuristic User Interface）的设计风格。

HUD首先出现在军用飞机上，以减少飞行员需要低头检查仪表的频率，避免注意力受到干扰。 HUD中平视的含义是用户无需低下头就能看到自己需要的重要信息。 HUD现在广泛应用于游戏界面设计中。 用户的视线将主要集中在屏幕中央的核心任务上，其他功能模块将在其周围为用户提供必要的信息。 在数据可视化设计中，可以参考HUD风格的界面布局和元素设计。

（HUD 设计：Booyang Jang）

FUI中的F不仅代表Futuristic，还可以理解为Fictional/Fantasy/Fake。 这些用户界面是科幻的、未来的、幻想的和虚假的。 它们只出现在影视作品和一些电子游戏中。 之中。 在日常生活中，我们不会为太空舱和钢铁侠设计用户界面，但FUI的概念让设计师有机会突破现有用户体验和用户界面的限制，大胆想象和探索新的领域，找到新的解决方案。 FUI风格会大胆使用丰富的图形元素，辅以点和线作为装饰，可以成为数据可视化的灵感来源。

（FUI 由 Territory Studio 设计）

颜色匹配

数据可视化的配色与产品的配色相同。 它需要背景色、主色、辅助色、功能色等。在选择背景色时，我们通常选择深色，因为深色背景可以营造出强烈的空间感。 视觉背景需要衬托画面中的主视觉。 如果背景颜色太亮，就会模糊可视化的焦点，影响视觉效果。 说到选择具有科技感的主色调，你可能首先想到的是科技蓝，但蓝色其实有很多种不同饱和度、不同色相的蓝色。 也可以尝试将其他颜色例如绿色、橙色等应用于数据。 在可视化中，数据可视化设计最重要的是根据不同的业务类别、不同的应用场景来确定配色。

结合以上概念，我个人认为设计较差和优秀的情况如下：

（图片来源网络）

图形元素

在项目中，客户经常会提出这样的想法：“如果我在这里放一个三维柱形图是不是特别酷？” 人们可能会有一个误区，认为三维物体一定因为是三维的所以看起来就特别有科技感。 但在设计数据可视化的过程中，我们应该优先考虑产品的业务场景和数据内容，并根据设计的一致性来选择可视化图表。 如果主视觉是二维的，就没有必要把某个模块设计成三维的。 。 设计二维图形时，可以从FUI风格中获得灵感。 点线装饰、渐变图形、发光效果等都可以增强设计的科技感。 如果条件允许，在合适的业务场景下设计三维场景也是增强视觉效果的一种选择。

（Pixflow 设计的 FUI 元素）

动画片

如今，我们在设计产品交互时，不再局限于从静态界面获取信息。 动态效果是增加产品丰富度、增强产品体验的重要手段。 通过动态效果展示数据信息是体现视觉科技效果的合理方式。 可以通过位移、旋转、透明、缩放等方式产生动态效果，形成独特的动画节奏，渲染科技氛围，增强用户体验。

4.最后

想要设计出好的数据可视化，首先要明白数据可视化是一种探索、展示和表达数据意义、讲述数据故事的方式； 另外，我们之所以需要数据可视化，是因为它可以为用户提供对事物的深刻理解。 知识、远见，甚至帮助用户做出正确的选择； 在设计数据可视化的过程中，始终要考虑数据是什么、用户是谁、它在什么应用场景、可视化的目的是什么。

在设计界面架构和逻辑时产品设计的基本要素包括，需要根据用户使用可视化平台的目的选择合适的仪表板类型，并进一步洞察用户的旅程，选择可视化图表类型并设计图表布局； 在设计界面风格时，充分考虑数据平台的应用场景，利用色彩搭配、图形元素和动画来提高界面的丰富性。

参考：

数据之美，Nanthan Yau；

DIKW系统；

设计仪表板之前你应该知道什么，咪咪；

视觉设计十大要素——风格，AYONG_BDR；