澳门皇冠游戏官网
食品产品展示
News
正文 您的位置: 澳门皇冠游戏官网主页 > 食品产品展示 >
大数据可视化大屏设计经验教给你!
发布人: 澳门皇冠游戏官网 来源: 澳门皇冠游戏官网登录 发布时间: 2021-02-13 19:20

  大数据产业正在用一个超乎我们想象的速度蓬勃发展,大数据时代的来临,越来越多的公司开始意识到数据资源的管理和运用,大数据可视化大屏展示被更多的企业青睐,身为UI设计师的我们,也要紧跟时代的步伐学习这方面的设计。

  今天要跟大家分享我一年多设计大数据可视化大屏的经验和观点,下面从UI设计、交互设计、动效设计三个方面来分享。

  设计大屏一样要谨记要以展示数据为核心,在任何炫酷屌炸天表现都要建立在不影响数据的有效展示上!

  下图是天猫可视化大屏设计,图中屌炸天的3D地球围绕粒子效果,这篇文章将教你怎么实现,而且是数据可视化的呈现,不是动效或者视频!

  大屏几乎都是拼接屏,UI设计时不用考虑屏幕缝隙影响内容的呈现,内容不会丢失,但有可能影响视觉的表现,例如一个很大的人物图像被缝隙正中“劈成”两半,或者“劈中”了眼睛,看起来很不舒服

  所以设计时可以建立缝隙的参考线避免类似情况发生。(现在企业常用的有无缝隙、1.7mm缝隙、3.5mm缝隙、三种拼接大屏,缝隙越小越贵)

  拼接的每块小屏一般是16:9的高清屏,设计尺寸可以把上下高度设定为1080px,长度按照拼接屏的数量比例得出长度的设计尺寸。

  例如3乘5的一块大屏幕,高度3块屏设为1080,每块高就是360,360除9乘16等640,640就是一块屏幕的长度,640乘5块屏=3200最后得出设计稿尺寸就是:高1080px乘宽3200px(在这里感谢我的数学老师)

  首先了解需求,整合数据,分析出主要数据次要数据、总量数据细分数据、各数据的维度等等,通过了解这些可以先设计出一个布局模版,也可以在纸上画出来,布局可以在设计过程中随时调整。

  设计的风格,背景色一般用深色调,深色调紧张感强,让视觉更好的聚焦,大屏暗色调看上去更柔和舒服不刺眼,也会较省电。

  字号跟网页设计一样不小于12号字,可以用于图表的标注,数据信息14号字以上,大屏观者远距离才能看全内容,所以字号可以稍大一点。字体不一定只用一种,可以用到一些科技感强的字体,这里要注意,记得把字体给开发一份。

  设计完成先去大屏上看一下效果,大屏的品质不一样色调也会有很大的差别,要根据自家的大屏呈现效果做调整。

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

  大屏的交互,区别于网页和。首先要清楚一点,大屏使用群体可能就是公司内部的几个人,而非面向广大用户群体。从这个维度上考虑,交互就可以弱化一些引导性的元素,例如一个可点击的数据组件,就可以不加“点击进入”按钮。

  也可以设计隐藏式的交互方式,例如鼠标左移动、上移动、出来控制面板(Mac电脑就有这样的交互方式),有控制台是触摸屏也可以结合手势来设计交互方式。

  大数据可视化大屏设计少不了动效,动效是可视化重要的组成部分,动效的增加能让大屏看上去是活的,增加观感体验。但过分的动效极其容易喧宾夺主,让观看者的眼球不知道往哪里聚焦,反而弱化了数据的展示。

  看下图动效设计过度的一个案例,当你试着去看图表的内容,你的眼球一次一次的被闪动的边框抓走,这就是过度的动效设计!

  把握动效设计这个度其实并不难,只要看的舒服不影响数据清晰展示就可以,有数据展示的页面最好动的地方不易过多。如果要多,几个动画就得有节奏的变化,例如一个动画表现的视觉强,另一个就表现稍弱化,有强有弱、有主有次节奏才会舒服,同时动效能结合数据的变化而变化最好,这样就不容易看数据内容被动画抓走眼球。

  我习AE的插件Bodymovin生成json文件实现,具体怎么操作之前写过,这里就不多讲了。

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

  找个模型也可以用C4D自带的模型,还可以自己建模,有了模型在C4D中把模型变成晶格状,做个旋转360度动画,渲染出png序列帧。

  把ps设计好的视觉稿和序列帧图片导入AE中,如果要用Bodymovin插件实现,就得把全部序列帧每张分入,不然Bodymovin不能识别序列帧,只能用网页视频格式实现!

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

  最终的效果是用两个组件拼合在一起实现的,左边就是代码,后台录入信息可以让粒子效果匹配数据,最终实现数据的可视化。

  大屏设计是一个长期跟进的过程,有很多问题会在数据真正进来时,放在大屏上才能发现,所以等产品做到落地时设计方面要积极跟进改进。

  人人都是产品经理(是以产品经理、运营为核心的学习、交流、分享平台,集、培训、社群为一体,全方位服务产品人和运营人,成立9年举办在线+期,线+场,产品经理大会、运营大会20+场,覆盖北上广深杭成都等15个城市,在行业有较高的影响力和知名度。平台聚集了众多BAT美团京东滴滴360小米网易等知名互联网公司产品总监和运营总监,他们在这里与你一起成长。

澳门皇冠游戏官网,澳门皇冠游戏官网平台,澳门皇冠游戏官网登录
Copyright © 2016 All Rights Reserved 版权所有· 澳门皇冠游戏官网 澳门皇冠游戏官网,澳门皇冠游戏官网平台,澳门皇冠游戏官网登录 京ICP备11111111号-1