万字干货！全面拆解主流的可视化大屏搭建工具（下篇）

全文主要分享本人对当下主流可视化大屏搭建工具的调研分析，浅谈对可视化行业的探索思考。

前言概要

① 阅读提醒

1. 建议先阅读完上篇，再阅读下篇，全面了解文章框架脉络。
2. 文章下篇约 17300 字，阅读时长约 30 分钟。全文主要分享本人对当下主流可视化大屏搭建工具的调研分析，浅谈对可视化行业的探索思考。由于篇幅有限，阅读体验更佳，故分为上下两篇，下篇接着讲主流工具（DataV、Raydata、EasyV、森大屏）的功能体验，浅谈可视化行业未来的探索和思考。
3. 文中的拆解分析部分，多款工具可能存在较多重复观点，由于篇幅有限，故不再赘述。
4. 虽工具持续迭代更新，较难与最新版本同步，但文章更多的是想表达，在调研过程中的如何用结构化思维来分析拆解产品，以及对未来的探索思考是什么。

② 适合读者

B 端 UI 设计师、产品经理，可视化行业相关从业者及爱好者。

四、功能体验

拆解分析完可视化主流工具（DataV、Raydata、EasyV、森大屏）基础结构后，继续深入功能体验。主要围绕功能、视觉、交互等维度来进行体验分析。以核心流程任务「1 创建大屏」(新建大屏页面、使用大屏模板、拖入组件到画布、调整并定稿设计）-「2 分享导出」来展开。

1. 创建大屏

这包括了创建和设计大屏的整个核心任务流程，也是工具质量的核心体现。

① 新建大屏页面

首先，我们需要先在系统页新建大屏页面。

DataV 企业版试用 – 新建大屏页面

DataV 企业版试用有 3 种大屏创建方式，分别是 PC 端、移动端和识图创建。

在 PC 端和移动端创建的交互路径都是以使用推荐模板-立即创建或直接点击空白模板创建。值得一提的是，点击某个模板后，弹出预览窗口时依然可在顶部模板列表切换模板，方便预览。

在识图创建时，用户可自行上传图片或在线手绘的方式来生成大屏草稿图，很方便售前经理/产品经理在项目前期进行原型的搭建。

Raydata Web 专业版 – 新建大屏页面

Raydata Web 专业版的系统页无大屏模板推荐（官网模板放在别处，案例管理-官方案例），只能创建空白页面。创建时可使用预设尺寸也可以自定义尺寸。交互路径简单便捷，体现专业版定位准确。

EasyV 个人版 – 新建大屏页面

EasyV 个人版新建页面的说法叫新建应用，大屏项目相当于一个可视化应用。在新建应用时，可以新建空白模板，也可以使用官方推荐模板。预览官方模板的弹窗中可左右切换，快速决策。

森大屏基础版 – 新建大屏页面

森工厂中的森大屏基础版，在系统页的顶部导航需要选中「大屏」，再新建大屏。即可新建空白大屏，也可使用官方的推荐大屏。使用推荐大屏需要购买操作（免费的也要），交互路径略显繁琐。

较为特别的是，进入编辑器页后依然可以新建大屏，交互操作贴近 win 系统用户习惯。

② 使用大屏模板

当用户想快速搭建大屏时，可以使用工具自带的模板再进行微调，这种方式提高效率而是上手成本较低。

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 技术，实现的效果可在网页端上有极强的表现力且流畅丝滑。也因为效果丰富的问题，模型面数必须优化（减面处理)，否则在网页上加载半天都没看到模型场景或者卡顿。

2）组件效果

DataV 企业版试用 – 组件效果

DataV 的组件效果整体概括为酷炫硬朗的个性，默认以青色、蓝色作为主题色，也可以用主题美化功能将组件切换成不同的配色方案。图表组件数量丰富，比如条形图等基础图表细分为条形图、水平胶囊柱状图、分组柱状图、对称条形图、百分比条形图、双 11 消费屏柱图、双 11 轮播列表柱状图等，组件细致分类以满足更多的业务场景。

DataV 比较有特色的是，图表组件结合了 BI 分析功能（商务智能），部分图表组件如柱形图等可转换为 BI 图表组件，用户可进行数据分析，该功能很适合数据分析师或产品经理使用。

Raydata Web 专业版 – 组件效果

Raydata 的组件效果整体而言比较纤细优雅，再搭配较大的圆角和特殊字体后，略显活泼亲切的个性。组件数量也很多，一开始以为只要顶部组件库才有组件可用，然后较难发现的是，其实更多细分的业务组件都藏在了画布右上角的「收藏列表」-「基础素材库」中。

