关于javascript:凹凸技术揭秘羚珑页面可视化成长蜕变之路

作者：凹凸曼

前言

京东批发团体 · 用户体验设计部打造的「羚珑智能设计平台」于 2019 年 5 月为外部经营及商家推出了智能页面设计工具，羚珑智能页面设计是一款在线可视化页面搭建平台，领有在线搭建 PC、H5、小程序等多平台页面能力，笼罩频道页、流动页、店铺页、滑屏宣传页、答题类、互动游戏类、小程序等多个利用场景，为商家、经营人员提供在线服务，让不懂设计、不懂代码的用户也能够一键上线页面。

基于「Taro」弱小的多端能力，可能实现一次搭建，生成 H5、小程序、RN 等跨端利用，极大地解决反复开发的问题，进步开发效率。

聊聊羚珑智能页面设计的历史

业务中求冲破

在 2017 年以前，京东线上大量的 PC 频道页都是通过手工开发的，开发周期十分长，过后公司外部也有一个 CMS 零碎，前端开发完的页面，须要通过这个零碎进行公布上线。整个页面的开发依赖这个零碎，并且须要在线上实现这些工作。另外还要录入一些数据坑位，能力预览到页面。过后为了解决前端的开发效率，咱们把线上开发及数据坑位录入的工作，搬到本地通过一系列自研工具实现。齐全颠覆了整个频道页的开发方式，整体的开发思路沿用至今。

与日俱增，咱们手上曾经开发了十分多的频道页，而且到前面发现，很多页面都十分类似，只是一些款式上的差别。当发现工作反复的时候，应该是造车的时候了，能够让咱们跑得更快。

搭建平台雏形

羚珑智能页面设计的前身，它只能说是一个页面拼装零碎，有一位频道经营的共事找过去，心愿能疾速开发一个页面，问：“能不能把线上的某几页面中的不同楼层拼在一起，疾速上线几个页面”，很显然对于不懂技术的人来说仿佛非常简单的事件，然而对于咱们开发来说，并非如此简略。咱们尝试把不同页面的代码找进去，疾速开发一个新的页面，发现很多问题，如款式抵触、脚本抵触等一系列问题。

于是前面咱们对已有的页面，进行楼层级的革新，革新后的楼层，可能独立运行，并且不同的代码及款式只作用于以后楼层，这样，不同楼层组合进去的页面，可能失常显示。

通过革新后的公共楼层，为了让用户可能自由组合楼层去拼装出一个页面，咱们搭建了一个在线可视化平台，把所有公共楼层以列表模式展现进去，反对通过拖拽模式组装页面，反对一些惯例的属性配置，如公共头部、色彩等，基本上能满足局部用户诉求。

真正的可视化之路

页面拼装零碎的痛点

页面拼装零碎，它次要解决了开发及用户的一小部分诉求，离真正的可视化之路，还很远。很快拼装零碎裸露了它一些问题：

1. 在技术层面，因为楼层的粒颗度不够小，要做一些布局上的调整，须要调整到代码能力反对，不足肯定的灵活性。以及应用过期的技术栈 jQuery，前期保护老本也十分高。
2. 在用户经营方面，在咱们的平台上不反对依据实在的数据预览成果，零碎只是实现了页面框架搭建的事件。
3. 在数据录入方面，还是难以解脱后面提及的 CMS 零碎，用户须要回到 CMS 零碎下面填写实在的素材，所以存在不同零碎之间的切换。

可视化编辑器设计思路

给合拼装零碎的一些问题，咱们开始从新设计一款真正基于组件化的页面搭建平台。

羚珑智能页面可视化编辑器，包含几个根本外围因素：组件库、设计器、属性编辑。

1. 组件库分为根底组件和业务组件，因为 PC 页面比较复杂，有布局的概念，所以咱们须要设计一套布局零碎，借鉴于业界优良的栅格设计思维，再联合咱们页面的理论状况，实现了页面的框架与根底组件设计。业务组件穷举了大量线上页面，把罕用的组件进行组件化革新，并且反对灵便的属性配置。
2. 设计器负责组件拖拽、组件加载、渲染逻辑、组件树操作、动静属性注入等性能。通过高阶组件的形式，能帮忙咱们轻松给组件增加一些特定性能。
3. 属性编辑，组件每个属性都对应着一个类型，那么它属性数据编辑的形式也不一样。咱们设计的类型根本笼罩所有组件。另外还设计了一套条件规定，让属性之间可能联动显示。

实际上要实现一个高可用的可视化编辑器，须要理解的知识点与细节十分之多，这里不做具体开展介绍。

通过近一年的积淀，频道页开发曾经从人工开发，全面转型为可视化，目前京东线上大部分频道页都是通过自助搭建形式实现上线。

