给项目培训所做的PPT，将可视化设计规范部分整理分享，尤其是大屏设计尺寸方面，本文干货较多，可耐心食用，欢迎友好讨论

一、数据可视化的概念

上述解释来自维基百科，个人在接触了一定数量的大屏设计后，将大屏总分为信息概览、数据分析、监控预警三大类。利用屏幕大展示信息多的特点，将抽象、复杂的信息通过可视化的方式直观的展现出来，以易于理解的形式帮助人们更好决策。

1、信息概览

可视化大屏一般通过重要内容和核心数据来告知用户。业务整体状况如何？有哪些关键指标？各指标的运行情况分别如何？哪些指标出现异常？需要用户做些什么？

2、监测预警

3、数据分析

二、可视化设计流程

1、需求分析

    甲方爸爸的需求再经过项目经理的“加工”，有时候到设计师的时候已经扑朔迷离，最好设计师在需求分析时提前加入项目中，以解决项目需求为目标完成视觉设计。

    ps：数据驾驶舱、可视化大屏注意区分，哪些是要做数据概览（看板），哪些是要做数据可视化大屏。

2、硬件了解

首先我们需要了解大屏物理尺寸和分辨率尺寸，来确定设计稿尺寸。这里首先介绍一下大屏的几种展示方式，物理大屏一般可分为普通大屏、拼接屏、LED/LCD屏、DLP屏和投影。

a、拼接屏

拼接的每块小屏一般是16:9的高清屏，通过不同数量的屏幕拼接在一起，形成一个大面积的显示区域，达到超大的显示效果。液晶拼接屏基本上都是拼接使用，一般都是2*2、2*3、3*3、3*4……等拼接起来形成一个大屏幕，所以为了达到更好地显示效果，其单屏的边框非常窄，一般为无缝隙、1.7mm和3.5mm，价格也相应越贵。

在做拼接屏的可视化设计时，需要注意拼接缝隙，将一些指标文字、数字及图标等避开边框，以免影响最后的展现效果。

当大屏的比例和电脑屏幕的比例一致时，以电脑屏幕分辨率为准来制定设计稿尺寸。如下，当大屏尺寸为

7680*4320时，设计稿分辨率应为3840*1260或1920*1080导出2倍图，总体分辨率控制在4K左右。

b、LED/LCD屏幕

LED大屏由若干小LED显示模块组成，越小的点间距也意味着越高的清晰度。

c、投影

投影也是大屏展现形式的一种，通常这种展示方式高效且方便用于会议汇报。但也有一定的缺点，如清晰度受损，色差严重。

输出总结

大屏的比例和电脑屏幕的比例一样时，结合输出电脑屏幕的分辨率来定设计稿尺寸。

当输出电脑的分辨率为1920*1080时，设计稿为1920*1080；当输出电脑屏幕分辨率为4K（3840*2160）时，可选用同比例下的1920～3840*1080*2160的尺寸作为设计尺寸。

非同比例时

举个特殊的例子，曾经接触过一个完全不知道大屏分辨率的设计，在通过大屏分辨率测试后又得知大屏和电脑屏幕为不同比例，这时候一切以大屏实现的效果为主，从而保证设计质量。

3、页面布局

在确定好页面尺寸后，着手开始页面的布局，以下是几种常用的布局方式，将梳理后的业务指标通过模块化的设计布局在页面上，同时需要注意：

• 合理展示信息，对信息的展示量进行控制

• 区分信息主次，使信息显示主次分明

4、图表选择

图表设计是数据可视化的一个分支领域，是对数据进行二次加工，用统计图表的方式进行呈现，也是数据可视化的核心表现，图表设计既要保证图表本身数据清晰准确、直观易懂，又要在找准用户关注的核心内容进行适当的突显，帮助用户通过数据进行决策。  

简单总结一下：

• 基本图表：折线图、散点图、条形图、柱状图、气泡图、组合图、面积图、饼图等。

• 复杂图表：仪表盘、地图、流向地图、热力地图、树形图、框架图、漏斗图、甘特图、词云图、雷达图等。

选择图表时，需要了解不同图表的优劣以及它们适合的应用场景，尽量较少数据噪音，不要同时给予用户太多的内容。

5、视觉动效

需要注意的是，动画与过渡使用不当会带来适得其反的效果。如何巧用动画与过渡，需要做到以下几点：

1. 适量原则：动画不宜使用过多（尤其是自动播放的），避免陷入过渡设计的危机中；

2. 统一原则：相同动画语义统一、相同行为与动画保持一致，保持一致的用户体验；

3. 易理解原则：简单的形变、适量的时长、易判断、易捕捉，避免增加观赏者的认知负担。

实现动效的方式有很多，目前主要以C4D建模渲染为主，辅助AE导出JSON文件给到开发，如果

你了解UE4就更好啦

三、其他事项

1、字体选择

因为客户多为政企部门，字体要求会稍微大一些，这里采用16号字体作为正文字体。

主页关注公众号回复“字体”获取大屏常用字体包

2、颜色搭配

在颜色搭配时遵循“631”搭配原则，页面中60%使用主色调，30%使用辅助色调，10%使用对比色调。

不同主题色所搭配出来的大屏视觉呈现和展示出来的情感是不一样的

• 科幻、前卫、赛博朋克、未来：紫色、蓝色/荧光

• 青春、活力、教育类：蓝、黄、绿等；

• 富有质感、高端大气：黑色/灰色/浅白色，设计时搭配同色系类似色可以使画面更高级、搭配对非同色系画面色域丰富。
  

• 主页关注公众号回复“色卡”获取色卡AI、sketch源文件

  
  

  3、素材收集

  
  

  利用Eagle收集优秀作品、贴图，平时积攒属于自己的可视化组件库，在需要的时候快速找寻灵感

  网站：pinterest、dribbble、behance、Zcool、Tob.design、UI中国

  关键词：HUD、FUL、驾驶舱

  地图类：高德开放平台：https://lbs.amap.com/

              地图下载选择器：http://datav.aliyun.com/tools/atlas/#&lat

  图表类：https://echarts.apache.org/zh/index.html

Powered by Froala Editor