大数据可视化UI设计+交互设计+动效设计案例分析
adinnet/2020-08-25 16:43/数据可视化
大数据产业正在以超乎我们想象的速度蓬勃发展,随着大数据时代的来临,越来越多的公司开始意识到数据资源的管理和运用,大数据可视化的大屏展示被更多的企业青睐,今天上海艾艺数据可视化公司要跟大家分享设计大数据可视化大屏的经验和观点。
一、UI设计
对于大屏的设计要以展示数据为核心,在设计任何炫丽的特效时,都要首先考虑是否会影响数据的有效性。

1、拼接大屏
大屏几乎都是拼接屏,设计时不用考虑屏幕缝隙影响内容的呈现,内容不会丢失,但有可能影响视觉的表现,例如一个很大的人物图像被缝隙正中“劈成”两半,或者“劈中”了眼睛,看起来很不舒服所以设计时可以建立缝隙位置的参考线避免类似情况发生。(现在企业常用的有无缝隙、1.7mm缝隙、3.5mm缝隙、三种拼接大屏,缝隙越小越贵)
2、设计尺寸
拼接的每块小屏一般是16:9的高清屏,设计尺寸可以把上下高度设定为1080px,长度按照拼接屏的数量比例得出长度的设计尺寸。例如3乘5的一块大屏幕,高度3块屏设为1080,每块高就是360,360除9乘16等640,640就是一块屏幕的长度,640乘5块屏=3200最后得出设计稿尺寸就是:高1080px乘宽3200px

3、视觉设计
首先了解需求,整合数据,分析出主要数据次要数据、总量数据细分数据、各数据的维度等等,通过了解这些可以先设计出一个布局模块设计的风格,背景色一般用深色调,深色调紧张感强,让视觉更好的聚焦,大屏暗色调看上去更柔和舒服不刺眼。大屏设计跟网页不一样,页面不能有滚动条,大屏的长宽都是固定的。

字号跟网页设计一样不小于12号字,可以用于图表的标注,数据信息建议14号字以上,大屏观者远距离才能看全内容,所以字号可以稍大一点。字体不一定只用一种,可以用到一些科技感强的字体,这里要注意,记得把字体给开发一份。
需要注意的是,设计完成后要在大屏上看一下效果。不同的大屏对于颜色解析会有不同的效果,要根据各自的大屏呈现效果做调整。
二、交互设计
字号跟网页设计一样不小于12号字,可以用于图表的标注,数据信息建议14号字以上,大屏观者远距离才能看全内容,所以字号可以稍大一点。字体不一定只用一种,可以用到一些科技感强的字体,这里要注意,记得把字体给开发一份。
设计完成后要到大屏上看一下实际效果,不同厂商的大屏的所采用的软硬件不同,对颜色的解析有很大的差别,要根据各自的大屏呈现效果做调整。

大屏的交互区别于网页,首先要清楚一点,大屏使用的用户群体与业务系统不同。从这个维度上考虑,交互就可以弱化一些引导性的元素,例如一个可点击的数据组件,就可以不加“点击进入”按钮。
也可以设计隐藏式的交互方式,例如鼠标左移动、上移动、出来控制面板(Mac电脑就有这样的交互方式),有控制台是触摸屏也可以结合手势来设计交互方式。
三、动效设计
大数据可视化大屏设计少不了动效,动效是可视化重要的组成部分,动效的增加能让大屏看上去是活的,增加观感体验。但过分的动效极其容易喧宾夺主,让观看者的眼球不知道往哪里聚焦,反而弱化了数据的展示。

把握动效设计这个度其实并不难,只要看的舒服不影响数据清晰展示就可以,有数据展示的页面最好动的地方不易过多。如果要多,几个动画就得有节奏的变化,例如一个动画表现的视觉强,另一个就表现稍弱化,有强有弱、有主有次节奏才会舒服,同时动效能结合数据的变化而变化最好,这样就不容易看数据内容被动画抓走眼球。
四、总结
大屏设计是一个长期跟进的过程,有很多问题会在数据真正进来时,放在大屏上才能发现,所以等产品做到落地时设计方面要积极跟进改进。
如果您有大数据可视化建设、大数据可视化界面设计的打算,欢迎咨询「上海艾艺」。14年项目经验积累,可帮助企业级客户迅速布局大数据平台。创造极具个性、有价值的用户体验产品。数据可视化建设解决方案和报价,欢迎咨询艾艺:17702199087(同微信)。

