凹凸技术揭秘·羚珑页面可视化·成长蜕变之路 | Aotu.io「凹凸实验室」

Chase620 等级 328 1 0

凹凸技术揭秘·羚珑页面可视化·成长蜕变之路 | Aotu.io「凹凸实验室」

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

by Atom on 2020-12-31

羚珑智能页面设计引擎是一款全场景通用页面可视化搭建解决方案,专注于泛零售领域的设计

前言

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

基于「Taro」强大的多端能力,能够实现一次搭建,生成 H5、小程序、RN等跨端应用,极大地解决重复开发的问题,提高开发效率。

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

业务中求突破

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

日积月累,我们手上已经开发了非常多的频道页,而且到后面发现,很多页面都非常相似,只是一些样式上的差异。当发现工作重复的时候,应该是造车的时候了,可以让我们跑得更快。

搭建平台雏形

羚珑智能页面设计的前身,它只能说是一个页面拼装系统,有一位频道运营的同事找过来,希望能快速开发一个页面,问:“能不能把线上的某几页面中的不同楼层拼在一起,快速上线几个页面”,很显然对于不懂技术的人来说似乎非常简单的事情,但是对于我们开发来说,并非如此简单。我们尝试把不同页面的代码找出来,快速开发一个新的页面,发现很多问题,如样式冲突、脚本冲突等一系列问题。

于是后面我们对已有的页面,进行楼层级的改造,改造后的楼层,能够独立运行,并且不同的代码及样式只作用于当前楼层,这样,不同楼层组合出来的页面,能够正常显示。

经过改造后的公共楼层,为了让用户能够自由组合楼层去拼装出一个页面,我们搭建了一个在线可视化平台,把所有公共楼层以列表形式展示出来,支持通过拖拽形式组装页面,支持一些常规的属性配置,如公共头部、颜色等,基本上能满足部分用户诉求。

凹凸技术揭秘·羚珑页面可视化·成长蜕变之路 | Aotu.io「凹凸实验室」

真正的可视化之路

页面拼装系统的痛点

页面拼装系统,它主要解决了开发及用户的一小部分诉求,离真正的可视化之路,还很远。很快拼装系统暴露了它一些问题:

  1. 在技术层面,由于楼层的粒颗度不够小,要做一些布局上的调整,需要调整到代码才能支持,缺乏一定的灵活性。以及使用过时的技术栈 jQuery,后期维护成本也非常高。
  2. 在用户运营方面,在我们的平台上不支持根据真实的数据预览效果,系统只是完成了页面框架搭建的事情。
  3. 在数据录入方面,还是难以摆脱前面提及的 CMS 系统,用户需要回到 CMS 系统上面填写真实的素材,所以存在不同系统之间的切换。

可视化编辑器设计思路

给合拼装系统的一些问题,我们开始重新设计一款真正基于组件化的页面搭建平台。

羚珑智能页面可视化编辑器,包括几个基本核心要素:组件库、设计器、属性编辑。

  1. 组件库分为基础组件和业务组件,由于 PC 页面比较复杂,有布局的概念,所以我们需要设计一套布局系统,借鉴于业界优秀的栅格设计思想,再结合我们页面的实际情况,完成了页面的框架与基础组件设计。业务组件穷举了大量线上页面,把常用的组件进行组件化改造,并且支持灵活的属性配置。

  2. 设计器负责组件拖拽、组件加载、渲染逻辑、组件树操作、动态属性注入等功能。通过高阶组件的方式,能帮助我们轻松给组件添加一些特定功能。

  3. 属性编辑,组件每个属性都对应着一个类型,那么它属性数据编辑的方式也不一样。我们设计的类型基本覆盖所有组件。另外还设计了一套条件规则,让属性之间能够联动显示。

实际上要完成一个高可用的可视化编辑器,需要了解的知识点与细节非常之多,这里不做详细展开介绍。

经过近一年的沉淀,频道页开发已经从人工开发,全面转型为可视化,目前京东线上大部分频道页都是通过自助搭建方式完成上线。

凹凸技术揭秘·羚珑页面可视化·成长蜕变之路 | Aotu.io「凹凸实验室」