地图或模型场景的「标记」「绘制」「交互」组件为本身已经视觉效果丰富的地图或建筑场景，增添了更多交互上的层次细节。场景层还有动态粒子上浮的效果丰富细节，也由于整体细节较多，所以对于复杂模型场景的网页加载相对较慢，很吃配置内存。

EasyV 个人版 – 组件效果

EasyV 的组件效果精致多样，比如一个模块标题栏，通过装饰元素、文字排版、颜色等不同的搭配就可以玩出很多花样，并且里面的元素可以继续解组拆解，更灵活调整。

还有，EasyV 自己封装的组件也很实用且丰富，比如 3D 图片列表组件的展示效果，很适合用于大屏主/次视觉。

另外，「资源库」的分类也很详细易用，比如「资源库」下分为「主题资源」「设计素材」，「主题资源」分为标题类、地图类、装饰类、面板类、组件类，「设计素材」分为背景类、图标类、装饰类等，其中图标类细分为标记、通用、形状、天气。

森大屏基础版 – 组件效果

森大屏的组件效果整体感视觉感一般，整体性不够统一，可能造成的原因：配色规范不够统一、基于 ECharts 的图表组件未封装完善、为了突出三维场景而弱化 UI 层视觉。

但只细看「主题」组件，可以发现每套主题风格的整体性还是很强的，而且 UI 层结合三维场景来看，整体效果也相当出彩。比如「数字孪生平台-矩阵革命」主题模板，或许参考了《黑客帝国：矩阵革命》，配色采用暗色调，黄绿色作为主题色，视觉装饰上运用了很多“代码雨”的元素，体现了酷炫的科技未来感。

③ 拖入组件到画布

通常来说，我们新建大屏页面后，需要把适合的组件拖入到画布中。如业务需求有一个产业 A 和 B 销售量的 5 年同比数据，那么就需要把一个柱形/折线图组件拖入画布中。

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 把组件库的功能入口缩小成一个图标，放在顶部任务栏中。用户通过点击才展示一级、二级导航菜单内容，而且展开的面板相对而言比较小，因此下方溢出的信息就需要手动向下滚动才能获得，在组件多的情况下，易导致信息获取低效问题。

组件封面图比较小，而且使用了实际组件效果，即拖拽到画布实际看到的效果，所见即所得，部分图表组件是适用这种效果的，但有些不好处理的组件比如水平时间轴、分页，在小封面图的情况下，较难阅读信息，更好的做法或许是适度放大其特点来提炼图形或增加封面图尺寸，让不同组件更好的识别和区分。

可以降低用户理解成本的是，组件库里的部分组件封面图是动态的，用户能预知到将组件拖拽到画布后的情况，立马就有画面感了，比起严肃的静态图，动态封面图更有趣味和活力。

森大屏基础版 – 组件库

森大屏的组件库与 DataV 同样使用侧边导航，组件库面板的面积相对比较大，消息容易感知，因为面板不方便折叠，因此比较占画布位置。需要额外在顶部任务栏-视图-左侧面板勾选进行显隐，也提供了快捷键。组件库采用了 3 层导航结构，第 3 层是切换「我的」和「官方」，或许更强调的是用户当前拥有的资产，但大部分场景是期望全部组件都展示出来，期望信息聚合且获取高效的，当前显然无法满足。用户需要切换 tab 才能得知具体细分组件中「我的」或「官方」的信息，冗余操作频繁切换，导致操作低效。

比较独特的是，组件库的「孪生」关联了其他子产品的内容，比如森园区、森城市、森展厅的模型场景，也就是说，如果用户在其他子产品中拥有模型资产，就可以在森大屏中复用。

还有，组件库中的「布局」功能，原理是将组件拖入画布中的布局块中，即可替换为当前的组件，尺寸和位置会随着布局块自动做适配，不管是在项目初期设计大屏原型，还是项目中期想要调整布局，都是很方便且高频使用的。

在「孪生」中的组件封面图风格不一，有浅色风格也有暗黑风格。封面图的概括提炼方面还待优化，目前信息识别效率相对低些，如通用标题封面，小图看就是一块蓝色块，不易识别具体是什么组件。

2）图层

4 款工具的图层结构不同，其中 DataV 和 EasyV 结构近似，功能按钮比较聚合，特殊的是，森大屏的图层放在了左下方，比较隐秘，陌生的结构不易让用户发现。文案角度上，森大屏用大纲这个词表达图层，更近似写作场景，而用于设计场景可能并不易让用户理解。

④ 调整并定稿设计

调整定稿时用得最多的就是信息面板了，或者叫配置面板。用户通过在信息面板中调整组件的参数，达到符合自己需求的目的，比如酷炫好看的样式、满足业务的动/静态数据、符合逻辑的交互事件等。

