视觉检测领先者
全国咨询热线:13812953225

设计师必备:超全超详细的数据可视化大屏的风格调研指南!

发布时间:2023-10-03 12:26:10 人气: 来源:下载雷火电竞亚洲先驱
案例介绍

  最初,这只是我做大屏主题的前期准备工作,但是在收集整理资料的过程中,意识到这能形成一份参考文档来分享给大家,说不定可以在大家做大屏主题、开发新效果时提供一点系统性的参考。

  寻找共性做分类之前需要有分类标准,那么,怎么定义一种风格?我这里定义了两个条件:

  本次的调研对象:市场上的数据可视化大屏作品,主要为商家对外宣传的项目效果,以及一些设计师分享的提案作品。注意,影视剧、游戏中的超前可视化大屏设计作品不在本次研究范围内。

  这一类,能够说是深色版的 dashboard,配色比较老气沉闷甚至杂乱,主视觉刻画不够醒目细致,整个画面显得层级扁平。

  目前(2020年2月),你在任何一个搜索引擎里检索关键字“数据大屏”,大多数结果都是这种较为古早的“真”深色版 dashboard。多以较深的蓝紫色为背景(可能还会加点宇宙星空),图表填充在划分好的框内,无显著的层次关系,数据系列颜色多且乱。

  我推测,最早期的大屏,应该是直接将数据后台界面进行投屏的,相当于一个超大号的显示器,这就是大屏1.0。

  看这些屏位于排序靠后位置,应该属于比较早期的作品,这类作品开始有意识脱离传统 dashboard 的设计思路 —— 他们开始把地图放大了,但仍旧没有走出保守派,所以能称它们为“保守派1.5”。

  我认为这类也属于保守派设计:虽然在主视觉上采用了一些新的设计手法和效果,但整体给人的感觉依然相对保守——布局紧凑,“分格感”明显,用色偏沉闷切略显杂乱,整体层次相对还是扁平。但毕竟在设计手法上比上面的例子有了更大的突破,就把它们叫做“保守派2.0”吧。

  这类风格以阿里双十一大屏为代表的电商节日大屏,最明显的特征是偏好霓虹色,喜欢大面积的暖色,营造火爆热闹的节日氛围,虽然数量不多,但是独树一帜,所以单独列出来。

  这个风格,是我写完了其他所有风格后才想到的。因为我发现绝大多数的可视化大屏作品,并没有被包含在其他几个风格内。如果说风格某一些程度上反应着的设计能力与时代审美,那么,市场上大多数的设计作品,应该都属于中间水平,就像一个班级的成绩一样,基本符合正态分布(图片来自:):

  所以,如果把 X 做风格变量(某一些程度上可以反应设计水平与时代审美),Y 做设计作品数量,那些未被分类的大部分作品,聚集在中间。这些项目作品,脱离了“保守派”这样较为初级的大屏形态,但是又缺乏足够优秀的3D渲染与动态效果,所以我将它们叫做“进阶风”(实在想不到更好听的名字了 ,总不能叫“中间风”?)。

  当然,从字面上严格来讲,“进阶”是一个区间,“保守派”到“优秀”之间是存在很多“进阶等级”的,但这里我想讲述的是一个明显脱离了“保守派”,明显有了设计手法、设计效果提升的“进阶派”。

  :有意识地拉开普通图表与视觉主体(一般是地图)的层级关系,不再像保守派一样层级含糊;开始重视视觉主体的细节刻画,但不执着追求3D质感。

  :不同于保守派略显杂乱的配色和图形使用,“进阶风”有明显的配色规范意识,图形图案的使用也体现出一致性,从而避免了拼凑感,整体感上了好几个台阶。

  万博思图的设计水平较为稳定,就是采用的屏尺寸都挺大的,布局上缺乏与其他作品的比较性,官网地址。

  当然数字冰雹的大屏还是以深色为主,找到了几张属于这个分类下且设计效果不错的(数字冰雹的高清图真的太难找了):

  我又去挖了下数字冰雹的早期作品,以下作品在2014年左右,发现数字冰雹似乎并没有改进设计的想法,这些年主要专注于3D技术的提升。图片来自:数字冰雹

  :有意识地拉开普通图表与视觉主体(一般是地图)的层级关系,不再像保守派一样层级含糊;开始重视视觉主体的细节刻画,但不执着追求3D质感。

  :不同于保守派略显杂乱的配色和图形使用,“进阶风”有明显的配色规范意识,图形图案的使用也体现出一致性,从而避免了拼凑感,整体感上了好几个台阶。

  从这个大类,我们也可以感受到设计师们在“怎么样才能做好可视化大屏”这道考题里的努力方向:

  大屏似乎自带科技感的命题条件,所以要求设计师要有更出色的 FUI 驾驭能力,科技感不再局限在“蓝色+星空+蹩脚框线”的循环里,怎么画出成体系又有美感的 FUI 元素,是此阶段里设计师的一个瓶颈。

  提高 GIS 与 三维设计能力:地图、3D地图、3D模型慢慢的变成了了公认的大屏首选主角,刻画好地图以及地图上的数据元素,就已经成功设计了一半。但这也正是这类大屏的瓶颈所在,因为缺乏较好的 3D 与 GIS 能力(不论是设计能力还是开发能力),视觉上的冲击力和空间感始终没有办法再上一步,更不用说深度的交互体验。另外,这也许正是需要较好的 FUI 元素做点缀的原因。

  大方向上,数据可视化大屏是在从花花绿绿变得干净有秩序起来的,克制颜色的使用,避免过于复杂冗余的图形装饰,减少视觉干扰,这样的理念渐渐被重视起来。

  好的方面:在这个分类下,风格的灵活性是最大的,因为不过度追求 3D 交互等高度依赖开发的效果,在设计师这一侧能把控的东西就变多了(比如没有交互需求,那就可以做伪3D、伪空间),一千个设计师,就能有一千套 FUI、一千套配色,就能有一千种“进阶风”。当然也别过度依赖这种模式,总归还是要进步的。

  这一类,基本上抛弃了 FUI 装饰元素,图表和图形的使用简练干脆,对于内容的编排布局很克制、疏密有度,相比于前面的案例,少了很多“拥挤感”;科技感主要是依靠地图元素的光影、动态效果,但你会发现这类作品的地图,并不过分追求地图质感,数据的表现显得很清晰明朗,这是和第五个风格的显著区别。

  严格来说,这位设计师的这套作品依然采用了传统 dashboard 的切割分块布局,地图被“锁在”对应的区块里,但是地图作为视觉主体占了足够大的面积,对于地图光影、立体感的刻画很到位,撑起了整个屏的焦点。大屏整体感强,不像“保守派”割裂感那么明显,没有多余的装饰元素。总的来说,可以看作是“现代简约风0.5”,如果解除地图区域的限制,直接铺满整个屏幕背景,那会更简约。

  以上的例子中,主视觉 GIS 部分都没有极力追求 3D 真实质感,但有一个作品,主视觉追求真实质感的同时保持了简约,所以我将它成为“现代简约风2.0”,也列在这里,算是给咱们提供另一种设计思路和灵感吧。

  近两年,众多的可视化设计企业都开始偏好 3D 效果,智慧城市、智慧建筑项目纷纷涌现,它们追求更真实、炫酷的模型渲染效果,一副一争高下的气势,所以,我给这类追求3D渲染效果的风格取名为“我家3D最拉”风。对于3D效果的追求,主要体现在:基于3D模型(主要是地图和建筑),极力渲染模拟真实世界的光影纹理、立体感,点缀以山川地形、青山绿水、路网河流等,并以粒子、流光等炫酷的科技效果做辅助,有个比较高级的词汇可以形容一下这种手法——“数字孪生世界”。同时,极强的动态效果和交互性,让这个风格的可视化大屏有了更强“世界观”——你能更加轻松地代入模型所展示的世界里,去观测数据的变化。最后,这个风格极度弱化了 FUI 的使用,你基本看不到有复杂的框线装饰元素,甚至,有时候你会不太确定是不是能用“科技感”去度量这类作品。

  官网链接。这就是那家请了设计师 Dennis Schäfer (作品页)做设计的公司,算是属于这个风格里的第一梯队。

  阿里2018年双十一杭州会场的大屏《杭州城市数据可视化:数据时代的商业与人文》:

  :追求用户与 3D 模型/GIS 间的深度交互,转场过渡连贯(技术方面保证了性能与流畅性)。

  对于这个类型的作品,我比较好奇的是,他们到底怎么还原落地设计效果。《浅谈DataV大屏设计的可能性》中提到,要落地虚拟城市的效果,他们优化了设计与开发的合作流程,不再是“设计师出效果--开发同事还原”的流程。

  还有一个点是,他们几家的模型目前都不支持自定义修改细节样式,或者自己上传模型、贴图,与前面的可视化大屏作品相比,个性化的支持度相对低了很多,但也不难理解其修改难度的剧增。也可能正是因为如此,举例的每一个企业又都形成了各自风格明显的 3D 效果。

  读到这里,你也许意识到了,所谓的“风格”,是受限于技术、受限于时代、受限于审美、受限于金钱的产物,我编排这些风格的顺序,大体按照了设计效果慢慢的变好(越来越贵)的顺序,侧面反映着时代和市场对可视化大屏的选择倾向。

  通过这篇文章,我想你已经对可视化大屏风格的发展、分类有了一个初步的概念,希望可以引发大家更多更深的思考。