重新认识RayData Web原创

大家好，我是欣欣啊，是ta web的产品经理，从2020年开始，呃，就做这款产品的，一路迭代我都参与，嗯，我目前呢，主要负责整个产品的编辑效果，流程优化以及用户体验，所以大家对于这款产品有任何关于用户体验的问题都可以来找我。嗯，就是刚刚大家也已经完整的看了这个视频啊，我们的视频的确比较酷炫，然后大家可能会有很多的疑问，然后我提炼了一下五点疑问，比如说因为我刚刚也在视频看了一下，因为大家有一些一些小伙伴问，呃，赶紧上干货嘛，然后我这就来了，然后我的五点疑问是这样子的。这个产品整体都有哪些功能？

然后围绕这个产品的这些功能是如何管理的？呃，复杂的组件效果都是如何实现的，还有这种酷炫的。这种酷炫的视线效项目效果是如何搭建出来的？还有呃，未来有哪些计划，因为我也知道有一些有一些小伙伴在用友商相关的一些产品，然后就在接下来的15分钟左右的介绍里面呢，我将围绕这五点疑问向大家逐一的展开介绍一下我们的web。呃，大家看到了，这个是我们的一个整体的功能一览图啊，大家不要呃，不要被这张图吓到，因为比如说视频号的小伙伴也可以赶紧截一下，因为我在这块儿的整个这个，呃，这个页这个里面的内容不会讲很多，我主要是想呃给大家强调一下，整个我们的这个产品呢，主要就是围绕两个页面，一个是管理页面，还有一个是编辑页面，呃，如果是按照一个五分钟快速快速的上手一个项目的话，然后请大家看一下右边的那个图，比如说自下而上按照一个项目的搭建，我们这边总总共是分为五步，第一步需要在UI层里面添添加天际，任何的你想编辑的，还有添加的二维组件，然后在场景层里面添加场景，还有三维组件，包括一些地图相关的内容，通过编辑操作排布局排版。

这个模块的一些东西，我们可以整体上对我们的这个呃效果，包括页面呃给他的一个排版逻辑清晰化，然后当到这个这个三个部分走完之后呢，嗯，如果我们通过数进入我们的数据模块，然后你就数有了，对于整个项目你就有了属于你的真实数据的效果，但是在这个页面上面，整体上还处于一个静态的状态，但是我们也知道哈，因为比如说做原型也好呀，或者说呃做一些呃简单的一些静态展示也好，这个时候已经够了，呃。

这个时候就是如果我们想作为一个完整的项目的话，可能就需要还需要我们最后的一步，需要通过交互模块，让我们的内容跟内容产生关联，就走完这五步，大家看一个项目就这么搭建出来的，是不是还挺简单的？就是介绍完了整个的产品功能模块，我们来说一下，呃第二个问题，因为如果按照我上刚刚描述的那个，呃，分五步制作完一个项目之后，如果你想要重复的使用项目上面的资源或者内容，或者在想用呃继续制作另外一个项目，该在哪个地方集中管理你的项目里面的内容，还有去使用的，呃，就像我那个刚刚在第一个第一个页面里面介绍的一览图里面一样，就是围绕着产品所有的需要我们的管理的内容均在管理页面完成，呃，大家看到这个内容的时候里面的。里面我们彩色的部分是我们已经支持的部分，比如说像上传字体，然后你可以去上传你的模型图表，上传你的真实数据，这些都是包括管理你的，管理你的项目，然后呃，这些都是可以在这个页面上面很快的去完成，还有一些比如说自定义组件，甚至一些我们的生态方的内容，呃也会在很在在接下来的几个月之内很快的呃上上到我们的线上。

