京東羚瓏頁面可視化平臺介紹

前言—

京東零售集團(tuán) · 用戶體驗設(shè)計部打造的「羚瓏智能設(shè)計平臺」于 2019 年 5 月為內(nèi)部運營及商家推出了智能頁面設(shè)計工具，羚瓏智能頁面設(shè)計是一款在線可視化頁面搭建平臺，擁有在線搭建 PC、H5、小程序等多平臺頁面能力，覆蓋頻道頁、活動頁、店鋪頁、滑屏宣傳頁、答題類、互動游戲類、小程序等多個應(yīng)用場景，為商家、運營人員提供在線服務(wù)，讓不懂設(shè)計、不懂代碼的用戶也可以一鍵上線頁面。

基于「Taro」強(qiáng)大的多端能力，能夠?qū)崿F(xiàn)一次搭建，生成 H5、小程序、RN 等跨端應(yīng)用，極大地解決重復(fù)開發(fā)的問題，提高開發(fā)效率。

聊聊羚瓏智能頁面設(shè)計的歷史—

業(yè)務(wù)中求突破

在 2017 年以前，京東線上大量的 PC 頻道頁都是通過手工開發(fā)的，開發(fā)周期非常長，當(dāng)時公司內(nèi)部也有一個 CMS 系統(tǒng)，前端開發(fā)完的頁面，需要通過這個系統(tǒng)進(jìn)行發(fā)布上線。整個頁面的開發(fā)依賴這個系統(tǒng)，并且需要在線上完成這些工作。另外還要錄入一些數(shù)據(jù)坑位，才能預(yù)覽到頁面。當(dāng)時為了解決前端的開發(fā)效率，我們把線上開發(fā)及數(shù)據(jù)坑位錄入的工作，搬到本地通過一系列自研工具完成。完全顛覆了整個頻道頁的開發(fā)方式，整體的開發(fā)思路沿用至今。

日積月累，我們手上已經(jīng)開發(fā)了非常多的頻道頁，而且到后面發(fā)現(xiàn)，很多頁面都非常相似，只是一些樣式上的差異。當(dāng)發(fā)現(xiàn)工作重復(fù)的時候，應(yīng)該是造車的時候了，可以讓我們跑得更快。

搭建平臺雛形—

羚瓏智能頁面設(shè)計的前身，它只能說是一個頁面拼裝系統(tǒng)，有一位頻道運營的同事找過來，希望能快速開發(fā)一個頁面，問：“能不能把線上的某幾頁面中的不同樓層拼在一起，快速上線幾個頁面”，很顯然對于不懂技術(shù)的人來說似乎非常簡單的事情，但是對于我們開發(fā)來說，并非 ?如此簡單。我們嘗試把不同頁面的代碼找出來，快速開發(fā)一個新的頁面，發(fā)現(xiàn)很多問題，如樣式?jīng)_突、腳本沖突等一系列問題。

于是后面我們對已有的頁面，進(jìn)行樓層級的改造，改造后的樓層，能夠獨立運行，并且不同的代碼及樣式只作用于當(dāng)前樓層，這樣，不同樓層組合出來的頁面，能夠正常顯示。

經(jīng)過改造后的公共樓層，為了讓用戶能夠自由組合樓層去拼裝出一個頁面，我們搭建了一個在線可視化平臺，把所有公共樓層以列表形式展示出來，支持通過拖拽形式組裝頁面，支持一些常規(guī)的屬性配置，如公共頭部、顏色等，基本上能滿足部分用戶訴求。

真正的可視化之路—

頁面拼裝系統(tǒng)的痛點

頁面拼裝系統(tǒng)，它主要解決了開發(fā)及用戶的一小部分訴求，離真正的可視化之路，還很遠(yuǎn)。很快拼裝系統(tǒng)暴露了它一些問題：