这 4 款工具的信息面板都比较相似，其中 EasyV 和森大屏的层级比较深，有 3 层，信息获取效率相对较低。

DataV 企业版试用 – 调整并定稿设计

DataV 的信息面板中设置数据源时，内容比较多，因此以覆盖弹窗方式出现。为了展示更多信息，面板相应也变大些，那么信息获取效率是提升了，但每次切换又得按多一次关闭按钮的操作。虽然看似是很小一个动作，但信息面板是高频操作区域，每增加一个冗余操作，对核心任务流程而言，累计起来无疑是个巨大的工作量。

Raydata Web 专业版 – 调整并定稿设计

再看看 Raydata 如何处理刚刚那个问题的？在切换到数据面板时，整个面板向右增大尺寸而不是覆盖弹窗出现，整个切换顶部 tab 操作流畅迅速，既解决了信息不够放需要滚动而导致消息获取低效的问题，同时也减少了冗余操作以提高操作效率。

EasyV 个人版 – 调整并定稿设计

EasyV 的信息面板在切换顶部 tab 时，依然是同样的尺寸，因为信息比较紧凑聚合，看似功能就挺复杂的了，因为给到小白用户看到密密麻麻的信息，可能会造成上手成本较高的风险。毕竟信息面板本身就是比较复杂且常用的功能，所以刚开始接触新工具具有陌生感是正常的，EasyV 的做法是在样式 tab 下的组件标题旁边加了查看教程的跳转链接，通过提供就近帮助，让小白用户快速上手，减少认知卡点，流畅完成核心任务。

森大屏基础版 – 调整并定稿设计

森大屏和上面提到的 EasyV 类似，不过它更复杂些，顶部 tab 有 4 个，功能看起来就更臃肿复杂了，其中额外增加的是「动画」，功能类似于 PPT 的进出场动画效果，个人建议可并入到「交互」中，理由是它本身也属于交互事件的一类。

结构上而言，归入「交互」逻辑说得通。重要性而言，它属于锦上添花的效果，不必展示在最重要的顶部 tab 上。信息面板还运用了混合导航，如「属性」tab 下的二级 tab 是垂直导航，优点是可以压缩面积，容纳更多信息量，缺点是增加了信息复杂度。

2. 分享导出

当完成大屏搭建后，用户需要通过在线发布或本地导出来分享给需求方或业务方查看。当然大屏调整的过程中也需要频繁用到「预览」功能来预览调整效果，因为该功能位置比较靠近「导出」功能，所以这里放在一起来讲。

DataV 企业版试用 – 分享导出

DataV 把「发布大屏」和「预览大屏」功能都放在顶部任务栏的右上方区域。高频功能放在用户最易发现的位置，符合用户认知。「预览大屏」分为正常预览和调试预览，可能是为了信息降噪，于是选择折叠在二级菜单。

Raydata Web 专业版 – 分享导出

Raydata 与 DataV 的近似，其中，「预览大屏」分为当前浏览器打开和新窗口打开的方式，可能因为右侧功能不多，直接展示出来会更方便点击。编辑器内无「发布大屏」功能，而放了「保存项目」功能，需要先保存项目后，在系统页进行发布分享。

EasyV 个人版 – 分享导出

EasyV 也与 DataV 的近似，只不过把「预览大屏」与「发布大屏」功能位置交换了。按照 Z 型设计布局角度而言，用户习惯是右上角区域阅读同行信息时，采用从右到左的顺序进行阅读。那么，「预览大屏」会被频繁使用，应和 DataV 的做法那样才合适，即左侧「发布大屏」，右侧「预览大屏」。

森大屏基础版 – 分享导出

森大屏与前面 3 款工具的做法都不同。因为顶部任务栏是类似 Win 系统的工具菜单占了一行，所以分享导出相关的功能都放在了画布顶部菜单栏，它们包括了左侧的「保存项目」，右侧的「预览大屏」和「发布大屏」。体验比较友好的是，每次未保存状态，「保存项目」的图标的右上角会有一个蓝色徽标，增强用户感知，提醒用户记得做保存操作。

3. 设计亮点

谈一谈 4 款工具的设计亮点，这些差异点你是否有关注呢？或许就是吸引用户初步接触并持续使用的地方？

之所以在后面小结的「优点」旁边补充「待改进」之处，是希望读者保持理性思考的态度，能客观综合分析，这样方便对 4 款工具产品形成一个整体认知。

① DataV 企业版试用 – 设计亮点

1）易感知原则

迁移至移动端预览

