致数据可视化设计师-设备篇详解

各位数据可视化设计师们大家好，鉴于平时有很多同学对我们的可视化大屏的设计知识点有很多不理解的地方，阿勇决定花一些时间去详细剖析一下关于这方面的知识，全部都是多年工作经验所得，绝对有料。

整个合辑一共有10篇文章，分别涉及到设备篇、风格篇、字体篇、色彩篇、组件篇、布局篇、版式篇、视觉篇、团队篇、技能篇十篇文章，具体的详细的展开来讲一讲可视化大屏设计的知识点。（我命名为可视化设计十要素）

同时也会包含一些工作中的同学们问我的一些问题以及我搜集的一些问题，将会以问答的形式去给大家讲一讲，如有不对的地方，还请大家指出，我们一起探讨进步！

文章较长，请广大读者仔细阅读，基本涵盖：设备信息，分辨率尺寸，大屏适配，投屏事项，掌握本文可应对日常可视化设计设备方面的知识。

LED屏幕

政府大屏主要以点间距去区分屏幕的精细度，点间距越小，造价约昂贵；面积越大越整体，造价越高。离屏幕越近颗粒感越强，设计效果也就越不清晰，LED显示屏表面不平整是导致LED显示屏图像失真的主要原因。LED显示屏表面粗糙度的好坏主要取决于生产工艺。

屏幕介绍：按照不同点间距进行分类，P1.25、P2.5、P3、P4、P5、P6、P8、P10、P12、P20（间距越小，图像越清晰，价格也越高，一般政府led屏基本都在P1.25-P6之间)。

最佳视距=像素间距/（0.3~0.8），这是一个近似范围。如LED显示屏P16mm，最佳视距为20~54米。

液晶拼接屏

拼接屏相比于点间距比较小的LED屏，价格方面会更便宜一点，拼接屏设计时最主要就是拼缝的处理，注意拼缝，设计时非必要情况下，都要跳过拼缝，尤其是“圆”这个造型。

拼接屏：46寸，55寸  物理分辨率：1920*N 1080*N（n代表屏幕数量），1.7mm、3.5mm 、0.88mm、0.44mm、无缝隙；企业常用（1.7mm 和3.5mm）

大屏拼接缝隙：设计时应尽量不要跨屏去设计，会使画面交叉，不重叠，尤其是圆形。

大屏拼接处理器

大屏拼接处理器主要功能是将一个完整的图像信号划分成N块后分配给N个视频显示单元，完成用多个普通视频单元组成一个超大屏幕动态图像显示屏。大屏拼接处理器输入信号数量和类型取决于用户需要，输出信号数量等于显示单元数量。

视频矩阵处理器

矩阵是将多路输入信号切换输出到多个显示设备，一般来说输入信号数量要大于输出信号数量。（我们想在9块显示器上同时监控100个摄像头传来的信号，就用矩阵来实现即可）

视频矩阵是指通过阵列切换的方法将m路视频信号任意输出至n路监控设备上的电子装置，一般情况下矩阵的输入大于输出即m>n。有一些视频矩阵也带有音频切换功能，能将视频和音频信号进行同步切换，这种矩阵也叫做视音频矩阵。

模拟视频矩阵的输入设备：监控摄像机、高速球、画面处理器等很多个设备，显示终端一般监视器，电视墙，拼接屏等（通常视频矩阵输入很多，一般几十路到几千路视频，输出比较少一般2-128个显示器；例如64进8出，128进16出，512进32出，1024进48出等）。

总结：矩阵只能负责信号的切换，不能处理，不能做效果。大屏拼接处理器功能十分强大，具备矩阵功能的同时，还可以实现任意开窗、漫游、叠加、场景保存与轮换。

液晶拼接屏的优势 - 拼接处理器预设场景

4*2大屏展示端，我们通过控制端，借由拼接处理器可以对大屏进行随意开窗，漫游，叠加，画中画等效果。在控制端拖动布局，大屏会随之改变布局，非常方便。下面我就借由我以前做过的一个项目帮助大家理解一下拼接处理器的优势以及如何设定不同场景。

如果你们企业还在因为屏幕适配以及尺寸问题而纠结，或者想展示：开窗，漫游，叠加，画中画等效果，毫无疑问你们应该选择拼接处理器，这比传统投屏方式更合适，更没有比例不对的困扰。

预设场景一

把控制端的分屏进行编号，接下来移动控制端对应的编号区块，就可以对大屏进行重新布局，图中展示的正是我们的预设正常场景。场景为居中布局，左右两侧为图表展示。

预设场景二：任意窗口布局

对控制端进行随机布局，将主视觉模块移动到左侧四块屏幕，图表都集中在右侧，由此我们就由预设场景的居中布局变成了左右布局，左侧为主视觉。

预设场景三：任意窗口漫游

可以随意的关闭大屏某个模块的漫游，通过控制端进行屏幕的显示以及不显示。

预设场景四：任意窗口平移

画面的任何一个模块都是可以进行平移操作的，我们将模块一和模块五可以平移拖拽到任何一个位置。

预设场景五：任意窗口叠加

画面的任何一个模块都是可以进行叠加到屏幕任何一处，还可以控制模块置顶和置底，非常灵活。

WEB端大屏

基于web网页端的展示方式，通过在web开发，有需要时会投屏到大屏上去展示。设备比例一定不能差距过大，比如16:9的投屏到32:9的大屏就不是合适，解决方案可以是外接一块1920的显示器即可。

此处要注意web端演示时，记得全屏显示，浏览器边框滑动条等可以不考虑，前端会做相应的浏览器细节考虑，设计按正常分辨率走即可。

触摸屏

触摸屏（Touch Panel）又称为“触控屏”、“触控面板”、“触控台“，是一种可接收触头等输入讯号的感应式液晶显示装置。

当接触了屏幕上的图形按钮时，屏幕上的触觉反馈系统可根据预先编程的程式驱动各种连结装置可用作控制端操作大屏，原理等同于ipad控制，只是载体不同。

设计规范以及按键反馈等交互体验与ipad类似。

滑轨屏

滑轨互动屏系统——又称为滑轨电视、滑轨播放等，通过特殊设计的机械滑轨控制装置，结合高清液晶拼接幕墙，实现对屏幕内容的互动控制。滑动到不同位置屏幕展示相关信息，包括图片、文字、视频等，是一种全新的互动展示形式，可与触摸同时使用。

虚拟沙盘

虚拟沙盘/数字沙盘就是用计算机通过投影仪或者LED大屏显示屏动态/静态三维显示：智慧交通、智慧市政、智慧农业、智慧物流、智慧停车、智慧公交、智慧公安、智慧交运等模型，这是一种高科技的模型操作员通过程序，可以随意调整沙盘的尺寸、规划区域、区域布置，快速展示多种全新的创意。

具有三维显示效果，并可以从不同角度观察创意模型，筛选创意方案。注意虚拟沙盘和实体沙盘的联动效果，实体沙盘为底，虚拟沙盘做效果叠加。

分辨率：物理实际分辨率

Q：原本设计尺寸是1920*1080，使用场景是PC端，同时在大屏中展示，尺寸为3840*1080，该如何适配？

A：首先我们需要了解适配最主要的痛点就是：灵活，复用性高，可延展。

围绕这几个点我们可以通过模块化开发去做，将每个模块单独开发。我们设计师做这种需求之前，就需要提前去构思，在设计各模块时，尽量使用可扩展和可自适应的图形，这样面对适配的时候我们可以通过移动，缩放这些模块，来完成适配。尽量避免二次设计以及开发，提升时间成本。

图形放大适配

图形位移适配

Q：如果是16:9适配非32:9是否也是这么去适配的？如果是特殊的形状或比例该怎么适配？

A：我们适配一定要记住灵活，减少工作量这些原则，如果不遵循这些原则，那么我们做适配的初衷就错误了。这样我们还不如直接就重新开发一套了。就好比我们通过控制端去控制大屏，如何用开发一套的时间去适配两个甚至是多个终端，这是我们需要注意的。当然考虑到一些实际情况，会有一定程度上的修改，但是一定是要从节省工作量去出发的。

场景一：拼接屏分辨率计算，已知某项目设备分辨率为宽高4*2拼接屏，设计稿我们该如何去定义分辨率？分辨率又是多大？

从命题我们可以看到4*2的拼接屏，我们可以通过一块屏幕为1920*1080去计算，那么通过计算分辨率应该是1920*4 &1080*2，也就是7680*2160，这样就计算出我们的分辨率了。

场景二：LED屏分辨率计算，已知某项目LED屏幕物理尺寸为宽15米，高4米，设备分辨率未知（可以支持4K或者2K输出），那么如何去制定分辨率？

工作中相信不少同学都遇到过这种只知物理尺寸而不知道分辨率的项目，那么我们只能通过计算大概的设计分辨率来出初期的设计稿件。

可能一：屏幕支持4K输出，既然支持4K输出，保证画面输出的清晰我们可以将设备的高度设定为2160

此场景下公式为：15/4=X/2160     X=8100    那么可以大概得出宽度大概为8100像素（只是我们通过计算大概得出来的）

可能二：屏幕支持2K输出

此场景下公式为：15/4=X/1080     X=4050  

