关于javascript:浅谈可视化设计数据时代的美味烹饪师上篇

目录：

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，重复测试屡次来批改协调最终上屏成果。在测试时从设计上能够重点重视以下几点：

1、之前确立的布局在放入设计内容后是否仍然适合

2、确立的图表类型带入数据后是否依然主观精确

3、依据要害元素、色调、构造、质感打造出的页面格调是否根本传播出了预期的气氛和感触

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

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

6. 开发与测试

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

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