1. 在技術(shù)層面，由于樓層的粒顆度不夠小，要做一些布局上的調(diào)整，需要調(diào)整到代碼才能支持，缺乏一定的靈活性。以及使用過時的技術(shù)棧 jQuery，后期維護(hù)成本也非常高。
2. 在用戶運營方面，在我們的平臺上不支持根據(jù)真實的數(shù)據(jù)預(yù)覽效果，系統(tǒng)只是完成了頁面框架搭建的事情。
3. 在數(shù)據(jù)錄入方面，還是難以擺脫前面提及的 CMS 系統(tǒng)，用戶需要回到 CMS 系統(tǒng)上面填寫真實的素材，所以存在不同系統(tǒng)之間的切換。

可視化編輯器設(shè)計思路

給合拼裝系統(tǒng)的一些問題，我們開始重新設(shè)計一款真正基于組件化的頁面搭建平臺。

羚瓏智能頁面可視化編輯器，包括幾個基本核心要素：組件庫、設(shè)計器、屬性編輯。

1. 組件庫分為基礎(chǔ)組件和業(yè)務(wù)組件，由于 PC 頁面比較復(fù)雜，有布局的概念，所以我們需要設(shè)計一套布局系統(tǒng)，借鑒于業(yè)界優(yōu)秀的柵格設(shè)計思想，再結(jié)合我們頁面的實際情況，完成了頁面的框架與基礎(chǔ)組件設(shè)計。業(yè)務(wù)組件窮舉了大量線上頁面，把常用的組件進(jìn)行組件化改造，并且支持靈活的屬性配置。

2. 設(shè)計器負(fù)責(zé)組件拖拽、組件加載、渲染邏輯、組件樹操作、動態(tài)屬性注入等功能。通過高階組件的方式，能幫助我們輕松給組件添加一些特定功能。

3. 屬性編輯，組件每個屬性都對應(yīng)著一個類型，那么它屬性數(shù)據(jù)編輯的方式也不一樣。我們設(shè)計的類型基本覆蓋所有組件。另外還設(shè)計了一套條件規(guī)則，讓屬性之間能夠聯(lián)動顯示。

實際上要完成一個高可用的可視化編輯器，需要了解的知識點與細(xì)節(jié)非常之多，這里不做詳細(xì)展開介紹。

經(jīng)過近一年的沉淀，頻道頁開發(fā)已經(jīng)從人工開發(fā)，全面轉(zhuǎn)型為可視化，目前京東線上大部分頻道頁都是通過自助搭建方式完成上線。

編輯器全面升級—

2019 年初，借鑒于過去在公司內(nèi)可視化領(lǐng)域取得了小有成績，我們產(chǎn)品方向重新定位為聚焦商家在線上經(jīng)營過程中的頁面設(shè)計需求，希望通過降低頁面上線門檻，從而提高商家、運營人員上線頁面的效率，因此，對頁面可視化編輯器進(jìn)行了一次遷往移動端的升級。整個視覺風(fēng)格及交互方式，都進(jìn)行了全面升級，去除了復(fù)雜的布局，用戶使用起來更加便捷。

組件庫升級

我們把組件庫升級為一個全新的平臺「Quark」，它作為一個獨立的設(shè)計資產(chǎn)平臺。為編輯器提供組件、圖標(biāo)庫等物料，目前已經(jīng)沉淀的官方組件有 50 多個，200 多種布局形態(tài)，能夠滿足大部分頁面需求。同時還支持公司內(nèi)部其他研發(fā)團(tuán)隊開發(fā)自己的組件，接入到我們的可視化平臺中，通過我們的上線頁面服務(wù)上線。

屬性面板升級

配置體驗影響用戶搭建效率： 用戶在日常使用編輯器時，需通過更改組件配置項以滿足頁面?zhèn)€性化需求。我們發(fā)現(xiàn)，組件配置項的面板結(jié)構(gòu)復(fù)雜、組件配置項理解成本高、操作方式不符合用戶習(xí)慣等體驗問題已經(jīng)嚴(yán)重影響了用戶的配置體驗與搭建效率。

舊版組件配置項面板： 分類以「功能」、「樣式」、「數(shù)據(jù)」做區(qū)分，用戶理解成本高，經(jīng)常出現(xiàn)同一配置項出現(xiàn)在多個分區(qū)的情況，極大增加了用戶的操作成本。