编辑器全面降级

2019 年初，借鉴于过来在公司内可视化畛域获得了小有问题，咱们产品方向从新定位为聚焦商家在线上经营过程中的页面设计需要，心愿通过升高页面上线门槛，从而进步商家、经营人员上线页面的效率，因而，对页面可视化编辑器进行了一次迁往挪动端的降级。整个视觉格调及交互方式，都进行了全面降级，去除了简单的布局，用户应用起来更加便捷。

组件库降级

咱们把组件库降级为一个全新的平台「Quark」，它作为一个独立的设计资产平台。为编辑器提供组件、图标库等物料，目前曾经积淀的官网组件有 50 多个，200 多种布局状态，可能满足大部分页面需要。同时还反对公司外部其余研发团队开发本人的组件，接入到咱们的可视化平台中，通过咱们的上线页面服务上线。

属性面板降级

配置体验影响用户搭建效率： 用户在日常应用编辑器时，需通过更改组件配置项以满足页面个性化需要。咱们发现，组件配置项的面板结构复杂、组件配置项了解老本高、操作形式不合乎用户习惯等体验问题曾经重大影响了用户的配置体验与搭建效率。

旧版组件配置项面板： 分类以「性能」、「款式」、「数据」做辨别，用户了解老本高，经常出现同一配置项呈现在多个分区的状况，极大减少了用户的操作老本。

新版组件配置项面板： 从新定义了面板构造标准，从用户配置操作行为辨别，划分为「组件名称」、「组件布局」、「数据录入」、「款式配置」与「楼层配置」5 大区域，不仅利于用户了解，缩短了用户的操作门路，对于产品自身而言，清晰的布局划分与性能定义还提效了新增组件的配置项拆解工作。

改版前 v.s 改版后 配置项面板整体构造分区、配置项元件化示意

元素编辑器

当咱们的官网组件无奈满足用户个性化需要的时候，咱们思考着是否为用户提供一种自定义组件的能力，所以元素编辑器应运而生。它提供了一个自定义画板的能力，用户能够自在拖拽一些根底元素，如文本、图片、图形等，增加上一些自定义事件和动画，一个活泼的的自定义组件，便能轻松实现。

设计资产积淀

设计师积淀了上千套模板提供给用户应用，这些模板全副接入「羚珑」智能图片设计能力，用户可能间接在线批改图片素材内容，轻松实现高质量的页面。另外咱们的模板还反对智能配色，用户能够依据配色计划进行页面整体换肤。

羚珑智能作图

为解决用户做图的痛点，羚珑页面编辑器与羚珑图片编辑器深度联合，为用户提供在线图片编辑的能力，用户毋庸应用一些做图软件，便能在线上实现图片编辑。

多利用场景适配

流动场景

咱们的流动页是如何完满适配挪动端和桌面端的呢？

一个挪动端页面要适配桌面端，通常的做法是通过响应式的伎俩来实现，这种形式比较简单粗犷，然而成果其实并不好，例如挪动端的首焦图，如果在桌面端等比放大，那将会占满首屏，用户体验极差。

所以咱们采取了一系列的转换规则来实现：

举个例子

PC 端的内容其实是跟挪动端的内容做了对应关系。并且依据端的个性做了一系列通用的变换规定。比方秒杀商品中秒杀倒计时与商品在挪动端为高低布局，而在 PC 端则为左右布局，商品单元在挪动端为一排 2 个，在 PC 端则减少为一排 4 个。

转化的规定是什么？

拉伸： 在布局不产生扭转、内容没有增减的状况下进行拉伸，如广告组模块：

文本： 文本内容较重要时咱们会做无增减的拉伸，当空间地位受限，同时文本内容又不是十分要害的信息时会抉择文本截断的形式进行拉伸。

图片： 一般来说细节图去做等比拉伸，这样尽最大可能的保障两端成果的一致性。

因为挪动端宽高比相比 PC 端要小很多，为了保障在大屏上的成果不至于呈现“霸屏”的状况，还会有取舍的进行裁切。

模块： 挪动端通常会将一个楼层划分为一个模块，对应到 PC 端会将模块在横向进行拉伸。

布局扭转： 布局产生扭转时须要将元素进行重排

如头图 banner 模块，如果采取等比拉伸的策略会导致头图特地高，在 PC 端影响第一屏的页面效率，如果采取裁切的模式将会影响图片的展现成果，所以采取图片内元素重排的模式进行变动。

锚点导航模块在挪动端是横向的导航，上滑页面时会吸附到页面的顶部，而在 PC 端咱们个别会吸附在页面的侧边固定地位。

