（转）超全面设计指南：如何作大屏数据可视化设计？

 

数据可视化是一门庞大系统的科学，本文全部讨论仅针对大屏数据可视化这一特定领域。管中窥豹，若有遗漏或不足之处欢迎你们讨论交流。

文章结构及思惟导图：

1、基础概念

1. 什么是数据可视化

把相对复杂、抽象的数据经过可视的方式以人们更易理解的形式展现出来的一系列手段叫作数据可视化，数据可视化是为了更形象地表达数据内在的信息和规律，促进数据信息的传播和应用。

在当前新技术支持下，数据可视化除了“可视”，还可有可交流、可互动的特色。数据可视化的本质是数据空间到图形空间的映射，是抽象数据的具象表达。

数据可视化做品《launchit》

做者：Shane Mielke

做者写了本书，地图上显示了世界各地读者的分布状况及对应人数。

数据可视化做品《world-drawn-by-travelers》

做者：TripHappy

国家之间相互连通的旅游路线，颜色越相近的国家，代表两国家的人们互动越频繁。

2. 什么是大屏数据可视化

大屏数据可视化是以大屏为主要展现载体的数据可视化设计。

“大面积、炫酷动效、丰富色彩”，大屏易在观感上给人留下震撼印象，便于营造某些独特氛围、打造仪式感。电商双11类大屏利用此特色打造了热烈、狂欢的节日氛围，本来看不见的数据可视化后，便能调动人的情绪、引起人的共鸣，传递企业文化和价值。

利用面积大、可展现信息多的特色，经过关键信息大屏共享的方式可方便团队讨论、决策，故大屏也经常使用来作数据分析监测使用。大屏数据可视化目前主要有信息展现、数据分析及监控预警三大类。

数据分析类：

图片来源：必应

图片做者：帆软软件有限公司

2、大屏数据可视化设计原则：设计服务需求、先总览后细节

1. 设计服务需求

大屏设计要避免为了展现而展现，排版布局、图表选用等应服务于业务，因此大屏设计是在充分了解业务需求的基础上进行的。

那什么是业务需求呢？

业务需求就是要解决的问题或达成的目标。设计师经过设计的手段帮助相关人员达成这个目标，是大屏数据可视化的价值所在。

2. 先总览后细节

大屏由于大，承载数据多，为了不观者迷失，大屏信息呈现要有焦点、有主次。能够经过对比，先把核心数据抛给用户，待用户理解大屏主要内容与展现逻辑后，再逐级浏览二三级内容。部分细节数据可暂时隐藏，用户须要时可经过鼠标点击等交互方式唤起。

3、大屏可视化设计流程

规范的流程是好结果的保证。找到一个可参考的流程，而后步步为营，就能避免不少没必要要的返工，保证设计质量和项目进度。

1. 根据业务场景抽取关键指标

关键指标是一些归纳性词语，是对一组或者一系列数据的统称。通常状况下，一个指标在大屏上独占一块区域，因此经过关键指标定义，咱们就知道大屏上大概会显示哪些内容以及大屏会被分为几块。

以共享单车电子围栏监控系统为例，这里的关键指标有：企业停车时长、企业违停量、热点违停区域、车辆入栏率等。

肯定关键指标后，根据业务需求拟定各个指标展现的优先级（主、次、辅）。

2. 确立指标分析维度

“横当作岭侧成峰”。同一个指标的数据，从不一样维度分析就有不一样结果。不少小伙伴作完可视化设计，发现可视化图形并无准确表达本身的意图，也没能向观者传达出应有的信息，可视化图形让人困惑或看不懂。出现这种状况很大程度就是由于分析的维度没有找准或定义的比较混乱。

上图向你们展现了数据分析经常使用的4个维度，咱们在选定指标后，就须要跟项目组其余小伙伴讨论：咱们的各个指标主要想给你们展现什么，更进一步的讲，是咱们想经过可视化表达什么样的规律和信息。

而上图，能够引导咱们从“联系、分布、比较、构成”四个维度更有逻辑的思考这个问题。