编辑器全面升级

2019年初,借鉴于过去在公司内可视化领域取得了小有成绩,我们产品方向重新定位为聚焦商家在线上经营过程中的页面设计需求,希望通过降低页面上线门槛,从而提高商家、运营人员上线页面的效率,因此,对页面可视化编辑器进行了一次迁往移动端的升级。整个视觉风格及交互方式,都进行了全面升级,去除了复杂的布局,用户使用起来更加便捷。

凹凸技术揭秘·羚珑页面可视化·成长蜕变之路 | Aotu.io「凹凸实验室」

组件库升级

我们把组件库升级为一个全新的平台「Quark」,它作为一个独立的设计资产平台。为编辑器提供组件、图标库等物料,目前已经沉淀的官方组件有50多个,200多种布局形态,能够满足大部分页面需求。同时还支持公司内部其他研发团队开发自己的组件,接入到我们的可视化平台中,通过我们的上线页面服务上线。

凹凸技术揭秘·羚珑页面可视化·成长蜕变之路 | Aotu.io「凹凸实验室」

属性面板升级

配置体验影响用户搭建效率: 用户在日常使用编辑器时,需通过更改组件配置项以满足页面个性化需求。我们发现,组件配置项的面板结构复杂、组件配置项理解成本高、操作方式不符合用户习惯等体验问题已经严重影响了用户的配置体验与搭建效率。

旧版组件配置项面板: 分类以「功能」、「样式」、「数据」做区分,用户理解成本高,经常出现同一配置项出现在多个分区的情况,极大增加了用户的操作成本。

新版组件配置项面板: 重新定义了面板结构规范,从用户配置操作行为区分,划分为「组件名称」、「组件布局」、「数据录入」、「样式配置」与「楼层配置」5大区域,不仅利于用户理解,缩短了用户的操作路径,对于产品本身而言,清晰的布局划分与功能定义还提效了新增组件的配置项拆解工作。

凹凸技术揭秘·羚珑页面可视化·成长蜕变之路 | Aotu.io「凹凸实验室」

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

元素编辑器

当我们的官方组件无法满足用户个性化需求的时候,我们思考着能否为用户提供一种自定义组件的能力,所以元素编辑器应运而生。它提供了一个自定义画板的能力,用户可以自由拖拽一些基础元素,如文本、图片、图形等,添加上一些自定义事件和动画,一个生动的的自定义组件,便能轻松完成。

凹凸技术揭秘·羚珑页面可视化·成长蜕变之路 | Aotu.io「凹凸实验室」

设计资产沉淀

设计师沉淀了上千套模板提供给用户使用,这些模板全部接入「羚珑」智能图片设计能力,用户能够直接在线修改图片素材内容,轻松实现高质量的页面。另外我们的模板还支持智能配色,用户可以根据配色方案进行页面整体换肤。

凹凸技术揭秘·羚珑页面可视化·成长蜕变之路 | Aotu.io「凹凸实验室」

羚珑智能作图

为解决用户做图的痛点,羚珑页面编辑器与羚珑图片编辑器深度结合,为用户提供在线图片编辑的能力,用户无须使用一些做图软件,便能在线上完成图片编辑。

凹凸技术揭秘·羚珑页面可视化·成长蜕变之路 | Aotu.io「凹凸实验室」

多应用场景适配

活动场景

我们的活动页是如何完美适配移动端和桌面端的呢?

一个移动端页面要适配桌面端,通常的做法是通过响应式的手段来实现,这种方式比较简单粗暴,但是效果其实并不好,例如移动端的首焦图,如果在桌面端等比放大,那将会占满首屏,用户体验极差。

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

举个例子

PC端的内容其实是跟移动端的内容做了对应关系。并且根据端的特性做了一系列通用的变换规则。比如秒杀商品中秒杀倒计时与商品在移动端为上下布局,而在PC端则为左右布局,商品单元在移动端为一排2个,在PC端则增加为一排4个。

凹凸技术揭秘·羚珑页面可视化·成长蜕变之路 | Aotu.io「凹凸实验室」

