背景

在这个数字化的智能时代，可视化大屏已然成为一个比较火热的媒介载体，数据可视化也成为我们设计领域比较新颖的设计手段，很多企业公司也从中发掘出更多的商业价值。在这样一个市场背景下，数据可视化的形态越来越丰富，例如不同的终端形态，不同的设计技法，不同的展示目的等等。确实酷炫的数据可视化可以让数据呈现更加美观、直观、快速、易于接收。作为设计师与时俱进，做一个面面俱到的设计师是必不可少的，那对于我们设计师要怎么去展开这样的一个设计呢？我们设计思维是什么样的呢？我总结以往可视化设计的一些经验分享给大家，希望对想要去接触可视化的朋友输出一些建设性的经验，那么我这篇文章就撸的有意义了😄

什么是数据可视化？

可视化大屏主要是将复杂的业务数据通过可视化的形式，以大屏为载体进行展示的行为就是数据可视化。好的可视化设计可以达到美观、直观、快速传递的体验感受，辅助企业团队分析决策、提升品牌形象、传递企业文化、调动观者情绪并挖掘出数据背后潜在的商业价值。

数据可视化的价值

可视化大屏相比其他终端有着面积大可展示内容多的优势，所以目前数据可视化大屏的商业目标基于优势基本可分为三大类；1:数据分析；2:内容展示；3:监控预警

数据分析

这样一个大屏共享的方式可以通过数据间的一个分析更方便团队的讨论决策，一个多维度的分析可辅助决策者做更超前的未来规划，发现更多机会的同时也可以建立团队的数据意识。

内容展示

首先这种可视化的形式是可以帮助企业提升形象、体现公司的实力和品牌形象，其次这种内容的展示可以更直观更清晰的表达企业的目标，降低观者的理解成本的同时还能带来震撼的视觉感受。内容展示的场景多用于发布会、直播现场、企业展厅、智慧城市、房地产接待处等等。

监控预警

监控大屏能实时并且真实地反映被监控对象，扩大了人眼的机能，可代替人工进行长时间监视并分析。实现风险量化、分级预警，帮助企业全面、及时掌握重点风险线索，并作出防御措施，这种场景多用于运营、运维中心、交易大厅等等。

设计流程

吧啦吧啦说了一堆理论，下面就到了展示设计流程理论和方法的时候了，其实做任何设计方法有很多，选择最适合的才是王道。老铁们搬好小板凳准备好瓜子...

大屏的故事线原则通常为先总览后细节，咱这篇文章我也按照这个原则来分享哈，下图是我整理出的整个大屏设计的思路框架；

可视化大屏设计的整体设计思路分为四个步骤，项目分析、设计思维、验收、标准化；

一：项目分析

项目分析是拿到任何一个项目之后需要做的，在我们设计开展之前肯定要对整个项目有个基本的了解，才能保证设计方向是否准确，精准达到设计目标，大家都知道影响用户体验的五要素，所以我们要用产品思维来制定设计目标。这样我们的设计才能在正向的方向前行。我们可以通过四个维度去分析：用户场景、用户属性、业务目标、环境考察。

用户场景

任何一个成功的产品都是基于用户目标出发的，因此我们要站在用户场景去分析，可围绕“在某某时间（when），某某地点（where），周围出现了某些事物时（with what），特定类型的用户（who）萌发了某种欲望（desire），想通过某种手段（method）来满足欲望。”这样的场景去逐步拆解分析，充分考虑到用户的一个使用场景，以及客观因素，才能做出和用户需求契合度很高的设计。

用户属性

其实说的就是用户画像，了解用户画像可以更深层的去了解用户，可以更好的去引导设计、开发、运营。还可以帮助设计确定风格基调，交互设计以及一些偏好设计，更好的去迎合用户的喜好，贴合用户诉求。用户属性的调研可基于以下几个方向；

1:个人信息（年龄、性别、职级、最高教育程度）

2:特点（工作年限、专业领域、兴趣爱好）

3:技术层面（设备形态，使用频率）

业务目标

帮助用户达到他的业务目标是我们做大屏设计的一个首要原则，也是我们做可视化大屏的目的，更是我们带来商家价值的一个延续。我们可以围绕三个方向去确定。

1:团队内部进行讨论分析并且总结，为以后规划提供更针对性的方案；

2:汇报使用，基本用户政府机关部门，用来展示领域实力，给上级领导汇报业绩工作；

3:用于监控运营运维中心或者交易中心等等。

环境考察