1. 联系：数据之间的相关性
2. 分布：指标里的数据主要集中在什么范围、表现出怎样的规律
3. 比较：数据之间存在何种差别、差别主要体如今哪些方面
4. 构成：指标里的数据都由哪几部分组成、每部分占好比何

固然，上图例举的示例图表都比较传统，在大屏数据可视化中常还有另外一类地理信息（常以2/3D地图、地球呈现）出现。上图虽未包含这类图形，但它提供给咱们的肯定数据分析维度的思路和方法是相通的，可借鉴。

3. 选定可视化图表类型

当肯定好分析维度后，事实上咱们所能选用的图表类型也就基本肯定了。接下来咱们只须要从少数几个图表里，筛选出最能体现咱们设计意图的那个就行了。

选定图表注意事项：易理解、可实现。

易理解就是可视化设计要考虑大屏最终用户，可视化结果应该是一看就懂，不须要思考和过分理解，于是选定图表时要理性，避免为了视觉上的效果而选择一些对用户不太友好的图形。

可实现：

（1）咱们须要了解现有数据的信息、规模、特征、联系等，而后评估数据是否可以支撑相应的可视化表现。

（2）咱们设计的图形图表，要开发可以实现。实际工做中，一些可视化效果开发用代码写很容易实现，效果也不错，但这些效果设计师用Ps/Ai/Ae这些工具模拟时会发现比较困难。一样的，某些效果设计师用设计工具能够轻易实现，但开发要用代码落地却很是困难。

因此大屏设计中跟开发常沟通很是重要，咱们须要明确哪些地方设计师能够尽情发挥，哪些地方须要谨慎设计！一个项目总有周期与预算限制，不会无限期的修改迭代，因此设计师在这里须要抓住重点，有取舍，不钻牛角尖、死磕不放。

4. 了解物理大屏，肯定设计稿尺寸

多数状况下设计稿分辨率即被投大屏的信号源电脑屏幕的分辨率。有多个信号源时，就会有多个设计稿，此时每一个设计稿的尺寸即对应信号源电脑屏幕的分辨率。

通常状况下设计稿的分辨率就是电脑的分辨率，当有多个信号源时，有时会经过显卡自定义电脑屏幕分辨率，从而使电脑显示分辨率不等于其物理分辨率，此时，对应设计稿的分辨率也就变成了设置后的分辨率。

此外，当被投电脑分辨率长宽比与大屏物理长宽比不一致时（单信号源），也会对被投电脑屏幕分辨率作自定义调整，这种状况设计稿分辨率也会发生变化。因此设计开始前了解物理大屏长宽比很重要。

5. 页面布局、划分

尺寸确立后，接下来要对设计稿进行布局和页面的划分。这里的划分，主要根据咱们以前定好的业务指标进行，核心业务指标安排在中间位置、占较大面积；其他的指标按优先级依次在核心指标周围展开。通常把有关联的指标让其相邻或靠近，把图表类型相近的指标放一块儿，这样能减小观者认知上的负担并提升信息传递的效率。

6. 定义设计风格

不少小伙伴也许没接触过大屏设计工做，但大多数人都应该有APP或者Web风格定义的经验。咱们在定义一款APP或者Web页面设计风格时经常使用的方法是什么呢？情绪版！

大屏虽酷炫，但实际上也是运行在浏览器里的Web页面，因此大屏设计风格定义方法也一样能够是用情绪版来作，这种方法也是目前比较科学高效的风格定义手段。

上图提供了情绪版应用的脑图，具体操做细节不作介绍，不太了解的小伙伴能够本身找找资料哈。

情绪版的一套流程下来，咱们定义的风格基本是科学准确的，能够指导咱们执行设计。若是是给甲方爸爸作大屏，这个流程也可让咱们提出的方案更有说服力。

7. 可视化设计

根据定义好的设计风格与选定的图表类型进行合理的可视化设计。目前来说大屏可视化主要有：指标类信息点和地理类信息点两大可视化数据。

指标类信息点可视化效果相对简单易实现，而地理类信息点通常可视化效果酷炫，可是开发相对困难，须要设计师跟开发多沟通的。

