浅谈可视化设计-数据时代的美味“烹饪师”（上篇）

目录：

1. 什么是大屏数据可视化
2. 设计流程介绍

1. 结合情感打造二维设计美感
2. 构建空间感&二维与三位的融合
3. 小结

还记得大学学设计的时候学院里流传了一句话：“有百分之八十的设计师都幻想着成为一名厨师。”

我以前从未细品过这句话的原因，只以为是同窗们之间的玩笑。在我大二的时候有幸与一位懂烹饪的学姐一块儿租房。从那个时候开始，我受她的影响也开始对烹饪着迷。我渐渐的发现，烹饪其实与设计是很是类似的：食材的选择，调味料的选择，切菜炒菜的技法，烹煮的方式，摆盘的方式，菜品的颜色控制，甚至是碗盘形状颜色的挑选等等......经过这些小点略微的改变，导致每一个人烹饪的料理味道都彻底不一样。

当我懂得这些，并开始思考如何烹饪属于本身味道的美味料理时，我发现我开始了“设计料理”的过程。设计它每道工序添加调料的多少改变精致的味道，设计它的食材搭配，设计它的摆盘方式，甚至个人料理的出场方式，以达到给品尝料理的人最好的体验来充分体会到这道菜食材的精华所在。我想这就是设计师会痴迷于成为厨师的缘由所在吧。对于设计师而言，这些食材均可以成为设计的对象，来达到一个最好的用户体验，来得到做为一个厨师的知足感。

在当代的数据时代里，做为可视化设计师的目的就是作到拿到任何的食材—数据，经过对它的设计，把凌乱冰冷的数据赋予它本身的“味道”，让用户一眼就能够明白它的含义，它的不一样。经过设计的加工，如料理选择调料与摆盘同样，帮助用户对它的理解更深，而且增长对它的喜好。清晰的阐明数据的含义，避免美味食材的沦陷，直观呈现大数据背后的意义，数据可视化就是这样变得有价值。下面，让咱们走入数据可视化设计的方法，来看看咱们的独家菜谱吧。

谈论起数据可视化设计，许多人会产生一个疑问：什么是数据可视化？咱们由此问题着手，来谈论下数据可视化设计。

经研究代表，人类大脑对视觉信息的处理优于对文本的处理。所以，数据可视化是使用图表、图形和设计元素把数据进行可视化，把相对复杂、抽象的数据经过可视的方式以人们更易理解的形式展现出来的一系列手段。数据可视化可使人们更有效率的完成某些任务，咱们能够理解为三点优点：

• 美观展现: 用数据展现企业特点，大会展台，媒体现场展现等
• 数据驱动：实时查看业务概况、监控预警、驱动内部快速响应
• 发掘价值：可视化数据呈现后，带来的视觉感觉会帮助人发现新的因素

在 HT 技术支持下，数据可视化除了“可视”，还可有可交流、可互动的特色。设计带来的不只是瞬息处理海量数据搭配酷炫的可视化样式所引发的视觉震撼，更应注重为业务需求服务，设计出符合不一样行业需求的个性定制可视化，利于企业作出正确的商业决策，以有根据的数据呈现而帮助企业进行更科学的判断而避免决策的失误。

1. 从业务需求分定优先级

关键指标是一些归纳性词语，是对一组或者一系列数据的统称。经过规定主，次，辅，三个指标的关键词来概念性的清晰大屏的主要展现内容，例如咱们作的一个照明的监测项目，咱们能够归类成这三种：

• 主：主要指标位于屏幕中央，为地图展示照明区域使用数据。
• 次：次要指标位于屏幕两侧以图表的形式展示。
• 辅：主要指标的补充信息鼠标点击或悬停展现以及交互动效展现。

这样就能够方便在脑海中肯定大屏的总体构架，以便于咱们接下来的细化。

2. 经过指标分析维度确立可视化图表类型

同一个指标的数据，从不一样维度分析就有不一样结果。若是分析的维度没有找准或定义的比较混乱，就会使可视化图表没法清晰的看清楚含义，令人困惑。这里咱们引用Stephen Few 的文章 《Visual Business Intelligence》的四项维度-比较，联系，分布，构成，来分析数据的逻辑性。

在思考四项维度的时候咱们要思考几个问题：
1.数据之间的相关性？
2.指标里的数据主要集中在什么范围、表现出怎样的规律？
3.数据之间存在何种差别、差别主要体如今哪些方面？
4.指标里的数据都由哪几部分组成、每部分占好比何？ 以上的示例图表的样式比较传统，可是思考问题的逻辑性是相通的，值得借鉴使用。

