UI设计、动效设计三个方面来告诉你！

大数据产业正以超乎我们想象的速度蓬勃发展。 随着大数据时代的到来，越来越多的企业开始实现对数据资源的管理和利用。 大数据可视化、大屏展示受到更多企业青睐。 作为UI设计师，我们一定要跟上时代的步伐，学习这方面的设计。

今天想和大家分享一下我一年多来设计大数据可视化屏幕的经验和看法。 下面我从UI设计、交互设计、动效设计三个方面来给大家分享一下。

1. 界面设计

在设计大屏幕时，请记住将重点放在显示数据上。 任何炫酷的表现都必须建立在不影响数据的有效展示之上！

下图是天猫可视化的大屏设计。 图中3D地球环绕粒子效果。 本文将教你如何实现，而且是数据可视化的呈现，不是动画视频！

天猫双11视觉大屏

1、拼接大屏

大屏几乎都是拼接屏。 在设计UI时，无需考虑屏幕缝隙会影响内容的呈现。 内容不会丢失，但可能会影响视觉表现。 例如，一个大字符图像被间隙“分裂”成两半。 或“撞”眼，看着不舒服

因此，在设计时可以为间隙位置建立一条参考线，避免类似情况的发生。 （目前企业常用无缝、1.7mm缝隙、3.5mm缝隙、三种拼接大屏，缝隙越小越贵）

2.设计尺寸

每个要拼接的小屏幕一般都是16:9的高清屏幕。 设计尺寸可设置上下高度，长度可根据拼接屏数比例得出。

例如3乘5的大屏，3屏高设置为1080，每屏高为360，360除以9乘16等于640，640就是一屏的长度, 640 x 5 = 3200, 最后得到设计稿尺寸为：高乘以宽（这里感谢我的数学老师）

拼接屏设计尺寸图

3.视觉设计

先了解需求，整合数据，分析主要数据和次要数据，总数据的细分数据，每个数据的维度等。了解这些，就可以先设计一个布局模板，或者画在纸上. 布局可以在设计过程中随时调整。

设计的风格，背景色一般采用深色调，深色调有很强的张力感，使视觉能够更好的聚焦，大屏的深色调看起来更柔和，更舒适，不那么刺眼，而且还省电。

大屏幕的设计不同于网页。 页面不能有滚动条，大屏的长宽是固定的。

字号不小于网页设计的12字号，可用于图表标注。 数据信息建议使用14号或以上字体。 大屏幕的观众只能在远处看到完整的内容，所以字体可以稍微大一点。 不一定只使用一种字体，可以使用一些科技感很强的字体。 这里要注意，记得开发一份字体。

设计完成后，先到大屏幕上看效果。 大屏的画质在色调上也会有较大的差异，需要根据自己大屏的渲染效果进行调整。

分享一个开源的插件库网站，里面有很多很棒的动效！

插件库中的效果之一

大屏的设计给了设计师很大的想象空间和设计空间，尽情发挥吧！

2.交互设计

我把大数据可视化大屏分为两种，一种是“纯展示型”，一种是“展示+功能型”。 具体如何区分：

纯展示型几乎没有交互，只是在后台输入数据，显示在大屏上。

展示+功能型，如实时监控数据、数据采集、数据对比功能、云计算数据、分析预警等。

这里着重介绍具有功能的大屏产品的结构层（信息架构）。 所有功能结构都必须围绕核心数据主页面来构建，因为大屏展示的核心是将一些关键的业务指标数据与可视化展示的数据结合起来。

功能大数据可视化大屏结构层（信息架构）

大屏的交互不同于网页和网页的交互。 首先必须明确，大屏用户群体可能是公司内部的少数人，而不是一般的用户群体。 从这个维度考虑，交互可以弱化一些引导元素，比如一个可点击的数据组件不需要添加“点击进入”按钮。

也可以设计隐藏的交互方式，比如鼠标左移、上移、从控制面板出来（Mac电脑都有这样的交互方式）。 如果控制台是触摸屏，还可以结合手势设计交互方式。

为了让用户感觉一直停留在主页面，跳转到交互页面时可以使用“关闭”按钮代替“返回”按钮！

3.动态设计

大数据可视化大屏设计中，动效是必不可少的，动效是可视化的重要组成部分。 动态效果的增加可以让大屏幕看起来栩栩如生，增加视觉体验。 但是，过多的动效极易让客人不知所措，使观看者的眼睛不知该聚焦哪里，弱化了数据的展示。

什么是过度动效设计？ 这个度怎么把握？

看看下图中的过度运动设计案例。 当你试图查看图表内容时，你的眼球一次次被闪烁的边框吸引。 这是过度的运动设计！

（图源网络）

掌握动态设计的程度其实并不难，只要看着舒服，不影响数据的清晰显示即可。 有数据展示的页面最好动的地方不要太多。 如果动画比较多，几个动画一定要有节奏变化。 例如，一个动画表现出很强的视觉表现，而另一个则表现出稍弱的表现。 有强有弱，有主次节奏，你才会舒服。 同时，动态性能可以与数据变化相结合。 而且变化是最好的，这样就不容易看数据内容被动画卡住了。

1.如何实现动态效果？

习惯用AE插件生成json文件来实现。 之前有写过怎么做，这里就不说了。

json文件

本工具不支持AE中的一些预设效果和透视功能，所以我教大家另一种方法，就是将动画渲染成视频，将格式转换为ogg或webm网络视频格式。 Web 格式的视频加载非常容易。 得了吧，后面的文件交给开发就好了。

html5网络视频格式

2、如何实现3D动画？

3D动画

先说说C4D+AE+PS用的软件

步骤1：

找模型也可以用C4D自带的模型，也可以自己建模。 有了模型，可以在C4D中把模型变成点阵，做360度旋转动画，渲染png序列帧。

第2步：

将ps设计好的视觉稿和序列帧图片导入到AE中。 如果要用插件实现，就得单独导入所有的 frame，否则无法识别 ，只能实现web video格式！

大概流程就是这样，可能我说的不是很详细，还请见谅，有不懂的可以随时问我！

3. 3D地球可视化

文章开头，给大家留个悬念，如何设计3D地球动画，下面教大家。

阿里在天猫双十一上的3D地球是有专门人员设计的，阿里也有这方面的组件库。 我们可以使用开源网站的类似组件来实现这一点。 几乎所有大数据页面使用的图表都可以在这个网站上找到，而且是免费的。

组件效果

最终效果是通过组合两个组件来实现的。 左边是代码。 后台输入的信息可以让粒子效果与数据匹配，最终实现数据的可视化。

网站

推荐另一个组件网站：

网站

许多相同的图表组件可以在两个网站上使用。 以下是这两个网站的优缺点。

(1) :

优点：免费、开源、炫酷特效、原生全中文。

缺点：兼容性差，经常报错，文档不够。

(2) :

优点：文档示例非常详细，易懂易学，兼容性强，兼容IE6。

缺点：收费。

四。 概括

大屏设计是一个长期跟进的过程。 很多问题只有在数据真正进来的时候，才会在大屏幕上发现。因此，在产品上线的时候，一定要积极跟进设计，不断完善。

好了，就这些了，感谢阅读，希望这篇文章对你有所帮助！