地理类信息通常具备很强的空间感、丰富的粒子、流光等动效、高精度的模型和材质以及可交互实时演算等特色，因此对于被投电脑、大屏拼接器等硬件设备的性能会有要求，硬件配置不够的状况下可能出现卡顿甚至崩溃的状况，因此这点也是须要提早沟通评估的。

8. 样图沟通确认

这里的沟通分三个层面：设计师对内沟通、设计师对外沟通、设计师与大屏的“沟通”。

样图沟通环节，最初的样图不须要十分精致，咱们能够把它理解为一个“低保真”原型，而后经过不断沟通修改，让它逐步完善精致起来，也就是小步快跑，避免那种一会儿走到终点，而后又大修大改的状况。

由于咱们在前几步已经分别肯定了页面布局、图表类型、页面风格特色，因此这一步咱们须要用尽量简单的方法 ，把以前几步的成果在页面上快速体现出来，而后根据样图效果尝试肯定五方面内容：

1. 以前确立的布局在放入设计内容后是否依然合适；
2. 确立的图表类型带入数据后是否仍然客观准确；
3. 根据关键元素、色彩、结构、质感打造出的页面风格是否基本传达出了预期的氛围和感觉；
4. 已有的样式、数据内容、动效等在开发实现方面是否存在问题；
5. 大屏是否存在色差、文字内容是否清晰可见、页面是否存在变形拉伸等现象。

跟大屏“沟通”是比较重要也是个特殊的环节，这也是我以为大屏设计跟其它设计不同的地方，大屏有它本身独特的分辨率、屏幕组成、色彩显示以及运行、展现环境，这里的不少问题只有设计稿投到大屏上才可以被发现。因此这一步在样图沟通确认环节很是重要，有时候须要开发出demo，反复测试屡次。

9. 页面定稿、开发

事实上页面开发阶段并非到了这一步才进行，这里说的页面开发仅指前端样式的实现，实际上后台数据准备工做在定义好分析指标后就已经开始进行了，而咱们当前的工做是把数据接入到前端，而后用设计的样式呈现出来。

切图与标注

因为大屏实际就是一个web页面，因此开发阶段的切图与标注是少不了的。

切图：哪些元素须要切图，怎么切？

通常开发用代码写不出的样式或动效，都须要设计师切图做支持：好比数据容器的边框、小的动效、页面总体大背景、部分图标等。切图按正常网页设计标准切就能够了。

标注：

Web页面用什么插件作标注这个你们都很熟悉，我就很少说了。须要注意的是，若是大屏页面须要在不一样比例的终端展现，那么此时的标注与开发可使用rem做为基本单位来实现，这样实现的大屏页面在后期会有更好的扩展性与适应性。

10. 总体细节调优与测试

这部分是指页面开发完成后，将真实页面投放到大屏进行的测试与优化。这里主要有两部分工做。

1. 视觉方面的测试（有点像APP的UI走查）：关键视觉元素、字体字号、页面动效、图形图表等是否按预期显示、有无变形、错位等状况。
2. 性能与数据方面的测试：图形图表动画是否流畅、数据加载、刷新有无异常；页面长时间展现是否存在奔溃、卡死等状况；后台控制系统可否正常切换前端页面显示。

4、大屏设计的注意事项

1. 字体使用

字体优先使用系统默认字体，须要嵌入字体时考虑字体的可识别性、与当前设计风格是否融合、是否可免费商用。

若是页面是云端部署，须要嵌入字体包时，咱们可使用FontCreator这类的软件把那些用不到的字符从字体包中删掉，而后从新打包上传，减少字体包大小，能够优化页面加载体验，避免在替换默认字体的过程当中出现页面文字跳动等现象。

（通常来说一套字体文件包含了阿拉伯文、符号、拉丁文、日文、西里尔文、希腊文、拼音、注音符号等多种字符，对于大屏这个明确的场景，咱们能够删掉其它使用不到的字符，仅保留中文、拼音和数字）

2. 颜色搭配

（1）色彩明度与饱和度差别显著、对比鲜明， 尽可能避免使用邻近色配色

