凹凸技术揭秘·羚珑页面可视化·成长蜕变之路

做者： 凹凸曼

前言

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

基于「Taro」强大的多端能力，可以实现一次搭建，生成 H五、小程序、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），不定时推送文章。