在网页端大屏的情况下，顶部任务栏有迁移至移动端功能，点击后左侧弹出抽屉，显示迁移至移动端的预览效果，顶部 tab 可切换垂直或水平等排版布局。这个功能可以让用户更易感知到调整后的效果，减少用户的理解成本，尤其是面对需求方情况下，可大大减少沟通成本。

移动端适配不同机型

在调整并定稿设计的环节中，我们需要用到大屏预览功能。预览移动端的大屏时，DataV 设计了不同机型让用户选择，提供的常用机型可让用户预览大屏效果时体验更友好。假设只做了一个默认机型的适配，那么用户看到的效果可能就会被裁剪了一部分，或者一部分数据太小或太大等适配效果不合适的问题。

2）交互操作便捷

移动端调整操作

在设计移动端大屏时，大屏观众一般是管理者角色。他们比较关心的是，快速阅读大屏的指标和图表数据，而视觉装饰则是次要的。因此工具的用户需要把关注点放在图表和布局上，而移动端的调整宽度和排序布局功能很方便。用户直接在画布右侧边缘往水平方向拖拽，即可调整移动端大屏的宽度。用户往垂直方向拖拽画布中的元素，则可以快速排序元素的顺序，从而改变整体的大屏布局。

另外，移动端大屏编辑过程中，大屏高度是自适应的，也就是说，画布有多少元素，它就能手动给你撑开多少高度，用户无需在画布下方边缘往垂直方向反复拖拽，减少冗余操作以提高调整效率。

导出到蓝图编辑器

用户平常添加交互事件时，都要在信息面板右侧进行调整，这么做有两个不好的地方，一是面板区域小导致不好操作，二是交互逻辑不够直观。蓝图功能可解决刚刚提到的不足。当用户专注在添加交互事件时，希望条理清晰，目标明确，如果能像流程图那样把整个交互过程展示出来，那么既直观，也方便调整。打个比喻，就像是早期网页设计软件 Dreamweaver，可拆分设计视图和代码视图。

另外，UE 虚幻引擎常常也运用在本地部署的大屏设计中。使用 UE 虚幻引擎设计游戏交互时，也是分为两种方式，用蓝图来拉线或者用代码来编程来添加交互事件。可见蓝图功能对于添加交互逻辑而言能极大提高效率，它让编程小白无需编程即可添加交互，它也帮助技术工程师辅助排查交互错误或代码缺陷。

3）提高检索效率

搜索配置

DataV 在信息面板搜索配置这个地方做得很好，信息获取效率倍增。一般情况下，一个组件的配置数量是十分多的，因此，对配置不熟的用户想要找到对应的配置项相对比较难，效率比较慢。而搜索配置这个功能不仅可以搜到当前组件的配置项，而且可以定位到目标位置，十分方便。

4）降低学习成本

智能识图创建大屏

前面提到过 DataV 有 3 种创建大屏的方式，其中智能识图创建大屏降低了用户的上手成本和使用门槛。对用户而言，这类智能化的功能，确实可降低用户的学习成本。

组件文档教程

对于小白用户，组件不会使用时会产生焦虑的负面情绪。而 EasyV 在信息面板中的组件标题旁边放入文档教程入口，降低了用户的学习成本。还有，就近提供帮助，用户可高效获取信息，更易找到教程入口。

系列视频教程

无需在工具外，DataV 就可直接点击视频教程来观看，而另外 3 个竞品的做法通常是专门去官网的教程中心或 B 站个人主页才能观看，跳转和搜索比较麻烦。对比下来，显然 DataV 的做法更方便用户找到并观看视频教程，用户体感是寻找教程不迷路、不费劲。

小结 1

优点：

功能模块

1. 有 AI 制图功能，方便快速设计大屏原型；
2. 有蓝图编辑功能，方便添加交互事件；

引导提示

1. 蓝图编辑器进入时有引导提示，降低学习成本；
2. 选中组件后配置面板有教程入口，降低学习成本;

交互视觉

1. 编辑器面板能最大化隐藏，有效利用有限空间；
2. 可框选操作，且框选组件时下方预览窗会自动缩小体验很好；
3. 产品设计语言贴近科幻酷炫风格，尤其是系统页的 tab 栏目的扫光效果和顶部 banner 轮播图，全局删除提示的渐变顶部线条、警告三角形图标设计；

交互操作

1. 画布编辑器和蓝图编辑器模式的交互易切换；
2. 有快捷拷贝/粘贴组件样式功能，方便复用；
3. 双击画布的参考线可删除，操作便捷；
4. 删除高频操作可按 del 后按 enter 直接删除；
5. 移动端编辑器有“辅助框”显示的开关，方便布局操作；
6. 复杂蓝图编辑器支持单选和框选模式，点选模式按住 comand 照样可多选；
7. 详情设置面板中的搜索配置功能，搜索结果可直接调整且可定位当前配置；

