凹凸技術揭秘·羚瓏頁面可視化·成長蛻變之路

作者： 凹凸曼

前言

京東零售集團 · 用戶體驗設計部打造的「羚瓏智能設計平臺」于 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. 店鋪首頁，為商家提供店鋪首頁搭建的能力，并實作了把設計結果與「京東智鋪」的素材打通，滿足商家店鋪首頁裝修訴求，

2. 店鋪推廣，一個基于元素編輯器擴展的場景，提供滑屏類頁面活動搭建的能力，提供了極具個性化宣傳頁能力，

3. 店鋪購物小程式，以中心化小程式的形式為商家提供私域流量工具，提供豐富的營銷工具，如抽獎、關注有禮、全景館等多種玩法，

編輯器積木化

為何要做編輯器積木化？

1. 隨著場景越來越多，編輯器的代碼邏輯也變得非常復雜，不同場景都有一些特殊的功能邏輯，每個場景又分為模板搭建端和用戶使用端，在編輯器中的表現形式不同，而且編輯器與平臺的業務邏輯強耦合，
2. 公司內部很多平臺，都有可視化搭建的訴求，如果重新開發一個可視化編輯器，少則至少需要半年時間，如果直接復用我們的編輯器積木，將會大大提升效率，也減少公司內部重復造車的情況，
3. 我們編輯器的研發團隊人力有限，不能及時滿足各場景的需求，擴展性差，
4. 改動一個小小的功能，整個編輯器都需要發布，如果出問題，所有場景都受影響，
5. 編輯器的功能越來越多，體積也隨之上升，時間久了，整個編輯器變得非常臃腫，

為了解決這些問題，我們進行了一次編輯器的架構全面升級

基于配置的插件化架構

我們將編輯器劃分為：主設計器 + 插槽區域，分別用兩種顏色表示：

1. 主設計器：負責編輯器核心邏輯，組態檔決議、插件加載器、組件加載、全域狀態管理等；
2. 插槽區域：編輯器會預留幾個主插槽位置用來加載插件功能；

我們大致來了解一下整個編輯器的作業流程：

1. 編輯器讀取組態檔，組態檔是對整個編輯器的描述，包括所有插件的配置，
2. 編輯器中提供幾個核心位置以插槽的形式，讀取組態檔中的插件，
3. 編輯器的功能抽離成一個個插件檔案，通過異步的形式進行加載，這樣做的好處是可以按需加載、邏輯解耦、有利于提高系統的擴展性，
4. 每個插件加載可以動態注入到編輯器應用中，同時它能夠共享編輯器的狀態，完成插件之間通訊以及呼叫編輯器的資料和方法，
5. 編輯器實際上只做一件事情，就是頁面描述的生成，其他業務邏輯交業務側做，這樣的好處是能使編輯器完全解耦獨立運行，只需要做一些與編輯器、插件的通信介面，就能快速使用起來，
6. 各使用場景只需要關注自己的編輯器應用配置即可，互相不影響，包括插件個性化升級，

對外賦能應用

目前，我們的編輯器積木化解決方案已經應用在京東內部其他平臺當中，如京東數科江湖平臺、京東ME行業版平臺等，作為頁面設計引擎助力各平臺的商業化快速發展，

結語

目前為止，業界有很多優秀的頁面可視化產品，為何一直沒有盡頭，一直有新的平臺出現，但都沒有最終極的解決方案，那是因為沒有真正的「銀彈」，只有適應業務發展的產品，才是最適合的，未來我們將會往智能化頁面設計的方向努力，必然會擦出新的火花，敬請期待！

參考

• 羚瓏組件智能編輯新體驗
• 揭秘羚瓏頁面-多端智能轉換
• 智能頁面引擎全新亮相 頁面設計中臺初長成——架構篇

歡迎關注凹凸實驗室博客：aotu.io

或者關注凹凸實驗室公眾號（AOTULabs），不定時推送文章：

標籤：JavaScript

上一篇：使用純 CSS 實作滾動陰影效果

下一篇：百度地圖 - 基礎學習(2): 地圖縮放級別ZOOM的獲取和設定