哎，你们是不是经常Zuo设计的时候，用户说“不好用”、“不舒服”？其实啊，hen多时候不是功Neng不行，是我们没把UI和动效搞好。今天我就随便聊聊，我是怎么理解的，可Neng说不明白，你们凑合kan。

一、UI设计这玩意儿到底有啥用？

UI设计，说白了就是界面设计，就是用户眼睛kan到的东西。比如按钮放哪儿，字多大，颜色好不好kan。这些东西要是没弄好，用户一kan就不想用了你说是不是，出岔子。？

1. 界面设计要简单， 别整那些花里胡哨的

格局小了。 Zuo界面的时候，一定要记住用户不是来欣赏艺术的，他是来用东西的。suo以东西要简单，一眼就Neng找到。比如你想买个东西，后来啊找半天按钮在哪，那谁还用啊？我以前见过一个网站，全是动画，按钮藏得老深了我差点没找着，再说说直接关了。suo以说界面别太复杂，该放哪儿放哪儿，让用户不用想就Neng找到。

还有啊，颜色搭配也hen重要。不Neng瞎配，比如背景用个特bie亮的黄色，字用个白色，那谁kan得清啊？ 就这？ 眼睛dou花了。一般背景用深色的比较好，比如深灰、深蓝，这样字用白色，kan着舒服，还省电。

2. 字号要大，别让用户眯着眼kan

字这东西，太小了不行。我爷爷眼睛不好，kan小字得拿放大镜，我们设计的时候得想想老人啊。一般网页设计字号不Neng小于12号，图表标注可yi用12号，dan是数据信息Zui好14号以上，这样远处也Nengkan见。大屏幕的观众离得远，字体geng要大一点，不然谁kan得见啊，切中要害。？

字体也别只用一种，有时候用点科技感强的字也挺好kan的，dan是要注意，记得开发一份字体，太扎心了。。

3. 大屏幕设计跟网页不一样， 别瞎搞

扎心了... 现在不是流行大数据大屏嘛，那个跟网页设计wan全不一样。网页可yi滚动，大屏幕不行，长宽是固定的，不Neng有滚动条。而且大屏幕一般dou是好几个小屏幕拼起来的， 设计的时候要注意，别让内容正好在缝上，比如一个大字被屏幕缝切成两半，那多难kan啊。suo以得提前算好尺寸， 比如3乘5的大屏，3屏高是1080，每屏高360，ran后算长度，640乘5等于3200，尺寸就是高乘宽，具体我也算不太明白，反正大概这样。

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

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

二、 动效设计，让界面“活”起来

动效这东西，说白了就是让界面动起来。比如按钮点了之后有个动画，页面切换的时候有过渡效果。不是那种瞎动的动效，是要有用的动效。

1. 动效的三个原则，记不住就多kan两眼

在进行动效设计的时候一般会遵循三个原则,也是动效的三个重要特性:功Neng性,物理性,趣味性。.一...反正我就记得这三个词，具体啥意思我也说不清楚。功Neng性就是动效要有用， 比如加载的时候有个转圈圈， 换个角度。 告诉用户“正在加载，别着急”；物理性就是动效要像现实世界一样，比如东西掉下来有重力感；趣味性就是让用户觉得好玩，比如点一下按钮有个小动画，用户会笑一笑。这三个原则好像dou挺重要的，别只顾着一个。

动效不仅仅是华丽的动态效果,它先说说帮助设计师和用户解决了许多界面功Neng上的问题,让这用户geng容易理解产品,也让设计师geng好的表达.小贴士:下拉...

动效在UI设计中的三个关键用途包括: 系统状态:动效可yi帮助用户理解后台进程,如数据加载、 初始化状态等,tong过视觉提示让用户感觉到掌控感. 导航和过渡:动效在页面布局变化时呈现过渡状态,帮助用户理解界面变化,如汉堡图标显示隐藏菜单的过渡.，一句话概括...

2. 动效别太多，不然用户眼花缭乱

动效是好东西，dan是多了就完蛋了。我见过一个大屏，全是动效，左边闪一下右边动一下数据dou快kan不清了。用户dou不知道该kan哪儿，再说说直接关了。suo以说有数据展示的页面动的地方别太多。如guo动画比较多，几个动画一定要有节奏变化。 又爱又恨。 比如一个动画表现得hen强，另一个表现得hen弱，有强有弱，有主次节奏，用户才会舒服。一边，动态性Neng可yi与数据变化相结合。而且变化是Zui好的，这样就不容易kan数据内容被动画卡住了。

什么是过度动效设计？ 这个度怎么把握？ kankan下图中的过度运动设计案例。 当你试图查kan图表内容时你的眼球一次次被闪烁的边框吸引。 这是过度的运动设计，划水。！

3. 怎么Zuo出好kan的动效？需要啥软件？

Zuo动效的软件挺多的，我一般用AE，有时候也用C4DZuo3D的，再用PS处理一下图片。流程大概是先在PS里把视觉稿Zuo好， ran后导入AE里Zuo动画，如guo是3D的，就用C4D建模，ran后渲染成序列帧huo者视频，再导入AE。再说说把动画导出成开发Neng用的格式，比如json文件huo者视频文件。

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

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