待改进：

引导提示

1. 删除组件提示的文案过于臃肿；

交互视觉

1. 删除组件提示的文案过于臃肿；
2. 配置面板内部分字段标题同时出现两种气泡提示，不一致导致易误读信息；

交互操作

1. 全选操作快捷键缺乏；
2. 至多退一步，操作记录步数太少；
3. 一键清空参考线功能缺乏；
4. 主动保存按钮缺乏；
5. 主题模板素材缺乏；
6. 点选激活后才可拖拽组件，高频操作冗余；
7. 大屏常用推荐尺寸功能缺乏；
8. 编辑页内左上角无法返回首页；
9. 编辑器中无法修改项目名称；
10. 移动端大屏页面无法退一步操作；

功能加载

1. 首次进入系统页加载不出顶部 banner；

② Raydata Web 专业版 – 设计亮点

1）满足多场景需求

图表工作站

Raydata 专门在工具内置了图表编辑器，让用户更高效的定制化自己的图表样式。界面结构主要分为 4 个模块，分别是「图表选择」「图表配置」「数据编辑和代码编辑」「效果预览」。

图表工作站还可以把图表的数据也录入进来，那么这样做的好处是什么呢？当然是更高效地完成下一步大屏设计的主流程任务，用户只需要把设计好的图表导入到大屏画布中并排版好即可。数据编辑方式提供了 2 种，即数据编辑和代码编辑，用户既可用 Excel 表格的方式录入数据，也可用代码编辑的方式来录入数据，适合非开发者和开发者不同角色倾向的使用场景，其中表格的方式更方便用户做批量修改。

这个图表工作站也相当于把核心任务流程进行了拆解，用户更好的分工执行任务。还有，设计完成的定制图表，很方便用户高效复用。

场景工作站

不仅是图表工作站，Raydata 还内置了场景工作站，它能高效定制三维场景。使用过 After effects 的插件 E3D，或许会感觉界面很熟悉。界面结构主要分为 6 个模块，分别是「节点列表」「检查窗口」「材质设置」「资源库」「场景」「场景工具栏」。

场景工作站方便用户高度定制化自己的模型。用户可以上传模型，导入场景中，就可得到 Raydata 视觉风格的的模型场景了，因为内置的材质、贴图、背景天空的效果都是十分独特的。

2）交互操作便捷

给 3d 地球和地图添加飞线

撒点打标的交互易理解易操作。在场景层中，选中顶部任务栏「标记」的信息标记，拖入场景中，鼠标多次点击即可在地图上打标。同理，顶部任务栏「绘制」操作一致，很方便为 3d 地球或地图添加飞线。

3）功能灵活个性化

字体选择器

一个好的大屏必定是恰到好处的用到适合的字体，因此，字体为何重要无需多言。Raydata 内置了很多字体样式，包括中文、英文、数字，都可免费商用。字体选择器提供了搜索功能，字体数量比较多情况下，信息获取依然高效。另外，在系统页用户可自行上传字体使用。

小结 2

优点：

功能模块

1. 有图表工作站，方便制作图表；
2. 有模型场景工作站，方便制作场景；

交互视觉

1. 图表样式有独有的风格，令人印象深刻，如高低饱和度配色运用，线条粗细的运用；
2. 三维模型场景的视觉效果不错且独特，如扫光、粒子动画；
3. 场景层组件的封面图易理解，所见即所得；
4. 区分「UI 层」和「场景层」，避免画布中误点其他元素，造成干扰；

交互操作

1. 撒点打标的交互易理解易操作，鼠标多次点击即可在地图上打标；
2. 调整静态「数据」有表格编辑方式，方便批量修改；

待改进：

引导提示

1. 缺少引导导致找不到场景图层、资源库；
2. 官方模板案例难找到；
3. 场景工作站的“透明度”与大屏编辑页的“不透明度”文案不统一；

交互视觉

1. 隐藏操作后仍然能看到半隐藏的图表组件，容易误读信息导致误操作，以为可调整；
2. 资源库部分封面展示过大，有点浪费空间；
3. 画布无显隐参考线，易造成信息干扰；

交互操作

1. 无法在画布进行框选操作；
2. 全屏操作设置的简易导航、标尺点击后无法用；
3. 无法删除单条参考线，只能全部删除；
4. 字体初始为“系统默认”，选择其他字体后无恢复还原“系统默认”选项；
5. 编辑页内左上角无法返回首页；
6. 画布右下角无预览窗，不易了解画布全貌；