内容增减： 单元反复展现模块个别会用内容减少和删减的模式来解决，比方商品模块在 PC 端横向空间比拟大的状况下会多展现单元格数。

联合这些转换规则，能让用户只有搭建一次页面，便能疾速同时生成两端流动页，投放到挪动、PC 端平台，节俭经营老本。

互动营销场景

过来商家想做一个互动类的页面，基本上是很难实现的。有着老本高、开发周期长等问题。互动营销场景为了解决这一系列痛点，把互动玩法进行组件拆解，再通过页面可视化平台进行配置上线。原来一个互动玩法从计划到上线大略须要一个月左右，当初通过可视化搭建形式只须要十分钟，大大提高了效率。

小程序场景

咱们是京东外部首个小程序可视化搭建平台，借助「Taro」的跨端能力，咱们平台人造具备了公布跨端小程序页面的能力，联合京东「开普勒平台」的黄金流程，疾速产生一套残缺的电商小程序代码。反对公布微信、百度等多个小程序平台，实现「九阳」、「戴森」等多个商家小程序上线。

店铺场景

店铺场景下，咱们实现了三个重要的利用场景：

1. 店铺首页，为商家提供店铺首页搭建的能力，并实现了把设计后果与「京东智铺」的素材买通，满足商家店铺首页装修诉求。

1. 店铺推广，一个基于元素编辑器扩大的场景，提供滑屏类页面流动搭建的能力，提供了极具个性化宣传页能力。

1. 店铺购物小程序，以中心化小程序的模式为商家提供私域流量工具，提供丰盛的营销工具，如抽奖、关注有礼、全景馆等多种玩法。

编辑器积木化

为何要做编辑器积木化？

1. 随着场景越来越多，编辑器的代码逻辑也变得非常复杂，不同场景都有一些非凡的性能逻辑，每个场景又分为模板搭建端和用户应用端，在编辑器中的表现形式不同，而且编辑器与平台的业务逻辑强耦合。
2. 公司外部很多平台，都有可视化搭建的诉求，如果从新开发一个可视化编辑器，少则至多须要半年工夫。如果间接复用咱们的编辑器积木，将会大大晋升效率。也缩小公司外部反复造车的状况。
3. 咱们编辑器的研发团队人力无限，不能及时满足各场景的需要，扩展性差。
4. 改变一个小小的性能，整个编辑器都须要公布，如果出问题，所有场景都受影响。
5. 编辑器的性能越来越多，体积也随之回升，工夫久了，整个编辑器变得十分臃肿。

为了解决这些问题，咱们进行了一次编辑器的架构全面降级

基于配置的插件化架构

咱们将编辑器划分为：主设计器 + 插槽区域，别离用两种色彩示意：

1. 主设计器：负责编辑器外围逻辑，配置文件解析、插件加载器、组件加载、全局状态治理等；
2. 插槽区域：编辑器会预留几个主插槽地位用来加载插件性能；

咱们大抵来理解一下整个编辑器的工作流程：

1. 编辑器读取配置文件，配置文件是对整个编辑器的形容，包含所有插件的配置。
2. 编辑器中提供几个外围地位以插槽的模式，读取配置文件中的插件。
3. 编辑器的性能抽离成一个个插件文件，通过异步的模式进行加载，这样做的益处是能够按需加载、逻辑解耦、有利于进步零碎的扩展性。
4. 每个插件加载能够动静注入到编辑器利用中，同时它可能共享编辑器的状态，实现插件之间通信以及调用编辑器的数据和办法。
5. 编辑器实际上只做一件事件，就是页面形容的生成，其余业务逻辑交业务侧做，这样的益处是能使编辑器齐全解耦独立运行。只须要做一些与编辑器、插件的通信接口，就能疾速应用起来。
6. 各应用场景只须要关注本人的编辑器利用配置即可，相互不影响，包含插件个性化降级。

对外赋能利用

目前，咱们的编辑器积木化解决方案曾经利用在京东外部其余平台当中，如京东数科江湖平台、京东 ME 行业版平台等，作为页面设计引擎助力各平台的商业化疾速倒退。

结语

目前为止，业界有很多优良的页面可视化产品，为何始终没有止境，始终有新的平台呈现，但都没有最终极的解决方案，那是因为没有真正的「银弹」，只有适应业务倒退的产品，才是最适宜的。将来咱们将会往智能化页面设计的方向致力，必然会擦出新的火花，敬请期待！

参考

• 羚珑组件智能编辑新体验
• 揭秘羚珑页面 - 多端智能转换
• 智能页面引擎全新亮相 页面设计中台初长成——架构篇

欢送关注凹凸实验室博客：aotu.io

或者关注凹凸实验室公众号（AOTULabs），不定时推送文章。