可视化大屏搭建工具调研探索分享（上篇）

发表时间：2024-05-01 19:22:15 来源：视频新闻

使用可视化应用的方式来分析并展示庞杂数据的阿里云产品。其中DataV企业版试用是适合刚接触DataV的新用户，轻松搭建可视化大屏，汇报、客户参观必备。而DataV数据可视化企业版是开箱即用实时数据大屏搭建工具。

专注3D数据可视化原型设计。RayData Web是B/S架构开发的网页端可视化系统搭建工具，支持在线D可视化编辑，轻松构建商业级数字孪生项目。

数字孪生，EasyV是低成本无门槛上手数据可视化大屏的工具，数据看板可视化，轻松设计高效搭建。

本次调研使用【使用者真实的体验五要素】模型方法来分析主流工具DataV企业版试用、Raydata Web专业版、EasyV个人版、森大屏基础版，主要侧重在表现层、框架层、结构层。

此处说明一下，例如本次调研的属于功能型产品，那么功能型产品的结构层侧重于交互设计，通常可用思维导图、流程图方式来说明情况。

再往上看，功能型产品的框架层侧重于信息设计、界面设计，大致模块尺寸大小、位置摆放，通常可用低保真原型、交互文档来说明情况。到了模型最顶层，不论功能型还是信息型产品的表现层都是感知设计，关注视觉如何呈现，通常运用形、色、字、质、构、动着6个维度进行整体视觉设计。

用户体验五要素来自Jesse James Garrett 的《用户体验要素》一书：战略层、范围层、结构层、框架层、表现层。

在结构层中，DataV企业版试用、Raydata Web专业版、EasyV个人版、森大屏基础版4款产品略有不同（且名称叫法不一），整理总结出共性，产品有系统页和编辑器，系统页下包括项目列表、资源管理、用户管理、帮助中心，编辑器下包括顶部导航栏、组件库、图层面板、画布区、信息面板。

DataV企业版试用分为系统页+编辑器。系统页顶部是轮播banner图，强调品牌感和打造产品差异化。

系统页最重要的包含我的可视化、我的数据、我的资产、教程，其中我的可视化包括3个创建入口，分别是PC创建、移动端创建和识图创建，使用户得到满足在不同场景的使用需求。系统页中教程层级放在一级菜单下容易被用户发现，对小白用户比较友好，快速观看视频教程。

编辑器中包含画布编辑器和蓝图编辑器。进入编辑器后，可切换画布编辑器与蓝图编辑器，放在同一层级，方便用户从画布编辑器中添加图层到蓝图编辑器中。

画布编辑器（PC和移动端基本一致）包括图层、资产列表（资产包、组件库）、工具栏、画布、页面设置、组件设置。蓝图编辑器包括导入节点、逻辑节点、工具栏、配置面板。

Raydata Web专业版分为系统页+编辑器。系统页最重要的包含工程列表、资源管理、数据管理、权限管理。因为产品定位是专业版，所以弱化了帮助手册的入口，同时编辑器中也是基于熟悉掌握工具的用户而设计的。类比于Raydata Web个人版，系统页的更多帮助入口更明显，适用于新手小白使用。

系统中的资源管理包括3D资源和2D资源，显示资源数量，以环图可视化的形式表现，系统中的权限管理也同样显示人员数量，数据统计一目了然。

编辑器中的大纲、概要与别的产品结构不同，大纲包括系统UI层（放2D）、层级（放3D）、页面（2D&3D），概要分不一样的情况而定，处于UI层时显示2D组件，处于场景层时显示3D组件。

画布编辑器包括顶部栏（基础功能、组件库）、概要、大纲、画布、页面设置，页面设置（画布设置、组件设置）。其中组件库折叠在顶部栏中，增大了编辑器中画布的占比，让用户更关注当前画布操作。

EasyV个人版分为系统页+编辑器。系统页包括我的应用、我的数据、终端交互（高级版有）、组件开发（尊享版有）、后台管理、门户管理（高级版有）、资源中心。

其中系统页的资源中心包括应用模板、设计素材、主题资源，有入口可跳往素材广场，EasyV的素材资源十分丰富，该跳转入口可以很好引导用户去使用官网设计素材，轻松搭建大屏。帮助菜单位于常驻悬浮于系统页侧边栏，其包括操作日志、帮助文档、视频教程、问答中心、版本日志，帮助菜单对新手小白比较友好，操作路径简短，方便新手查阅帮助资料。