重点来了，不要以为这样就结束了，我一直强调的可视化设计师为什么一定要在现场，为的就是方便各种测试。刚才我们只是通过计算得出的大概数值，此时我们可以在纸上画一个正方形，并投到设备上，如图。

• 结果一：如果正方形比例不变，设计尺寸无限接近于大屏实际比例；

• 结果二：如果正方形比例被拉伸，设计尺寸小于大屏实际尺寸；

• 结果三：如果正方形比例被压缩，设计尺寸大于大屏实际尺寸。

此处图片上主要是为了测试计算出来的分辨率究竟是拉伸还是被压缩了，通过这样的方式去测试设备大概的分辨率的大小比例，在我们产出效果图之后，也可以投射设计图的方式看看屏幕是否是完美适配，这种方法可以在未开发之前，尽可能确定屏幕对设计图的影响，从而避免对开发造成大规模修改。

注意：这样做也只是在不知道设备分辨率的情况下，去大概计算设备分辨率，仅供参考！

电脑直接投屏

使用场景：会议室，展厅等

等比例投屏，投屏电脑投到2*2大屏（4K）

投屏电脑支持输出4K分辨率，投屏电脑分辨率以3840*2160作为设计，投到4K拼接屏上，大屏会完美展示，并且画面非常清晰。

投屏电脑支持输出2K分辨率，投屏电脑分辨率以1920*1080作为设计，投到4K拼接屏上，只会以1920*1080进行输出，因为输出像素只能支持2K，也只是1920*1080的放大。

此处需要了解两个概念：输出像素和显示像素，输出像素指的的是投屏电脑的最大支持分辨率，显示像素就是我们大屏的支持的最大分辨率。

我们实际项目中最好以显示像素的尺寸进行设计（就是以大屏尺寸为主），但是也要看输出设备的像素大小。

硬件投屏本地运行

使用场景：科技展厅，以及一些带主机的设备。

此种情况，一般我们的大屏会自带主机，大屏本身就可以看成一个显示器非常大的电脑。我们如果需要进行可视化演示，那么我们直接就可以通过显示器的尺寸去做设计，这样就是大屏的设计尺寸。

一般这种靠硬件的投射，都是在拼接处理器的处理下，将多个屏幕拼合成一个大的显示器，再通过拼控系统（硬件投屏）进行输出。

一般我们可以将我们大屏的（UE4或者U3D开发）应用程序打包，打包成一个后缀为.exe的应用程序，在大屏电脑上直接点击，程序就可以在大屏上完美的跑起来，也不需要去进行电脑投射大屏。

控制端操控大屏

如果通过控制端去控制大屏，那么投射设备就可以通过多种方式去展示了，可以是手机，平板，触摸屏，手势控制，体感控制等等。

这种情况下投射设备的尺寸就按照本身设备的规范去设计就可以了（比如750*1334，2048*1536），设计尺寸就是我们大屏本身的分辨率就可以了。

多主机多信号投屏

此种情况主要使用场景：屏幕宽度非常高，并且内容可以分很多模块展示，模块彼此之间不受影响独立展示，这种情况下我们就可以通过此种方式去投屏。

通过多个主机分别去投射大屏的同等大小区域，比如图中的场景模块被我分成了四等份，我们就可以通过四台主机去分别投射四个模块，形成一个完整的大屏。

此种大屏设计尺寸我们以输出设备的尺寸为主要参考，四台主机那么整体宽度就是1920*4=7680，高度就是1080（如果设备支持4k输出，那么提升相应的设备尺寸*2就可以了）。

不同比例投屏及解决方案

Q：如果遇到一个设备是16:9，投屏到一个20:3比例的大屏幕， 那我设计尺寸以16:9，还是20:3？

A：我们要记住，如果面对的是正常比例投屏到非等比的大屏，我们需要遵守的规范一定是：一切以大屏展示为主。所以我们设计尺寸一定是按照20:3来设计的，大屏展示正常才是我们的唯一标准，投屏电脑可能会出现的问题，我们只能妥协（投屏电脑可能只能展示很小的一部分，但也是没有办法的）

那么我们遇到这种是否就没有办法了呢？在这阿勇给大家提供了三种解决办法，在实际工作中，我也遇到过这种问题，所以在这给大家分享一下。

方案一：外接显示器（外接多个显示器，一般主机可以另外外接四个显示器，这样就可以解决投屏电脑显示不全的问题了）

方案二：采用拼控系统，而不是用纯粹的设备投屏（拼控系统完美解决了尺寸不一致的难点）

方案三：设计两稿，16:9，20:3我们都去做设计（做两套系统，相当于做的适配）

Q：请教大家一个问题，电脑的分辨率是3840*2160，单个大屏的分辨率是1920*1080，拼9*6的大屏，设计尺寸该设置多少啊？这样设计尺寸会不会太大了，如何优化这个设计稿尺寸？

A：前面的文章我们已经介绍过拼接屏的尺寸的问题，这个问题的解答：1920*9/1080*6 ，这个就是设计分辨率，通过计算得出，最终设计稿尺寸为17280*6480。可以看出设计分辨率确实太大了，设计的时候如何去优化设计尺寸呢？

通过命题我们可以看出电脑分辨率是支持4K的，就是说输出分辨率和显示分辨率我们都是可以上4K的，而4K的分辨率一般会做3840*2160，再结合设计稿尺寸17280*6480，可以将整个效果图尺寸缩小三倍，也就5760*2160。设计可以按照这个分辨率去出图，最终交付给开发的就是切三倍图，并提示开发是缩小三倍做的。

总结：不管在面对什么尺寸的设计，都要记住，万变不离其中，一切以大屏完美展示为准则，所有的一切都是要在大屏上观看，为了完美展示，投屏电脑，设备控制等页面可以适当的让步。

全篇知识点

通过以上的知识点总结，不知道大家对于数据可视化大屏设计是否有了新的认识，数据可视化对于设备的尺寸，设备的信息，以及投屏注意事项，都要有更多的了解才可以。下图就是总结本篇文章的知识点。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

一、图表的分类介绍以及应用范围

一提到图表，大家脑海里浮现的，通常是柱状图、饼图、趋势图等等。这是按照图形等维度对图表进行分类，经常会导致图表的误用。

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

二、画面布局在实战中的应用

在画面中我们经常会遇到各式各样的屏幕分辨率，有大屏的LED屏，有平面显示屏，数字拼接屏等等。那么具体的项目中我们如何去定义这些不同尺寸的屏幕来进行画面布局呢？

如若有其他分辨率下的屏幕，按照这个规律的基本布局，尽量使组件呈现16：9比例排布是最好的；超长分辨率下的大屏设计或者拼接很多块显示器的大屏可以通过具体业务内容来展示，按模块去划分，功能点明确即可。

此处布局只是我个人觉得比较合适的展示方式，并不代表一定是需要这么排布，还可以有很多的形式去布局。也可能因为业务不同，版式也会有调整，不过万变不离其中，掌握基础要素，其他分辨率下照样可以有很多编排形式！

三、硬件常用尺寸以及设备

Led屏幕

1、点间距不同

p3点与点之间的距离是3毫米，p4点与点之间的距离是4毫米。

2、清晰度不同

P后面那个数字越小，代表两个灯珠之间的距离越小，清晰度越高，相对应，价格也会高，因为每平方的像素点P3比P4多很多，成像效果好。

3、最佳可视距离不同

点间距P3（3mm）的显示屏，它的最佳可视距离是3.5~10米，点间距P4（4mm）的显示屏，它的最佳可视距离是5~13.5米。可以根据自己的实际情况，选择最适合的型号。

拼接屏

拼接的每块小屏一般是16:9的高清屏，设计尺寸可以把上下高度设定为1080px，长度按照拼接屏的数量比例得出长度的设计尺寸。例如3乘5的一块大屏幕，高度3块屏设为1080，每块高就是360，360除9乘16等640，640就是一块屏幕的长度，640乘5块屏＝3200最后得出设计稿尺寸就是：高1080px乘宽3200px（在这里感谢我的数学老师）

现在企业常用的有无缝隙、1.7mm缝隙、3.5mm缝隙、三种拼接大屏，缝隙越小越贵。

另外大屏设计还有一个比较重要的问题就是注意拼接屏之间的缝隙，设计时千万不能跨屏设计，不然很影响美观。

控制端

目前企业用的最多的控制端为ipad控制，需要在ipad上制作出控制端页面，一般尺寸为2048*1536，控制端大多数为按钮操作，页面尽量简单明了。

四、字体字号以及画面配色631

字体字号

在数据可视化设计中,一般选中的字体有如下几种:

1. 中文字体:苹方,思源黑体

2. 英文字体:DIN,DIN-PRO

3. 数字字体:Exo

正常1080P情况下，由于甲方大多数为政府机构，文字要求会比一般的要求大一点，一般都是选择最小16px。字号不是固定的，人是活的，规范是由人制定的，切勿迷信规范。

配色法则以及颜色选用

运用配色631法则，将配色定义为主色60%，辅助色30%，对比色10%去贯穿整套界面文字的颜色通过重要、普通、次要去分配，是带有色彩倾向丰富页面视觉。