我给大家简要的介绍一下我们那个管理页面，管理页面的一个功能，目前这个管理页面呢，就是主要分为四个模块，嗯，项目管理啊，我我知道大家比较关心的，比如说我制作完了一个项目之后，该怎么去浏览或者分享，这个是这个里面就可以大家通过呃发一个加密链接的方式，或者说标识码的形式，然后就可以分享给其他的用户，然后在我们的重点说一下呃，资源管理跟数据管理模块的，比如说因为这个这两个模块内容都是非常的庞杂的，大家可能在呃内容的一个一个去内容的一个规划上面，包括思考的角度上面都不太一样，所以我们这边是展开了一个无限层级套用，你可以自己去随便的去分组，然后还可以去拖拽去直接去使用，这个是呃，这个是对于你管理你的内容，是一个非常方便清晰查找查查找的一个过程，然后呃，我们也是在资源管理这一块，呃有了我们比如说。

对应了两个比较核心自研的产品，和和可以通过这两个，可以通过这两个模块去上传我们的图表，还有模型。嗯，当我们。等会儿整体介绍完这两个内容了之后，我也会大跟大家单独介绍一下这两个产品的独特地方，然后权限管理模块，大家不要小瞧这个模块哈，因为我们这在这个模块里面也做了非常就是文件文件夹级别的高权限管理，就是可以来赋予呃，可以给用来赋予权限给某个人查看和边界某一个文件夹，甚至到呃组件相关的这样的一个能力，这样的话，在整个这样的里面，你就可以比较条理明晰的去管理你的内容，并并去控制哪些人可以查看你的内容或编辑你的内容。

这回我们现在说到我们的第三个问题，如何去释放各种各样的一个生产力，然后让你大放心大胆的创造这样的内容，这这个地方我重点讲一下，就是因为在大家编辑不管是使用任何的，比如说像或者说像现在的一些，呃，飞格玛或者说别的一些产品的时候，都可能会有这样或者那样的感受，比如说我做了任一个又一个内容之后，可能给出来的这些功能已经束束缚了我设计的一些想法，就是那因为各家也说我都会内置大量的一些二维三维的一些内容嘛，但是呃，为了让大家更能够放心大胆的创造，我们在比如说如页面上这些就是稍微复杂点的组件里面，我们都引入了一套自定义的逻辑，呃嗯，比如说像页面上面的这个时间轴，我们可以给他通过用通过自定义的方式，呃，在它的。

在它的给任何任意的时间轴里面的方向，呃，旋转方向，包括它的内容的颜色，包括像表格，你可以给呃，甚至任何的组，任何的一个单元格，然后行还有列都去进行一些，比如说颜色呃，阴影啊，还有一些宽高的一些调节，都可以让他不同起来，呃，尤其像我们重点的像呃三维还有地图模块嘛，大家可以看到内容上面是两在一个完整的一个整个区域里面，我们可以对任意的子区域进行它不同颜色，还有属性的一些调节方式，呃这个是我觉得是会让大家觉得，呃在用了一些就是基础的功能之后，当你想重点突出一些部分的时候，你就可以在这些组件里面大量的去使用自定义，做出你不一样的效果。

但是大家有的还会觉得。这些内容，呃，比如说我我不管是用不用自定义，可能有一些东西还是达不到我的效果，这个时候我们又多了两种方式来进一步拓展自定义的维度，呃，这个这个remo是我们在九月份的版本里面即将要推出的一个自定义组件开发平台，然后在这个平在这个平台里面我们引入了已经内置了非常多大量的这种自定义，还有交互的组件，然后大家可以，呃通过属性面板呀，或者说是代码都可以比较方便的去调节，调节完了之后就是，呃，他是跟我们的人才web是直接绑定的，然后可以在里面去直接使用，然后另外的一个我们比较，呃，比较重点的一个功能呢，就是属于是叫做数据均衡器，因为大家也知道，比如说通过I frame嵌入一些内容，呃，有的时候怎么跟，呃嵌入的内容跟。组建平台本身，或者说是这个产品本身的内容去进行交互呢，就是让他看起来是融为一体的，这个是我们做的一个功能，就是可以通过数据均衡器，让大量外部的一些一些内容，不管是你用什么写的吧，我E或者说react呀，然后你都可以通过F的形式嵌进来，然后用我们的这样一个功能容器功能去跟我们内部的一些呃，其他的组件，不管是二三维的组件进行交互，产生一个达到一个完整的呃，完美一体的一个融合效果。