新版組件配置項面板： 重新定義了面板結(jié)構(gòu)規(guī)范，從用戶配置操作行為區(qū)分，劃分為「組件名稱」、「組件布局」、「數(shù)據(jù)錄入」、「樣式配置」與「樓層配置」5 大區(qū)域，不僅利于用戶理解，縮短了用戶的操作路徑，對于產(chǎn)品本身而言，清晰的布局劃分與功能定義還提效了新增組件的配置項拆解工作。

改版前 v.s 改版后 配置項面板整體結(jié)構(gòu)分區(qū)、配置項元件化示意

元素編輯器

當(dāng)我們的官方組件無法滿足用戶個性化需求的時候，我們思考著能否為用戶提供一種自定義組件的能力，所以元素編輯器應(yīng)運而生。它提供了一個自定義畫板的能力，用戶可以自由拖拽一些基礎(chǔ)元素，如文本、圖片、圖形等，添加上一些自定義事件和動畫，一個生動的的自定義組件，便能輕松完成。

設(shè)計資產(chǎn)沉淀

設(shè)計師沉淀了上千套模板提供給用戶使用，這些模板全部接入「羚瓏」智能圖片設(shè)計能力，用戶能夠直接在線修改圖片素材內(nèi)容，輕松實現(xiàn)高質(zhì)量的頁面。另外我們的模板還支持智能配色，用戶可以根據(jù)配色方案進(jìn)行頁面整體換膚。

羚瓏智能作圖

為解決用戶做圖的痛點，羚瓏頁面編輯器與羚瓏圖片編輯器深度結(jié)合，為用戶提供在線圖片編輯的能力，用戶無須使用一些做圖軟件，便能在線上完成圖片編輯。

多應(yīng)用場景適配—

活動場景

我們的活動頁是如何完美適配移動端和桌面端的呢？

一個移動端頁面要適配桌面端，通常的做法是通過響應(yīng)式的手段來實現(xiàn)，這種方式比較簡單粗暴，但是效果其實并不好，例如移動端的首焦圖，如果在桌面端等比放大，那將會占滿首屏，用戶體驗極差。

所以我們采取了一系列的轉(zhuǎn)換規(guī)則來實現(xiàn)：

舉個例子

PC 端的內(nèi)容其實是跟移動端的內(nèi)容做了對應(yīng)關(guān)系。并且根據(jù)端的特性做了一系列通用的變換規(guī)則。比如秒殺商品中秒殺倒計時與商品在移動端為上下布局，而在 PC 端則為左右布局，商品單元在移動端為一排 2 個，在 PC 端則增加為一排 4 個。

轉(zhuǎn)化的規(guī)則是什么？

拉伸： 在布局不發(fā)生改變、內(nèi)容沒有增減的情況下進(jìn)行拉伸，如廣告組模塊：

文本： 文本內(nèi)容較重要時我們會做無增減的拉伸，當(dāng)空間位置受限，同時文本內(nèi)容又不是非常關(guān)鍵的信息時會選擇文本截斷的方式進(jìn)行拉伸。

圖片： 一般來說細(xì)節(jié)圖去做等比拉伸，這樣盡最大可能的保證兩端效果的一致性。

由于移動端寬高比相比 PC 端要小很多，為了保證在大屏上的效果不至于出現(xiàn)“霸屏”的情況，還會有取舍的進(jìn)行裁切。

模塊： 移動端通常會將一個樓層劃分為一個模塊，對應(yīng)到 PC 端會將模塊在橫向進(jìn)行拉伸。

布局改變： 布局發(fā)生改變時需要將元素進(jìn)行重排

如頭圖 banner 模塊，如果采取等比拉伸的策略會導(dǎo)致頭圖特別高，在 PC 端影響第一屏的頁面效率，如果采取裁切的形式將會影響圖片的展示效果，所以采取圖片內(nèi)元素重排的形式進(jìn)行變化。