在数据可视化设计中，由于大屏是偏暗的，所以需要选择高饱和度的色彩，并且需要选择统一的颜色，保持画面协调。

有时候会遇到客户需要高饱和度的颜色并且多个颜色的时候，在选用时尽量选用饱和度不要太高的颜色，不然画面会很不协调，也就是所说的晃眼。

在设计过程中尽量选用深色背景作为画面主背景，这个可以解决大屏因为色差问题，对整体页面的影响，用户也比较容易忽略拼缝中的存在的跨屏感。同时深色背景时更容易突出主体,画面效果更好，更能体现流光、粒子、发光等酷炫效果。

同时，大屏由于有色差，尽量不要使用渐变色，如若需要使用需要到达现场，根据大屏反馈的色差，现场调整，但还是推荐尽量使用纯色。

五、画面饱满以及页面装饰点线面

画面如何饱满

方式一：字体的饱满

将字体处理后，空白面积减少，整体更饱满了些

方式二：文字的饱满

正常情况下为使阅读更方便，标题间距给-10%~20%为佳。

通常数字会比汉字小，为使基线对齐，数字与汉字需分开设置字号。

主副标题字号比例过大过小会导致界面不平衡，建议主标题是副标题的1.5倍。

方式三：关系的饱满

当A=B时，图标和文字的关系会混淆，这种情况下要满足B>A，用间距分层次

采用黄金分割0.618值。也就是横向21个小方块，竖向13个小方块。此时，最优雅的板式是A＞B的间距，1＞2＞3的间距。

方式四：图标的饱满

页面如何装饰会更丰富(如何运用点线面三大构成)

我们在设计的过程中，经常会因为画面不够饱满页面太空，收到客户的吐槽，下面就讲讲如何通过点线面来丰富画面，使画面更丰富更有层次感。

1.原画面设计完成

2.添加装饰线(点线面构成)

3.调整位置,丰富画面

在画面添加装饰的情况下需要给画面留足位置，数据可视化大屏本身面积就比较大，合理运用画面以及拼接屏缝隙添加装饰线,可以更好的减轻拼缝所带来的影响。装饰线的添加还可以在后期丰富画面动效，科技感十足，在页面中添加装饰线在我看来，非常的有意义，既可以丰富画面，又可以完善动效，一举两得。

在装饰线添加这一块，推荐大家多去看看国外的可视化设计，哪些几乎将点线面构成发挥到了极致。

六、画面动效以及素材灵感收集

动效制作

C4D+AE

在很多设计项目中会用到很多酷炫的科技模型，比如汽车、人物、地球模型等等，我们可以运用C4D来进行主视觉建模，再通过AE进行动效输出。

有的人可能会问在导入数据之后可能由于数据量不大的原因，动态效果不是很明显，在这种情况下，咱们可以把不变的数据量，做成AE动效，可以把动效导成json文件直接发给前端，能很大程度上保障画面动态效果。

素材灵感收集

Behance

在behance上有很多国外的设计师，他们的数据可视化设计做的都非常漂亮，极具代表性风格，我们可以通过behance搜索HUD 即可搜出来一大堆精美的高清原尺寸设计图，同时可以把这些作品保存到自己情绪版中，非常的方便。

pinterest

从“书签”这个角度出发，我们可以发现其实Pinterest的本质就是一张张精美绝伦的图片书签。每一个在Pinterest上的图片其实都是一个个网页上所提取浓缩而成的书签。pinterest对图片的关注是最用心的，去除了其他的各种干扰，Pinterest只注重图片的呈现。

而且Pinterest有个非常独特的功能,就是他能够自动筛选同类型图片，并且精准度非常高。

Videohive

这是一个专注视频模板和素材的网站(收费)，在此可以搜索出很多的HUD动效视频以及高清图片。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

为什么说是撕开 B 端封印呢？没接触过 B 端的同学，很大一部分都认为 B 端不就是简单的列表和图形吗？拿开源组件拼拼凑凑就可以了，有什么可设计的？

其实这个想法完全错了，你如果接触后就会发现，B 端所需要的掌握的产品知识、思维逻辑、规范意识等等太多了。

而且近几年 B 端这个词出现的频率越来越高了，因为前几年大家都在争 C 端市场，纯 C 端的流量争夺已经进入了尾声，B 端产品反而带来了新的机会点，同时也被慢慢的重视起来，比起以往 B 端设计师，现在需要掌握的技能也越来越多。你可以查阅一下一些招聘网站，现在 B 端可视化方面的岗位是非常火爆，与 C 端相比，人才缺口更大，未来几年 B 端也会更加火爆，有机会接触 B 端的话就不要错过机会。我们团队平均招聘一个合适的设计师基本要两个月的时间。

说了这么多，我们开始今天的主题吧！

首先在座的可能有部分设计师没有接触过数据可视化的设计，那么第一个问题来了，什么是可视化？大家想一想。给大家三秒钟~

通过可视的表达来增强用户处理数据的效率。

接下来我会从三个方面来讲解如何构建可视化：

    · 灵感需要迸发，更需要积累

    · 从零到一设计驱动

    · 设计度量

一、灵感需要迸发，更需要积累

1.1  数字时代下，99%的问题都是旧问题

数字时代下仍有信息不对称的情况，尤其是关键技术和设计上的问题，但是如果你用心寻找，就会发现你的新问题则是别人很久之前的旧问题了。所以要做个有心人。

但是问题又来了，有时候真的不知道该怎么找、去哪找？这是个很常见的问题。因为可视化不比插画、平面等这些成熟的领域，他是比较小众的，所以灵感以及素材的搜寻是一个令新手设计师头疼的事情，再加上对关键词的熟悉程度不够，导致很多设计师只停留在【可视化】这个关键词里，最后感觉搜来搜去都是见过的图，没有新意。

1.2  明确目标，知道自己想要找什么

互联网信息太多了，漫无目的的找灵感，只会浪费时间，一会看到这张图好看，一会看到那张图好看。不知不觉几个小时就过去了。

1.3  建立关键词词库

确定目标后，就要细化关键词了。怎么建立关键词词库呢？

关键词词库由3部分组成：终端、设计类型、业务类型。

    · 终端：大屏、移动端、web 等等。

    · 设计类型：每个细分的数据可视化类别都是有一些专有名词的，比如最近比较热门的车载HMI系统，那他的类型关键词就是 HMI。通过这些关键词，你会搜到更精准的结果。设计类型关键词比如：AR/VR、HUD、HMI、FUI等等，你要了解你们公司相关类型的关键词，记录下来。以及跟你们有关联的，都记下来，补充自己的词库。

    · 业务类型：智慧城市、生物医疗、监控部署等等。

这三类单独或组合进行搜索，就会看到更多可视化产品了。把关键词词库建立起来后，就可以去常用的网站上搜索了，最好用的还是 behance 和 Pinterest。

1.4  除了常用的设计网站，还有哪里可以看？

企业官网：很多做数据可视化的公司，会在官网展示一些能体现自己业务特点、业务实力的案例，而这些案例就是这些企业最好的数据可视化设计作品了， 所以但凡有案例展示的官网，案列基本都是最典型最好的设计，所以从这些案例中找灵感，也是一个有意思且有效的方法和途径。

1.5  你看到了别人看不到的，设计才能有所不同

总结一句话：你看到了别人看不到的，设计才能有所不同。如果你和别人看到的是一样的，你怎么比别人做的更优秀？

1.6  兴趣推送

经常刷短视频/新闻网站的应该知道，系统会根据你的点赞、收藏、浏览等数据来给你安排后面的内容推送，以保证给你推送更精准的内容。设计网站亦是如此，behance 等网站上也都是千人千面，它会根据你的点赞收藏等来读取你的喜好，进而推送更精准的作品。所以假设你是一个B端数据可视化方向的，你就经常搜、点赞收藏相关作品，之后你的首页出现相关内容的几率也会变大。

1.7  定期清理，更新迭代

最后一点，这个也是好多设计师的通病，收藏即学到。

灵感库要求精而不是多，每隔一段时间，回来翻一翻自己之前收藏的作品，会发现有些作品自己已经看不上了，因为在做灵感收集的过程中，我们的审美会自然有所提高，当输入的作品样本越来越多，我们对作品评价的维度也会更多，之前那些觉得好的作品，现在看来也就会有缺陷和不满，这是一个很正向的结果，成长就是一个不断剔除的过程。删掉那些自己觉得不满意的作品，添加更符合自己当前审美的作品到灵感库里。

这样慢慢完善你的地基，才能更高的向上走。

二、从零到一  设计驱动

讲完第一部分，我们开始搭建产品。

我负责从零到一的项目大大小小的得有10来个了，我认为在产品整个产品周期中设计师的话语权最高的时候就是项目初期，是可以做到设计驱动的。既然设计可以有足够的的话语权，你就得规划好未来的设计走向。

产品初期，经常会有几个争议比较大的问题，我们来聊一下。

2.1  设计先行还是调研先行？

这是新项目必须要做的选择题，再讲之前你先想一下，如果是你，你会如何选择？

