什么是大数据可视化 大数据可视化大屏设计经验解析?( 二 )


这里就着重说一下带有功能型的大屏产品的结构层(信息架构) , 一切功能结构都要围绕核心数据主页面来架构 , 因为大屏展示的核心就是将一些业务的关键指标数据以数据可视化的方式展示出来 。

什么是大数据可视化 大数据可视化大屏设计经验解析?

文章插图
功能型大数据可视化大屏结构层(信息架构)
大屏的交互 , 区别于网页和 。首先要清楚一点 , 大屏使用群体可能就是公司内部的几个人 , 而非面向广大用户群体 。从这个维度上考虑 , 交互就可以弱化一些引导性的元素 , 例如一个可点击的数据组件 , 就可以不加“点击进入”按钮 。
也可以设计隐藏式的交互方式 , 例如鼠标左移动、上移动、出来控制面板(Mac电脑就有这样的交互方式) , 有控制台是触摸屏也可以结合手势来设计交互方式 。
为了让用户感知到一直停留在主页面上 , 交互上跳转页面能用“关闭”按钮就不用“返回”按钮!
三、动效设计大数据可视化大屏设计少不了动效 , 动效是可视化重要的组成部分 , 动效的增加能让大屏看上去是活的 , 增加观感体验 。但过分的动效极其容易喧宾夺主 , 让观看者的眼球不知道往哪里聚焦 , 反而弱化了数据的展示 。
什么是过度的动效设计?这个度又该怎么把握?
看下图动效设计过度的一个案例 , 当你试着去看图表的内容 , 你的眼球一次一次的被闪动的边框抓走 , 这就是过度的动效设计!
什么是大数据可视化 大数据可视化大屏设计经验解析?

文章插图
(图片来源网络)
把握动效设计这个度其实并不难 , 只要看的舒服不影响数据清晰展示就可以 , 有数据展示的页面最好动的地方不易过多 。如果要多 , 几个动画就得有节奏的变化 , 例如一个动画表现的视觉强 , 另一个就表现稍弱化 , 有强有弱、有主有次节奏才会舒服 , 同时动效能结合数据的变化而变化最好 , 这样就不容易看数据内容被动画抓走眼球 。
1. 动效怎么实现?我习惯用AE的插件Bodymovin生成json文件实现 , 具体怎么操作之前写过 , 这里就不多讲了 。
什么是大数据可视化 大数据可视化大屏设计经验解析?

文章插图
json文件
Bodymovin这个工具在AE中有些预设效果和透视功能是不支持的 , 所以再教大家另一种方法 , 就是把动画渲染成视频 , 把格式转换为ogg或者webm网页视频格式 , 网页格式视频加载是非常快的 , 之后把下面的文件给开发就可以了 。
什么是大数据可视化 大数据可视化大屏设计经验解析?

文章插图
html5网页视频格式
2. 3D动效怎么实现?
什么是大数据可视化 大数据可视化大屏设计经验解析?

文章插图
3D动画
先说下用到的软件C4D+AE+PS
步骤1:
找个模型也可以用C4D自带的模型 , 还可以自己建模 , 有了模型在C4D中把模型变成晶格状 , 做个旋转360度动画 , 渲染出png序列帧 。
【什么是大数据可视化 大数据可视化大屏设计经验解析?】步骤2:
把ps设计好的视觉稿和序列帧图片导入AE中 , 如果要用Bodymovin插件实现 , 就得把全部序列帧每张分开导入 , 不然Bodymovin不能识别序列帧 , 只能用网页视频格式实现!