可视化大屏搭建工具调研探索分享（下篇）
全文主要分享本人对当下主流可视化大屏搭建工具的调研分析，浅谈对可视化行业的探索思考。
文章目录
一、前言—— 1.1 阅读之前、1.2 调研背景、1.3 分享目的、1.4 术语说明
二、市场分析—— 2.1 行业背景PEST、2.2 市场现状
三、主流工具—— 3.1 调查筛选、3.2 工具介绍、3.3 分析模型、3.4 结构层、3.5 框架&表现层
四、功能体验—— 4.1 创建大屏、4.2 分享导出、4.3 设计亮点、4.4 其他、4.5 体验总结
五、探索思考 —— 5.1 未来迭代、5.2 设计价值
前言概要 阅读之前
阅读提醒
1、建议先阅读完上篇，再阅读下篇，全面了解文章框架脉络。《可视化大屏搭建工具调研探索分享（上）》文章传送门：https://www.woshipm.com/?p=6041167&preview=true
2、文章下篇约17300字，阅读时长约30分钟。全文主要分享本人对当下主流可视化大屏搭建工具的调研分析，浅谈对可视化行业的探索思考。由于篇幅有限，阅读体验更佳，故分为上下两篇，下篇接着讲主流工具（DataV、Raydata、EasyV、森大屏）的功能体验，浅谈可视化行业未来的探索和思考。
3、文中的拆解分析部分，多款工具可能存在较多重复观点，由于篇幅有限，故不再赘述。
4、虽工具持续迭代更新，较难与最新版本同步（当时调研时间是2022年10月前），但文章更多的是想表达，在调研过程中的如何用结构化思维来分析拆解产品，以及对未来的探索思考是什么。
适合读者
B端UI设计师、产品经理，可视化行业相关从业者及爱好者。
四、功能体验
拆解分析完可视化主流工具（DataV、Raydata、EasyV、森大屏）基础结构后，继续深入功能体验。主要围绕功能、视觉、交互等维度来进行体验分析。以核心流程任务【1创建大屏】(新建大屏页面、使用大屏模板、拖入组件到画布、调整并定稿设计）-【2分享导出】来展开。
4.1 创建大屏
这包括了创建和设计大屏的整个核心任务流程，也是工具质量的核心体现。
4.1.1、新建大屏页面
首先，我们需要先在系统页新建大屏页面。
DataV企业版试用 – 新建大屏页面
DataV企业版试用有3种大屏创建方式，分别是PC端、移动端和识图创建。
在PC端和移动端创建的交互路径都是以使用推荐模板-立即创建或直接点击空白模板创建。值得一提的是，点击某个模板后，弹出预览窗口时依然可在顶部模板列表切换模板，方便预览。
在识图创建时，用户可自行上传图片或在线手绘的方式来生成大屏草稿图，很方便售前经理/产品经理在项目前期进行原型的搭建。
Raydata Web专业版 – 新建大屏页面
Raydata Web专业版的系统页无大屏模板推荐（官网模板放在别处，案例管理-官方案例），只能创建空白页面。创建时可使用预设尺寸也可以自定义尺寸。交互路径简单便捷，体现专业版定位准确。
EasyV个人版 – 新建大屏页面
EasyV个人版新建页面的说法叫新建应用，大屏项目相当于一个可视化应用。在新建应用时，可以新建空白模板，也可以使用官方推荐模板。预览官方模板的弹窗中可左右切换，快速决策。
森大屏基础版 – 新建大屏页面
森工厂中的森大屏基础版，在系统页的顶部导航需要选中【大屏】，再新建大屏。即可新建空白大屏，也可使用官方的推荐大屏。使用推荐大屏需要购买操作（免费的也要），交互路径略显繁琐。
较为特别的是，进入编辑器页后依然可以新建大屏，交互操作贴近win系统用户习惯。
4.1.2 使用大屏模板
当用户想快速搭建大屏时，可以使用工具自带的模板再进行微调，这种方式提高效率而是上手成本较低。
4.1.2.1 模板效果
DataV企业版试用 – 模板效果
DataV的模板风格多样，装饰元素和光效的处理很到位，发光动效体现大屏的科技感。
因为阿里涵盖了金融服务、数据云服务等众多业务，那么他们这类行业模板也很丰富。还有，阿里有一部分主业务是电商，那么对于电商行业的模板也挺多，特点是有浓浓的“电商味”，色彩鲜艳，以霓虹蓝紫色为主，这类主题模板很适合营造商品促销的购物氛围。
官方也提供了浅色和深色的移动端模板，针对用户随时随地查看数据的使用场景，数量较少。
Raydata Web专业版 – 模板效果
Raydata的模板风格在所有竞品中最独特，无论模型场景还是图表组件，它都有一套自己独有的设计语言，字体使用了比较方正稳重的字体，体现科技感，再结合模型场景而言，整体效果类似游戏场景，把科技感、抽象感、细节感表现得淋漓尽致。
这套风格可能喜欢的客户会很喜欢，不喜欢的可能无感，但不管怎么说，Raydata服务了许多项目，客户会买帐自然有一定原因的，整体效果和落地性都很稳定。
EasyV个人版 – 模板效果
EasyV的模板风格颇具美感且精致，大屏整体感和细节感不错，模板数量也很多（多也是个特点，海量选择且质量高），但移动端的大屏模板数量不多。从素材结构角度看，将素材不断解组，能拆开分到颗粒度极小的元素，可见在设计素材上EasyV没少花功夫。
大屏模板中经常能从少量的配置主题色中营造出“高级感”，不会为了炫酷效果而过分花里胡哨，而是遵循 *GLAD 原则（数据可视化原则)，在保证信息传达效率的基础上，再去点缀视觉效果。
*作为科普题外话，GLAD原则也就是：（G）Good Data and Insight——图表的灵魂:发现好数据与好洞察、Less Noise——降噪:简约至上、（A）Accurate Expression——精准表达:提升数据表达的准确度、（D）Distinct Mark——画龙点睛:突出洞察信息的标识。这4部分共同组成了 Glad to See Data（成功的商业数据可视化)。具体见帆软《数据分析与可视化指南》： https://help.fanruan.com/dvg/doc-view-80.html
森大屏基础版 – 模板效果
森大屏的模板风格比较侧重于三维模型场景的表现，而对于二维的 UI 层效果则比较简约，视觉装饰用得较少。以大屏整体而言，三维场景效果比较复杂时，UI 层使用简单一点的效果，这种做法也不失稳妥，毕竟数据信息的传达的优先级最高，其次才是利用视觉效果抓住观众的注意力。
另外，不管是粒子动效、扫光、飞线，还是地图或建筑的动态边缘线等等，三维场景的视觉效果都做得很丰富，森大屏基技术上使用了 *ThreeJS 前端 3D 技术，实现的效果可在网页端上有极强的表现力且流畅丝滑。也因为效果丰富的问题，模型面数必须优化（减面处理)，否则在网页上加载半天都没看到模型场景或者卡顿。
4.1.2.2 组件效果
DataV企业版试用 – 组件效果
DataV的组件效果整体概括为酷炫硬朗的个性，默认以青色、蓝色作为主题色，也可以用主题美化功能将组件切换成不同的配色方案。图表组件数量丰富，比如条形图等基础图表细分为条形图、水平胶囊柱状图、分组柱状图、对称条形图、百分比条形图、双11消费屏柱图、双11轮播列表柱状图等，组件细致分类以满足更多的业务场景。
DataV比较有特色的是，图表组件结合了 BI 分析功能（商务智能），部分图表组件如柱形图等可转换为 BI 图表组件，用户可进行数据分析，该功能很适合数据分析师或产品经理使用。
Raydata Web专业版 – 组件效果
Raydata的组件效果整体而言比较纤细优雅，再搭配较大的圆角和特殊字体后，略显活泼亲切的个性。组件数量也很多，一开始以为只要顶部组件库才有组件可用，然后较难发现的是，其实更多细分的业务组件都藏在了画布右上角的【收藏列表】-【基础素材库】中。
地图或模型场景的【标记】【绘制】【交互】组件为本身已经视觉效果丰富的地图或建筑场景，增添了更多交互上的层次细节。场景层还有动态粒子上浮的效果丰富细节，也由于整体细节较多，所以对于复杂模型场景的网页加载相对较慢，很吃配置内存。
EasyV个人版 – 组件效果
EasyV的组件效果精致多样，比如一个模块标题栏，通过装饰元素、文字排版、颜色等不同的搭配就可以玩出很多花样，并且里面的元素可以继续解组拆解，更灵活调整。
还有，EasyV自己封装的组件也很实用且丰富，比如3D图片列表组件的展示效果，很适合用于大屏主/次视觉。
另外，【资源库】的分类也很详细易用，比如【资源库】下分为【主题资源】【设计素材】，【主题资源】分为标题类、地图类、装饰类、面板类、组件类，【设计素材】分为背景类、图标类、装饰类等，其中图标类细分为标记、通用、形状、天气。
森大屏基础版 – 组件效果
森大屏的组件效果整体感视觉感一般，整体性不够统一，可能造成的原因：配色规范不够统一、基于ECharts的图表组件未封装完善、为了突出三维场景而弱化UI层视觉。
但只细看【主题】组件，可以发现每套主题风格的整体性还是很强的，而且UI层结合三维场景来看，整体效果也相当出彩。比如【数字孪生平台-矩阵革命】主题模板，或许参考了《黑客帝国：矩阵革命》，配色采用暗色调，黄绿色作为主题色，视觉装饰上运用了很多“代码雨”的元素，体现了酷炫的科技未来感。
4.1.3 拖入组件到画布
通常来说，我们新建大屏页面后，需要把适合的组件拖入到画布中。如业务需求有一个产业 A 和 B 销售量的5 年同比数据，那么就需要把一个柱形/折线图组件拖入画布中。
4.1.3.1、组件库
4款工具的组件库中，DataV和森大屏采用了垂直导航，Raydata和EasyV采用了水平导航。上篇已经解释过结构层的分析了，不赘述。
DataV企业版试用 – 组件库
可以发现DataV的【资产】(组件库）位于画布编辑器比较显眼的位置，用户很易觉察到它。通过拖拽左侧组件到画布，我们所见即所得的看到大屏搭建过程中的效果，交互前中后都十分流畅。
不管是拖入画布的交互，还是画布中进行调整，但释放鼠标时，部分组件都会重新加载一次，大部分图表类组件如此，站在技术角度看，加载一次意味着只需要监听一次数据变化，而不用实时监听而额外的耗费内存。考虑到一个完整的大屏需要很多组件集中在一个页面，如果采用实时加载则会让网页变得卡顿或崩溃，因此减少监听次数的做法更优，体验更流畅。(其余4款工具也运用到此做法，后不赘述。)
在【资产】左上角是资产选择。可以选择额外的资产，类似于电子游戏的拓展包、资料卡，部分需要付费购买。一般没有特殊设计要求，官方资产已经足够使用了。
在【资产】右上角是更新组件、搜索组件和折叠功能。其中搜索功能很实用，在原列表也显示搜索结果，交互信息集中，用户更易获取。举个反例，如果搜索结果放在了别处，那么用户的视线就会游离于搜索按钮和搜索结果之间，两个位置的视线来回跳转，降低了信息获取效率，也增加了操作成本。
值得一提的是，DataV的组件封面图的尺寸根据实际内容量多少来分别展示，比如柱状图占了 1 行，点热力层用了 1/2 行，交通图标素材限使用了 1/3 行，这样做信息识别效率获取更高。另外封面图的图形抽象概括得很到位，比如地图组件中的 3D 平面地图、基础平面地图、 3D 平面世界地图、 3D 地球，灵活运用点线面元素表现不同组件种类，提高了信息识别效率。
Raydata Web专业版 – 组件库
而Raydata的组件库则是顶部导航，通过点击顶部一级导航，向下展开二级导航菜单面板。不足之处是展开的面板已经几乎占了画布的一半，导致画布空间利用率低，不得不通过再次折叠面板或向下滚动画布来查看被遮挡区域。视觉方面虽如此，但在交互方面，在拖拽组件时，面板会立即消失，面板不遮挡画布，那么上面提到的信息遮挡问题就通过交互设计手段避开了。
因为Raydata区分了【UI 层】和【场景层】，所以用户在不同类型的图层看到的组件库菜单也会不同。【UI 层】的一级导航是图表、形状、文本、装饰、按钮、媒体、控件，【场景层】的一级导航是场景、模型、标记、绘制、数据、交互。
组件很多且分类也很详细，导航层级分成了 3 层，相对而言比较深了。如果在组件库近处增加一个搜索组件的功能，或许对用户来说操作效率会有说提升，这里需要留意一下就近帮助原则的作用，或者说尼尔森十大可用性原则的灵活高效原则的作用，就近显示用户立即就能看到，获取信息高效，使用灵活且操作快捷。
组件库【场景层】的封面图信息识别效率高。因为对于三维场景而言，能在通过二维图片就能预想到拖拽到画布时的画面，能针对性且准确地提取关键元素，那么信息识别效率就自然提高了。
比如一个 4G信号塔，它真实影像是怎样的，它可以提炼哪些代表性的元素，它有哪些特征和象征符号，它不是高压电塔所以要有所区分，它最终的图形能不能让用户一眼就能识别清晰不造成误读？这些都很考验设计师将具象转化为抽象再转化为具象的能力。
EasyV个人版 – 组件库
EasyV的组件库与Raydata同样使用顶部导航，但EasyV把组件库的功能入口缩小成一个图标，放在顶部任务栏中。用户通过点击才展示一级、二级导航菜单内容，而且展开的面板相对而言比较小，因此下方溢出的信息就需要手动向下滚动才能获得，在组件多的情况下，易导致信息获取低效问题。
组件封面图比较小，而且使用了实际组件效果，即拖拽到画布实际看到的效果，所见即所得，部分图表组件是适用这种效果的，但有些不好处理的组件比如水平时间轴、分页，在小封面图的情况下，较难阅读信息，更好的做法或许是适度放大其特点来提炼图形或增加封面图尺寸，让不同组件更好的识别和区分。
可以降低用户理解成本的是，组件库里的部分组件封面图是动态的，用户能预知到将组件拖拽到画布后的情况，立马就有画面感了，比起严肃的静态图，动态封面图更有趣味和活力。
森大屏基础版 – 组件库
4.2 分享导出 4.3 设计亮点