功能加载

1. 3D 场景加载时比较慢，而加载完成后交互顺畅；

3）EasyV 个人版 – 设计亮点

① 降低设计门槛

丰富的素材资源社区

EasyV 有着成熟的素材资源社区，降低设计门槛，而且用户积极参与创作，促进生产更多素材模板。

丰富的主题资源

资源库的素材分为主题资源和设计素材，其中 2D 素材资源较多，面板上方有搜索功能，方便用户快速定位目标素材。

2）交互操作便捷

拖拽图层边栏宽度

编辑器内的图层面板可通过拖拽右侧边缘来调整边栏宽度。当用户使用小屏显示器时，或是设计大屏过程中觉得窗口太小时，那么就可以把编辑器中次重要的图层面板缩小面积，让用户专注在画布区域有更大面积来设计大屏。

3）降低学习成本

组件文档教程

同 DataV，EasyV 也在信息面板提供了组件文档教程入口，不赘述。

小结 3

优点：

功能模块

1. 有成熟的素材资源社区，降低设计门槛，而且用户积极参与创作，促进生产更多素材模板；

引导提示

1. 选中组件后配置面板有教程入口，降低学习成本；
2. 下方缩放输入负数时，会变为 1%，异常状态交互细节处理得好；

交互视觉

1. 2D 资源素材丰富，降低设计门槛；
2. 编辑页内左上方双击标题即可为大屏项目重命名；
3. 编辑页内左上角点击按钮可返回首页，方便跳转；
4. 图层面板右侧可拖拽边栏宽度；
5. 调整静态「数据」有表格编辑方式，方便批量修改；

待改进：

功能模块

1. 文本样式的行距设置了也不管用；

交互视觉

1. 回收站内的元素图标与文件夹图标放一起有点违和；

交互操作

1. 组件库缺乏就近搜索，虽然有全局搜索，但交互关联度比较弱，而资源库却有就近搜索；
2. 在资源库中，通过拖拽的方式无法添加资源，只能点击，并且与组件库添加素材的鼠标手势不统一；

④ 森大屏基础版 – 设计亮点

1）易感知原则

保存图标徽标状态

未保存状态会在保存图标右上角出现小圆点徽标，提醒用户记得保存操作。当保存之后，小圆点才会从保存按钮。徽标的交互状态可以增强用户对保存状态的感知。

2）交互操作便捷

官方模板快速布局大屏

森大屏提供了官方模板给用户使用，并且有「布局块」组件，它相当于一个容器，作用是确定好了位置和尺寸，只需要把组件拖拽进「布局块」组件里就会被自动匹配尺寸，撑满整个容器，方便用户快速布局大屏。

三维场景预置滤镜效果

对于不同需求的大屏效果，三维场景也需注意匹配整体大屏的风格，可以快速修改三维场景的滤镜功能就能很高效地完成需求。蓝色主题？青色主题？白天？夜晚？一键即可换肤。

3）降低学习成本

组件文档教程

不同其他竞品，森大屏未在信息面板提供组件文档教程入口，但在官网能找到森大屏的使用教程。

小结 4

优点：

功能模块

1. 有蓝图编辑功能，方便添加交互事件；
2. 有代码二开功能，方便技术工程师组件做定制设计；

引导提示

1. 未保存状态会在保存图标右上角出现小圆点徽标，提醒用户记得保存操作；

交互视觉

1. 右侧组件的配置面板使用混合导航菜单，操作效率更高；
2. 同一编辑器内，可编辑多张「图层」（即大屏页面），且区分 「3D 图层」和「图层」，更精准操作；
3. 交互操作
4. 三维场景模板有预置滤镜，方便快速预留效果；
5. 顶部菜单与电脑端布局一致，遵循用户习惯，降低学习成本；
6. 调整静态「数据」有表格编辑方式，方便批量修改；
7. 有「布局块」组件，且配有官方布局模板，方便快速布局大屏；

待改进：

引导提示

1. 「大纲」相对于「图层」的文案更难理解；
2. 左下角的「大纲」图层功能的位置比较难找到；
3. 「图层」实际是大屏项目的多个页面，用「图层」文案易误解信息，而「大纲」才是「图层」；

交互视觉

1. logo 与编辑器内的主题色不一致，logo 为绿，主题色为蓝；
2. 在暗色风格编辑器的场景下，「模型库」的资源封面图使用了浅色底色，视觉比较突兀；

功能加载

1. 3D 场景加载时比较慢；

4. 其他

① 插画图标设计

DataV 的情感化设计

