数据大屏设计师,我不信你没有这些困惑!(上)

原创作者@1米8的元宝


嗨,我是袋鼠云的一个数据可视化设计师,在公司主要负责画大屏。在去年画了60多张大屏页面之后,我失去了青春和头发,化解了一些对于数据可视化工作的迷茫,我整理了其中的一些,希望能带给大家一点启发。我将主要围绕这几个方面来写:



声明:本文内容仅为个人观点,不代表袋鼠云官方意见。


Let's go!





1 数据大屏究竟是什么东西


——“没有愧疚,真的太难定义了。”


身为一个数据可视化产品的从业者,时常感到焦虑,因为这个行业一直都在发生着很快速的进化。


前一两年,人们更多地使用“数据大屏”这个词,可是近些时候,你再去观察这个行业里的优秀企业和入局者,他们都不约而同地弱化了“大屏”这个概念,取而代之是“数字孪生”、“大数据可视化交互系统”之类的词汇。相应地,产品形态也在发生着变化,从最开始“偏静态的展示”,到现在的“强交互性”、“3D”、“影视级效果”、“游戏化”...也许人类的终极目标就是像科幻电影里一样自如地操控信息和数据吧。

2016年电视剧《人民的名义》;袋鼠云大屏案例;2010年电影《钢铁侠2》


关于大屏,希望我们“数据可视化设计师”,要有这样的意识 —— 大屏只是一个硬件载体,我们可以往大屏上投放任何内容。我们真正在设计的,是一个“数据可视化交互系统”,大屏、电脑、移动设备、投影、VR...都可以成为这个“系统”的展示载体,而大屏,应该是目前大多数使用情景(监控、接待汇报)下最实用的。

不同大小的屏幕情景感受


当然,我们现在交流时还是习惯说“数据大屏”,但在2020年,“数据大屏”这个词面背后所代表的产品设计形态,一定和以前有了很大的差别,其背后所包含的东西越来越丰富,早已不是“信息图表”这么简单了,我们要时常提醒自己,保持对数据可视化产品的想象力。


最开始做数据大屏设计时,我经常在内心深处疑惑,为什么企业会对“一群人围着一块巨大屏幕观看炫酷PPT”的事情如此热衷,现在的我“参悟”到,这件事情的本质是,如何更好地进行数字化建设成果的应用和展示,也就是如何跑好网上流传的“大数据的最后一公里”。


关于“为什么强烈地追求炫酷、科技感”,随着业内一些宏大的、领先的概念产生,我渐渐理解,数字时代下的产品设计,本身就有无限可能,追求感官和交互体验的升级没有所谓的对错。关于未来的数字产品,也许影视作品里早就为我们勾勒了轮廓,从某种意义上来说,我们设计师掉光头发在画的科技感界面,不过是在模仿“已有的想象”罢了。

2017年的电影《太空旅客》:大厅正在给男主全息演示星际路线


回到数据大屏的内容,当下流行的设计范式是:一般以炫酷的地理空间数据可视化为主体,周围辅助以常规的图表图文。常规图表的设计已经有了较为成熟的设计方法论和解决方案,目前各大厂商比拼得更多的是地理空间数据的可视化效果,追求对真实世界的3D数字化重建,也成了可视化大屏领域里的一个趋势。

图片来源:袋鼠云官网数据可视化案例集合


我总问自己,中间为什么总是地图?也许正如可视化领域流传的那句话所说,“人类生活中所产生的数据,80%都和空间位置有关”,有了数字地图,你就有了展示80%数据的载体。另外,感性点地说,只要有数据,在一块屏幕里,你可以从太空一直往下看地球,直到发现你小时候换下的扔在隔壁家房顶上的牙齿。这种一览众山小、世界尽在股掌之间的感觉,是不是很棒?这是用常规图表做视觉主体不能达到的空间感的体验。

之前用Easy[V]给一个客户做的地图下钻效果的简易demo


以上,便是我窥见的当下数据大屏设计的一面。




2 数据大屏设计效果如何落地


大家看到炫酷的设计效果,都会好奇发问“这怎么开发落地啊”,我想说,其实天下设计师都是一样的难,谁不是追着开发一起脱发,但总有(暂时)实现不了的效果。


有一些观点想和大家分享,首先,这是一个可视化大屏项目的简要流程:

其实,这就是普遍的互联网产品的项目实施流程,简单来说,就是产品经理出原型、设计师做好界面效果,逼着让开发同事技术还原。对于普通的网页应用、APP,这个流程并没有太大的问题,一般设计师的设计效果都有了相对成熟的技术落地方案。但在数据大屏追求3D、高视效的设计趋势下,传统的互联网产品项目流程就会存在类似这样的问题:

你知道什么叫做“黯然失色”吗?这就是


设计师和开发之前会针对一些细节效果,反反复复地...撕扯,要承认,每一个细致的效果,都需要时间去打磨,受限于技术手段、项目时间,我们往往对上线效果也有不少的无奈。有时候,也会用一些取巧的方式,例如,地图部分不需要旋转、缩放等交互时,对于一些流光、粒子的效果,会直接叠加图片、视频上去,但在今天强调交互、动态地图的行情下,这一招的弊端越来越大。


我想任何一个产品,从来都不只是设计的产物,而是市场、设计、技术、硬件等等因素综合作用下的妥协产物。造成设计效果难以百分百落地的原因,我想根本源自设计和开发的隔阂,设计效果和技术方案无法完全重合,不带技术边界意识的设计,自然会有落地难的困境,技术当然可以探索突破,但项目是有时限的。

设计和开发合体全栈设计师,效果落地可能就事半功倍

面对这样的困境,业内厂商的一个趋势就是转向游戏开发的模式,设计师把控模型,与开发共同调试把控渲染效果,在这种趋势之下,厂商们开始研发自己的 3D 引擎或者启用诸如Unity、Unreal等游戏引擎,这样往往能获得更高效、更优质、更流畅的 3D 输出。


对大多数大屏设计师而言,这样的落地困境并不会很快被解决,但也不必懊恼,我想我们能做的有三点:


1、不断精进自己的 3D 和动效设计技能来满足行业要求。任何炫酷的效果,只有先设计出来,才有被开发还原的可能。可以多关注一些基于 Web 的 3D 工具网站和技术,诸如 sketchfab、Vectary,了解当下 Web 端 3D 落地效果的行情,以此对设计软件做出的效果和开发落地的效果有个差距感知。

2、保持对业内技术动态、工具的关注和了解。例如webGL、three.js、3D 游戏引擎、Ventuz等等,紧跟时代获取灵感,如此一来你还可以鞭策推动开发同事 —— 我设计的这个效果,已经有公司/人实现了哦🙊。


3、为什么不借助第三方的数据可视化大屏制作工具呢?如果你在公司只是负责后台UI设计、平面设计,甚至你都不是设计师,然后突然有一天公司来了个大屏需求,让你一周搞出来上线,于是你加班补习数据大屏设计,但结果可能是效果勉强及格,开发实现也勉强及格。这样偶尔一次的支持还好,但是你看见公司越来越多的地方出现了大屏、越来越多的部门说要要大屏,你感觉到了头皮有点凉。


行业对可视化设计师的要求越来越高,你难我难大家都难,与其硬刚白手起家,不如站在别人设计开发好的基础上去设计吧!

突然插播的“安利”,但是相信我这不是一篇软文!


咳,首先,这是袋鼠云对外演示的最新案例集:

此处为语雀视频卡片,点击链接查看:数据可视化案例集.mp4

嫌视频太慢的我给大家截了一些图:

重点来了!

这些大屏都是依托我们家的可视化大屏制作平台 Easy[V] 交付的:

也就是,所有的地图、图表、交互都是通过这个平台设计开发完成的,平台提供了一套已经设计开发好的组件,直接供使用者添加、修改样式、配置交互:

⬆︎   组件工具一览

⬆︎   更换组件主题

⬆︎   地图组件下钻

⬆︎   自定义建模的模型地图


为了减轻使用者的设计负担,这些效果、风格,都是有设计师去一个个配置项调出来的。如果你基于这样的基础,再去做可视化设计,我想你可以有更多的精力去研究指标和数据、去构思整个可视化展示的故事结构,而不必总是去纠结某个样式怎么做才好看、设计出来了能不能落地,项目压力瞬间减轻很多有木有?对于有设计能力的设计师,我想这些已经设计过一遍的组件,一定能减少你很多重复工作,让你有更多参考和灵感去配置设计自己风格的大屏。


好了,收!再不停就真被当成广告了,有兴趣的盆友去试用探索吧~ 所有设计师和读者,注意咯🗣,Easy[V] 的免费试用申请网址:🔗   https://easyv.dtstack.com



你以为打完广告就结束了吗?不!以下,是为了证明本文是干货,但很可能大家都去申请试用 Easy[V] 而没有被看到的更加精华的部分:


3 调研不积极,改稿到窒息


数据大屏的背后,是一个相对较新的行业,再加上面向企业的项目一般都会有保密要求,所以大家在做项目时都发现,找不到较成熟又对口的参考资料,这是数据可视化设计师的困境,也是机遇,因为你在每一个项目中的探索,都是可视化行业的先驱事迹啊 🙌 。基于这样的背景,我想大家就要充分调研,仔细求证。



