半岛体彩(中国)体育官方网站

　　使用可视化应用的方式来分析并展示庞杂数据的阿里云产品。其中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新版本的编辑器界面可切换有浅色风格，同理，浅色编辑器界面则更适合在设计浅色风格的大屏的场景。通过不同深色色阶的背景色块让每个功能模块的框架位置区分得清晰明了，另外整体配色、形状方面都遵循视觉呈现一致性，降低用户认知成本。

　　在编辑器左上方无退回系统页的返回按钮，用户只能通过切换浏览器标签页回看系统。