我的观点是设计先行。（当然设计先行是建立在你至少对这个项目的行业有个简单的了解之后，先设计再用户调研），为什么呢？因为如果用户调研先行的话，用户只会反馈当下最想要的东西，从而有可能给你带来误导。就比如我们经常举的一个例子：汽车出来之前，人们只想要一匹更快的马。

我们要解决的不是用户当下想要的东西，而是痛点背后用户真正需要的东西是什么。在 0-1 的这种创造性的项目，往往设计者才是当下最懂产品的人，你把决策权交给一些不懂产品的人，做到最后只能是迷失了方向，锅还是设计来背。所以一开始设计师要把决策权拿在手中，掌握航向。

2.2  设计先行还是规范先行？

这个问题在现在看来相对比较统一，但有的同学还是有疑惑，所以我拿出来再跟大家聊一下。

首先我的观点是设计先行，在设计之前就定好规范的基本都是自己YY的，返工率极高。等你在做具体设计的时候就知道之前做的规范都是白费力气了。一般都会选用在项目完成之后或者主风格及主要页面完成后再输出规范，这样既可以减少规范的改动，也可以保证后面功能延用规范，一举两得。

当然了，设计规范不是所有项目都要有的，它是为了减少工作而不是增加工作，如果是一次性项目，就不需要再额外花费精力去输出规范了，浪费资源~

2.3  完成和完美那个更重要？

现在都是争分夺秒的时代，任务是无止境的，没有做完的时候。造成这个局面的无非就是一个问题：时间不够用。通常的做法就是先完成再迭代，做产品久了你就会发现，完成比完美更重要，不完美你还可以再迭代，完不成就有可能错过一个风口，从而失去了变完美的可能~

聊完这三个问题，我们在设计的时候也要有一些注意项，真正的做到设计驱动。

2.4  把复杂变得清晰简单而且美

对于设计师来说，我们的任务就是把复杂问题变得清晰简单而且美，所以我们应该成为企业和客户之间沟通的“架桥人”。通过设计的方法，把无形的、复杂的技术，通过有形的、可视化的方式展示出来，让客户更直观、清晰的感受到产品的功能，看得懂其在业务场景中产生的价值。

2.5  转换视角，建立共鸣

站在客户视角，聚焦客户关注的核心问题，通过情景把内容有序组织起来，快速与客户建立共鸣，有效降低内容理解难度。

2.6  产品架构可以不那么复杂

把复杂的业务/功能简单化、傻瓜化，最大的降低学习成本，能帮用户操作的绝不让用户亲自去操作。你要让用户在1分钟之内了解你的产品是做什么的、有什么功能，你就成功了。

2.7  大胆隐藏冗余内容

B 端项目中内容量是巨大的，面对庞杂的信息，去粗取精，提炼各场景的核心内容，避免冗余信息阻碍内容有效传达。话术语言不单要简单易懂，还要严格控制文字长度，保证内容可以被快速扫描和理解。

2.8  尊重用户习惯

不要妄想改变用户养成的惯性思维，你要记住惯性思维大于设计思维，他的阅读习惯、操作习惯都是不易改变的，不要为了个性化而尝试去改变，大部分情况下结果不会是那么的理想，除非你有极大的把握。

2.9  选用合适的图表

这个是常提到的，我就在这里简单给大家提个醒。比如做数据对比，柱状图更能清晰表达出用户想要的结果，你却非要放个酷炫的雷达图，他的本质目的都没达到，要美观有何用？

每个图表都适合哪些场景使用，像 antv、hicharts 等都有介绍，我就不一一赘述了，我之前也写过一篇关于如何合理利用图表的文章，大家有兴趣的可以去看一下。

三、设计度量

产品设计的好与坏我们需要去验证、去度量。我们怎么去验证可视化的好与坏呢？

美与丑也是主观的，没有绝对的美，也没有绝对的丑。一个产品，总会有人喜欢有人不喜欢，但是我们要迎合大多数人的审美。

所以就需要一个方法论来验证产品的好与坏，现在各大厂都在做自己的一套产品验证的方法论，阿里在这方便算是国内做的不错的，我举几个常用的度量模型。

    · 阿里云：UES

    · 蚂蚁金服：PTECH与易用度

    · 1688：五度模型

    · 优酷：DES

UES 目前是国内最好的，在 5 月份的阿里设计周上也正式对外讲解了 UES 模型。我拿阿里云的 UES 简单讲一下吧，这么多度量模型，无论他的方法、维度有所不同，但他们的目的是相同的：通过模型来度量设计成果。

    · 易用性：易操作性、易学性、易见性 ...

    · 一致性：整体样式、通用框架、常用场景及组件 ...

    · 任务效率：任务完成率、任务完成时间、功能使用率 ...

    · 性能：首屏渲染时间、API 请求响应时间、页面请求响应时间 ...

    · 满意度：产品满意度 ...

UES 分为 5 个模块，这 5 项是整个产品生命周期需要验证的。

关于 UES 我就介绍到这里吧，UES 模型要是展开讲的话，半天都讲不完，感兴趣的话可以去阿里云官方发布的 UES 模型的相关资料中深度研究一下，看看适不适合自己的产品。

上面是度量产品的模型，接下来针对我们 B 端设计师，我们也要有一些指标来度量自己是否合格。

3.1  设计效率

现在内卷盛行的时代，各大厂都在讲人效，毕竟时间才是最珍贵的，所以现在都在想方设法的提高人效。而且 B 端相对 C 端来说，可以有更多自动化的工具。

举个我公司的例子，我刚去的时候基本没有自动化工具，每个设计师每天也都在忙碌，谁也没偷懒闲着。但是我发现有很多重复性的体力劳动是不需要多少思考就能完成的，但是却耗费了将近 1/3 的时间。所以我就在想如何提高人效，把一些体力劳动用一些工具来代替，这样就能释放设计资产，去做更重要的事情。

当时就做了第一个自动化的工具：设计系统，现在大家对这个词应该不陌生，但是我们刚开始做的时候比较早，还没有一些比较完善的设计系统供我们参考，所以我们也算是前几批摸索设计系统的团队。设计系统做好后是可以把这1/3 的设计时间节省了下来，而且团队的规范性更加统一。

后面的话我们也是做了一些其他的自动化工具，比如结合一些插件做到 icon、组件等发布的自动化，并且与研发同学打通，有相应的自动化提醒工具，这样也节省了与研发的沟通成本。

在工作中，流程上能减少一步就是成功，慢慢来，万里长征就是一步一步走出来的。

3.2  增长设计

增长这个词来源于【增长黑客】这本书，顾名思义这个词的就是通过设计来促进产品增长。

这个词用在 C 端上比较多，因为 C 端可验证的方法比较多，见效快，所以我们常见的一些增长设计的案例都是关于 C 端的，而 B 端的话，受限制的因素较多，设计只是影响增长的一部分，而且见效慢。

但是虽说影响因素多、见效慢，我们还是可以抓住机会、多去尝试一些方法来做到设计增长。我这个方法不行，我就换一种尝试。大家都是在摸索中过河~

3.3  为业务赋能

所有的设计都是要为业务赋能、为商业买单。我们设计的本质就是为用户解决问题，让用户以最直观的方式理解产品。不要为了所谓“我认为很美”而与业务背道而驰。

3.4  体验创新

用户体验设计师会越来越重要，近两年逐步被重视，而且未来几年会越来越重视。行业内需要更多动脑的人而不是仅仅会动手的人。

现在到了互联网下半场，拼的不仅是功能，用户体验的重视程度已经被提升了上来，在工作中的占比也越来越重。

再加上现在这个超级内卷的时代，你不提升，你的竞争对手就把你干掉了。而且你如果只是一成不变的维护老版本，你去下家面试的时候都没有拿得出手的产品。

3.5  善用工具

现在各种办公类工具、软件层出不穷，而且很多工具是比较类似的，有的设计师再选工具的时候就很纠结，我认为完全没必要纠结，首先你要明确我想要达到什么目的，只要某个软件满足着你的需求就可以用。

工具是为人服务的，我们的设计软件从 PS – Sketch – Figma，无论怎么变化总要围绕一个目的：更高效的完成工作。

尤其是一些自动化工具，现在人工智能升级很快，要多关注设计自动化方面的工具，让他来解放我们的双手。

总结

最后送给大家一句话：

这时代唯一不变的，就是变化。

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

蓝蓝设计建立了UI设计分享群，每天会分享国内外的一些优秀设计，如果有兴趣的话，可以进入一起成长学习，请扫码ben_lanlan，报下信息，会请您入群。欢迎您加入噢~~希望得到建议咨询、商务合作，也请与我们联系。

文章来源：站酷    作者：胖kuan 

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

我们毫无疑问已经处在一个大数据的时代。各行各业都在快速产生和积累数据。 本文结合 UED 团队过去所参与 B 端数据可视化项目分享一些经验及思考。

• 背景
• 什么是数据可视化
• 数据可视化的应用价值
• 如何做好数据可视化设计
• 数据可视化发展趋势
• 结语

背景

“得益于计算机技术和海量数据库的发展，个人在真实世界的活动得到了前所未有的记录……社会科学将脱下‘准科学’的外衣， 在21世纪全面迈进科学的殿堂。”- 雅虎首席科学家Duncan J. Watts

