请查收～阿里巴巴设计师带来的数据大屏可视化设计的保姆级教程

一直以来，GMV是每年电商大促最牵动人心的数字。其实在这背后，同时有大量的消费者在发起咨询、纠纷和投诉。今天，Alibaba Design 将从可视化视角的五个维度：项目分析、大屏环境考察、设计流程、验收注意事项和标准化，同大家分享一些基础体验心得，谈一谈如何做数据大屏的可视化设计。

01

项目分析

动手做可视化之前，需要对项目有一个基础的了解。建议包括：业务背景、目的、产品、投放位置、适配、用户、行为路径、画像、数据来源、结构、数据极值、产出时效、质量等，再结合业务诉求和产品目标制定设计目标。

   对大屏所处环境的调研，对整个设计流程至关重要。建议关注：设备、大屏位置、用户角色及座位分布。

1. 设备

2. 用户分布

通过调研了解，还原场地人员分布情况，确定核心用户。老板主要关注核心指标、用户声音；数仓、开发、技术、PM、产品同学关注大屏稳定性和显示情况，业务主要关注大屏数据的准确性。

3. 座位

1. 内容分析

当可视化工作量庞大时，建议从项目优先级进行，从最重要、最不重要、不确定性排序。

2. 故事线

3. 布局框架

4. 选择图表

A. 基础图表

• 确定内容：明确要用图表传达的核心信息。例：体现2020、2019基于时间趋势的求助量对比。

• 判断关系：判断数据之间比较类型。例：折线图。

• 选择类型：选择对应含义的图表。例：折线图。

• 确定诉求：体现信息在多个图表里交互联动关系。例：体现多个问题在2020、2021的客诉量走势对比及相对应的用户声音。

• 选择类型：选择对应含义的图表。

• 制定方案：结合业务诉求、同技术制定交互方案。

5. 定义风格

6. 动效

例：突显从“量的发起”到“智能承载”到“人工接起”的数据流向。

7. 颜色

美国学者诺阿·伊林斯基在《数据可视化之美》中，总结可视化审美的标准有四大要素 - 新颖、充实、高效和美观。可视化大屏如何通过颜色，既要美观又要突出重点。总结有以下几点：

• 配色易辨识与区分：采用色调、明度差异较大的颜色进行搭配组合。

• 冷暖色、互补色对比：在数据图表里，多采用冷暖色、互补色能产生强烈对比，突出重点信息。

案例：

8. 字体

9. 搭建

视觉呈现（由于敏感性，数据已隐藏）：

验收注意事项

1. 硬件效果

(1) 显示

(2) 渐变色差

(3) 屏缝

(4) 字体

(5) 字符数

(6) 分辨率

• 当大屏为单电脑分辨率时，设计稿可保持一致。例：1920*1080、1920*1200。

• 当大屏为超大分辨率时，使用等比例缩小分辨率。但需要现场测试大屏展示为正常。例：13440*3240，作图尺寸为4480*1080。

(7) APNG

• 使用AE等软件制作动画，输出png序列帧。

• 导入“png序列帧”到iSparta（apng图片转换器）中，设置路径并输出。

2. 外在环境

(1) 灯光

(2) 装饰

标准化

1. 规范流程化

通用的设计大屏的流程，建议可将方法文档沉淀（例：语雀），或同产品、PM同步设计流程。

2. 样式组件化

在不同业务有相同诉求时，可将通用样式组件化。设计可提炼的有：字符数、轮播秒数、Tab样式、氛围图、动效等，最终横向复用多个业务。

赋能案例：

3. 衡量标准化

• 准确：这个产品很准确表达数据的特征信息，提供的数据准确对我有用。

• 清晰：这个产品能一目了然的表达故事，能一目了然的了解每块内容表达的含义。

• 有效：这个产品传递对我有用的信息并满足我的业务诉求。

• 美：这个产品设计风格美观。

以上总结的基本知识和事项，能帮助我们快速进入大屏设计及避免一些坑。但是可视化体验远远不止这些。欢迎大家提出更多意见和建议，我们一起前行。