王威
南京南瑞集团公司(江苏省南京市) 210003
摘要:数据可视化是把相对复杂、抽象的数据通过可视化的表达,用人们更容易理解的形式展现出来。数据可视化大屏设计是以大屏为主要展示载体的数据可视化设计,大屏可以在观感上给人留下震撼印象,便于营造某些独特氛围,更具仪式感。具有面积大、可展示信息多的特点,而且,通过信息大屏展示的方式可以使团队讨论与决策更加方便,所以大屏也常用来做数据分析检测使用。大屏数据可视化目前主要有信息展示、数据分析、监控预警三类。
关键词:数据;可视化;艺术设计
一、数据可视化大屏设计流程
数据可视化大屏的设计和平面设计有着很大的区别,一般设计需要强调创意性,数据可视化大屏设计最终目的则是要规整信息,使人一目了然看到变化的数据,因此在设计上需要更理性的衡量。
(一)需求分析
1. 大屏终端
大屏数据可视化设计是以屏幕为载体的,在设计的时候需要考虑到屏幕的尺寸问题,大屏类型包括16:9屏、32:9屏、超宽屏、折叠屏、三面屏、T字屏等等,其中用得最多的比例就是16:9和32:9。视觉稿设计比例要与屏幕尺寸匹配。甚至有一些需要实现多屏幕的适配。这是设计师提前需要弄清楚的问题。
2. 需求分析
需求分析是大屏数据可视化设计必不可少的一个环节。大屏数据可视化设计一般会存在大量的信息筛选和规整,无论是公司还是公众展示类型的大屏可视化设计都需要全面了解业务需求。围绕基本需求筛选出最合适的信息。以天猫双十一数据大屏为例,它最需要展示的就是每一个时间段成交的实时金额。其次就是不同业务与品牌在经济中的组成比例,其余信息只是辅助,或者根本无需展示。而如果是智慧校园环境管理平台数据大屏,关键信息可能就包括不同班级环境综合指数、能耗统计、设备总览、空气质量等等。由此可见需求的不同会对可视化大屏的设计产生非常大的影响,设计前期最好先进行需求分析。
(二)页面布局
做好需求分析后需要开始考虑页面布局,也类似于原型设计。大屏设计一般会有大量的信息,而且通常是采用分版块布局的方式展示。大屏的信息展示需要区分焦点信息,主要信息和次要信息。进行信息层级划分。一般焦点信息会放置在大屏的中心位置,突出强调,通常会配合地图或者信息插图进行展示,占位面积也比较大。主要信息通常放在左上或右上位置,结合一些常用的数据图表展示。辅助信息弱化处理,整体布局符合用户的视觉流程习惯。
(三)视觉设计
大屏数据可视化设计相对于其他的设计来说创意性要求并不高,在视觉层面,更多的是要考虑视觉规范性的元素,以及交互效果和动态呈现形式。
1. 风格选择
数据可视化大屏一般都会有特定的受众群体,或者通常会在特定场合使用。比如说针对图书馆终端的数据大屏设计,医疗数据大屏设计,公司数据大屏设计。有特定场所的数据大屏设计通常需要考虑相应的使用场景。比如公司数据可视化大屏设计必然会带有该公司的特征,通常会在设计用色上配合企业标准色使用。
大部分数据可视化大屏会选择比较深的底色再配合亮色的数据图表来设计,色彩差异尽量拉大。一方面与显示屏幕较大有关,如果用白色底色,大面积的白容易出现视觉疲劳,深色调相对更加柔和不刺眼一些。另一方面数据可视化通常会突出一定的科技感,暗色加饱和度较高的统计图更适合营造出这种科技的感觉,也更适合做一些比较酷炫的粒子效果。
2. 视觉设计规范
大屏数据可视化设计相对而言比较偏UI设计的范畴,因此它需要遵循一定的设计规范。视觉设计规范包括用色、字体字号选择、图标控件状态等等。前面有提到过用色,这里着重说一下字体字号选择和图标。
先来看字体选择,大屏字体设计一般不要选择花体字,因为从识别性来说,花体字识别性较弱,另外,一般情况下数据是实时动态的,用这种不太常规的字体需要开发嵌入,往往会增加开发难度,而且加载相对较慢。一般情况下,内容文字用系统自带的微软雅黑体就好,字号的选择尽量不要小于12px。正文部分14px是使用的比较多的。一些政府机关想要字体稍微大一些也可选用16px。需要注意的是,一些刚毕业没有经验的同学选择字体的时候容易用到奇数如15px。大屏可视化设计需要尽量避开奇数,因为设计稿交付前端开发的时候是需要换算的,偶数换算会方便很多,包括设计板块之间的间距也是要用偶数,不能随心所欲。正文字体用系统最常见的微软雅黑就好,但是涉及到一些数据字体的时候可以强调一下。数字字体选择可以用Din字体。它的字形适合数字呈现,会和正文字体区分开来,视觉更加突出。同一个页面设计字体最好不要超过三种。有些大屏可视化页面不单涉及到一个页面,而是多页面连续的时候,需要保证所有页面字体选择的一致性。
3. 图表类型选择
数据可视化大屏基本都离不开数据图表,通常需要将抽象的业务需求用易于理解的图表形式展现。
图表类型有非常多,很多开发网站提供了不同的数据图表源文件,便于开发人员和设计师使用。比如说Echarts上面提供了多种图表类型,每种图表类型也提供了多种样式。设计师进行设计的时候最好核对所选用的图表是否符合规范,多和开发沟通,可以极大地减少开发工作量。否则很可能出现设计图效果与开发效果严重不符合的情况。
不同的图表其实是适合不同的数据表达的。比如说条形图和柱状图可以让人快速辨别不同类别之间的对比。折线图和曲线图适合表示一定时间段数据的变化趋势。饼图通常用于展示不同构成之间所占的比例。以此在图表选择上应契合所要表现数据的特征。
对于不同内容的展示通常会借助不同的图表,特别是为了实现更好的视觉效果,在大屏可视化图表的选择上靠的比较近的区域最好要注意图表选择的差异化。当然,不可为了差异化而选择样式差异很大的图表,特别是两个板块业务一样的时候还是需要考虑统一性,因为数据可视化设计的初衷是为了简化信息,使用户一目了然,易理解接受。如果同一类型业务图表差异化太大无疑会增加用户理解负担。功能性和美观性的平衡是大屏可视化设计非常需要思考的问题。
(四)交互设计及动态效果
在交互设计上,大屏的数据可视化设计不同于网页,可以在交互上适当弱化一些具有指引效果的元素。比如“点击进入”在网页上通常是需要做成按钮让用户点击的,可视化大屏上则不需要,直接用可点击的数据控件就可以。然后触摸屏幕的按钮需要考虑到用户的手势习惯,交互按钮需放置在适合触碰的高度。
在动效设计上,数据可视化大屏中的信息往往是实时更新的,比如一些数据采集,云计算数据等都是带有功能需求,而不是静态展示的。动效可以说是大数据可视化非常重要的部分,它可以让整个屏幕视觉更加灵动,也会在有限的空间里面承载更多的信息。数据可视化大屏动效设计需要有节奏感,在视觉焦点和数据更新的地方适当使用动效,而不能为了做动效而动效。有时候,一个页面中动效过多反而会喧宾夺主,分散用户视觉注意。
二、总结
未来数据可视化大屏设计会用得越来越多。它的业务场景包括:智慧园区、安防、交通、城市、医药、工程等方方面面。随着数字媒体技术的发展,数据可视化已经成为不可逆转的趋势。数据可视化大屏也应运而生。对于数据可视化大屏设计,设计师不仅仅需要考虑视觉层面的效果,还需要综合考虑业务需求及开发实现效果,从而达到功能性与审美性的统一。
参考文献
[1]杜鹏,屈帅.基于WebGL技术的网络三维地理信息系统平台[J].科技资讯,2015,13(30):26.
[2]李红旮,崔伟宏.地理信息系统中时空多维数据可视化技术研究[J].遥感学报,1999(02):157-163.