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

做者： 凹凸曼

前言

京東零售集團 · 用戶體驗設計部打造的「羚瓏智能設計平臺」於 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），不定時推送文章。