编辑器包括任务栏（基础功能、组件、资源）、图层、画布、详情设置（页面设置、组件设置）。同Raydata Web专业版产品，其中组件库折叠在任务栏中，增大了编辑器中画布的占比，让用户更关注当前画布操作。

森大屏基础版分为系统页+编辑器。森大屏的结构和别的产品不同，由于数字孪生工具链生态比较完善，打通其他工具链入口（森工厂旗下有低代码、零代码、森大屏、森城市、森园区、森展厅、森拓扑、森数据、森模型等），所以系统页顶部导航菜单可快速切换工具。

系统页包括了个人中心、帮助手册、我的大屏、推荐大屏（模板），侧重展示推荐大屏，引导用户优先选用模板进行大屏快速搭建，生产提效。

编辑器包括大纲、工具栏、画布、画布属性、资源管理、菜单栏、资源中心、蓝图和代码二开。编辑器中与DataV不同的是，蓝图、代码与画布位于同一层级，用户可随时使用蓝图来链接交互事件，也可进行代码二次开发操作。

在框架层中，大体而言按钮、输入框等控件圆角较小，看起来比较方正，弧线的异形设计，容易体现科幻造型。在登录页中，页面布局各有差异。在编辑器中的布局大体一致，画布都位于界面中心，强调用户最关注大屏设计的画布区域。高频操作的组件库在页面的位置各有差异。

在表现层中，主要是通过形、色、字、质、构、动这6个维度来作对比分析。DataV企业版试用、Raydata Web专业版、EasyV个人版、森大屏基础版4款产品的整体视觉调性都是以暗色、科幻风格为主。登录页都选择了亮色风格界面，系统页和编辑器都是暗黑风格。部分产品品牌字体以直线为主并加入弧线和粒子元素，科幻的界面动效大多数表现在加载页面。

DataV 的登录页统一由阿里云登录页进入。以中心布局（核心面板偏右），三维模型+灰色背景+线条点缀的形式进行设计，主题色是阿里的橙色。因为DataV是阿里云旗下的产品，共用入口，所以此处没做额外的产品登录页以强调 DataV 产品一致的品牌感。

Raydata Web 登录页以中心布局的形式，无其他设计元素，只保留关键信息，同其他竞品相比略显单调。登录页的浅色风格与进入系统页和编辑器的暗黑风格，缺乏界面整体色调的一致性。界面控件主题色使用蓝紫渐变色，与系统页和编辑器的蓝色也略有差异。（可从Raychart产品使用手册发现，旧版布局为同EasyV）

EasyV 的登录页有2处触发，常规触发和资源中心触发，分别以左右布局的全页和弹窗形式进行框架设计。弹窗的形式不需额外跳转，让用户在资源中心挑选素材时能更快进行登录操作。

登录页以左右布局的形式，插图与登录模块大致各占50%，深色插图的和浅色登录模块的两个色块形成强烈视觉对比，更能吸引用户注意。

森大屏的登录页以中心布局的形式，有利于聚焦视觉，背景使用简约抽象的形状来点缀画面。灰色背景+抽象图形点缀，与浅色登录模块拉开视觉对比。按钮主题色是橙色，是因为森大屏是优锘科技森工厂旗下的产品，共用入口，所以此处没做额外的产品登录页以强调森大屏产品一致的品牌感。

顶部轮播图占整个页面四分之一左右，强调品牌感同时打造产品差异化，Banner内容为统一风格的3D模型场景+无衬线字体标题为主，一级导航边缘弧线的流光动效表现科幻酷炫风格。

一级导航栏与轮播图的重叠关系，半透的玻璃质感，仿佛是用户透过一层玻璃，打开可视化世界的大门，结合暗黑风格的界面，给用户一种加入游戏的沉浸感、跃跃欲试的冲动。纵向与横向结合的混合导航，对于后期有规划新功能而言，拓展性较强，缺点是占用面积大、交互路径长，适用于大屏项目数不多的情况下，若项目数量较多，可能有空间不够的焦虑。

我的可视化中的3个创建入口按钮使用了扁平加光感强、冷色调风格插画，引发用户注意，快速识别创建功能入口。主题色使用比较鲜艳活跃的蓝色，辅助色为青色，占用面积不多，起到丰富点缀画面的作用。设计元素的四周轮廓不做圆角处理，显得整体界面比较方正端正、硬朗严肃的印象。