（2）使用深色暗色背景：深色暗色背景可减小拼缝带来的不适感。因为背景面积大，使用暗色背景还可以减小屏幕色差对总体表现的影响；同时暗色背景更能聚焦视觉，也方便突出内容、作出一些流光、粒子等酷炫的效果，

（3）渐变色慎重使用：大屏广泛色域有误差，显示偏色，于是使用渐变色须要根据大屏反馈肯定是否调整，纯色最佳。

3. 页面布局

主次分明、条理清晰、注意留白，合理利用大屏上各小的显示单元，并尽可能避免关键数据被拼缝分割。

5、Q&A

1. 设计稿投到大屏上显示效果不佳怎么办？

大屏的分辨率、比例、使用环境、投射方式等均会对设计形成影响。理想状况下，咱们应该在设计开始前，就能打开大屏系统作一些简单测试。咱们能够从网上收集不一样设计师不一样风格的大屏设计做品，而后投上去查看实际效果。

由于大多数时候大屏都会存在色彩误差，这时经过测试咱们就能发现渐变色、邻近色等不一样类型的色彩搭配是否能够在目标大屏上良好呈现。若是不能够，那咱们设计进行时就不要使用显示效果不佳的色彩搭配。另外一方面，样图沟通环节及时测试也很重要。

2. 大屏设计定稿后，切图切几倍图？

因为是将咱们电脑屏幕投射到了大屏，大屏上的内容是运行在咱们电脑浏览器上的页面。因此切图根据咱们电脑的分辨率，正常切1倍图就能够。

3. 1920*1080的设计稿，投到9000*4320的屏幕上，文字图片会发虚么？

看状况，视大屏系统硬件规格与观看距离来定。这块有四个概念须要跟你们交流下：大屏逻辑分辨率（设计稿尺寸）——显卡输出分辨率——视频矩阵切换器（DVI）支持分辨率——大屏实际物理分辨率。

通常后两个是没问题的，大屏跟矩阵切换器是由大屏厂商提供，通常恰好配套大屏。容易问题的是显卡输出分辨率，咱们电脑屏幕分辨率并非最终显卡传递到DVI接口的分辨率，传递到DVI接口的分辨率是电脑显卡所能输出的最大分辨率（部分电脑可设置或自定义输出分辨率）。

输出分辨率等于DVI支持分辨率时显示效果最佳；输出分辨率低于DVI支持分辨率，DVI会将信号放大后传递到大屏，放大的过程当中就有图像信息丢失，虽然此过程当中有各类算法支持去保证图像尽量清晰，但算法再好，跟真实图形仍是有差距的。

此外，多信号源投射效果优于单个信号源投射。对于现场直播数据大屏，通常至少有两个信号源，一个投屏，另外一个也投屏可是处于备用状态。

离大屏的距离也影响观感，通常离得近，颗粒感明显，距离稍远，会显的较为清晰。

4. 设计稿完成开发后，发如今大屏上页面有被拉伸或者压缩的状况，怎么补救？

通常来说，开发只须要对设计图作还原便可。但特殊状况下，好比显示器扩展不正确致使页面被拉伸或压缩，这时就需作处理：咱们能够先获得被拉伸/压缩的比例，而后对总体视图作压缩/拉伸处理，再由其拉伸/压缩，这样被拉伸/压缩的瑕疵就能够获得必定程度上的矫正。

另外，了解被投电脑硬件特色，有的电脑能够经过自定义分辨率解决这部分问题。

5. 除自行开发可视化大屏外，还能够经过哪些第三方服务来快速实现？

阿里云DataV、腾讯云图、百度Sugar等。

6. 数据可视化的图表样式能够在那些地方找到参考？

下图第一列图表类的二个可视化库是咱们设计师能够打开浏览查看的，这里面全部的图表样式都是基于代码实现的，能够做为咱们设计图表的参考，也可让开发拿代码去用，或者在这些图表的基础修改

工具类的须要有必定的代码基础，里面一样有丰富的图表，因此跟开发的沟通也很重要，由于他们可能会了解多一些更新的前沿的图表形式是咱们设计师不知道的，因此彼此多沟通交流是在过重要了。

 

http://wemedia.ifeng.com/94531536/wemedia.shtml