錨點導(dǎo)航模塊在移動端是橫向的導(dǎo)航，上滑頁面時會吸附到頁面的頂部，而在 PC 端我們一般會吸附在頁面的側(cè)邊固定位置。

內(nèi)容增減： 單元重復(fù)展示模塊一般會用內(nèi)容增加和刪減的形式來處理，比如商品模塊在 PC 端橫向空間比較大的情況下會多展示單元格數(shù)。

結(jié)合這些轉(zhuǎn)換規(guī)則，能讓用戶只要搭建一次頁面，便能快速同時生成兩端活動頁，投放到移動、PC 端平臺，節(jié)省運營成本。

互動營銷場景

過去商家想做一個互動類的頁面，基本上是很難實現(xiàn)的。有著成本高、開發(fā)周期長等問題。互動營銷場景為了解決這一系列痛點，把互動玩法進(jìn)行組件拆解，再通過頁面可視化平臺進(jìn)行配置上線。原來一個互動玩法從方案到上線大概需要一個月左右，現(xiàn)在通過可視化搭建方式只需要十分鐘，大大提高了效率。

小程序場景

我們是京東內(nèi)部首個小程序可視化搭建平臺，借助「Taro」的跨端能力，我們平臺天然具備了發(fā)布跨端小程序頁面的能力，結(jié)合京東「開普勒平臺」的黃金流程，快速產(chǎn)生一套完整的電商小程序代碼。支持發(fā)布微信、百度等多個小程序平臺，完成「九陽」、「戴森」等多個商家小程序上線。

店鋪場景

店鋪場景下，我們實現(xiàn)了三個重要的應(yīng)用場景：

1. 店鋪首頁，為商家提供店鋪首頁搭建的能力，并實現(xiàn)了把設(shè)計結(jié)果與「京東智鋪」的素材打通，滿足商家店鋪首頁裝修訴求。

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

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

編輯器積木化—

為何要做編輯器積木化？

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

為了解決這些問題，我們進(jìn)行了一次編輯器的架構(gòu)全面升級

基于配置的插件化架構(gòu)

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

1. 主設(shè)計器：負(fù)責(zé)編輯器核心邏輯，配置文件解析、插件加載器、組件加載、全局狀態(tài)管理等；
2. 插槽區(qū)域：編輯器會預(yù)留幾個主插槽位置用來加載插件功能；

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

1. 編輯器讀取配置文件，配置文件是對整個編輯器的描述，包括所有插件的配置。
2. 編輯器中提供幾個核心位置以插槽的形式，讀取配置文件中的插件。
3. 編輯器的功能抽離成一個個插件文件，通過異步的形式進(jìn)行加載，這樣做的好處是可以按需加載、邏輯解耦、有利于提高系統(tǒng)的擴(kuò)展性。
4. 每個插件加載可以動態(tài)注入到編輯器應(yīng)用中，同時它能夠共享編輯器的狀態(tài)，完成插件之間通訊以及調(diào)用編輯器的數(shù)據(jù)和方法。
5. 編輯器實際上只做一件事情，就是頁面描述的生成，其他業(yè)務(wù)邏輯交業(yè)務(wù)側(cè)做，這樣的好處是能使編輯器完全解耦獨立運行。只需要做一些與編輯器、插件的通信接口，就能快速使用起來。
6. 各使用場景只需要關(guān)注自己的編輯器應(yīng)用配置即可，互相不影響，包括插件個性化升級。

對外賦能應(yīng)用

目前，我們的編輯器積木化解決方案已經(jīng)應(yīng)用在京東內(nèi)部其他平臺當(dāng)中，如京東數(shù)科江湖平臺、京東 ME 行業(yè)版平臺等，作為頁面設(shè)計引擎助力各平臺的商業(yè)化快速發(fā)展。

結(jié)語—

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

參考—

• 羚瓏組件智能編輯新體驗^[1]
• 揭秘羚瓏頁面-多端智能轉(zhuǎn)換^[2]
• 智能頁面引擎全新亮相 頁面設(shè)計中臺初長成——架構(gòu)篇^[3]

參考資料