“大数据的影响，就像四个世纪前人类发明的显微镜一样……而大数据，将成为我们下一个观察人类自身社会行为的‘显微镜’。” – 麻省理工教授Erik Brynjolfsson

从数据，到海量数据，再到大数据，对人类的做事和思维方式都有很大的影响。在《大数据时代：生活、工作与思维的大变革》一书中，作者归纳了大数据的三个特点:

• 更多：不是随机样本，而是所有的数据;
• 更杂：不是精确性，而是混杂性;
• 更好：不是因果关系，而是相关关系。 [1]

当前对大数据的研究涉及计算机科学、数学、生物学等多个领域。大数据尤其是对数据存储、数据挖掘等提出了重大挑战。而数据可视化也将在大数据时代扮演一个重要的角色。数据可视化可以将纷繁复杂的大数据集、晦涩难懂的数据报告变得直观易读、易于理解，通过图表将杂乱的数据进行科学有序的呈现，使用户找到数据的变化规律以及潜在价值，帮助用户作出决策。就数据可视化的应用来看，应用范围极其广泛，如政府应用、商业决策、公共服务等等。

什么是数据可视化

顾名思义，数据可视化就是将数据转换成图或表等形式，以一种更直观的方式呈现数据。通过可视化的方式，我们可以将大量复杂的数据通过图形化的手段进行有效地表达，帮助用户发现规律和特征，发掘数据背后的价值。

图 1 @Marco Zemolin Siresia Bagnoli

数据可视化的应用价值

1. 易于理解，有利于发现信息特征

使用可视化的方式来表达复杂的数据，可以确保对关系的理解要比那些混乱的报告或电子表格更快。通过图形化的表现方式，我们可以以清晰和连贯的方式解释大量的数据，从而让我们理解数据，得出结论。

案例：流媒体平台节目数量的变化

以下图为例，当用户希望了解 2011 至 2020 下图四大流媒体平台节目的数量变化情况时，以表格方式呈现效果如下图：

未经可视化设计的表格数据图

如果通过可视化设计处理后效果如下图：

经可视化设计后的数据图

在这个案例中，我们可以看到，通过文字信息表达的方式，所有的数据在文字信息的表达中都只是零散的个体，我们很难在短时间内对列举数据有一个大致的了解，更不用说发现特征得到结论了；而在可视化表达中则不同，所有的元数据通过图表形成一个整体，数字信息被转化为视觉信息，通过可视化图表，通过观察点的位置和颜色即可感知到数据的差异，原本需要通过计算数字大小完成的对比，变成了肉眼可见的点的颜色与间距对比，我们可以迅速了解到近十年四大流媒体平台每年节目数量、每年不同平台节目数量的对比以及各个流媒体平台节目数量的增长趋势等。

2. 将数据转化为更具吸引力的故事

据研究发现：人脑处理图片信息的速度显著快于处理文字信息，例如一篇 300 字的小故事，看一遍需要数十秒，而转化成图片后则只需要一眼即可记在脑海里。

这表明，在信息的类型中，人脑对图片信息的接收和处理效率远高于文字信息。而数据可视化则可以将数据通过可视化的方式转化一个以图片形式展示的故事，帮助用户快速接收、处理信息，激发用户联想并产生情感共鸣。

案例一：新冠病毒如何通过空气传播

随着新冠疫情在全球各个地区的蔓延，如何做好疫情防控已经成为了每个民众的头等大事 。Mariano 和 Javier 用可视化的方式生动形象地传达了新冠病毒是如何通过空气传播的以及可以通过哪些措施来降低传染风险。

图 2 @Mariano & Javier

案例二：在叙利亚，谁和谁战斗？

许多不同的团体之间的关系可能很难理解 – 尤其是当有11个这样的团体存在的时候，这些团体之间有的结盟，有的敌对，这让人难以理解。但是，Joshua Keating 和Chris Kirk通过表格的形式和熟悉的视觉效果和色彩，将这些数据简化为一种简单的、易于理解和可互动的形式，让人们可以轻松了解这些团体之间的关系和故事

图 3 @Joshua Keating and Chris Kirk

3. 帮助人们作出决策，加快决策过程

现实生活中大部分的人是视觉学习者，他们倾向于在与视觉元素相关联的情况下进行学习并与信息互动。[2] 人类大脑识别并理解一张图像最快仅需 13 毫秒。[3] 因此，相比起阅读和理解文本，大部分人更容易通过图表或其他可视化形式来理解数据，合理的数据可视化设计可以提高他们作出决策的速度。

图 4 @Bea Vaquero

如何做好 B 端数据可视化设计

1. 明确客户需求

设计师在设计数据可视化项目的开始阶段应该尽量与客户进行深入沟通，确定他们的业务诉求，也可以理解为确定客户的初衷与目的，从企业客户对数据可视化的需求看来，通常会有两种类型：

• 侧重于汇报展示，主要用途是为了对外宣传、对内展示等，对于这类需求，设计时可强化视觉效果的呈现，对数据进行场景化设计，尝试让数据以一种新的载体，有趣的互动等形式结合展现。
• 侧重于数据分析和协助决策，对于这类需求，一定要清晰了解需求方的业务内容和重点指标，重点关注数据的维度、种类、数量等信息，视效设计上应该优先满足业务诉求。

明确客户诉求，通过设计手段帮助客户达成目标，这才是 B 端数据可视化设计的关键所在。只有当我们了解客户的需要，我们才能快速推导产品结构、关键数据、视效风格等信息。

图 5 @Daria

2. 确定关键指标与优先级

关键指标是对一组或者一系列数据的统称。一般情况下，一个指标在屏幕上独占一块区域，所以通过关键指标定义，我们就知道数据大屏上大概会显示哪些内容以及数据大屏会被分为几块。

那么关键指标的选取依据是什么呢？我个人认为主要还是依据客户诉求，数据可视化的最终目的就是帮助客户达成业务目标。需要思考的是，哪些数据通过何种呈现方式能够帮助客户解决问题、达到目的、满足他们的期望，选择出一系列关键指标。

对于这些选取出来的关键指标，我们需要对其进行优先级的排列，一般来说，主要指标能够呈现业务的主要逻辑，一般放在显眼位置，用重点元素标识；次要指标围绕主要信息进一步阐述；辅助指标是对主要信息的补充，一般放在非核心区域，或者二级结构中。

通过合理优化关键指标并进行优先级排列，能够保证数据可视化的核心设计的重点，避免数据空洞散乱。

3. 合理使用数据图表

在选择图表展示相关数据指标时我们要思考各个指标的主要呈现，更进一步的讲，是我们想通过可视化表达怎样的信息。下面这张图就清晰告知了我们如何从数据的展示目的出发，选择合适的可视化方式来呈现数据。

图 6 翻译自@Stephen Few

4. 合理进行页面布局

数据可视化页面布局的设计是相对灵活的，为了保证数据呈现最佳效果需要结合实际需求来合理规划。关注核心数据的比例和位置，横向布局最为常见（人眼的水平运动比垂直运动快，会先注意水平方向的事物），核心数据场景划分在中心位置，占较大面积；其余的指标按优先级遵循人们的浏览习惯在核心指标周围依次展开。将类型相近的指标放一起，这样能减少观者认知上的负担并提高信息传递的效率。

@布局设计案例

5. 制定设计方向

在定义设计风格的阶段，从项目背景出发，综合行业类型、产品定位、品牌传播等因素，提取关键信息，构建设计框架。

数据可视化的设计风格主要根据客户要求、行业特性、数据指标等因素决定。通常我们很容易看到的可视化设计以深色为主，是因为相比于浅色基调，深色背景设计能够有效缓解视觉疲劳，其次深色设计能够更好地营造对比差异以及数据层级，再者深色设计更容易呈现丰富的动态效果，营造出强烈的空间感等。配色的设计使用应该充分考虑项目背景以及项目属性，例如党政机关类项目会慎重考虑用色，应当确保设计严肃，庄重。

数据可视化的设计除了对数据进行合理设计，还需要注重场景感的塑造，例如，我们通过场景化设计可以让某大数据平台成为大型“图书馆”，查看数据的过程就跟图书馆看书一致，场景化设计的优势是能够让用户能够以一种具象的互动方式来理解十分抽象的业务数据，当然合理的构建动态数据效果能够让数据具备“生命力”。

图 7 @Gan Gryc

6. 设计对比

除了尺寸和位置，我们还可以通过配色来突出数据。

无论是通过颜色或形状对比设计，容易产生强烈的视觉冲击力。

图 8 @Bureau Oberhaeuser

利用明度的对比，我们可以用深色烘托鲜明的色彩，或者用鲜明的色彩衬托某一块暗沉的色彩，亮色靠附近的暗色衬托显得更加鲜明，其色彩特征表现得更加充分；

图 9 @Zoey Shen

正确的对数据进行配色，让数据传递出的信息更清楚、更明白，例如国内 A 股，红色代表涨，绿色代表跌（美股绿涨红跌）如果给国内的股票、金融等相关客户做数据可视化设计时，需要避免不同地区文化所产生的差异。

图 10 @Dima Groshev

7. 选择 2D or 3D?

随着数字孪生概念的火热，越来越多的企业热衷于打造自己的 3D 数据可视化产品，那么 3D 可视化就一定比 2D 强吗？

