01
写在前面
伴随着大数据产业链的迅猛发展，许多公司都逐渐运用数据数据可视化。因此数据数据可视化设计，如今肯定是受欢迎的设计之一。许多UI设计师忽然会收到企业数据数据可视化设计的要求，假如不了解数据数据可视化设计，肯定是一头雾水，不知道从何下手。我试着简略的将我最近做了的实例开展纪录共享，存在的不足热烈欢迎各位随时随地沟通交流。
02
文章正文
最先放的是新项目重做前的网页页面：
要求详细介绍
某某运用云，分成五大云服务平台控制模块:云空间综合调度、数据查看安全通道、数据运用解决、数据查看安全通道、管理方法理运作维护保养。每一个大控制模块下⾯面有多个分系统。
数据可视化⼤屏主页必须展现的主要内容包含:
1. 全局性数据
云服务平台的数据总产量，及其 4 个关键关心数据项，2 个主次关心数据项。
2. 云服务平台的五⼤大控制模块
1. 云空间综合调度
2. 数据查看安全通道
3.数据运用解决理
4. 数据存储系统
5. 管理方法理运作维护保养（仅有2个tab切换连接）
3. 检索作用
检索种类分成 6 个种类，默认设置选定“综合性”种类开展检索;
4. 重点关注数据信息内容按指标值分多层次展现
初始图上的层面包含:指标值、地图、地区排名、部⻔门、类型;
5. 云导航
需求分析
剖析大屏可视化的一些关联性：
显示屏大：大屏幕一般全是多屏拼接，总体显示屏使用面积大。
观距远：客户必须站远方收看显示屏，要确保数据文本清楚可见。
互动弱：根据计算机早已不能满足大屏幕互动要求，如今也是有一部分逐渐选用ipad、手机上、激光灯等方法。
视觉强：背景颜色多选用重色，烘托突显数据，更强的为观众传递数据信息内容。
一屏一內容：一屏内容，表明一件关键事，统计分析好它的有关数据，防止别的的影响。
融合大屏幕的一些关联性特性对于见到的网上旧版设计，剖析存在的不足。
1.合理布局错乱，造成视觉不平衡，看不出来网页页面层级。
2.深蓝色为主导色彩 淡黄色装点色调看起来较为单一沒有标准。
3.图表较为单一，不可以合理传递数据信息内容。
融合这种问题开展视觉重做，最先提升网页布局，根据剖析对网页页面再次合理布局，如下图：
选用栅格化对称性合理布局 让总体视觉上下均衡。
视觉设计：
掌握要求，融合数据，剖析出关键数据主次数据、总产量数据细分化数据、各数据的层面这些，根据掌握这种可以先设计出一个合理布局模板，还可以在紙上画出去，合理布局可以在设计全过程中随时随地调节。
设计的设计风格，一提及数据数据可视化大伙儿通常能想起高新科技、数据、深蓝色等一些广泛关键字。跟顾客沟通交流以后，掌握到客户满意度是：想要做一个现代感强较为酷炫的视觉实际效果 ，这也迎合以上这种关键字，对于这种关键字的提炼出，此外融合大屏幕的应用情景，背景颜色一般会采用浅色调，数据转变一般会挑选高亮度色彩，让视觉能够更好地对焦数据的转变，也会较节电。
主题元素设计构思环节；
原照：我国地图首图控制模块欠缺质感，如下图：
重做后：地图主色改成科技蓝，在原来地图上提升外发亮和双层黑影累加，使其提升地图的层次感，地图上提升科技线条升高的实际效果意味着每一个大城市数据转变的提高，地图环境选用较为减弱的旋转线框环形，烘托地图行为主体，时的图像更为丰富多彩。
数据图表分拆:
在选中数据图表以前，最先要明确图表相互关系，可以从下列四个层面开展思索剖析：
1.联络：数据中间的关联性；
2.遍布：指标值里的数据关键集中化在什么范畴、主要表现出什么样的规律性；
3.较为：数据中间具有哪种差别、差异具体反映在哪几个方面；
4.组成：指标值里的数据都由哪些部份构成、每一部分占有率怎样；
当明确好剖析层面后，实际上大家能够采用的图表种类也就基本上明确了。下面大家只要从为数不多图表里挑选出充分体现大家设计用意的那一个就好了。
传统式的图表例如echarts上图表在视觉上展现很有可能并不是很美观大方漂亮，可依据选用的图表在其基本以上开展装饰设计，总而言之选中图表最重要的两个点便是：易了解、可完成。
易了解：便是要考虑到终端用户，数据可视化結果应该是一看就懂，不用考虑和过分了解，因此选中图表时要客观，防止为了更好地视觉上的功效而挑选一些对客户不太和谐的图型及原素。
可完成：主要是跟开发设计早期沟通交流好完成方法，一般都选用开源系统组件库的占多数例如echarts组件库，大家设计的图型图表，要开发设计可以完成。具体工作上，一些可视化效果开发设计用编码写非常容易完成，实际效果也非常好，但这种实际效果设计师用Ps/Ai/Ae这种专用工具仿真模拟的时候会发觉较为艰难；一样的，一些实际效果设计师用设计专用工具可以随便完成，但开发设计要用编码落地式却十分艰难，因此大屏幕设计中跟开发设计常沟通交流十分关键，大家必须确立什么地方设计师可以肆意充分发挥，什么地方必须慎重设计！一个新项目总会有周期时间与费用预算限定，不容易无期限的改动梯度下降法，因此设计师在这儿必须把握关键，有选择，不爱钻牛角尖、死磕没放。
大城市排名危害视觉数据多了，会对地图展现导致危害，跟顾客沟通交流需提升大城市排名数量，只展现前五个，摆脱传统式条形图的展现方式选用充电电池晶格常数的展现方式。
从网页的总体看一下，早已有三处使用了条形图，柱形图，假如这儿或是条形图，那麼网页页面看上去会很简单，图表都没有主要表现出多元性，因此如今设计要反映图表的多样化也可以有排名的形象化展现。下列图表选用高新科技园盘的方式，应用科技线条的升高情况意味着排名的顺序，全部图表都选用数据降序来展现排名更为形象化。
最终另附：最后视觉和动画特效图
03
—
汇总
大屏幕设计的主要流程：
1、需求分析
2、提升合理布局
3、界定设计关键字
4、建立首图展现设计风格
以上就是我对数据可视化大屏的实例汇总，吧啦吧啦这么多，总算写完了，期待能幫助到你。此外也有许多地区沒有牵涉到，包含实际设计的实际操作方法、选择图型原素的具体做法，及其在各种各样大屏幕中所需求的比较应的部件等，在巨大的可视化大屏设计系统软件中，也有许多值得学习参照和改进的专业知识，热烈欢迎各位大佬纠正，大伙儿一起努力。
—— END ——
Copyright 2021 快鲸
扫码咨询与免费使用
扫码免费用
申请免费使用
在线咨询
