可视化大屏搭建工具调研探索分享（待在屏幕里2）

文章目录

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

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

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

森大屏基础版 – 组件库

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

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

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

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

4.1.3.2 图层

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

4.1.4、调整并定稿设计

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

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

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

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

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

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

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

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

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

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

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

4.2 分享导出

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

DataV企业版试用 – 分享导出

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

Raydata Web专业版 – 分享导出

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

EasyV个人版 – 分享导出

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

森大屏基础版 – 分享导出

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

4.3 设计亮点

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

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

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

1、易感知原则

迁移至移动端预览

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

移动端适配不同机型

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

2、交互操作便捷

移动端调整操作

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

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

导出到蓝图编辑器

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

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

3、提高检索效率

搜索配置

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

4、降低学习成本

智能识图创建大屏

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

组件文档教程

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

系列视频教程

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

小结1

优点：

1.功能模块

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

2.引导提示

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

3.交互视觉

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

4.交互操作

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

待改进：

1. 引导提示

2.交互视觉

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

3.交互操作

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

4. 功能加载

4.3.2 Raydata Web专业版 – 设计亮点

1、满足多场景需求

图表工作站

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

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

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

场景工作站

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

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

2、交互操作便捷

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

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

3、功能灵活个性化

字体选择器

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

小结2

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

2.交互视觉

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

3.交互操作

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

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

2. 交互视觉

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

3. 交互操作

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

4.功能加载

4.3.3、EasyV个人版 – 设计亮点

1、降低设计门槛

丰富的素材资源社区

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

丰富的主题资源

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

2、交互操作便捷

拖拽图层边栏宽度

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

3、降低学习成本

组件文档教程

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

小结3

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

2 引导提示

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

3.交互视觉

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

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

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

1、易感知原则

保存图标徽标状态

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

2、交互操作便捷

官方模板快速布局大屏

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

三维场景预置滤镜效果

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

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

小结4

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

2.引导提示

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

3.交互视觉

右侧组件的配置面板使用混合导航菜单，操作效率更高；
同一编辑器内，可编辑多张【图层】（即大屏页面），且区分【3D 图层】和【图层】，更精准操作；

4.交互操作

三维场景模板有预置滤镜，方便快速预留效果；
顶部菜单与电脑端布局一致，遵循用户习惯，降低学习成本；
调整静态【数据】有表格编辑方式，方便批量修改；
有【布局块】组件，且配有官方布局模板，方便快速布局大屏；

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

2. 交互视觉

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

3.功能加载

4.4 其他

4.4.1 插画图标设计

DataV的情感化设计

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

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

Raydata的情感化设计

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

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

EasyV的情感化设计

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

森大屏的情感化设计

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

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

4.4.2 弹窗文案设计

DataV的弹窗文案设计

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

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

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

Raydata的弹窗文案设计

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

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

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

EasyV的弹窗文案设计

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

森大屏的弹窗文案设计

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

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