就是我刚刚已经把前面的三个问题给大家介绍了一下，嗯，那这个时候我们也已就比如说有了制作好了合适合适的内容，也进行了这样大量大量内容的一个管理，然后也积攒积积攒了大量的素材，这个时候这些内容是如何组建大建项目的呢？啊，我我我知道大家也比较关心这个问题嘛，然后我想跟大家讲一下我们这边的一个逻辑哈，就是因为大家也知道，就是我们整个产品其实是呃，三维模块是非常重非常重的，但是大家也清楚，二维的平面内容在和三维立体内容在交互方面都有很大的差异，比如说三维可以旋转呀，然后可以就是有立体的非常多的呃，数据细节可以展示，然后但是UI平面呢，就属于它是一个非常频繁的拖动操作，甚至需要撤销重做的一个过程，所以我们在这个我们就采用了一个方式，叫做多层级多页面的一个，呃，相当于搭建的一个方式，每一个页面下面我们都分了UI。

层跟场景层这样的两个层，这两个层的内容可以做到完全的隔绝，在图层上面也可以互相的不干扰，比如而且比如说如果这个时候你暂时用不到三维的层级，然后你可以选择二三维模式的一个切换，因为有的时候大家可能一个习惯是我先大量的去把二维相关内容编辑好，然后我再去接入三维这个，这个时候你就切换为呃二维模式之后，然后三维的内容页面都去，都会隐藏起来，变成一个纯净的二维模式，就是这样的话就比较方便，多种维度的一个排版，包括你的一个内容使用面。

呃，通过以上的这几个部分，然后大家也看到了，就是我们我们已经讲了数据，还有讲了一个怎么样去搭建这个内容，但是怎么样让这个东西生动起来呢？你就比如说我们其实每在内置的每一个组件，甚至你通过其他形式加进来的组件，然后我们都可以去实现一个，比如说它的属性面板包含的模块里面有技术属性，你可以去拖拽去，呃，调节一些基本的颜色呀，说其他的一些属性，然后。数据模块呢，可以加入各种各样的一个呃静态数据，还有一些数据库的内容，然后还有一个我们觉得是让内容非常丰富生动的，就是你一个你的一个项目，从一个静态展示甚至原型的一个内容变成一个实际的一个项目的一个过程，就是我们的交互模块，这个里面就是呃，大家看到的这个里面就是是我们的呃曾是我们的联动设置模块，就是每一个组件都会有的一个一个模块，通过这个模块可以给每一个内容去实现，比如说像鼠标单击双击，然后去实现什么切页面啊，显引啊，或者说是一些就是这些简基本的大家都可能会用到的一些交互操作，然后也会有，比如说呃，我们也去在一直持续迭代一些复杂的，比如说像变量赋值这些可以去呃改变各种同一块数据的一个地方，然后我们也会在持续后面迭代，比如说像呃组建，因为大家现在有客户需求嘛，组建与组件之间那种行级别内容的。

交互这个也是在我们未来的一个，呃，规划跟设计的一个理念。嗯，大家看到上面这一块之后，就是我相信就是了解我们产品的，或者说对我们产品持观望状态的小伙伴们，就可能会比较好奇我们接下来的计划，然后我我想说还是这样一张图嘛，就是我们的那个，呃，整体的这个计划。