转化的规则是什么?

拉伸: 在布局不发生改变、内容没有增减的情况下进行拉伸,如广告组模块:

凹凸技术揭秘·羚珑页面可视化·成长蜕变之路 | Aotu.io「凹凸实验室」

文本: 文本内容较重要时我们会做无增减的拉伸,当空间位置受限,同时文本内容又不是非常关键的信息时会选择文本截断的方式进行拉伸。

凹凸技术揭秘·羚珑页面可视化·成长蜕变之路 | Aotu.io「凹凸实验室」

图片: 一般来说细节图去做等比拉伸,这样尽最大可能的保证两端效果的一致性。

凹凸技术揭秘·羚珑页面可视化·成长蜕变之路 | Aotu.io「凹凸实验室」

由于移动端宽高比相比 PC 端要小很多,为了保证在大屏上的效果不至于出现“霸屏”的情况,还会有取舍的进行裁切。

凹凸技术揭秘·羚珑页面可视化·成长蜕变之路 | Aotu.io「凹凸实验室」

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

凹凸技术揭秘·羚珑页面可视化·成长蜕变之路 | Aotu.io「凹凸实验室」

布局改变: 布局发生改变时需要将元素进行重排

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

凹凸技术揭秘·羚珑页面可视化·成长蜕变之路 | Aotu.io「凹凸实验室」

锚点导航模块在移动端是横向的导航,上滑页面时会吸附到页面的顶部,而在 PC 端我们一般会吸附在页面的侧边固定位置。

凹凸技术揭秘·羚珑页面可视化·成长蜕变之路 | Aotu.io「凹凸实验室」

内容增减: 单元重复展示模块一般会用内容增加和删减的形式来处理,比如商品模块在 PC 端横向空间比较大的情况下会多展示单元格数。

凹凸技术揭秘·羚珑页面可视化·成长蜕变之路 | Aotu.io「凹凸实验室」

结合这些转换规则,能让用户只要搭建一次页面,便能快速同时生成两端活动页,投放到移动、PC端平台,节省运营成本。

互动营销场景

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

凹凸技术揭秘·羚珑页面可视化·成长蜕变之路 | Aotu.io「凹凸实验室」

凹凸技术揭秘·羚珑页面可视化·成长蜕变之路 | Aotu.io「凹凸实验室」

小程序场景

我们是京东内部首个小程序可视化搭建平台,借助「Taro」的跨端能力,我们平台天然具备了发布跨端小程序页面的能力,结合京东「开普勒平台」的黄金流程,快速产生一套完整的电商小程序代码。支持发布微信、百度等多个小程序平台,完成「九阳」、「戴森」等多个商家小程序上线。

凹凸技术揭秘·羚珑页面可视化·成长蜕变之路 | Aotu.io「凹凸实验室」

凹凸技术揭秘·羚珑页面可视化·成长蜕变之路 | Aotu.io「凹凸实验室」

店铺场景

店铺场景下,我们实现了三个重要的应用场景:

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

凹凸技术揭秘·羚珑页面可视化·成长蜕变之路 | Aotu.io「凹凸实验室」

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

凹凸技术揭秘·羚珑页面可视化·成长蜕变之路 | Aotu.io「凹凸实验室」

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

凹凸技术揭秘·羚珑页面可视化·成长蜕变之路 | Aotu.io「凹凸实验室」

编辑器积木化

为何要做编辑器积木化?

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

为了解决这些问题,我们进行了一次编辑器的架构全面升级

基于配置的插件化架构

我们将编辑器划分为:主设计器 + 插槽区域,分别用两种颜色表示:

凹凸技术揭秘·羚珑页面可视化·成长蜕变之路 | Aotu.io「凹凸实验室」

  1. 主设计器:负责编辑器核心逻辑,配置文件解析、插件加载器、组件加载、全局状态管理等;
  2. 插槽区域:编辑器会预留几个主插槽位置用来加载插件功能;