DataV 的主插画图标始终以冷色调为主，扁平且光感强，足够吸引用户注意到它们。而一些表单场景的插画图标则选用扁平简约的风格，整合后去看，样式风格不够统一，比如加载的样式就有 2 种：DataV 的 logo 和 DNA 螺旋结构。扁平图标的主色有的用偏青的蓝，有的用偏深的蓝。

情感化设计当然不仅是减少负面情绪和加深品牌印象，除此之外，主插画图标还提高了用户获许信息的效率，第一眼能关注到它们，调动起专注的情绪状态，也有的图标比如表单页的图标，突出功能性，用户可通过图形快速识别该视觉所传达到信息含义，提升信息识别效率。

Raydata 的情感化设计

对比 DataV 来看，Raydata 的缺省态图标风格十分统一，都是形状较方正、偏冷的中性色、扁平微渐变风格，表现看起来精致而不失细节。小图标用到了扁平加投影的风格，增强立体感。

比较特别的是，大部分图标使用了中性色，放在实际界面中存在感比较低，起到视觉点缀作用，这也正是它们存在的意义，不过分干扰用户视觉，信息降噪，符合 Raydata 产品的设计语言，相比 DataV，Raydata 是简约与柔和一体。

EasyV 的情感化设计

EasyV 的部分缺省态图标配色上比较突出，有点且有用到正视图也用到等距视图，视觉上稍显突兀且杂乱。也有部分缺省态图标用到较暗的中性色，主要起到缓解用户负面情绪而不过分突出视觉，在工具类产品定位中这样的做法或许比较合适。

森大屏的情感化设计

森大屏的系统页和编辑器页的风格不够统一，缺省态图标大部分是重复的，站在技术开发角度而言，可以节省素材缓存资源，站在视觉体验角度而言，则比较单调和随意，也许当前产品阶段不需把太多精力花在情感化设计上，而放在更重要的产品规划上。

值得一提的是，加载的动态图标是一颗绿色小树开枝散叶，具有趣味性，减少用户负面情绪，同时明确了森大屏的“森”的概念和加深了品牌印象。

② 弹窗文案设计

DataV 的弹窗文案设计

DataV 的部分删除弹窗文案略显重复琐碎，比如在一些选中较多数据的删除场景下，用户通过多选的方式选择 15 个组件，那么点击删除会弹出删除弹窗，弹窗的文案会写着“XX 组件、XX 组件、XX 组件等 X 个组件”的一大串文字，看着就感觉很复杂且低效。用户不需要关注罗列出多少个组件，不必浪费时间阅读一大串文字，当前需要的是立即马上给我删掉它。这不是一个高危警告，只需了解概况即可，无需知道所有琐碎信息，因为即使误删了组件，也照样可以撤销，做回退操作。

因为文字多且密集的时候，用户的阅读效率就会降低。尝试对 DataV 更新组件弹窗的文案排版进行了修改，下方左右图是修改前后对比。修改前的文案是一堆聚在一起的句子，缺少标题和分点，信息获取低效。修改后的文案拆分标题，有利于用户快速识别一段长文案的核心主题是什么。通过分点的方法，让用户明确阅读顺序，哪些是最重要的，哪些次之，哪些是辅助信息。

下面对 1 个版本不支持的弹窗和 3 个删除弹窗也尝试修改，通过拆分标题的方式，并且视觉上加大字号和加粗字重，拉开信息主次关系，提高信息识别效率。

Raydata 的弹窗文案设计

Raydata 弹窗文案没有太大问题，或许视觉样式上不太统一和易用。

尝试对新建项目的弹窗进行调整，在输入项目标识码的输入框下方，如果出现警告文案，一般用户习惯是从左往右阅读信息的，而且当前的信息排版是属于 F 型布局，意思即眼动顺序是先水平方向从左到右扫视，再从左侧往垂直向下的扫视下一行。那么“标识码不能为空”就需要对齐在输入框左下方，而不是右下方，这样做左侧往垂直向下的扫视可以更快地获取到信息，让用户的信息获取效率更高一些。

下面对 2 个删除弹窗也尝试修改，同 DataV 一样，通过拆分标题的方式，并且视觉上样式进行风格统一，加大字号和加粗字重，拉开信息主次关系，提高信息识别效率。

EasyV 的弹窗文案设计

EasyV 弹窗文案未发现有问题之处，因为拆分了标题，并且重要信息也进行高亮处理，这样做信息识别效率高些。

森大屏的弹窗文案设计

森大屏的弹窗样式和文案都不太统一。尤其是文案方面，比如有的弹窗文案标题还写了无意义的内容“信息”，再比如“确定删除所选项目”这个疑问句是否感觉缺少一个“？”标点符号呢？再比如弹窗的陈述句文案是否有必要加“。”句号呢？