左上方展示品牌Logo，清晰写明当前产品及版本，符合用户认知。品牌元素融入进顶部栏右侧头像及皇冠图标，加深品牌印象。

以侧边悬浮导航的形式使用户快速定位查找功能模块的位置，拓展性较强，以较瓷片大包小的结构，聚合了较多功能模块，如果是小分辨率屏幕的情况下，经常要鼠标轮滑来回滚动才可看到下方功能模块，导致不够灵活高效。侧边导航模块中的图标统一为形状较方正、偏冷的中性色、扁平微渐变风格。敬请期待的蓝色沙漏图标在界面中略微突兀出，缺少图标风格一致性。

界面为偏冷中性纯色，无背景装饰，同登录页只保留关键信息（如大屏项目卡片），不加过多装饰的简约风格调性保持一致。按钮主题色使用比较灰的蓝色，透出沉稳柔和的调性。设计元素的四周轮廓略微加了些圆角，同DataV硬朗的感觉则稍微缓和一些。

上方展示品牌Logo，同Raydata，不再赘述。对于创建大屏按钮而言，DataV用的是插画按钮的形式，Raydata是用卡片按钮的形式，而EasyV则用图文按钮的形式，而图文按钮的优点是占用面积少。

同DataV，选用了纵向与横向结合的混合导航，拓展性较强，不再赘述。二级导航底部使用了动态插图点缀界面，插图是不断旋转的科幻装置，角度带有透视，让扁平的整体界面附带了层次感、空间感。右侧侧边菜单的帮助图标提供给用户快捷操作，对新手小白友好。

缺省页运用情感化设计，以2.5d插图的表现形式缓解用户负面情绪，配色在深面中显得比较明显，个人认为可以适当弱化插画亮色部分。主题色使用鲜艳活跃的蓝色为主，在深色的界面中同样相对明显、突出。设计元素的四周轮廓既有全圆角，也有小圆角，界面形状统一性待加强。

左上方展示品牌Logo，同Raydata，不再赘述。由于是森工厂旗下的工具链，所以森大屏的系统页顶部栏可进行工具切换，界面左右两侧留白很多、版心小、浅色风格，让整体界面更像是一个前台官网的印象。

使用了像是混合导航的方式，用像这样表达是因为，顶部栏是工具切换栏，而侧边悬浮导航1竟然是所有工具的个人中心，侧边悬浮导航2却是当前工具森大屏的资源中心，右侧内容区是当前工具森大屏的我的大屏、推荐大屏模块。框架上有一定程度不太符合用户认知，导致引起疑惑和误解。尽管如此，配色上使用橙色（森工厂）和具体工具主题色来区分当前位置，能一定程度防止用户混淆概念，通过多次在顶部栏切换工具，可预知上面提到的导航1是指所有工具而言的，而导航2则是指当前具体工具而言。

右侧侧边菜单提供用户快速反馈的入口，简单便捷。其中侧边菜单的问号图标与顶部栏的一样，跳转链接一致，而文案却使用了常见问题和帮助中心2种，重复功能入口也许考虑的是为了增加点击，而同个界面重复堆放功能入口的合理性还有待考究。图标使用了毛玻璃和线性图标的表现手法，为界面提升质感。设计元素的四周轮廓加了小圆角，整体给人的感觉更为亲切、友好。

整体暗黑风格的界面下，能使得用户设计深色风格的可视化大屏时，保持更专注的状态。题外话，DataV新版本的编辑器界面可切换有浅色风格，同理，浅色编辑器界面则更适合在设计浅色风格的大屏的场景。通过不同深阶的背景色块让每个功能模块的框架位置区分得清晰明了，另外整体配色、形状方面都遵循视觉呈现一致性，降低用户认知成本。

在编辑器左上方无退回系统页的返回按钮，用户只能通过切换浏览器标签页回看系统页，而无法在当前页返回上一层级回到系统页，所以对于想要快速返回上层的场景下，则显得不那么便捷。顶部栏左侧的画布编辑器与蓝图编辑器选项按钮归于一组符合用户认知，可快速切换当前编辑器进行大屏视觉设计或链接交互事件。画布编辑器和蓝图编辑器的画布外区域保持视觉统一，使用了点平铺的背景与画布做出层次区分。

右侧的属性面板中展示组件的配置功能，当信息较多时，用视觉较弱的分割线区分每组的配置信息，数据之间比较紧凑，提高面积利用率。编辑器中多处的功能组使用了格式塔原则的接近性，让距离更近的功能组更有关联性，层次清晰有序，降低用户认知成本。