数据可视化设计本身就是为了高效传达数据信息而服务的，相比平面呈现，3D 最大的优势在于多了空间维度，适合那些需要跟空间结合的数据呈现，例如地理信息、建筑楼宇、工业生产等场景。那么 3D 数据可视化相比 2D 就一定能够展示更多的信息吗，显然不是绝对的；需要根据实际业务需求出发。

通常我们所说的数据 3D 可视化，就是把大量复杂抽象的数据信息，通过 3D 模型以视觉方式呈现出来，帮助人们理解和分析数据。相比于数据 2d 可视化，数据 3d 可视化具有以下的优势：

• 展示空间相关的数据，因为空间数据具有三个维度，如果想要将其以视觉方式直观呈现出来，就必须要借助 3d 模型。例如显示一栋大楼不同楼层的人员分布情况，此时只有 3D 数据可视化能够帮助我们达到目标；
• 视觉冲击力更强，相比于 3D 可视化从视觉上表现力更强；
• 场景/对象仿真，在一些需要高度仿真的项目，例如与军事、地理勘测相关的项目中，数据 3D 可视化就不可或缺了，无论宏观态势还是细微结构的精密运行，数据 3d 可视化都可以将相关信息清晰呈现给使用者，将真实的环境、对象搬到屏幕上，降低使用者的认知成本。

在一个实际的数据可视化产品项目中，有必要应用 3D 数据可视化的情形；

• 需要展示多维空间数据
• 需要通过对场景/对象进行仿真，减少使用者的认知成本和学习成本
• 需要依靠 3D 效果来提升视觉冲击力

相比 2D，3D 的设计与开发成本相对较高；其次 3D 场景会容易产生视角遮挡以及操作成本等问题，那么从实际项目出发合理选择才是最重要的。

亚信数字楼宇@PRD MO UED

8. 设计还原

设计稿完成了并不代表设计师在这个项目中的工作就结束了，在后续的开发工作中，设计师还要与开发人员合作，减少上线产品与设计稿的差异。

这个阶段的工作也并非听上去那么容易，尤其是 3D 可视化设计，我们会使用相关 3D 工具制作设计效果，但 3D 设计工具与最终开发引擎存在着色、渲染等差异；在这个时候我们需要灵活运用开发引擎特性，提供对应的美术资源。作为设计师同样需要了解相关引擎着色器知识，帮助设计效果实现同时也提升对接效率。

亚信数字楼宇@PRD MO UED

9. 调优与测试

测试客户终端上线是否正常，有无适配所造成的兼容性问题；排查有无视效及体验问题，同时也要考虑极端场景下所产生的问题及应对方案。

对于大型 3D 可视化场景会存在性能卡顿，加载缓慢等问题，在保证视效基础上尽可能压缩相关美术资源，减少不必要的效果计算和内存占用量，根据实时效果需要不断优化性能提升产品体验度。

数据可视化发展趋势

趋势一：数据可视化 ╳ AI人工智能

随着企业发展数据量日益庞大，通过人脑分析复杂数据变得越来越困难，我们需要借助 AI 人工智能的帮助。AI 人工智能可以通过强大的算法快速识别分析数据，为企业节省了宝贵的时间和资源，目前人工智能已经被广泛应用于医疗保健服务、销售、供应链、客户分析和欺诈预防的数据可视化项目中。

IBM 数据可视化专家 Mauro Martino 创建的仪表板，允许用户可视化新闻中出现的主题

趋势二：数据可视化 ╳ XR

AR 和 VR 技术的应用可以增强数据在空间上的感知，从而帮助人们更好地使用数据。通过结合 VR、AR 技术，用户能够更好，更快地理解、分析数据。最近进行的许多研究表明，VR 和 AR 具有较强的感官体验，可以促进更快的学习和理解。帮助用户对业务问题进行多维度的分析，并更快速地找到解决方案。

图 11 LM9000@5puj47980xk

趋势三：数据可视化 ╳ 实时数据

在数字时代，事物变化很快，企业需要对数据告诉他们的信息做出快速反应——正因为如此，实时可视化数据比以往任何时候都更重要。

在 COVID-19 大流行期间，企业能够迅速作出反应更加重要。各国政府和卫生当局已经使用实时数据可视化来跟踪感染情况并据此进行调整。越来越多的公司正在将实时数据集成到他们的产品中。

实时数据可视化可以采取一些简单的形式，如实时更新的折线图或使用新信息(如销售)快速更新的交互式地图。

图 13 @Esri & The Science of Where Podcast

趋势四：数据可视化 ╳ 全面体验设计

以用户体验为核心的数据可视化设计是一种重要趋势，将用户放在第一位，然后是数据。无论处在哪个行业，设计师都应该遵循类似的思考过程，从思考用户需求及其痛点开始, 用户正在尝试解决哪些问题，以及他们面临哪些可能的困难？他们需要什么信息和功能来解决这些问题？我们如何以最佳方式为他们打造数据可视化？

最新的趋势之一是将用户的工作流与可行的见解、建议、预测以及针对当前任务或决策的最佳后续操作合并，帮助用户进一步钻研数据并发现模式、趋势和相关性。

结语

数据可视化是一门同时结合了科学和艺术的复杂学科，其核心意义在于清晰的叙述和艺术化的呈现，这些需要依靠数据工程师和设计师的精心策划而不是仅仅考虑如何实现炫酷的效果 ，只有最终达到帮助用户理解数据和做出决策的目标，才能发挥它巨大的价值和无限的潜力。

文章来源：优设 作者：AsiaInfo Design

分享此文一切功德，皆悉回向给文章原作者及众读者.

免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

语言交流是人类的本能，近几年语音交互的迅速崛起让产品更加人性化了。然而即使不考虑技术限制，人与机器的互动也不是只有听或说单一模态的，因为这不符合我们的自然交流。目前，在居家场景中，用户与电视的交互依然是对众多信息-图像、语音、触感-的同时处理，它们分别对应着观看、听说和必要的遥控器操作。对UX设计师而言，如何让电视端同时承载这样多的感知设计是值得思考的。

语音体验设计是一个很大的系统，从用研、功能、内容到交互、技术实现等等，而GUI的展示只是一种辅助模态。今天我想探讨的是如何结合GUI与VUI展开界面设计。

文章分两个部分：电视端VUI的搭建和一次改版迭代。

目录

1. VUI的构成

2. 改版需求

3. 界面改版

4. 设计验证

1. VUI的构成

“Voice User Interface (or VUI) is an interaction model where a human interacts with a machine and performs a set of tasks at least in part by using voice.”

 <Voice User Interface Design>

1.1 定义

VUI：是一种交互模态，让人能够或多或少通过语音交互与机器共同完成一系列任务；

领域：是将用户想要完成的任务分为一些大的类型，比如视频领域、音乐领域、百科领域等；

意图：指某领域下的具体任务，比如视频领域下的“我想看某部电影”，即为影视搜索意图。

1.2 场景示例

小明：“给我推荐点美剧”；

电视：“看看这些有没有你喜欢的”，并推送一些热门美剧；

小明：考虑了一会儿....说“风骚律师吧”；

电视：起播《风骚律师》。

在这个故事中，除了众所周知的VUI应具备的基础功能-听和说-以外，我们还需要定义更完整的体验流程：

1. 小明如何开启与电视的对话？因为电视机不能一直处于聆听状态，那样很可能会识别用户无意图的语言，从而误响应。
2. 电视端应该以什么方式推荐美剧？如果只一个个播报片名，小明会记不住。

3. 推荐几部合适？隔空喊话的情况下（远场语音，下图解释），最好不需要再用遥控器翻页。

4. 如果小明问的是其他领域问题，比如天气、歌曲、球赛等，对应的媒体资源会涉及到多样化的信息类型，如图形、音频等。不仅要统一设计风格，还要为未来可能支持的新领域/新意图预留承载框架。

5. 如果小明的询问得到了错误答复，或者一直未被答复，除了技术上提高识别率和语义理解程度，该怎么缓解用户的茫然和愤怒情绪？

6. 当小明问了一个问题，不被理解，但换个问法却成功理解。如何教会小明尽可能一次就做出能被识别的表达？

7. 我们能支持几十个领域、几百种意图，怎样能让小明知道一共有哪些？ 

8. 如何结束对话，以免电视一直聆听造成误识别？

9. ......

为了回答以上问题，我们经过大量的模拟对话、竞品分析和demo体验，从而定义了电视端VUI的交互流程和组成模块：

1.3 交互流程

唤起、聆听、思考、反馈、退出：

电视端的语音有三种对话状态：

1. 单轮对话：每说一句话都需要唤起一次语音；

2. 多轮对话：一次唤起，多轮对话，但轮数受限于领域范围；

3. 全双工模式：一次唤起，多轮对话，轮数不限。

图源网络

1.4 GUI模块

这是本文重点描述的部分，电视端的GUI包括：

1. 状态指示动画：告知用户当前状态；

2. 提示词条：提示用户有哪些说法；

3. 用户指令：用户说法的文字识别结果，它让人知道自己说的话是否被正确识别，若出了错，用户就知道原来是错在这一环节；