大家可以看一下我们我们是怎么想加进来的一些内容，比如说我们第一步，因为因为正好在这个八九月份的这个大节大节点里面，然后我们也是人在外部的一个全新形象，然后加入到了一个腾讯云这样的大家庭里面，我们未来肯定会呃计划是把更多的生态伙伴呃产品融合进来，比如说现在的呃超图相关的祭祀能力，我们已经在内测，内测的阶段，然后相信比如说十月份，十月份的时候可能就会在公网上面跟大家见面，呃，也欢迎大家比在那个呃，如果想提前试用的哈，就联系我们的客服小姐姐，然后可以去申请，我们可能就会在十月份的时候给大家，给到大家开放这样的一个能力，让大家去提前试用，然后也会有就是腾讯云里面的，呃，很多产品，像比如说商业智能分析BI啊，这些有很强的数据分析能力的这些产品融合到我们的产品里面去，还有像物联网技物联网的一些产品的能力接进来，然后这是我们的一个比较。

和生态的生态内容的一个计划，嗯，当然呢，我刚刚也讲了，我们的一个我们比较优势的地方就是视觉还有自定义这一块，然后我们也会在接下来就是在视觉跟自定义，像我们的那个呃管理页面，我们会把呃颜颜色管理，还有自定义管理，自定义组件的管理都加进来，包括呃即将在那个十月份上线的一个数据路由器的功能，然后都会加进来。嗯说到这儿，大家可能比如说围绕着可视化这一块，大家都会觉得是不是都在比较重的是一个内容的结果展示啊，呃数据这块的话，然后。的确有，有这方面的一个问题啊，比如说数据这块的操作，可能我们是呃重结果展示单项操作流程的多样性，还有数据分析这块的能力呢，我们可能稍微薄弱，所以呃，大家看到这个计划里面其实有非常多有四五个模块，其实都是围绕着数据的迭代，呃，像像我们的一个过滤器的小组件，嗯，还有数据路由器的一个这样的一个分发，还有去处理数据问题的一个，呃功能大模块的功能都会都会很快的上到线上来。

看到这儿哈，我相信因为我的这个总结的大概有五点疑问吧，就是大家可能对我这些疑问已经有了一些答案，现在我们就趁热打铁吧，给大家就是介绍一下呃，围绕这个web的一些核心图表输出工具，然后这个是我们的，就是大家可能也会想，就每一个可视化的产品，甚至大家用到的大部分的，呃，这种数据展示产品里面，比如说BI分析产品，嗯，都会有包含图表作为一个在呃数据展示这一块，一个老牌而且经久不衰，一直被频繁使用的部分，然后我们这块就是Richard又有哪些或者诚意或者说特别之处呢？就是接下来我会以三个方面给大家介绍一下，讲述一下这个产品，就是可以感受一下它的差异化和人性化。

在我们的那个自研模块啊，就是大家看到的这个呃面板里面，大家看到的这块内容里面，我们目前就是自研模块里面共有31类图表，这些图表共有的参数属性大概是有900多项，而且大家可以通过呃代码及属性面板的形式来调节这些属性，这两者是代码跟属性面板操作是完全互通的，呃我们是根据非常多大量的这种项目经验，总结了一些视觉效果，然后你可能在其他的这个呃图表产品里面，然后都没有看到的，比如说像槽位端点，嗯，还有一些经典的一些视觉元素，包括可能包含了一些数学物理相关的通用名词，这个都是在我们图表里面展示比较多的，比如说像量程、波长、振幅，可能都会在那个水波图这样的里面，我们拿着就是像大量的数学跟物理的这个名词来跟大家讲一些专业的图表故事嘛，这个是我们的一个，呃，比如自研的这个，呃，图表的视觉能力。

第二部分呢，就是我们对于数呃数据的友好这一块也是做了一个非常大的一个呃用心你比如说不管是你空值无值，零值，而且像那种呃，大家可能有一些小白哈，他根本就他根本就这块就没有图表，然后也没有任何的数据，那我们这个这个地方呢，就开启了有一个呃模拟数据器，你可以去去模拟任何的像去设置它的上下设数值的上下限，包括它的一个好行数跟列出的一个距离，然后都可以去呃模拟出来，像页面上大家看到这一块就是你不管是你的这个数据适不适合当前的这个图标展示，我们都可以跟你很很好的展示出来。而且当你如果是你拿从从别的地方粘了一些代码，就是如果拿不到一些默认值的时候，跟属性面板匹配的时候，然后我们也在属性面板里面设置了很多中间值状态，就是相当于一个默认值状态，然后你可以选择呃从默认值，把这个默认值呃删掉，或者是不删掉这样的一个形式。