3.根据大屏尺寸，规划页面布局，确立交互稿

确立图表类型后，下一步要进入到布局具体的信息位置，确立交互稿的步骤。确立交互稿的第一步就是要肯定大屏的尺寸。客户的大屏尺寸不用会影响到总体的布局和效果，设计的时候也要考虑下是否有拼接大屏接缝的问题，尽可能以拼接屏尺寸来确立栅格化布局。

尺寸确立后，接下来要对设计稿进行布局和页面的划分。布局这里咱们就要参考第一项的业务需求优先级来布局画面分割面积。核心业务指标安排在中间位置、占较大面积；其他的指标按优先级依次在核心指标周围展开。通常把有关联的指标让其相邻或靠近，把图表类型相近的指标放一块儿，这样能减小观者认知上的负担并提升信息传递的效率。视觉上要尽可能规避文字罗列或图表罗列，注意方圆图表的面积比例问题等，也是布局期间须要注意的事项。

4.肯定设计风格与设计进行

设计风格的肯定主要以如下几点来肯定： 设计风格的选择切勿追求效果炫酷而不符合业务需求，选择最合适的而不是选择最绚烂的尤其重要。由于设计中涉及的范围比较广，咱们在后两章节单独着重讲解。下面展现部分咱们作的不一样行业对应的不一样构图布局与元素的应用案例：

发动机的可视化以突出发电机产品为主，周围UI以大圆角形式设计，使视觉由四周向中间包围，集中于中心。

挖掘机的可视化采用了大地色进行设计，采用了色彩共情的原理，结合简洁的线性UI，使大屏在接地气的同时不失高端雅致的效果。

医院的可视化设计以冷白色为主，突出医院给人的干净，严肃的感受，仿佛能闻到消毒水的气味。以模型展现为主，按钮样式也采用了以面为主的设计配合大面积色块分布为主的模型设计。

地铁站的可视化以写实风格为主，再现了真实地铁站的样貌，以及身临其境的动画交互体验。

农业可视化案例尝试了 low poly 风格，以简洁插画风与略抽象画的模型浓缩了农业的运做场景，色调以贴近植物的绿色为主，设计出可爱的动画风格可视化效果。

5.沟通与修改

在作设计中一个很重要的点就是沟通，不管是设计师内部的沟通仍是设计师与客户的沟通都会对大屏最后的修改效果产生一个很大的影响。设计师在内部沟通时要从专业角度吸收知识与建议，并从客户那里吸收业务需求与客户心理诉求。这时对于意见的筛选取舍就很重要，设计师可能会被复杂的审核流程和不一样外行人士的不一样喜爱而干扰，这时设计师须要综合意见，与项目经理一块儿把控设计的走向，在和客户沟通中彼此商讨相互学习与意见的妥协从而一步步优化设计方案。固然设计没有标准答案，也没有完美的面面俱到的设计方案，最理想的标准就是达到客户的理想诉求但对于本身作的设计必定要过了本身的这一关，能协调好本身的审美与客户的需求两赢的状态才是一个好的设计。

同时在设计时由于使用的设备不一样，大屏有它本身独特的分辨率、屏幕组成、色彩显示以及运行、展现环境，这里的不少问题只有设计稿投到大屏上才可以被发现，因此这一步在样图沟通确认环节很是重要，有时候须要开发出demo，反复测试屡次来修改协调最终上屏效果。在测试时从设计上能够重点注重如下几点：

一、以前确立的布局在放入设计内容后是否依然合适

二、确立的图表类型带入数据后是否仍然客观准确

三、根据关键元素、色彩、结构、质感打造出的页面风格是否基本传达出了预期的氛围和感觉

四、已有的样式、数据内容、动效等在开发实现方面是否存在问题

五、大屏是否存在色差、文字内容是否清晰可见、页面是否存在变形拉伸等现象

6.开发与测试

将设计稿交与前端进行制做，与程序沟通交互切换效果，大屏动效等，一块儿实现把控大屏的最终效果。

上篇咱们了解了大屏数据可视化的概念与设计流程，下篇将带领你们进入数据艺术世界，发散设计思惟，体验设计乐趣，《可视化设计-数据时代的美味制造者（下篇）》，欢迎各位看官评论关注！