4. 电视答复：文字+音频；

5. 内容展示：所有媒资内容的呈现，如果没有，则不展示。比如，天气需要展示图像，而交通限行用一句话回答即可。

旧版设计方案概览：

语音GUI分为两块：语音基础界面（必须）和内容展示区（可选），基础界面包括上图中的1234内容。

2. 改版需求

上图效果是从17年逐渐搭建起来的框架，随着需求增多、不同设计师的参与，设计越来越碎片。从易用性、视觉、开发维护难度和新功能兼容上，都存在很多问题：

2.1 设计目标

1. 布局调整

由于电视用户使用最多、最重要的功能是观看影视，所以优先考虑视频领域。因此布局调整的优先顺序是：基础界面>视频领域>其他领域。

2. 建立视觉规范

建立原子化设计规范：配色方案、文字、间距、圆角、图标，以及可复用和拓展的组件、模版。

3. 统一状态动效

将上文的5种基础状态结合全双工状态统一设计，并为未来可能开发的主动提示等状态，预留一席之地。

3. 界面改版

3.1 语音基础界面

经过竞品分析，穷举了7种可能的布局方式：

这么多的优缺点该如何取舍？我们将痛点归类，并根据通用的交互原则排列了优先级：

最后决定用B1-底部长矩形，但设计UI时需要借鉴B2那样增加一点渐变过渡。而针对B1的痛点，需要重新设计小面积状态指示动画，并定义好低栏左侧的识别文字与右侧的提示词条之间间距，从技术上，我们能做到跟进用户说话和播报内容，说一句、展示一句。

3.2 内容展示区－视频领域

电视端就像是一块自由发挥的大画布。视频海报的摆放，得从几个方面考虑：

1. 背景占比：半屏、全屏、半屏至全屏；

2. 导航方式：宫格（我们的海报尺寸是可以统一的，所以不考虑瀑布流，此阶段也没有专题分类，无需考虑tab栏和泳道栏）；

3. 海报方向：横幅、竖幅；

4. 展示数量：是否超过一页、海报尺寸。

市面上的竞品就有这几种方案：

行为数据显示，我们用户的视频意图分两种：明确自己想看什么－“播放陈情令”，和不明确目标、向电视寻求推荐－“推荐点古装剧”。我们分别称为普通推荐和个性化推荐。由于前者在大多数情况下内容较少，所以用半屏，后者则用全屏。由于视频会单独设计一个APP，故最后定的普推和个推的坑位都是十张：

3.3 内容展示区－其他领域

上面确定了视频领域，而其他几十个领域的信息，同所有平面设计的信息一样，都是文字、图片、图标的排列组合，可以把它们按照原子化设计系统，从分子到模版逐步搭建：

这样的结构，能确保20多个带内容的领域都能从中找到对应的排列方式，模版如下表。这里看起来可能比较抽象，可以先看后面的UI效果图再回来看这里。

3.4 内容展示区－背景

实际界面中，内容可能会以前面的任何一种排列形式出现，给较少的内容使用大背景是浪费，反过来则拥挤杂乱，故不同内容需要不同的背景。依然还是穷举了5种背景待选择：

1. 卡片 

2. 悬空半透明容器

3. 半屏羽化背景

4. 半屏实心背景

5. 全屏背景

按照痛点的优先级打分：

可见方案d-半屏实心背景最佳，但它最适合内容量级为中等的情况。所以我们考虑了是否也采用卡片和全屏来适应内容过少和过多的情况。最后结论是：只采用方案d和e，舍弃a，因为d的背景高度可以随内容的多寡而变化。这样以来，设计就不会很碎片化了。

3.5 设计规范与效果图

到这里，已经确定了语音基础界面（低栏）、各领域信息排列方式和背景。接下来就像搭积木把它们组合起来，这一步重点考虑的是内容是否上焦点和翻页，这需要根据具体领域的资源参数和使用场景甄别。

正好在做这个项目时，我们电视端的视觉规范也在完善中，所以焦点色、文字、栅格等规范是直接从规范库搬过来的。

实际效果：（抱歉GIF原图太大了，只好展示一小截。手机拍摄有一点色差，实际的色彩还原度是很高的。）

4. 设计验证

我们找来40名用户体验新旧版本语音，进行了偏好测试和用户反馈收集，部分反馈如下：

40名用户中，有80%认为新版更好，分别有12.5%和7.5%的人认为两者差不多和旧版更好。这次的改版中，UI&交互、动效、颜色&背景三者，体验感分别提升了12%、2%和7%。

当时大家对新版评价最高的是：简洁易看、空间利用率高、布局更好。

吐槽最多的问题是：背景色太深、配色单一，动画不够好看、不够明显。我们随即对背景色做了优化，上图看到的是优化后的效果。

后续兼容性验证：新版结构能较好适应节假日换肤、半屏小程序、第三方App适配等多种需求。

小结

文章复盘了电视端语音的基础界面、视频领域、其他领域和背景的重构过程。主要用到的方法有原子化设计理论、竞品分析、痛点云图（表格形式）和用户偏好测试。对界面布局有较好的优化效果。最大的收获是掌握了从最底层元素展开剖析的方法，这种细致的方法用来搭建界面设计会很稳固、全面，并且拓展性强。

经验和不足：

1. 大屏经常强调沉浸式体验，因而电视端叠加功能很多，但必须要注意分个主次。一是叠加内容不能太多，要么就不叠加、全屏展示。二是一定要考虑背景播的不确定因素，避免花乱；

2. 上面只是分析了二维平面，还有次级页面、时序等三、四维的规则还未深入学习研究。这样的研究会对所有App设计都有更好的指引。

3. 我们虽然已有了简单的导航、栅格等布局规范，但内容展示区依然是毫无章法的自定义排列，智能电视产品还没有像手机、PC一样较成熟的设计框架，我觉得苹果的tvOS模版规范做的比较稳定，我们也应该借鉴，形成自己的风格。

文章来源：优设  作者：lady珠珠

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务

什么是数据可视化：概述

Jorge Rey的化石燃料Dataviz 

它是如何工作的？

如果我们能看到它，我们的大脑就可以内在化并对其进行反思。这就是为什么理解图表和查看趋势比阅读大量的文档要花费大量时间和精力进行合理化更容易和有效的原因。我们不想重复人类是视觉生物的陈词滥调，但这是事实，可视化更加有效和全面。

在某种程度上，我们可以说数据Viz是讲故事的一种形式，目的是帮助我们根据数据做出决策。这些数据可能包括：

• 追踪销售

• 识别趋势

• 识别变化

• 监控目标

• 监测结果

• 合并数据

秘密7 –塞尔吉奥·费尔南德斯（Sergio Fernandez）提出离婚可视化的理由 

什么时候使用？

数据可视化对于每天处理大量数据的公司很有用。必须立即显示您的数据和趋势。胜过浏览庞大的电子表格。当趋势立即脱颖而出时，这也可以帮助您的客户或观看者理解它们，而不会迷失在混乱的数字中。

话虽如此，Data Viz适用于：

• 年度报告

• 简报

• 社交媒体微叙事

• 信息手册

• 研究

• 趋势贩运

• SciViz

• 烛台图，用于财务分析

• 确定路线

可以看到数据可视化的常见情况是在销售和营销，医疗保健，科学，金融，政治和物流中。

娜塔莉·祖伊娃（Natalie Zuieva）的租金和薪金统计信息图 

为什么要使用它？

简短的答案：决策。数据可视化具有快速识别模式和解释数据的不可否认的好处。更具体地说，它是确定以下情况的宝贵工具。

• 识别变量关系之间的相关性。

• 获得有关受众行为的市场见解。

• 确定价值与风险指标。

• 随时间监视趋势。

• 通过频率检查速率和潜力。

• 应对变化的能力。

太空垃圾-BBC科学焦点，作者：Federica Fragapane

数据可视化类型

您可能已经猜到了，Data Viz不仅仅是简单的饼图和图形，而且还具有视觉吸引力。该分支用于可视化统计信息的方法包括一系列有效类型。

地图

地图可视化是一种很好的方法，可以分析和显示与地理位置相关的信息，并通过地图准确地将其呈现出来。这种直观的方法旨在按区域分布数据。由于地图可以是2D或3D（静态或动态），因此可以使用多种组合来创建Data Viz地图。

COVID-19支出数据可视化POGO，George Railean

但是，最常见的是：

• 区域地图：显示国家，城市或地区的经典地图。对于每个区域中的不同特征，它们通常以不同的颜色表示数据。

• 线图：它们通常包含空间和时间，由于对特定场景进行了分析，因此通常是路线选择的理想选择，尤其是该地区的驾车或出租车路线。

• 点地图：这些地图分发地理信息的数据。它们是企业确定区域中建筑物确切位置的理想选择。

• 热图：它们根据特定属性指示地理区域的权重。例如，热图可以按区域分布感染者的饱和度。

图表

图表以图形，图表和表格的形式显示数据。由于图形确实是图表的子类别，因此它们经常与图形混淆。但是，两者之间的差别很小：图形显示数据组之间的数学关系，并且仅是表示数据的统计图方法之一。

图表数据可视化，作者：Madeline VanRemmen