了解大屏硬件设备是设计展示的必要前提，他的物理尺寸、分辨率尺寸、顶部有无遮挡物、灯光、室内室外等等，这个对于设计思考来说很重要，一些特殊的环境会影响整体的效果，基本分为两个维度：硬件形态、硬件环境。

硬件形态：大屏的形态一般有Led屏和拼接屏，基本LED屏分辨率为1920*1080，拼接屏基本分辨率为13440*3240，其中设计最重要关注的是拼接屏的屏缝问题（0.3cm），在去做界面的时候要考虑到用色和元素来避短，使界面的视觉感受达到最优。还经常会涉及到一个问题拼接屏的分辨率尺寸很高设计师怎么建画板，设计在建画板的时候使用原尺寸会是出现卡顿、加载缓慢甚至会设计软件直接崩掉了的情况，很影响设计师的心情。实战经验说其实是是可以同等比缩小到一个合适大小，切图的时候去切2倍或3倍给到开发，视觉呈现不会有问题。

硬件环境：室内室外、光线、遮挡物，会给整体视觉带来哪些干扰其实都应去提前做了解，例如暖系灯光会让大屏色调有所改变，顶部装饰联有可能会将顶部标题遮挡，影响观感整体性，室外大屏要清楚主要角色的观看距离，可确定更清晰的可视范围。

二：设计思维

我领导经常说可视化大屏肯定不能为了酷炫而酷炫，但是客户有时候就有个词就是要“酷炫”，其实这种情况如果你有一个自己的设计思维，去和客户沟通才会更有说服力。做大屏设计基本是服务业务指标的，要将故事表达清楚才是做好大屏的前提，其次再去考虑视觉酷炫，这也是可视化大屏设计的价值所在，下图是做可视化设计方案的一个流程。

业务指标分析

对需求内容进行分析整理，捋清故事线，建议可以从业务需求的优先级进行，从最重要、最不重要、不确定性进行排序。确定主要信息、辅助信息、次要信息，使整个大屏层次清晰，一目了然。

框架布局

相当于原型输出，将主链路放在视觉着重点的位置，辅助信息围绕主链路分层次展开，内容布局可采用删格化方法，以规则的网格陈列来指导规范界面中的版面布局以及信息分布，保证内容适配的灵活度以及整齐感，让界面更加有条理性，让内容可读性变高，模块化的管理元素，基本使用原则是在设计中需要一致的使用8的倍数来定义元素尺寸、填充和边距，为什么是8呢，因为它进可攻退可守，就跟设计师做移动端为什么会选择中间尺寸做基础设计的原理一样。

图表选择

确定图表的类型是做可视化大屏设计的一个必要内容，一个好的图表类型可以降低用户的认知成本，并且可提高整体大屏的视觉效果，所以选好图表类型在可视化大屏设计中非常重要。

选择什么图表，需要回答的首要问题是『我有什么数据，需要用图表做什么』，而不是 『图表长成什么样』 。因此我们从数据出发，从功能角度对图表进行分类。

下图是别的文章里借鉴的，向大家展示了数据分析常用的4个维度，我们在选定指标后，就需要跟项目组其他小伙伴讨论我们想通过可视化表达什么样的规律和信息。而下图，可以引导我们从“联系、分布、比较、构成”四个维度更有逻辑的思考这个问题；

视觉搭建

情绪板

视觉呈现：情绪板在平面设计领域尤其是室内设计和时尚界被广泛使用。建立情绪板是我们去搭建页面之前做的一个准备，在设计过程中使用情绪板，可以更好地寻求设计方向，还可以在团队之间传递设计灵感与设计思路，从而使想法充分融合，深化设计。通过情绪板我们可以获得字体、颜色、布局、图形、动效等等视觉方向。

动效思路：动效是使你大屏酷炫有亮点的一个重要元素，对用户而言，大屏动效能便于用户理解，减少认知成本；可以提升用户体验。动效应优先满足核心内容、故事线。用于突出产品核心功能和特点，引导用户的视觉流向。其次也要考虑动效如何落地，通常动效格式可为png序列帧、gif、mp4，每个格式都有其优缺点，例如gif文件大小合适，前端使用方便，但是对透明通道不是很友好，渲出有透明通道或者光晕感觉的gif就会有糙边；png序列帧可避免透明通道问题，但面对时间较长的动效，文件包的大小会很大，加载速度会很受限制，从而会影响体验效果，所以考虑动效制作期间也要思考动效如何落地。

视觉搭建