尝试对购买成功的弹窗进行修改，换一个顶部状态栏的样式，也是森大屏的组件样式中提取的，这样即可言简意赅的把提示展示出来。因为这个结果提示只起到一个持续通知的作用，不需要做决策，所以把“取消”删除掉，“确定”按钮作用不大，也可删掉，剩余一个关闭按钮即可，购买成功的结果提示可一直持续展示，直到用户跳转第三方平台完成购买后，回到此界面才可手动点击关闭。

5. 体验总结

体验了 4 款可视化大屏搭建工具，得出体验总结。观点仅代表个人，且具有比较强的主观性。4 款工具各有优势且都在持续迭代，认为无高低好坏之分，而是放在推荐场景中，可以更好的发挥其作用。

DataV 企业版试用

优势：智能识图高效、蓝图编辑直观、BI 分析组件方便

推荐场景：网页端和移动端适配的大屏

Raydata Web 专业版

优势：图表和模型设计风格独特、精准

推荐场景：偏向设计 3D 场景为主的大屏

EasyV 个人版

优势：海量大屏模板、高质量主题套件

推荐场景：偏向 2D 风格的设计，较少的 3D 场景

森大屏基础版

优势：工具链生态完善、蓝图编辑直观

推荐场景：园区、城市、展厅、拓扑等复合型大屏

五、探索思考

通过发散思维，大胆联想，探索思考可视化大屏工具的未来迭代和设计价值。

1. 未来迭代

① 多端语音交互

手机和平板端通过输入文字或语音指令可以控制大屏数据的展示，这一功能市面上或许已有厂家已实现，如何将这一功能充分影响人们的日常交互习惯，这还待技术不断革新，不断优化功能，借助 AI 助手，让机器更懂人类，在未来，也许还没等你开口，你最关注的大屏数据早已呈现在你眼前。

如今，利用数字人形象可以把多端语音交互功能，更生动地展示给观众。

② 多人实时协同

近年来，Figma 成热门设计生产力工具后，越来越强调多人在线实时协同主题，而可视化大屏工具如今由于技术壁垒仍旧无法进行多人在线实时协同，转而使用编辑锁（允许部分用户进行编辑，其他用户则无法编辑）来缓解当前多人协同需求。

期望未来迭代，能够像 Figma 一样做到云端实时保存，多人实时协同，提高生产效率。

③ AI 智能创作

如 2023 年比较火的 AI 的智能工具如 Midjourney/ChatGPT/Galileo AI，可通过与 AI 对话，让 AI 解决你的需求。

当你有一个可视化大屏需求的时候，就可以命令 AI 按照设计师的需求帮助设计师来创作可视化大屏，而像你这种职业就被称作 AI 训练师。

AI 智能作图难点还在于 AI 训练师本身的想象力是否足够丰富，要不断尝试关键词，不断对 AI 训练优化，让 AI 更聪明，更智能。

④ AR/VR 沉浸设计

在元宇宙中，设计师通过 VR 设备进入沉浸式的世界中，将图表变为三维化，大屏也是立体空间，支持多人在虚拟办公空间中自由协作，人们可以用 AR 技术将可视化大屏空间投射在现实世界中展示。

像《我的世界》拼乐高积木一样，设计师在元宇宙中亲自搭建可视化大屏空间，此时数据被真实的具象化，感觉身临其境，设计乐在其中。

2. 设计价值

① 赋能业务

在可视化行业火热趋势下，设计师借助可视化工具能为业务赋能，间接推动商业发展进步，越来越多的出海设计，这是企业取得的成绩，也是民族的骄傲，这体现设计师个人的职业价值。

② 思维革新

随着人工智能趋势发展，AI 能替代设计师大部分工作量，于是，设计师迎来更高的挑战，进行思维革新，用大胆的创造力借助 AI 设计出更好用、好看、惊喜的设计，体现出设计师群体的创造价值。

③ 回归社会

遥远的未来或者是不久的将来，设计的尽头是什么？在数智化时代中，换句话说是科技高度发达的时代，我们最终仍是以人为本，服务人，传递爱，用心做设计，做有温度的设计，回报社会，带领人们过上更美好的生活，这体现出整个设计行业的社会价值。

参考文献

* 部分资料来源网络，若有疑问，联系侵删

1. 腾讯数字孪生实验室 – B站主页：https://space.bilibili.com/525916779
2. 简立方 -《2023 年可视化大屏现状与趋势分析报告》：https://research.tencent.com/report?id=BO6
3. 百度百科 – ChatGPT：https://baike.baidu.com/item/ChatGPT?fromModule=lemma_search-box