大屏可视化的重头戏!炫酷动效、丰富色彩

大屏数据可视化是以大屏为主要展示载体的数据可视化设计。
炫酷动效、丰富色彩、视觉冲击,大屏在观感上直接给人留下震撼印象,便于营造某些独特氛围、打造仪式感。大家熟悉的天猫双11类大屏就是利用此特点,打造了热烈、狂欢的节日氛围,原本在后台的数据经过可视化之后,便能调动人的情绪、引发人的共鸣,传递企业文化和价值。


001.jpg

那么,如何做出如此完美、有感染力的大屏呢?今天,小亿就抛砖引玉,围绕大屏可视化的重头戏,从指标设计、排版布局、视觉设计到可视化动效整个流程,总结了一些经验和观点和大家分享。以亿信BI制作大屏为例,这篇文章将教你实现可视化的基本套路。
赶紧拿小本本记下:规范的流程是好结果的保证。找到一个可参考的流程,然后步步为营,就能避免很多不必要的返工,保证设计质量和项目进度。
1、抽取关键指标

设计大屏,大家可能会被酷炫的可视化所感动,但一定要谨记,大屏一定是以展示数据为核心,任何炫酷吊炸天的表现都要建立在不影响数据的有效展示上!因此,需要根据业务场景抽取关键指标。

一般情况下,一个指标在大屏上独占一块区域,所以通过关键指标定义,就知道大屏上大概会显示哪些内容,以及大屏会被分为几块。确定关键指标后,可根据业务场景确定指标的重要性(主、次、辅)。

关键指标确定之后,我们要确定指标的分析维度。分析维度代表分析的角度,从不同角度分析会得到不同结论,数据是否能分析透彻,是否能为决策提供辅助支持,都是依赖于指标的分析维度。我们常见的分析方法有类比、趋势、分布和构成等,分析方法的选择依赖于实际的业务场景,可参考上图思维指南选定可视化图表类型。

2、确定排版布局

根据确定关键指标以及其重要性来进行排版布局。整个页面设计要突出关键指标,注意主次分明,让读者更加直观地阅读和理解。以下推荐几种常规的排版布局:

(1)左右分布

image

(2)中心环绕

image

(3)上下布局

image

以上是我们常规主次分布的排版,实际应用过程中可根据具体指标的多少,进行灵活调整,只要能突出主题即可,不可硬套。

附上几个优秀的大屏排版布局供大家参考。


![004.jpg](https://upload-images.jianshu.io/upload_images/18271900-e066be1b9197d70b.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

3、定义配色风格
不同的颜色,不同的色彩搭配,都会给观看者不同的视觉感受。色彩搭配的学问博大精深,比如冷暖色、明度、纯度、色彩的轻重感等因素都影响观看者的感受。
大屏可视化采取的主色调多以深蓝色为主,从背景颜色、背景图片、统计图颜色、组件配色大色块主要采用深色系,让整个页面更加协调。


006.jpg

4、动画效果设计
大数据可视化大屏设计少不了动效,动效是可视化重要的组成部分,动效可以使整个大屏富有动感,也更加吸引人的眼球。但是过度的动效会产生乱花迷眼的反效果,需要把握动效设计的度。

动效的范围很广,比如动态的图片、页面轮播效果、列表滚动的效果、数据实时变化的效果等,这些都是动效的范围。
介绍几个常用的动效:


008.jpg

010.jpg

上图是一个超市的大屏效果,首先左侧销售概览有选中跳转的效果,使整个页面更富有活力;中间本月销售数值可以实时刷新,可对实时数据进行监控;右侧库房库存预警列表有滚动的状态,借助滚动的方式,将多条数据展现出来,避免平铺占据大量的版块内容。
030.jpg

地图的流向方式使整个页面富有动感,让静态的页面富有生机,特别是3D动效的运用,整个大屏活起来。
总结
小亿简单的从指标、布局、配色、动效等几个方面,介绍了一些大屏展现页面的制作方法。如果要对大屏设计的特点作一个总结:全局突出重点图表,单表突出重点数据。把握好这点,至少可以避过大部分的坑。但一个高水准的大屏,还少不了一些细节的把控。
下载地址https://gitee.com/paul_mg/pear.git

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342