我们大致来了解一下整个编辑器的工作流程:

  1. 编辑器读取配置文件,配置文件是对整个编辑器的描述,包括所有插件的配置。
  2. 编辑器中提供几个核心位置以插槽的形式,读取配置文件中的插件。
  3. 编辑器的功能抽离成一个个插件文件,通过异步的形式进行加载,这样做的好处是可以按需加载、逻辑解耦、有利于提高系统的扩展性。
  4. 每个插件加载可以动态注入到编辑器应用中,同时它能够共享编辑器的状态,完成插件之间通讯以及调用编辑器的数据和方法。
  5. 编辑器实际上只做一件事情,就是页面描述的生成,其他业务逻辑交业务侧做,这样的好处是能使编辑器完全解耦独立运行。只需要做一些与编辑器、插件的通信接口,就能快速使用起来。
  6. 各使用场景只需要关注自己的编辑器应用配置即可,互相不影响,包括插件个性化升级。

对外赋能应用

目前,我们的编辑器积木化解决方案已经应用在京东内部其他平台当中,如京东数科江湖平台、京东ME行业版平台等,作为页面设计引擎助力各平台的商业化快速发展。

凹凸技术揭秘·羚珑页面可视化·成长蜕变之路 | Aotu.io「凹凸实验室」

结语

目前为止,业界有很多优秀的页面可视化产品,为何一直没有尽头,一直有新的平台出现,但都没有最终极的解决方案,那是因为没有真正的「银弹」,只有适应业务发展的产品,才是最适合的。未来我们将会往智能化页面设计的方向努力,必然会擦出新的火花,敬请期待!

参考

凹凸

凹凸