图标表现方式只使用了单色线性图标一种，让整体界面表现得更简洁、轻量化，忽略图标形状而让用户更多去关注功能。配色、圆角遵循视觉呈现一致性，当功能被选中时，会以蓝色背景、图标反白的方式强调该功能的状态、位置。

同DataV，暗黑风格界面，不同深浅色块背景区分功能模块，且界面左上方无退回系统页的返回按钮，不太便捷，不赘述。

大纲与概要类似于页面与图层的关系，像设计软件Figma的Page（页面）与Layer（图层），大纲与概要位于界面左侧的区分上下模块，框架从上至下摆放，符合用户认知。对于新手小白，还需额外查看教程引导才能认知大纲与概要的框架，因为此版本定位为专业版，所以弱化了帮助指引，简化界面，让专家级用户更沉浸地、不受过多干扰地使用。

组件库位于顶部，占用面积小，前面结构层提过，作用是增大了画布占比，让用户更专注设计，不赘述。

图标表现方式使用了单色面性图标和微渐变扁平投影图标，界面顶部是组件库，这些微渐变图标呼应了系统页同样使用了为渐变风风格。为了强调组件库这种用户高频操作区域，使用了更吸引用户需要注意力的微渐变扁平投影图标，而其他区域则使用单色面性图标，弱化视觉，让界面轻量化，让用户更多去关注功能。同DataV，同样使用格式塔原则的接近性，层次清晰，降低认知成本，不赘述。

配色、圆角遵循视觉呈现一致性，当功能被选中时，会以蓝色背景、图标反白的方式强调该功能的状态、位置。

与其余3款工具不同，EasyV在编辑器左上方有退回系统页的返回按钮，方便用户快速返回上层的系统页。

同Raydata，组件库位于顶部任务栏中，占用面积小，前面结构层提过，作用是增大了画布占比，让用户更专注设计，不赘述。

图标表现方式使用了单色微渐变线性图标，部分图标线细节还用半透明效果，而部分则用了不透明度渐变的方式，提升图标质感，让整体界面轻量化而不至于过于单调。配色、圆角遵循视觉呈现一致性，降低用户认知成本。

同DataV，暗黑风格界面，不同深浅色块背景区分功能模块，且界面左上方无退回系统页的返回按钮，不太便捷，不赘述。

编辑器的任务栏设计类似本地客户端软件的顶部菜单栏，通用的文件、编辑、视图、排列、图表、调试、帮助菜单都放在了顶部任务栏，符合用户交互习惯，缺点占用面积较大。

与Raydata结构一样，同样有类似设计软件Figma的Page（页面）与Layer（图层）的关系，森大屏把图层放在画布底部栏，而大纲放在组件库的左下角位置。可能考虑不占用过多面积而折叠在左下角，但缺点也很明显，层级较深，难以找到大纲中的画布元素，对新手小白不太友好。通过画布底部栏切换图层，这里图层也是分2D和3D，还可设置图层为全局图层，即预览大屏时跳转任何地方都始终显示该图层，可减少重复劳动设计。

蓝图和代码二开也位于画布底部区域，同DataV，森大屏也有蓝图功能。底部有蓝图和代码二开的切换按钮，方便用户链接交互事件和调试二改组件的时候，不完全遮挡画布，让用户更易感知当前所处位置和状态，无需来回切换页面而增加操作成本。

界面图标表现方式同DataV，只使用了单色线性图标，让整体界面表现得更简洁、轻量化，不赘述。画布外区域使用了点平铺的背景与画布做出层次区分。

上篇简述可视化行业的市场分析，了解到国家政策如《十四五大数据产业高质量发展规划》大力支持可视化行业的发展，可视化行业解决企业痛点，助力企业和事业单位进行数字化转型。随着数据可视化行业的发展，可视化报表分析工具逐渐衍生出更利于辅助分析的可视化大屏工具，随后进行桌面研究、问卷调查后，筛选出4款主流工具（DataV、Raydata、EasyV、森大屏），分别对它们的结构层、框架层和表现层进行拆解分析。

设计师在了解和体验工具型产品时，也要对其行业有一定的思考，这样更加有助于了解业务、用户和产品。下篇接着讲主流工具（DataV、Raydata、EasyV、森大屏）的功能体验，浅谈可视化行业未来的探索和思考。