习惯用AE插件生成json文件来实现。 之前有写过怎么Zuo，这里就不说了，说句可能得罪人的话...。

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

第2步：

步骤1：

4. 3D动画怎么Zuo？比如3D地球？

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

2.如何实现3D动画？

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

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

天猫双11视觉大屏

三、 交互设计，让用户用着顺手

换个思路。 交互设计也挺重要的，就是用户怎么跟界面打交道，比如点哪里、怎么滑动。大屏幕的交互跟网页不一样，主要原因是大屏幕的用户一般是公司内部的人，不是普通用户，suo以交互可yi简单一点。

1. 大屏幕交互要简单，别太复杂

大屏幕的交互不同于网页和网页的交互。 先说说必须明确，大屏用户群体可Neng是公司内部的少数人，而不是一般的用户群体。 从这个维度考虑， 扎心了... 交互可yi弱化一些引导元素，比如一个可点击的数据组件不需要添加“点击进入”按钮。用户自己知道Nen**，不用提示那么多。

也可yi设计隐藏的交互方式，比如鼠标左移、上移、从控制面板出来。 如guo控制台是触摸屏，还可yi结合手势设计交互方式，摸鱼。。

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

2. 组件哪里找？推荐几个网站

Zuo设计的时候， 经常需要用到一些组件，比如图表、按钮什么的，不可Neng每次dou自己Zuo， 纯正。 太麻烦了。可yi去网上找现成的组件库。

分享一个开源的插件库网站，里面有hen多hen棒的动效，优化一下。！

插件库中的效果之一

推荐另一个组件网站：

地道。 许多相同的图表组件可yi在两个网站上使用。

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

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

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

缺点：收费。

四、 一下其实也没啥好的

UI设计要简单、好kan，动效要有用、别太多，交互要顺手、别复杂。大概就是这么回事。Zuo设计的时候多想想用户，别光顾着自己觉得好kan。用户觉得好用，才是真的好用，你想...。

他破防了。 大屏的设计给了设计师hen大的想象空间和设计空间，尽情发挥吧！dan是发挥的时候别忘了数据是核心，别为了炫酷把数据弄丢了。

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

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

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

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

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

还行。 这里着重介绍具有功Neng的大屏产品的结构层。 suo有功Neng结构dou必须围绕核心数据主页面来构建，主要原因是大屏展示的核心是将一些关键的业务指标数据与可视化展示的数据结合起来。

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

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

动效的强大之处在于,它将设计以geng为成熟的方式呈现出来,它赋予设计以生命力,让产品脱颖而出。.yin为技术和硬件设备性Neng的提升,动效Yi经不再是...，换个角度。

动效的强大之处在于,它将设计以geng为成熟的方式呈现出来,它赋予设计以生命力,让产品脱颖而出。yin为技术和硬件设备性Neng的提升,动效Yi经不再是视觉设计中的奢侈品。动效不仅仅是华丽的动态效果,它先说说帮助设计师和用户解决了许多界面功Neng上的问题,让这用户geng容易理解产品,也让设计师geng好的表达。动效本身还让整个界面geng加活泼，充满生命力，geng加自然的相应让就用户和界面之间有了情感的联系。1、 系统状态加载指示器下拉刷新通知2、导航和过渡可导航内容之间的过

五、随便说点别的，好像也没啥说的了

线性匀速 当元素没有受到物理力的影响，速度保持恒定，就会发生线性匀速运动的效果。 线性匀速在改变元素位置的设计中使用相对较少， geng多是用在改变元素的状态、 胡诌。 属性等不涉及元素位置改变的设计中。 2) 缓入 缓入对应于元素的加速曲线，通常用于当对象从静止到加速离开用户视线的过

动效设计中的持续时长和速度是两个密切相关的因素.在动效设计中,需要确保动效不要移动得太快或太慢,从而影响可用性,破坏使用体验。.，从头再来。

盘它。 小贴士：下拉刷新动效应该和整个设计的风格保持一致， 如guoAPP是极简风，那么动效也应当如此。 通知 由于动效会自然的引起用户的注意力， suo以使用动画化的方式来呈现通知是hen自然的设计，它不会给用户带来太多颠覆性的使用体验。 2、导航和过渡 动效Zui基本的功用是呈现过渡状态。当页面布局发生改变的时候， 动

网站

3D动画

1、拼接大屏

2.交互设计

3.视觉设计

设计的风格，背景色一般采用深色调，深色调有hen强的张力感，使视觉Neng够geng好的聚焦，大屏的深色调kan起来geng柔和，geng舒适，不那么刺眼，而且还省电，他破防了。。

别纠结... suo以呢，在设计时可yi为间隙位置建立一条参考线，避免类似情况的发生。

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

:

3. 3D地球可视化

json文件

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

目前有hen多软件可yi进行UI动效设计,借着这次讲解动效的机会,我简单列 对吧，你看。 举三个自己用过并感觉还不错的软件,仅供参考,建议大家可yi去亲自体验一...

四。 概括

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

梳理梳理。 大概流程就是这样，可Neng我说的不是hen详细，还请见谅，有不懂的可yi随时问我！

---