感谢您的阅读,本文由 凹凸实验室 版权所有。如若转载,请注明出处:凹凸实验室(https://aotu.io/notes/2020/12/31/ling-atom-design/

上次更新:2021-02-02 15:48:05

凹凸技术揭秘 · Deco 智能代码 · 开启产研效率革命

凹凸技术揭秘·羚珑智能设计平台·逐梦设计数智化

var gitalkOpts={id:"bm90ZXMvMjAyMC8xMi8zMS9saW5nLWF0b20tZGVzaWduLw==",owner:"o2team",repo:"o2team.github.io",title:"凹凸技术揭秘·羚珑页面可视化·成长蜕变之路",body:"https://aotu.io/notes/2020/12/31/ling-atom-design/index.html\\n\\n羚珑智能页面设计引擎是一款全场景通用页面可视化搭建解决方案,专注于泛零售领域的设计",clientID:"3c4d153e6874260f9c7e",clientSecret:"dd44012504c6168bc05b9266e0554bb28c62ce15",admin:\["youing"\]}

本文转自 https://aotu.io/notes/2020/12/31/ling-atom-design/,如有侵权,请联系删除。

收藏
评论区

相关推荐

Node.js爬虫实战 - 爬你喜欢的
前言 今天没有什么前言,就是想分享些关于爬虫的技术,任性。来吧,各位客官,里边请... 开篇第一问:爬虫是什么嘞? 首先咱们说哈,爬虫不是“虫子”,姑凉们不要害怕。 爬虫 一种通过一定方式按照一定规则抓取数据的操作或方法。 开篇第二问:爬虫能做什么嘞? 来来来,谈谈需求 产品MM: 1. 爱豆的新电影上架了,整体电影评价如何呢? 2. 暗
十分钟打造 3D 物理世界 | Aotu.io「凹凸实验室」
十分钟打造 3D 物理世界 by TH(https://github.com/o2team) on 201
凹凸技术揭秘·羚珑页面可视化·成长蜕变之路 | Aotu.io「凹凸实验室」
凹凸技术揭秘·羚珑页面可视化·成长蜕变之路 by Atom(https://
全新 Phaser 3 游戏引擎特性一览 | Aotu.io「凹凸实验室」
全新 Phaser 3 游戏引擎特性一览 by TH(https://githu
H5游戏开发:FC小蜜蜂 | Aotu.io「凹凸实验室」
H5游戏开发:FC小蜜蜂 by TH(https://github.com/ONESUNDAY) on 20180128 使用 Phaser 游戏引擎开发,主要
H5游戏开发:消灭星星 | Aotu.io「凹凸实验室」
H5游戏开发:消灭星星 by leeenx(https://github.com/leeenx) on 20180
前端GIF生成及优化
羚珑平台的动图可视化设计之前只支持mp4的导出,但在业务方使用场景中大部分需要投放GIF。故本文主要介绍使用 gif.js 生成 GIF 时遇到的一些问题、GIF压缩以及GIF的文件格式和对应编码在gif.js是如何实现的。 GIF 文件结构介绍 位图图形文件格式,采用 8 位( 256 色)重现真彩色的图像。它实际上是一种压缩文档,采用 LZW 压缩算
微信小程序部分api 会触发 onShow onHide
解决部分api触发小程序 onShow onHide 首先要明白 微信小程序的 onShow() onHide()分为页面级的和应用级的,应用级的就是app.js里面的那几个,页面级的就是pages里的 当使用了下列api时,均会触发页面级和应用级的onShow onHide 1. 点击右上角小圆点关闭小程序。 2. 图片预览:wx.preview
微信小程序 - 路由实践
欢迎来到我博客阅读:1\. 前言在微信小程序由一个 App()实例,和众多Page()组成。而在小程序中所有页面的路由全部由框架进行管理,框架以栈的形式维护了所有页面,然后提供了以下 API 来进行路由之间的跳转:1. wx.navigateTo2. wx.redirectTo3. wx.navigateBack4.
小程序 - 保存图片到相册
在做小程序项目的时候,有需求要做一个开票功能,开票之后自然就需要查看发票,在让后台做成图片返回之后,我想了一下,查看发票除了需要看发票图片,提供预览图片可以放大缩小看外,最好应该还要有一个保存图片的功能吧。 刚好微信小程序提供了预览和保存相册两个API,就正好用上。因为预览比较简单,我就只是把保存相册的开发流程写下来,供大家也供自己往后参考了,有什
微信小程序 - 生命周期篇
为什么需要掌握小程序的生命周期当你的领导张小三给你说: 这个请求应该在应用启动的时候发起呢 页面跳转的时候就要取消异步任务哦 应用隐藏的时候记得关闭一下定时器哈那时候的你会一脸懵逼和不知所措还无从下手吗综上所述:我们理所当然的要对微信小程序的生命周期做到滚瓜烂熟,只有这样才能让领
小程序静默登录与维护自定义登录态
1.背景在小程序中,openid是一个用户对于一个小程序/公众号的标识,开发者可以通过这个标识识别出用户,就如同你的身份证一样。2.什么是静默登录?在普通的应用中,用户通过表单验证登录建立用户体系,这种常见的登录方式一般是通过登录页面表单进行登录,对用户来说是有感的。 在小程序中,由于是基于微信,可以通过微信官方提供的API能力,使我们能够无感知得获取
微信小程序体验composition-api(类似vue3)
微信小程序compositionapi用该是什么样子? 使用使用起来应该像是这个样子wxue(options) setup配置应该是包含一个setup选项是一个函数,返回的函数可以this.xxx调用,返回的数据可以this.data.xxx用到,如下import wxue, reactive from 'wxue'wxue( setup(option
JAVA回调机制(CallBack)之小红是怎样买到房子的??
JAVA回调机制CallBack 序言最近学习java,接触到了回调机制(CallBack)。初识时感觉比较混乱,而且在网上搜索到的相关的讲解,要么一言带过,要么说的比较单纯的像是给CallBack做了一个定义。当然了,我在理解了回调之后,再去看网上的各种讲解,确实没什么问题。但是,对于初学的我来说,缺了一个循序渐进的过程。此处,将我对回调机制的个人理解,按
小红书很难爬?最新爬取方法教给你啦~
Python进击者第184篇原创文章前言大家好,我是Kuls。之前写的那篇App抓包软件charles的配置说过,超过30在看,马上更下一篇。所以加班加点给大家写了今天这篇文章。本文将会带着大家完完整整的爬取小红书的全过程 小红书需要做的前提工作就是装配好mitmproxy具体的配置过程,我建议大家参照崔大写的来进行安装https://zhuanlan.z