一提到数据大屏,脑海中闪现的词都是酷炫、科技感甚至赛博朋克,一个好的数据大屏除了要贴近业务挖掘数据价值,“高颜值”也是基本要求。
本着“我为人人”的原则,小亿死皮赖脸求着咱们设计大神写下这一篇大屏设计的保姆级教程,看了的人无不感动落泪,受益匪浅。
布局篇:开篇立意很重要
对于数据大屏来说,布局一定是最先要考虑的,就像写文章一样,我们得先理清大纲和框架,从整体出发,结构和功能分区都了然于胸,这就跨出了成功的第一步。
前期调研准备
大屏可视化由于承载体的特殊性,有时候一个小小的差错会使得效果千差万别,如果客户是4:3的屏,你大笔一挥设计成16:9的,那个压缩效果不忍直视,怕是需求方要追着你打。所以做好前期调研很重要,包括大屏比例、材质,在哪里演示,对何人演示,有什么目的等。
下图是不同比例大屏的分布策略,可供参考:
构图布局走向
再者,设计人员需要明确大屏的视觉路线即展示路线,这条线能讲出怎样的故事跟你的布局构图密切相关。下面提供几种常见的构图思路,希望对大家有所启发和帮助。
1、中心放射型
以中间核心内容向周围放射,正中多以地图和给人视觉冲击的主视觉为主,起到聚焦凸显的作用,层次明晰,主次分明。
2、故事线型
该类型主要是依靠建设一条完整的视觉导线,引导观看者从一端往另一端吸收信息,该构图简单易懂,比较适合有严格顺序的数据信息,例如企业的展示大屏等。
3、数据平铺型
这是一种最为普遍的构图手法,一般是将同级别的数据信息一起展示出来,区块清晰明确一目了然。但即使是平铺,也是有轻有重,一般以板块划分的大小来界定分配。
配色篇:乱花渐欲迷人眼
配色对于大屏来说也格外重要,做得好就是神来之笔,做的不好就辣眼睛了;而且在做配色方案时还要充分考虑到行业特性及特定人群对数据图表的可读性。
对比明显,展示清晰
在大屏设备中普遍用深色作为背景色,以减少屏幕拖尾,观众在视觉上也不会觉得刺眼。所有图表的配色需要以深色背景为基础,匹配以丰富的色系,满足各类图表的应用场景。
除了与背景的配色对比外,图表本身的颜色选择也很重要,要利于业务信息传达。选择的颜色不要过于相近,这样不利于数据间的区分,会降低阅读舒适感。
色相选择,拒绝迷惑
如果大屏需要的颜色较少时,避免使用相近的色相,即同类色和相近色;尽量选择对比色或互补色,这样可以使不同含义的数据在图表中展示更加清晰。
当图表需要的颜色较多时,建议最多不超过12种色相。通常情况下人在不连续的区域内可以分辨6~12种不同色相。过多的颜色对传达数据是没有作用的,反而会让人产生迷惑。
善用渐变,创造光影
如果纯色的配色方案都不太好的时候,我们还可考虑创建色调与明度变化都足够大的自然渐变。
但是,使用渐变色时不要选择一系列固定颜色,渐变配色结合不同色调会比较自然。无论你需要2种颜色还是10种,渐变中都能提取出这些颜色,让可视化图表感觉自然流畅,同时保有足够的色调与明度差异。最后,还可加入一些粒子和流光的效果,让整体更加炫酷。
细分行业,配色推荐
关于各细分行业的配色推荐,小亿早在年就做过推荐,怕新来的朋友错过精彩内容,再次把压箱底的宝贝分享出来,不论是大屏可视化还是领导驾驶舱均可参考。
1、金融行业
亿信华辰服务于银行、证券、信托、金融租赁等金融细分领域,精耕细作15载,荟聚了超多的解决方案和案例,金融行业的配色可与金色相近,并尽可能选择低饱和度的颜色,凸显其专业和睿智。
2、保险行业
保险行业数据图表需要有稳定感、保障感,选用高亮度的图表颜色可以产生安全放心,值得信赖的感觉。
3、税务行业
亿信华辰自年就与国家税务总局联手打造了涉税数据应用平台,并实现了全国范围内%覆盖。在此,我们也给出了税务方面的数据图表搭配方案,用更加大气、鲜艳的颜色来体现税务数据的专业和专注。
4、司法行业
司法部门也是亿信华辰服务较多的单位,颜色的选用上需要彰显严谨和细致入微,多带有中国红和司法蓝。
5、教育行业
教育行业代表了希望和未来,在颜色的选用上可用更加活力、鲜艳的搭配方案。
6、医药行业
亿信华辰服务于国家各级卫生部及国家各级药监局。卫生与药监需要有健康、干净的图表配色,我们选用了更加清新的色值样例。
7、制造行业
制造行业是目前数字化转型的主力军,利用大数据提升自身的生产力是未来方向,与亿信华辰合作的制造业领头羊也有众多,如东芝、中船、中铁一局等。制造业需选取更加成熟,带有工业风格的图表配色。
8、电商行业
新零售、电商等行业需要有促销氛围。在图表制作时,考虑用高明度、高饱和度的色彩凸显营销数据。
加分篇:3D可视化锦上添花
目前行业内的大屏可视化产品,大致可以分为二维可视化和3D可视化。所谓3D可视化通常是通过游戏引擎来制作的可视化项目,能够更直观的展示立体数据,科技感极强,但制作成本也相对较高,要求我们具备视觉设计能力、数据表达能力、三维空间交互能力等。
从设计流程上来讲,一般需先进行静态效果图的设计生成初步的设计稿,这一部分需要视觉设计和建模相配合,然后再由3D建模师依据设计稿进行实景的搭建,之后再进行UI层面的设计调整,最后输出视频demo用于客户演示和讲解,最后付诸实施得以整体展现。
今天的大屏设计教程就先讲到这里,有兴趣体验的朋友们可以前往酷屏市场获取更多酷炫模板和组件,有了亿信ABI及酷屏的助力,你的大屏一定能惊艳亮相,收获好评阵阵~