顺便说一句，让我们谈谈数据可视化中最基本的图表类型。

条状图

他们使用一系列的条形图来说明数据。它们是较轻量数据的理想选择，并遵循不超过三个变量的趋势，否则，条形变得混乱且难以理解。

饼状图

这些熟悉的圆形图按部分划分数据。切片越大，部分越大。它们非常适合描述整体的各个部分，它们的总和必须始终为100％。当您需要显示一段时间内的数据发展或缺少任何部分的价值时，请避免使用饼图。甜甜圈图与饼图具有相同的用途。

线形图

他们使用一条线或多条线来显示随着时间的发展。它允许同时跟踪多个变量。一个很好的例子是跟踪品牌多年来的产品销售情况。面积图与折线图具有相同的用途。

散点图

这些图表使您可以通过数据可视化查看模式。它们有两个不同值的x轴和y轴。例如，如果您的x轴包含有关汽车价格的信息，而y轴包含有关薪水的信息，则正向或负向关系将告诉您某人的汽车所反映的薪水。

表格

与我们刚刚讨论过的图表不同，表格几乎以原始格式显示数据。当您的数据难以以视觉方式呈现，并且旨在显示应该阅读而不是可视化的特定数值数据时，它们是理想的选择。

数据可视化| Aishwarya Anand Singh的养蜂与否 

例如，图表非常适合显示特定区域内一段时间内特定疾病的数据，但是当您还需要了解具体原因（例如原因，结果，复发，治疗时间和治疗方法）时，最好使用表格。

数据可视化与信息图表

5个主要差异

它们并没有什么不同，因为它们在视觉上都代表数据。通常，您搜索信息图表并找到标题为“数据可视化”的图像，反之亦然。但是，在许多情况下，这些标题都不会引起误解。这是为什么？

1. 数据可视化仅由一个元素组成。它可以是地图，图表或表格。另一方面，信息图表通常包含多个Data Viz元素。

2. 与可能简单或极其复杂且繁重的数据可视化不同，信息图表简单易行，并且面向更广泛的受众。即使对于信息图表代表的研究领域之外的人，后者通常也是可以理解的。

3. 有趣的是，数据Viz不提供叙述和结论，而是提供这些叙述和结论的工具和基础。虽然信息图表在大多数情况下提供了故事和叙述。例如，数据可视化地图的标题可能是“按区域划分的空气污染饱和度”，而带有相同数据的信息图则显示为“ A区和B区在C国污染最严重”。

4. 数据可视化可以在Excel中进行，也可以使用其他自动生成设计的工具，除非将其设置为演示或发布。但是，信息图表的美学非常重要，其设计必须吸引更广泛的受众。

5. 在交互方面，数据可视化通常提供交互式图表，尤其是在线形式的图表。另一方面，信息图表很少互动，通常是静态图像。

Skype通过可视化.com进行可视化

如何创建有效的数据可视化？

5有用的技巧

该过程自然类似于创建信息图表，并且围绕了解您的数据和受众。更准确地说，这些是准备有效的数据可视化以使您的查看者立即了解的主要步骤和最佳实践。

1.做功课

准备工作已经完成了一半。在甚至开始可视化数据之前，必须确保您了解该数据的最后细节。

不可否认的是，了解您的数据查看对象是另一个重要部分，因为不同的人对信息的处理方式不同。您要为数据可视化的对象是谁？他们如何处理视觉数据？只需给他们一张饼图就足够了，否则您将需要更深入的可视化报告？

您正在可视化什么样的信息，它能反映出您的目标吗？

最后，考虑要使用多少数据并加以考虑。

图片来自Brodie Vissers

2.选择正确的图表类型

在上一节中，我们列出了可在数据可视化中使用的基本图表类型。要确定最适合您工作的人，需要考虑的因素很少。

• 图表中将有多少个变量？

• 您将为每个变量放置几项？

• 值之间的关系是什么（时间段，比较，分布等）

话虽如此，如果您需要展示整个项目的各个部分，那么饼图将是理想的选择。例如，您可以使用它来展示特定产品的市场份额的百分比。但是，饼图不适用于时间范围内的分布，比较和跟踪趋势。在这些情况下，条形图，散点图，s和折线图更为有效。

另一个示例是如何在图表中使用时间。使用水平轴会更准确，因为时间应该从左到右。它在视觉上更直观。

Oberhaeuser的MagnaGlobal广告市场海报 

3.对数据进行排序

首先删除所有不会增加价值并且基本上是图表多余的数据。有时，您必须处理大量数据，这不可避免地会使您的图表变得非常复杂且难以阅读。不要犹豫，将您的信息分成两个或多个图表。如果这对您不起作用，则可以使用突出显示或使用更合适的内容更改整个图表类型。

提示：使用条形图和柱形图进行比较时，请按值（而不是字母顺序）以升序或降序对信息进行排序。

图片由萨曼莎·赫尔利（Samantha Hurley） 

4.利用颜色发挥自己的优势

在每种可视化形式中，颜色都是您最好的朋友和最强大的工具。它们产生对比，重音，强调并直观地引导眼睛。即使在这里，色彩理论也很重要。

设计图表时，请确保不要使用超过5或6种颜色。除此之外，任何其他操作都将使您的图表不堪重负，并且难以为观众阅读。但是，您可以使用颜色强度来发挥自己的优势。例如，当您在不同的时间段内比较同一概念时，可以将数据从所选颜色的最浅阴影到其较深的颜色进行排序。它会创建适合您时间线的强烈视觉效果。

选择颜色时要考虑的事项：

• 不同类别的颜色不同。

• 系列中所有图表的采用一致调色板，方便以后将进行比较。

• 最好使用对色盲友好的调色板。

Jamie Kettle可视化塑料废物污染数据 

5.获取灵感

当您想成为数据可视化设计中的佼佼者时，请多多发挥自己的灵感。查看优秀的示例、信息图、其他人的工作，并了解哪种方法最适合您需要实现的每种数据。

下图这个Twitter帐户数据可视化是一个很好的例子。同时，我们还将精选一些令人称赞的示例，这些示例将使您有信心开始为数据创建视觉效果。

lilit Hayrapetyan创作的大数据纪录片的人脸 

8个数据可视化示例

作为另一种艺术形式，Data Viz为一些令人惊叹的精心设计的图表提供了沃土，这些图表证明了数据也可以是美丽的。现在，让我们来看看一些例子。

1.黑暗之魂III体验数据

我们从孟小伟的个人项目开始，介绍他玩《黑暗之魂3》的经验。这是信息图表和数据可视化也是个人设计工具的完美例子。这项研究非常庞大，但非常专业地归类为针对不同概念的不同类型的图表。所有数据可视化都使用相同的调色板进行制作，并且在信息图表中看起来很棒。

我的黑暗之魂3孟小伟在播放数据 

2.有史以来最伟大的电影

凯蒂·西尔弗（Katie Silver）根据评论家和观众的评论汇总了有史以来最伟大的100部电影。可视化显示了每部电影的关键数据点，例如发行年份、奥斯卡提名和获胜、预算、利润、IMDB得分、类型、拍摄地点、电影背景和制作工作室。所有电影均按发行日期排序。

凯蒂·西尔弗（Katie Silver）的100部最佳电影数据可视化 

3.最暴力的城市

费德里卡·弗拉加帕内（Federica Fragapane）显示了2017年全球50个最暴力城市的数据。这些项目根据人口在垂直轴上排列，并根据凶杀率在水平轴上排序。

4.家族企业作为数据

这些数据可视化和插图由Valerio Pellegrini为《透视》杂志制作。它们显示了一个饼图，其中包含行业细分以及对就业贡献的散点图。

视角杂志–家族企业by Valerio Pellegrini 

5.太阳系的轨道图

该地图显示了太阳系中18000多个小行星的轨道数据。每个小行星都显示在1999年除夕的位置，并按小行星的类型进行了着色。

埃莉诺·卢兹（Eleanor Lutz）的太阳系轨道图 

6.标题的语义

KatjaFlükiger对头条新闻的故事情有独钟。数据可视化旨在传达销售对算术的影响程度。该项目在马里兰大学艺术学院完成，目的是可视化对移民的引用，并对用词选择和上下文所暗含的价值判断进行颜色编码。

标题语义学KatjaFlükiger 

7.月球和地震

该数据可视化用于回答月球是否引起地震。该图显示了根据月球的相位和轨道位置而发生的地震的时间和强度。

月亮与地震艾西瓦娅·阿南德·辛格（Aishwarya Anand Singh） 

8. Nanosats的黎明

可视化效果显示了从2003年到2015年发射的卫星。该图表示了专注于项目的机构类型以及为其提供资金的国家。左侧显示了每年的发射次数和卫星应用次数。

有线英国–由Nanosats拍摄的黎明（Valerio Pellegrini） 

最后的话

数据可视化不仅是一种科学形式，而且还是一种艺术形式。其目的是帮助任何领域的企业快速理解复杂数据，并开始根据该数据做出决策。为了使您的图表高效且易于阅读，这一切都与了解您的数据和受众有关。这样，您就可以选择正确的图表类型，并使用可视化技术来发挥自己的优势。

文章来源：站酷  作者：ZZiUP

蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务