对情绪版的内容做整理和归纳，最终可以搭建出匹配度很高的视觉设计方案，这样一个科学高效的设计方法对内评审或者对甲方爸爸都会很有说服力，也会降低后续修改次数。视觉确认后，就会去和开发沟通切图标注的问题，基本是开发用代码写不出的样式或动效，就会需要设计师切图支持，基本这样一顿猛虎操作，开发还原度能达到百分之九十以上了。

三：设计验收

设计端着架子去看成果的时候最有底气了，没有达到还原度标准直接喷，不仅仅是要给自己设计成果的一个交待，也是为了更完美的达到客户的需求目标，提高客户满意度。可视化大屏设计可以围绕两个维度来作为验收标准：开发还原度、硬件效果。

内部开发还原度

这个其实有经验的小伙伴都应该清楚一些小心酸，遇到复杂点的技术，开发小伙伴开始基本是打算用专业知识打败你，奈何你没被打倒，接着会用感情牌击垮你的同理心，例如’小姐姐，我好多天是顶着凌晨的月光下班，吃不好还失眠。’真的如此辛苦吗？这个时候就要靠自己去衡量了，是真的实现困难还是自身懒惰，所以设计师对前端的基本实现原理要清楚，不仅为了保证设计能快速完美落地，其次设计师本身也不会很被动。我们团队还原度和设计稿基本要达到百分之九十五以上算合格，这个每个团队不一样，肯定是越高越好了。

硬件效果

前端开发完要在真实物理大屏上模拟一下现场效果，看一下字体大小、配色、屏缝、加载速度、是否有遮挡物，灯光颜色等问题，在制作过程中可能会忽略的小问题在大屏上会被放大，问题会尤为明显。提前在硬件上看一下，要保证现场效果最佳。

四、标准化

标准化是对此次设计的一个积累和沉淀输出，可为之后的同属性大屏设计提高效率和生产力。如何去做标准化，我们可以考虑两个层面：组件化、衡量标准化。

组件化思维

组件化设计思维是通过对功能及视觉表达中元素的拆解、归纳、重组，并基于可被复用的目的，形成规范化的组件，通过多维度组合来构建整个设计方案，从而提升设计效能，可以横向复用多个业务不同的大屏。

我们可以套用原子理论来丰富我们的组件库，更可以说是打造一个扩展性很强的可视化素材库，提升生产力开拓设计思维。什么是原子理论？我们知道“分子是由原子组成的，分子分成原子，原子也可以重新组合成新的分子”。具体的理论内容网上会有很多讲解，大家可去翻阅，后续时间也可给他大家撸一篇组件化的文章。

样式的组件化他有哪些优势呢？

项目层面：可以保持设计的统一性整体性，大大提升了设计效率，易于日后的扩展和维护。也能让前端工程师清楚地了解产品框架层和表现层的逻辑结构，降低不必要的沟通和修改成本。

个人层面：提供了清晰的方法论指导，同时帮助团队成员更好地理解设计体系的价值。只需轻轻改变某些原子、分子的属性或组合方式，便会迎来整个体系的同步更新，消除日常重复性工作，设计可以有更多时间去做创新的尝试

标准评审

四个设计原则，其实这套设计原则是基于 Ant Design 设计体系衍生的，已经很成熟了，很多团队工作中会借鉴作为b端设计的指导原则。他们经过大量的项目实战经验，总结了四条核心原则：准确、清晰、有效、美。其实也可借助这四条原则作为我们衡量可视化大屏设计好坏的四大准则。

准确   

这个产品很准确表达数据的特征信息，提供的数据准确对我(用户)有用

清晰 

（结构）这个产品能一目了然的表达故事，清晰的平面布局以及清晰的数据纵深路径能很好的帮助阅读者获取信息（内容）能一目了然的了解每块内容表达的含义，信息传达有重点，克制不冗余，避免信息过载，用最适量的数据-油墨比（Data-ink Ratio）表达对用户最有用的信息。

有效   

这个产品传递对我有用的信息并满足我(用户)的业务诉求。

美        

合理利用视觉元素进行映射，运用格式塔原理对数据进行分组，既能帮助用户更快的获取信息，也能在一定程度上建立一种秩序美、规律美。

以上是我做可视化大屏的一些过程及思考，里面也会涉及到一些大厂的设计思维，一些比较成熟及合理的设计思维自己平时也可以借鉴，可以很快培养出自己的思考模式，里面包含的一些方法论和理论不仅适用于可视化大屏的设计，对于一些C端产品设计和平面设计也可以嵌套进去得到一些灵感方法。希望大家看完后可以给日后的设计找到一些思路。欢迎大家提出更多意见和建议，我们一起前行。

谢谢大家