来展示你的，来展示你的数据。呃，大家看到这个视频瑞恰的这个页面，嗯，目前介绍的比如说很多的像端点啊，槽位啊，属性啊这些都是呃可以随便的去调节，而且像中间模块就是我们的一个呃数据编辑器，包括它的一个静态路面板，然后旁边的那个里面那个模块呢，就是我们的那个代码区域，你可以通过呃任意的一种方式去来编辑你的数据，包括你的属性，然后到呃这块就是我们还呃像刚刚一直在强调一些自定义的能力，这个里面也展现的淋漓尽致哈，你比如说像我们拿到的这个地图，可以选择它的任任何的一个子区域里面去给他的全面板的一个属性操作都可以去编辑，这样的话就是方便你的，你的内容是一个完全属于你自己风格的一个内容，比较容易的跟别的内容去区别开来，这样的话你就可以在你的内容里面呈现你自己的一个特有的效果。

这两部分可能你你你看完之后也会觉得，诶，我的大家会觉得我的内容，或者说我的我也对我的数据非常的人性化，或者说我的那个图表效果也非常多，那我们这个第三部分呢，就是我们在叠我们日下的时候，一个非常核心的一个模块，就是它的一个，呃，对于拓展了第三方库的一个完整的闭环流程，就是你这样子的话，嗯，比如说你就可以从网络上面，但我们现在是呃把那个拿是拿一下为例哈，但是你可以从那个网络上面任意的把成千上万的那个一下子图表代码直接粘过来，而且可以就是呃，因为粘过来的代码基本上都是GS相关的嘛，但是你可以稍加调整，比如说把一些配置项相关的这个内容转成我们的那个接，然后就可以通过属性面板直接去调节参数这个呃，这个里面的话就是你处理完图表之后，就可以直接点击一键导出到web端，然后它就可以去实现这个呃，Web页面的一个。

整体使用，而且它的数据在外部页面里面，包括交互，它是跟别的组件没有区别的，都可以接入任意的数据源，包括它的交互去呃展现使用这个GS跟杰森的融合，大家可以看一下视频，我来跟大家讲一下这个是怎么操作的。嗯，大家看，大家点开看一下，我们这一块呢，就是直接可以从那个比如说一下子平台里面随便拿了一个，拿了一个那个代码。然后这个时候你可以比如说通过我们的浏览器的那个控制端，然后把相应的一个很小很小块的那个，呃，GS的里面的配置项信息改成那个，改成杰森的内容，然后你就可以因为我们这块已经达到了杰森跟手机面板的完全互通，然后你就可以去实现把代码占过来之后，就可以跟面板直接使用的一个效果。

所以就是那这块也是解放了一个，比如说不管你是任何的一个内容，从哪个地方过来的，呃，一些代码呀，然后我们都可以去给你完美的，比如说让你的呃，相关的一个开发人员，他可以专心的在JS里面写你的图表，然后相应的这个设计人员他可以他可以就小范围的稍微改一下，就可以通过属性面板把万千的这个图表代码呀，然后变成了我们的属性面板进行操作。而且这个产品呢，目前是完全免费的，只要输入到在电脑里面，只要输入注册登录就可以使用，大家可以就是通过我刚刚讲的这个三方面的一个内容，比如说人性化，还有他的一些视觉的独特之处，还有它的一个GSN建设融合，可以把大量的万千图表代码直接粘过来，通过属性面板来调节这样的一个三块内容，可以动动手指感受一下它的不同之处。