随着大数据时代的来临，地图可视化作为数据呈现的重要手段，逐渐成为各行业的关键决策工具。本文将探讨地图可视化大屏UI界面设计，以期为相关领域的研究提供参考。
随着设计工具逐渐迁移到sketch上，其最基本的页面点击跳转却不能实现，只能进行静态页面展示，若设计师工作时间充足一些，或许会进行页面之间的流转箭头指示。对于那些对产品以及业务不是很了解的团队成员来说，其一直会处于懵懂状态，甚至会在众多的静态页面中迷失，大大降低了交互稿的可读性。
如果你能做出改善忠诚度的改变，那么收入也会增加。那么，可用性改进是否会提高客户忠诚度？是的，特别是在您提高可用性的感觉时。
具体内容方面，我选择了聚焦于“人”——主要探讨了人与界面、人与内容、人与人和人与品牌的交互体验——大部分话题既有宏观上的纲领，也有微观上的实现细节。这四类交互体验，下文的提及会使用简称，所以先看下简称及对应的全称。
数据可视化——把复杂的数据转化为直观的图形，让信息更容易被理解。在这个信息爆炸的时代，数据可视化已经成为商业、科技、教育等领域的必备工具。通过数据可视化，我们可以快速地发现数据中的规律、趋势和异常，从而更好地指导决策和行动。
作为UI设计师，我们不仅要关注界面的美观和易用性，更要关注如何通过数据可视化提高用户体验。本文将介绍数据可视化的重要性、技巧和案例，帮助读者更好地理解和应用数据可视化。无论您是UI设计师、数据分析师还是业务人员，相信都能从本文中获得有益的启示。
大数据可视化界面设计是将海量数据以图形化的方式呈现，以帮助用户更好地理解和分析数据。在这个领域，设计师需要充分考虑数据的特点和用户的需求，以创造出易于理解和操作的界面。本文将介绍大数据可视化界面设计的7个关键知识点，并提供相关的技巧和实践建议。
从6个方面，总结 visionOS UI 元素和尺寸设计规范｜UI设计公司
VisionOS UI 元素和尺寸设计规范总结
VisionOS是一个操作系统的用户界面（UI）设计规范，旨在为用户提供一致、直观和易用的界面体验。以下是从六个方面总结的VisionOS UI元素和尺寸设计规范：
来百度APP畅享高清图片
UI设计3天时间完成~
这个界面不难的，按照我的交互稿上个色就好了~
简单设计一下，马上给我~
再调几个颜色给我选一下~
模块先设计，颜色最后调一下也很快的~
…
熟悉吧，以上是作为UI设计师的你，几乎每天都能听到的把。拜托，就算是路边打印店，让人家帮你设计个名片，你也会问人家什么时候能做好吧。难不成设计这么好做?要不你行你上?我做不了~
慢着，我做，我做，谁让你给我发钱，给钱就是老大，要做就做吧~
于是出现了以下设计稿
常说设计是一个用户接触产品的第一道门。从应用市场的图标开始到用户下载打开app的启动页，再到用户进入app后看到的首页。难道设计师真的不考虑什么吗?真的按照产品或交互设计稿做吗。从图标在应用市场的吸引力，到用户使用app后的留存率，请问哪一个不是和UI设计师有关系！业绩好，业务好是产品的营销和自然增长率。业务差就是设计不吸引人没有感染力，嗯哼？？？
在此呼吁广大项目管理者，请给我们的设计师一些思考的时间，一些打磨设计的时间。
好了，废话不多说，进入正题。假设有一天，公司给了你足够的时间设计。你该如何思考？你要怎么不受约束的将自己的产品观融入你的设计中？从现在开始，即使产品给你的设计时间很短，你也要学着思考，学着加入自己的思维，做一个有思想的设计师。做到这一点很难，但是你必须学着这样做，跟我没关系，但对你有益。
1.学着像产品经理一样思考(THINKING LIKE PM)
产品经理是怎么思考的。产品经理是产品的CEO，手握着产品的生杀大权。考虑的会更偏像于产品的核心观。帮助用户解决什么痛点，通过什么方式解决这个痛点，怎么为公司提高赢利、如何提高转化、如何提升留存…当然你并不需要完全知道所有的东西，因为你有你自己的专长(UI设计)。
但是，必须留意的几点就是:(1)用户群体(2)相关竞品(3)主要商业模式
（1）对于用户群体的了解，你能够通过这部分用户群体找到相关的用户画像。这一点很重要（因为从你入职为UI设计师的那天开始，你的设计是帮助公司服务于用户的，并不是为了表达你崇高的艺术涵养的）。通过用户画像，你能找到这部分人的主要特征，这将会有助于你选择设计中使用的颜色、字体大小。
打个比方来说，总不能为服务于红绿色盲人群设计的产品，UI做出了绿色界面+红色按钮吧？你以为你通过颜色对比突出了按钮，实际…对吧？你可以用颜色来让界面产生差异，单不能仅依赖于颜色提升设计效果，因为并不是每个人都能精确的分辨出各种颜色。
(2)产品的竞品，对于相关竞品的研究，也是目前UI设计师设计过程中常用的一种方法。好处呢当然显而易见，竞品的颜色用取，设计风格…这些都是已经线上经过验证了的。有很多设计师是在看完竞品后恍然大悟，颜色该用啥，按钮用啥色。但这是万万不可取的。这会导致你们的产品没有任何竞争力，上线比人家晚，看着有和人家差不多。怎么打差异化的战?取其优，去其差。思考人家设计师为什么这么做，他们是怎么想的，如果我设计会设计成什么样？
（3）你必须要了解你的商业模式。作为设计师有权知道公司的基本商业模式，这也是考虑在整体设计里程里面。雾里看花管中窥豹，你永远看不到你所设计的产品本质。再打个比方：假设你的产品是通过用户购买相关服务进行盈利的，那么设计前你得思考整个产品其实是需要安全、信任、服务作为设计主旨，其中突出“服务”作为亮点，需要传递给用户一种安全可靠的情感，最终引导消费者完成支付购买。
2.学着像交互设计师一样思考(THINKING LIKE UE)
用户体验、使用场景、信息优先级、转场、使用习惯…对于交互设计师来说这是多么熟悉的名词。确实，交互设计师考虑更多的是怎么让用户在app上操作的爽了，最符合用户的操作习惯，将产品经理传达下来的商业模式/逻辑变为流程的形式引导用户进行使用。通过数据的分析，不断优化上线后产品的相关体验。
作为设计师的你，怎么像交互设计师一样思考呢?
(1)用户体验=颜色是否和谐。颜色的使用，之前已经说过了，考虑用户群体的基础上，看你颜色的配比是否让人舒适，是否准确的传递出了产品想给用户的那种感觉。产品正式设计前，通常会进行所谓的风格探索阶段。是允许设计师根据提供的用户群体发挥自己的创意进行设计的。当找到那种适合的颜色搭配后，接下去的设计会显得游刃有余。但是目前很多公司都是略过探索这一步的。为追求产品的快速上线，基本都是领导找竞品给颜色，设计师根据这个颜色（衍生色）进行设计。缺乏用色的专业性。
(2)使用场景=颜色使用是否符合用户使用产品时的场景。这个就比较好理解了，产品到底是晚上用的还是白天用的，到底是地铁上用的还是书房里用户。不同的使用场景在设计时也应该考虑在内。例如，晚上使用的产品颜色一定会偏暗一些、白天热闹场所使用的产品一定会是偏简洁、书房使用的产品一定是偏温和…
(3)信息优先级=如何通过设计的方法(大小、位置、形状、颜色、动画)突出产品重点。通过对比、突出等手法，将重要信息直接展示给用户。做到简单直接有效。
(4)转场=如何通过动效的方式便于用户理解逻辑跳转。这一点特别是在相对复杂的产品的时候较为常用，例如层级相对比较深，则会通过转场的引导告知用户从哪来到哪儿去。引领用户使用你的产品，不至于在产品使用过程中迷失。
(5)使用习惯=相关设计规范。用户长时间使用完你的产品后，已养成了使用习惯。知道哪个位置是重要的内容。如果用户已经建立了产品工作原理的心理模型，他们可能会有非常强烈的观点，认为某些东西就应该在某些特定的位置，通常设计师可以利用这一特点来引导用户发现重要功能。
3.学着像用户一样思考(THINKING LIKE UESR)
（1）用户在使用产品的时候，最优考虑的是，这个产品是不是能帮我解决我的问题(赚钱、记账、提醒…)，产品的核心功能一定是用户最先考虑的。
（2）你的设计是不是好看，他会考虑说，这个东西怎么看着这么low，是不是公司不正规啊?前文也提到了，每个产品都有自己的目标人群，那么研究这部分目标人群的相关喜好，通过设计的方式将其重现给用户。
（3）这个产品用起来爽不爽，怎么这么卡顿、怎么看起来能点实际不能点、怎么功能这么多都没用、怎么…
当然用户有千千万万，你不可能完全都能像所有用户那样思考，满足大部分用户就可以了。
4.学着像你自己一样思考(THINKING LIKE YOURSELF)
是否在为产品设计的过程中，已经忘了像自己一样思考了。满脑子都是产品经理想要什么样的，用户想要什么样的。这也会让你丧失自己的思考能力。
(1)学着像自己一样思考，不是说按照自己的喜好来，而是你在设计的过程中是否偏离了自己的设计观。对于明显是错误的设计，你选择接受。
(2)以调研或用户研究结果为准则，完全丧失你自己对这个产品应有的样子的判断。做个半理性半感性的设计师，会让你的设计既符合用户口味，又有自己的韵味。
总结
记住设计产品的人是你，对产品美化体验的是你，如果你的设计和使用不再适用于用户，他们可以毫不留情的转向其他产品，而作为设计师的你不能这么做。用户不知道你的设计是怎么来的是怎么想的，但是你了解这一点。用户不知道你是通过调研或研究得出他们的相关喜好最终选择了这样的设计，但是你很清楚。真正受制于产品设计的人是你，因此要确保它仍是你值得付出，引以为傲的东西。
分享此文一切功德，皆悉回向给文章原作者及众读者.
免责声明：蓝蓝设计尊重原作者，文章的版权归原作者。如涉及版权问题，请及时与我们取得联系，我们立即更正或删除。
蓝蓝设计( www.lanlanwork.com )是一家专注而深入的界面设计公司，为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 、平面设计服务、UI设计公司、界面设计公司、UI设计服务公司、数据可视化设计公司、UI交互设计公司、高端网站设计公司、UI咨询、用户体验公司、软件界面设计公司
一、前言 —— 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 更多玩法
五、探索思考 —— 5.1 未来迭代、5.2 设计价值
阅读提醒
1、文章上篇约10300字，阅读时长约20分钟。全文主要分享本人对当下主流可视化大屏搭建工具的调研分析，浅谈对可视化行业的探索思考。由于篇幅有限，阅读体验更佳，故分为上下两篇，上篇简述可视化行业的市场分析，拆解分析主流工具（DataV、Raydata、EasyV、森大屏）的结构层、框架层和表现层。下篇接着讲主流工具（DataV、Raydata、EasyV、森大屏）的功能体验，浅谈可视化行业未来的探索和思考。
2、文中的拆解分析部分，多款工具可能存在较多重复观点，由于篇幅有限，故不再赘述。
适合读者
B端UI设计师、产品经理，可视化行业相关从业者及爱好者。
调研时间
2022年9~10月
调研方式
桌面研究、问卷调查
首先，本次分享仅作为个人学习交流，文章观点仅代表个人。目前比较少有可视化工具的产品分析，本次通过调研，希望了解更多可视化大屏工具的背景、知识，也希望能通过文章的形式，达成两个分享目的：一、提升自身的复盘总结能力，鼓励将知识沉淀后输出分享；二、借此机会与更多行业相关者分享交流学习。
数据可视化
关于数据视觉表现形式的科学技术研究。
数据可视化平合
它是大数据内在价值的最终呈现手殷，它利用各类图表、趋势图、视觉效果对数据进行分析并展现，帮助用户发现内在规律、发掘深度规律、指导经营决策。
大屏搭建工具
利用简单拖拉拽、低代码开发等方式，帮助非专业工程师快速实现炫酷大屏的数据可视化大屏效果的互联网工具类产品。业务场景主要有行业可视化、智能终端、模拟演示、数据统计分析。
在2011年左右，国内帆软公司研发简单的可视化产品，起名“FineBI”，解决了用户个性化的可视化分析的需求。随着技术发展和行业趋势发展，在满足智能分析报表的基础上，又迎来了更高的可视化大屏的挑战，国内如光启元Raydata、阿里DataV等可视化大屏工具开始出现，各大厂商如京东、百度、网易有数等纷纷踏上可视化赛道，随着近年的政策支持企业数字化转型的浪潮下，可视化行业得以快速发展成熟，为企事业单位解决了一个又一个可视化分析难题……
本次调研经过桌面研究，分析出近年来可视化行业背景和市场现状。
从政策、经济、社会、技术这四个方面，分析数据可视化行业的背景，得出以下结论：
一、在政策方面，数据可视化行业受到政策扶持；
二、在经济方面，IT产业体系扩大且成熟；
三、在社会方面，数据可视化解决企业痛点，机会点在政企和医疗行业；
四、在技术方面，企业通过数据可视化进行精细化管理成为现实。
* PEST分析法 是对宏观环境进行分析，以便找到机会，认清威胁与挑战。所谓PEST，P是政治(Polotics)，E是经济(Economy）, S是社会(Society），T是技术(Technology)。这种方法就是将这4个元素分别写在4个格子中，并罗列出这4个元素相关联的与产品有关的环境因素，最后投票选出3~5个点子作为PEST分析的结果。
P政策
中国相继出台多项政策（如《“十四五”大数据产业发展规划》）重点扶持数据采集、数据安全、数据处理、数据存储及大数据在产业端的应用等方面的快速提升，进一步利好数据可视化平台等相关细分产业的快速发展。
制定5个发展目标、6大主要任务，明确大数据产业将步入“集成创新、快速发展、深度应用、结构优化"的高质量发展新阶段设置数据治理能力提升、重点标准研制及应用推广工业大数据价值提升、行业大数据开发利用、企业主体发展能级跃升、数据安全铸盾六个专项行动。（参考来源：头豹研究院）
E经济
2021全年国内生产总值突破110万亿，GDP达114万亿元，按不变价格计算，比上年增长8.1%，两年平均增长5.1%。
我国IT产业在经历了三十多年的发展后，已经基本形成了产业规模庞大、专业门类齐全的IT产业体系，2020年我国IT支出达2.9万亿人民币。
在应用软件领域百花齐放，2021年上半年我国软件业完成软件业务收入44198亿元，同比增长23.2%；全行业实现利润总额4999亿元，同比增长13.6%。另外，对于云计算、大数据、物联网、人工智能等新一代技术，我国也由单点向融合互动不断演进。（参考来源：头豹研究院）
S社会
数据可视化可有效解决企事业单位在传统数据分析的痛点，降低了企业数据分析成本，助力企业在技术层、业务层、管理层及决策层等层面的决策能力。
受疫情影响，政务及医疗领域对公共卫生等等公共领域掌控力度加强，因此，中国数据可视化未来市场增长点将主要集中在政务及医疗卫生领域。（参考来源：头豹研究院）
T技术
伴随着互联网、物联网快速发展，中国数据量持续增加，通过对数据的可视化处理及分析，企业端对日常精细化管理成为现实。
过去5年间，中国数据产生量快速增加ie中2017年的6ZB快速增加至2021年的16ZB。预计未来5年中国数据产生量将继续增加，有望于2026年达到62ZB。（参考来源：头豹研究院）
分为市场阶段和市场规模，说明当前数据可视化行业的市场现状。结论如下：
一、国内数据可视化平台市场尚处于发展期，潜在市场容量非常巨大，前景广阔；
二、预计未来5年国内数据可视化平台市场规模快速增加，复合增长率达32.5%。
市场阶段
国外可视化展现平台行业起步较早，市场相对成熟，消费者认可较高，而国内可视化展现平台行业市场还处于发展期，虽然2012年呈现出小爆发式增长，但市场尚不成熟，还有待于培育，然而国内人口基数大，随着国内经济的发展，人民生活水平的提高，收入的增长，对精神生活方面的消费也不断增加，国内潜在市场容量非常巨大，前景广阔，因此，可视化展现平台行业的发展将逐渐向本土化转移。
当前，中国数据可视化平台行业尚处于发展早期，36.8%投融资事件主要发生在早期A轮阶段，行业尚具有较大发展潜力。从地域分布情况来看，中国数据可视化企业主要分布于广东省、北京市、上海市、江苏省及浙江省等区域，约占总体的93.5%。当前，中国数据可视化行业投融资较为活跃。其中约36.8%的企业处于A轮融资阶段，2家企业已于新三板挂板，其中，观远数据于2022年2月完成C轮融资，共计2.8亿元。（参考来源：头豹研究院）
市场规模
过去5年间，中国数据可视化平合市场快速增加，由2017年的13.2亿元快速增加至2021年的43.8亿元，复合增长率达27.1%。预计未来五年中国数据可视化平台市场年复合增长率有望达到32.5%。（参考来源：头豹研究院）
根据上面的行业背景和市场现状，从政策扶持、经济增长、社会机会点增加、技术革新、市场阶段成熟、市场规模扩大方面都是正向推动着可视化行业的快速发展，于是，市面上逐渐出现了很多数据可视化大屏搭建工具，目的是有效解决企事业单位在传统数据分析的痛点，助力企事业单位快速进行数字化转型，整合数据、提高数据展示效率及辅助管理决策。
经桌面研究、问卷调查后，发现并整理出市面主流的数据可视化大屏搭建工具梯度说明。以工具满意度、行业普及率、用户量几个维度来划分梯度：
第一梯队有阿里云DataV、腾讯RayData、袋鼠云易知微；
第二梯队有腾讯Banber（现改名RayData Report）、山海鲸可视化、森工厂森大屏、51WORLD、华为云DLV；
第三梯队有微兔可视化、ByteV中台等。
*本次未归入调研范围内：京东、百度、网易有数等厂商可视化产品，以及一些开发大佬的开源大屏工具
*使用腾讯问卷自发进行问卷调查，主要渠道为微信群，有效样本量较少，数据仅供参考
第一梯度的阿里云DataV、腾讯RayData、袋鼠云易知微的工具满意度、行业普及率、用户量综合评分较高，还有第二梯度的森工厂森大屏对比其他竞品产来说，产品形式不同，后面将以阿里云DataV、腾讯RayData、袋鼠云易知微、森工厂森大屏这4个工具产品来进行体验分析。
调研版本：*阿里云DataV - 企业版试用 - V6.2； 腾讯RayData - Web版 - V2.6.0； 袋鼠云易知微EasyV - 个人版 - V5.1.0； 森工厂森大屏 - V2.10.11 。
*EasyV2022年12月上新了「节点管理」功能（类似DataV的「蓝图」功能) 会与本次调研版本有一定差异。
*由于阿里云DataV在调研后2023年UI进行较大更新，所以会与本次调研版本有一定差异，更新日志传送门：https://developer.aliyun.com/article/1127824?spm=5176.14082271.J_5834642020.1.42c74dcf64Y3FZ#slide-12
阿里云DataV
a.产品简介
使用可视化应用的方式来分析并展示庞杂数据的阿里云产品。其中DataV企业版试用是适合刚接触DataV的新用户，轻松搭建可视化大屏，汇报、客户参观必备。而DataV数据可视化企业版是开箱即用实时数据大屏搭建工具。
b.产品特点
智能识图；蓝图节点编辑器；三维城市编辑器；BI分析组件
c.产品版本
企业版（本次调研）、专业版、尊享版
腾讯光启元RayData
a.产品简介
专注3D数据可视化原型设计。RayData Web是B/S架构开发的网页端可视化系统搭建工具，支持在线3D可视化编辑，轻松构建商业级数字孪生项目。
b.产品特点
3D模型风格独特；图表工作站；模型场景工作站；提供定制服务
c.产品版本
个人版、Web版（原名专业版，本次调研）、Plus版（私有化部署）
袋鼠云易知微EasyV
a.产品简介：
数字孪生，EasyV是低成本无门槛上手数据可视化大屏的工具，数据看板可视化，轻松设计 高效搭建。
b.产品特点：
素材资源丰富；资源社区氛围好；提供定制服务
c.产品版本：
个人版（本次调研）、高级版、尊享版、运行平台（私有化部署）
a.产品简介：
拖拉拽搭建可视化大屏，内置丰富模板和在线图表开发工具
b.产品特点：
数字孪生工具链生态完善；蓝图节点编辑器；图表工作站；提供建模服务
c.产品版本：
基础版（本次调研）、专业版、高级版
本次调研使用【用户体验五要素】模型方法来分析主流工具DataV企业版试用、Raydata Web专业版、EasyV个人版、森大屏基础版，主要侧重在表现层、框架层、结构层。
此处说明一下，例如本次调研的属于功能型产品，那么功能型产品的结构层侧重于交互设计，通常可用思维导图、流程图方式来说明情况。再往上看，功能型产品的框架层侧重于信息设计、界面设计，大致模块尺寸大小、位置摆放，通常可用低保真原型、交互文档来说明情况。到了模型最顶层，不论功能型还是信息型产品的表现层都是感知设计，关注视觉如何呈现，通常运用形、色、字、质、构、动着6个维度进行整体视觉设计。
用户体验五要素来自Jesse James Garrett 的《用户体验要素》一书：战略层、范围层、结构层、框架层、表现层。
在结构层中，DataV企业版试用、Raydata Web专业版、EasyV个人版、森大屏基础版4款产品略有不同（且名称叫法不一），整理总结出共性，产品包括系统页和编辑器，系统页下包括项目列表、资源管理、用户管理、帮助中心，编辑器下包括顶部导航栏、组件库、图层面板、画布区、信息面板。
为了更清晰了解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不同的是，蓝图、代码与画布位于同一层级，用户可随时使用蓝图来链接交互事件，也可进行代码二次开发操作。
将4款产品的框架层和表现层进行拆解分析。
在框架层中，大体而言按钮、输入框等控件圆角较小，看起来比较方正，弧线的异形设计，容易体现科幻造型。在登录页中，页面布局各有差异。在编辑器中的布局大体一致，画布都位于界面中心，强调用户最关注大屏设计的画布区域。高频操作的组件库在页面的位置各有差异。
在表现层中，主要通过形、色、字、质、构、动这6个维度来进行对比分析。DataV企业版试用、Raydata Web专业版、EasyV个人版、森大屏基础版4款产品的整体视觉调性都是以暗色、科幻风格为主。登录页都选择了亮色风格界面，系统页和编辑器都是暗黑风格。部分产品品牌字体以直线为主并加入弧线和粒子元素，科幻的界面动效主要体现在加载页面。
阿里云（DataV企业版试用）- 登录页
DataV 的登录页统一由阿里云登录页进入。以中心布局（核心面板偏右），三维模型+灰色背景+线条点缀的形式进行设计，主题色是阿里的橙色。因为DataV是阿里云旗下的产品，共用入口，所以此处没做额外的产品登录页以强调 DataV 产品一致的品牌感。
Raydata Web专业版 - 登录页
Raydata Web 登录页以中心布局的形式，无其他设计元素，只保留关键信息，同其他竞品相比略显单调。登录页的浅色风格与进入系统页和编辑器的暗黑风格，缺乏界面整体色调的一致性。界面控件主题色使用蓝紫渐变色，与系统页和编辑器的蓝色也略有差异。（可从Raychart产品使用手册发现，旧版布局为同EasyV）
EasyV个人版 - 登录页
EasyV 的登录页有2处触发，常规触发和资源中心触发，分别以左右布局的全页和弹窗形式进行框架设计。弹窗的形式不需额外跳转，让用户在资源中心挑选素材时能更快进行登录操作。登录页以左右布局的形式，插图与登录模块大致各占50%，深色插图的和浅色登录模块的两个色块形成强烈视觉对比，更能吸引用户注意。
森工厂（森大屏基础版) - 登录页
森大屏的登录页以中心布局的形式，有利于聚焦视觉，背景使用简约抽象的形状来点缀画面。灰色背景+抽象图形点缀，与浅色登录模块拉开视觉对比。按钮主题色是橙色，是因为森大屏是优锘科技森工厂旗下的产品，共用入口，所以此处没做额外的产品登录页以强调森大屏产品一致的品牌感。
DataV企业版试用 - 系统页
顶部轮播图占整个页面四分之一左右，强调品牌感同时打造产品差异化，Banner内容为统一风格的3D模型场景+无衬线字体标题为主，一级导航边缘弧线的流光动效表现科幻酷炫风格。
一级导航栏与轮播图的重叠关系，半透的玻璃质感，仿佛是用户透过一层玻璃，打开可视化世界的大门，结合暗黑风格的界面，给用户一种进入游戏的沉浸感、跃跃欲试的冲动。纵向与横向结合的混合导航，对于后期有规划新功能而言，拓展性较强，缺点是占用面积大、交互路径长，适用于大屏项目数不多的情况下，若项目数量较多，可能有空间不够的焦虑。
我的可视化中的3个创建入口按钮使用了扁平加光感强、冷色调风格插画，引起用户注意，快速识别创建功能入口。主题色使用比较鲜艳活跃的蓝色，辅助色为青色，占用面积不多，起到丰富点缀画面的作用。设计元素的四周轮廓不做圆角处理，显得整体界面比较方正端正、硬朗严肃的印象。
Raydata Web专业版 - 系统页
左上方展示品牌Logo，清晰写明当前产品及版本，符合用户认知。品牌元素融入进顶部栏右侧头像及皇冠图标，加深品牌印象。
以侧边悬浮导航的形式使用户快速定位查找功能模块的位置，拓展性较强，以较瓷片“大包小”的结构，聚合了较多功能模块，如果是小分辨率屏幕的情况下，经常要鼠标轮滑来回滚动才可看到下方功能模块，导致不够灵活高效。侧边导航模块中的图标统一为形状较方正、偏冷的中性色、扁平微渐变风格。敬请期待的蓝色沙漏图标在界面中略微突兀出，缺少图标风格一致性。
界面为偏冷中性纯色，无背景装饰，同登录页只保留关键信息（如大屏项目卡片），不加过多装饰的简约风格调性保持一致。按钮主题色使用比较灰的蓝色，透出沉稳柔和的调性。设计元素的四周轮廓略微加了些圆角，同DataV硬朗的感觉则稍微缓和一些。
EasyV个人版 - 系统页
上方展示品牌Logo，同Raydata，不再赘述。对于创建大屏按钮而言，DataV用的是插画按钮的形式，Raydata是用卡片按钮的形式，而EasyV则用图文按钮的形式，而图文按钮的优点是占用面积少。
同DataV，选用了纵向与横向结合的混合导航，拓展性较强，不再赘述。二级导航底部使用了动态插图点缀界面，插图是不断旋转的科幻装置，角度带有透视，让扁平的整体界面附带了层次感、空间感。右侧侧边菜单的帮助图标提供给用户快捷操作，对新手小白友好。
缺省页运用情感化设计，以2.5d插图的表现形式缓解用户负面情绪，配色在深色界面中显得比较明显，个人认为可以适当弱化插画亮色部分。主题色使用鲜艳活跃的蓝色为主，在深色的界面中同样相对明显、突出。设计元素的四周轮廓既有全圆角，也有小圆角，界面形状统一性待加强。
森工厂（森大屏基础版) - 系统页
左上方展示品牌Logo，同Raydata，不再赘述。由于是森工厂旗下的工具链，所以森大屏的系统页顶部栏可进行工具切换，界面左右两侧留白很多、版心小、浅色风格，让整体界面更像是一个前台官网的印象。
使用了像是混合导航的方式，用“像”这样表达是因为，顶部栏是工具切换栏，而侧边悬浮导航1竟然是所有工具的个人中心，侧边悬浮导航2却是当前工具森大屏的资源中心，右侧内容区是当前工具森大屏的我的大屏、推荐大屏模块。框架上有一定程度不太符合用户认知，导致引起疑惑和误解。尽管如此，配色上使用橙色（森工厂）和具体工具主题色来区分当前位置，能一定程度防止用户混淆概念，通过多次在顶部栏切换工具，可预知上面提到的导航1是指所有工具而言的，而导航2则是指当前具体工具而言。
右侧侧边菜单提供用户快速反馈的入口，简单便捷。其中侧边菜单的问号图标与顶部栏的一样，跳转链接一致，而文案却使用了“常见问题”和“帮助中心”2种，重复功能入口也许考虑的是为了增加点击，而同个界面重复堆放功能入口的合理性还有待考究。图标使用了毛玻璃和线性图标的表现手法，为界面提升质感。设计元素的四周轮廓加了小圆角，整体给人的感觉更为亲切、友好。
DataV企业版试用 - 画布/蓝图编辑器
整体暗黑风格的界面下，能使得用户设计深色风格的可视化大屏时，保持更专注的状态。题外话，DataV新版本的编辑器界面可切换有浅色风格，同理，浅色编辑器界面则更适合在设计浅色风格的大屏的场景。通过不同深色色阶的背景色块让每个功能模块的框架位置区分得清晰明了，另外整体配色、形状方面都遵循视觉呈现一致性，降低用户认知成本。
在编辑器左上方无退回系统页的返回按钮，用户只能通过切换浏览器标签页回看系统页，而无法在当前页返回上一层级回到系统页，所以对于想要快速返回上层的场景下，则显得不那么便捷。顶部栏左侧的画布编辑器与蓝图编辑器选项按钮归于一组符合用户认知，可快速切换当前编辑器进行大屏视觉设计或链接交互事件。画布编辑器和蓝图编辑器的画布外区域保持视觉统一，使用了点平铺的背景与画布做出层次区分。
右侧的属性面板中展示组件的配置功能，当信息较多时，用视觉较弱的分割线区分每组的配置信息，数据之间比较紧凑，提高面积利用率。编辑器中多处的功能组使用了格式塔原则的接近性，让距离更近的功能组更有关联性，层次清晰有序，降低用户认知成本。
图标表现方式只使用了单色线性图标一种，让整体界面表现得更简洁、轻量化，忽略图标形状而让用户更多去关注功能。配色、圆角遵循视觉呈现一致性，当功能被选中时，会以蓝色背景、图标反白的方式强调该功能的状态、位置。
Raydata Web专业版 - 编辑器
同DataV，暗黑风格界面，不同深浅色块背景区分功能模块，且界面左上方无退回系统页的返回按钮，不太便捷，不赘述。
大纲与概要类似于页面与图层的关系，像设计软件Figma的Page（页面）与Layer（图层），大纲与概要位于界面左侧的区分上下模块，框架从上至下摆放，符合用户认知。对于新手小白，还需额外查看教程引导才能认知大纲与概要的框架，因为此版本定位为专业版，所以弱化了帮助指引，简化界面，让专家级用户更沉浸地、不受过多干扰地使用。
组件库位于顶部，占用面积小，前面结构层提过，作用是增大了画布占比，让用户更专注设计，不赘述。
图标表现方式使用了单色面性图标和微渐变扁平投影图标，界面顶部是组件库，这些微渐变图标呼应了系统页同样使用了为渐变风风格。为了强调组件库这种用户高频操作区域，使用了更吸引用户注意力的微渐变扁平投影图标，而其他区域则使用单色面性图标，弱化视觉，让界面轻量化，让用户更多去关注功能。同DataV，同样使用格式塔原则的接近性，层次清晰，降低认知成本，不赘述。
配色、圆角遵循视觉呈现一致性，当功能被选中时，会以蓝色背景、图标反白的方式强调该功能的状态、位置。
EasyV个人版 - 编辑器
与其余3款工具不同，EasyV在编辑器左上方有退回系统页的返回按钮，方便用户快速返回上层的系统页。
同Raydata，组件库位于顶部任务栏中，占用面积小，前面结构层提过，作用是增大了画布占比，让用户更专注设计，不赘述。
图标表现方式使用了单色微渐变线性图标，部分图标线细节还用半透明效果，而部分则用了不透明度渐变的方式，提升图标质感，让整体界面轻量化而不至于过于单调。配色、圆角遵循视觉呈现一致性，降低用户认知成本。
森工厂（森大屏基础版) - 编辑器
同DataV，暗黑风格界面，不同深浅色块背景区分功能模块，且界面左上方无退回系统页的返回按钮，不太便捷，不赘述。
编辑器的任务栏设计类似本地客户端软件的顶部菜单栏，通用的“文件、编辑、视图、排列、图表、调试、帮助”菜单都放在了顶部任务栏，符合用户交互习惯，缺点占用面积较大。
与Raydata结构一样，同样有类似设计软件Figma的Page（页面）与Layer（图层）的关系，森大屏把图层放在画布底部栏，而大纲放在组件库的左下角位置。可能考虑不占用过多面积而折叠在左下角，但缺点也很明显，层级较深，难以找到大纲中的画布元素，对新手小白不太友好。通过画布底部栏切换图层，这里图层也是分2D和3D，还可设置图层为全局图层，即预览大屏时跳转任何地方都始终显示该图层，可减少重复劳动设计。
蓝图和代码二开也位于画布底部区域，同DataV，森大屏也有蓝图功能。底部有蓝图和代码二开的切换按钮，方便用户链接交互事件和调试二改组件的时候，不完全遮挡画布，让用户更易感知当前所处位置和状态，无需来回切换页面而增加操作成本。
界面图标表现方式同DataV，只使用了单色线性图标，让整体界面表现得更简洁、轻量化，不赘述。画布外区域使用了点平铺的背景与画布做出层次区分。
上篇简述可视化行业的市场分析，了解到国家政策如《“十四五”大数据产业发展规划》大力支持可视化行业的发展，可视化行业解决企业痛点，助力企事业单位进行数字化转型。随着数据可视化行业的发展，可视化报表分析工具逐渐衍生出更利于辅助分析的可视化大屏工具，随后进行桌面研究、问卷调查后，筛选出4款主流工具（DataV、Raydata、EasyV、森大屏），分别对它们的结构层、框架层和表现层进行拆解分析。
设计师在了解和体验工具型产品时，也要对其行业有一定的思考，这样更有利于了解业务、用户以及产品。下篇接着讲主流工具（DataV、Raydata、EasyV、森大屏）的功能体验，浅谈可视化行业未来的探索和思考。
那么，下篇再见！
蓝蓝设计的小编 http://www.lanlanwork.com