3.1 现场调研:体感是感受出来而不是听出来的


一般情况下,大屏设计是针对一块位置、大小固定的屏幕进行设计,当使用场景一定时,我们就必须把硬件、空间信息纳入自己的设计考虑范畴,这方面,要像舞台设计、PPT设计师一样,充分考虑硬件和现场环境对屏幕内容的潜在影响。建议就是,如果硬件到位了(还有硬件没到位的情况?是的,的确存在那种硬件都还没定就被要求开始设计的情况🥴 ),到现场出差,往那屏幕前一站,找找真实的体感。


其实,我刚开始也是很惧怕出差的,因为公司派我出差的时候,我脑子里是这样的画面:



对,我没出差之前,我一直认为,公司就是想让我到客户现场画大屏!事实的真相是,让设计师去和客户增进感情,为了避免之后因为类似这样的问题改稿:



出差多了,我得到了升华 —— 现在的手机居然拍不出肉眼能看到的色差?客户说的 12 米开外看大屏居然是这样的观感?原来客户公司食堂的饭菜这么好吃...


所以,我整理了一份自认为对设计师很实用的现场调研清单,一切血泪教训尽在表中:


一级事项

二级事项

示例

备注

客户现场基本资料

/

/

此项可选。在取得客户同意后,可以收集包括但不限于客户门面、业务场景等的照片,以备后续汇报和宣发使用。

输出分辨率

LED:3840*2160;

拼接:单块1920*1080,横4竖3(块),拼缝3.5mm

根据现场了解制作对应分辨率的页面投屏,验证实际输出分辨率。对于拼接屏,站在观测点感受黑缝的影响程度。

位置环境

这个大屏放置在一个什么环境中,房间内光照情况如何?周围设施摆放如何?等等

尺寸

用于感知屏的空间大小,拍照记录时最好有人做参照物。

色彩

可用不同色调的设计图/背景色投屏,观察大屏与电脑间的色差;若是图示中硬件太差的情况,则要测试色差最小的颜色。

最小观看字号

为了保证文字识别性,需要现场站在观测点测试最小字号。

客户原设计效果上屏照片

/

/

若客户有旧版设计,投屏后拍摄留存,以备参考,让设计师可以看到旧设计差在哪里。

其它相关信息

/

一些不直接相关但是可以辅助了解现场状况的照片,如图示可知可能需要内网调试。

对接人

身份

XXX处负责人;话语权如何

/

对设计方面的期望

提供案例让其观看,观察其对设计风格、布局排版的反应,询问关于用色、风格等的倾向和意见

/

实际决策人

身份

XXX处领导

/

对设计方面的期望

提供案例让其观看,观察其对设计风格、布局排版的反应,询问关于用色、风格等的倾向和意见

/

项目基本情况

/

项目的时间规划、合作模式..

对大体的时间节点达成一致;是否有驻场办公的必要?比如只能内网办公;其他。

设计方案上屏效果

/

图片+视频

设计方案出来后,我们要主动积极上屏测试,若出差不便,则让客户拍摄上屏后的实际效果,包括静态照片和动态视频,以备我们观测评价实际效果,如整体显色、流畅度等。

表中图片由自己拍摄脱敏或公司小伙伴提供❤️


当然,设计师能去现场最好,如果实在是条件不允许,让项目经理或者前线同事代为收集就好,但要提醒他们能用拍照解决的就不要口述,坚决贯彻落实可视化“一图胜千言”的宗旨。



我是一条戛然而止的无情分割线:



好,今天的分享先到这里,因为到这里你已经读了4000多个字了,你很棒但是你肯定累了!



希望各位设计师或者对可视化感兴趣的朋友,能从我的文章里收获一些启发,还有快乐。如果有疑问,欢迎评论,我会在下一期里一起为大家解答。如果你喜欢我的这次分享,欢迎转发!


【下期内容】:大屏调研之需求调研与数据调研;一个大屏项目的理想人员配备与如何进行角色补位。最后,欢迎大家关注袋鼠云数据可视化,👉  官网:https://www.dtstack.com/visualization




关于作者


公司给我准备的台词是:袋鼠云数据可视化团队专业可视化设计师,主导设计城市大脑、区域经济大脑、金融大脑、政务大脑、交通大脑等优秀数据可视化项目案例。

emmm...

以下才是我想说的台词,我的style!(感谢袋鼠爸爸让我说想说的话,如果这段放了的话):

不要问1米8,问就是腿长🙃


400-8505-905复制
免费试用
在线咨询
微信社区
易知微-数据可视化
微信扫一扫入群