京东羚珑页面可视化平台介绍
京东羚珑页面可视化平台介绍
前言—
京东零售集团 · 用户体验设计部打造的「羚珑智能设计平台」于 2019 年 5 月为内部运营及商家推出了智能页面设计工具，羚珑智能页面设计是一款在线可视化页面搭建平台，拥有在线搭建 PC、H5、小程序等多平台页面能力，覆盖频道页、活动页、店铺页、滑屏宣传页、答题类、互动游戏类、小程序等多个应用场景，为商家、运营人员提供在线服务，让不懂设计、不懂代码的用户也可以一键上线页面。
基于「Taro」强大的多端能力，能够实现一次搭建，生成 H5、小程序、RN 等跨端应用，极大地解决重复开发的问题，提高开发效率。
聊聊羚珑智能页面设计的历史—
业务中求突破
在 2017 年以前，京东线上大量的 PC 频道页都是通过手工开发的，开发周期非常长，当时公司内部也有一个 CMS 系统，前端开发完的页面，需要通过这个系统进行发布上线。整个页面的开发依赖这个系统，并且需要在线上完成这些工作。另外还要录入一些数据坑位，才能预览到页面。当时为了解决前端的开发效率，我们把线上开发及数据坑位录入的工作，搬到本地通过一系列自研工具完成。完全颠覆了整个频道页的开发方式，整体的开发思路沿用至今。
日积月累，我们手上已经开发了非常多的频道页，而且到后面发现，很多页面都非常相似，只是一些样式上的差异。当发现工作重复的时候，应该是造车的时候了，可以让我们跑得更快。
搭建平台雏形—
羚珑智能页面设计的前身，它只能说是一个页面拼装系统，有一位频道运营的同事找过来，希望能快速开发一个页面，问：“能不能把线上的某几页面中的不同楼层拼在一起，快速上线几个页面”，很显然对于不懂技术的人来说似乎非常简单的事情，但是对于我们开发来说，并非 如此简单。我们尝试把不同页面的代码找出来，快速开发一个新的页面，发现很多问题，如样式冲突、脚本冲突等一系列问题。
于是后面我们对已有的页面，进行楼层级的改造，改造后的楼层，能够独立运行，并且不同的代码及样式只作用于当前楼层，这样，不同楼层组合出来的页面，能够正常显示。
经过改造后的公共楼层，为了让用户能够自由组合楼层去拼装出一个页面，我们搭建了一个在线可视化平台，把所有公共楼层以列表形式展示出来，支持通过拖拽形式组装页面，支持一些常规的属性配置，如公共头部、颜色等，基本上能满足部分用户诉求。
拼装系统
真正的可视化之路—
页面拼装系统的痛点
页面拼装系统，它主要解决了开发及用户的一小部分诉求，离真正的可视化之路，还很远。很快拼装系统暴露了它一些问题：
- 在技术层面，由于楼层的粒颗度不够小，要做一些布局上的调整，需要调整到代码才能支持，缺乏一定的灵活性。以及使用过时的技术栈 jQuery，后期维护成本也非常高。
- 在用户运营方面，在我们的平台上不支持根据真实的数据预览效果，系统只是完成了页面框架搭建的事情。
- 在数据录入方面，还是难以摆脱前面提及的 CMS 系统，用户需要回到 CMS 系统上面填写真实的素材，所以存在不同系统之间的切换。
可视化编辑器设计思路
给合拼装系统的一些问题，我们开始重新设计一款真正基于组件化的页面搭建平台。
羚珑智能页面可视化编辑器，包括几个基本核心要素：组件库、设计器、属性编辑。
- 组件库分为基础组件和业务组件，由于 PC 页面比较复杂，有布局的概念，所以我们需要设计一套布局系统，借鉴于业界优秀的栅格设计思想，再结合我们页面的实际情况，完成了页面的框架与基础组件设计。业务组件穷举了大量线上页面，把常用的组件进行组件化改造，并且支持灵活的属性配置。
- 设计器负责组件拖拽、组件加载、渲染逻辑、组件树操作、动态属性注入等功能。通过高阶组件的方式，能帮助我们轻松给组件添加一些特定功能。
- 属性编辑，组件每个属性都对应着一个类型，那么它属性数据编辑的方式也不一样。我们设计的类型基本覆盖所有组件。另外还设计了一套条件规则，让属性之间能够联动显示。
实际上要完成一个高可用的可视化编辑器，需要了解的知识点与细节非常之多，这里不做详细展开介绍。
经过近一年的沉淀，频道页开发已经从人工开发，全面转型为可视化，目前京东线上大部分频道页都是通过自助搭建方式完成上线。
PC搭建平台
编辑器全面升级—
2019 年初，借鉴于过去在公司内可视化领域取得了小有成绩，我们产品方向重新定位为聚焦商家在线上经营过程中的页面设计需求，希望通过降低页面上线门槛，从而提高商家、运营人员上线页面的效率，因此，对页面可视化编辑器进行了一次迁往移动端的升级。整个视觉风格及交互方式，都进行了全面升级，去除了复杂的布局，用户使用起来更加便捷。
编辑器全面升级
组件库升级
我们把组件库升级为一个全新的平台「Quark」，它作为一个独立的设计资产平台。为编辑器提供组件、图标库等物料，目前已经沉淀的官方组件有 50 多个，200 多种布局形态，能够满足大部分页面需求。同时还支持公司内部其他研发团队开发自己的组件，接入到我们的可视化平台中，通过我们的上线页面服务上线。
组件库升级
属性面板升级
配置体验影响用户搭建效率： 用户在日常使用编辑器时，需通过更改组件配置项以满足页面个性化需求。我们发现，组件配置项的面板结构复杂、组件配置项理解成本高、操作方式不符合用户习惯等体验问题已经严重影响了用户的配置体验与搭建效率。
旧版组件配置项面板： 分类以「功能」、「样式」、「数据」做区分，用户理解成本高，经常出现同一配置项出现在多个分区的情况，极大增加了用户的操作成本。
新版组件配置项面板： 重新定义了面板结构规范，从用户配置操作行为区分，划分为「组件名称」、「组件布局」、「数据录入」、「样式配置」与「楼层配置」5 大区域，不仅利于用户理解，缩短了用户的操作路径，对于产品本身而言，清晰的布局划分与功能定义还提效了新增组件的配置项拆解工作。
属性面板升级
改版前 v.s 改版后 配置项面板整体结构分区、配置项元件化示意
元素编辑器
当我们的官方组件无法满足用户个性化需求的时候，我们思考着能否为用户提供一种自定义组件的能力，所以元素编辑器应运而生。它提供了一个自定义画板的能力，用户可以自由拖拽一些基础元素，如文本、图片、图形等，添加上一些自定义事件和动画，一个生动的的自定义组件，便能轻松完成。
元素编辑器
设计资产沉淀
设计师沉淀了上千套模板提供给用户使用，这些模板全部接入「羚珑」智能图片设计能力，用户能够直接在线修改图片素材内容，轻松实现高质量的页面。另外我们的模板还支持智能配色，用户可以根据配色方案进行页面整体换肤。
设计资产沉淀
羚珑智能作图
为解决用户做图的痛点，羚珑页面编辑器与羚珑图片编辑器深度结合，为用户提供在线图片编辑的能力，用户无须使用一些做图软件，便能在线上完成图片编辑。
