作者： 凹凸曼
前言
京東零售集團 · 使用者體驗設計部打造的「羚瓏智慧設計平臺」於 2019 年 5 月為內部運營及商家推出了智慧頁面設計工具，羚瓏智慧頁面設計是一款線上視覺化頁面搭建平臺，擁有線上搭建 PC、H5、小程式等多平臺頁面能力，覆蓋頻道頁、活動頁、店鋪頁、滑屏宣傳頁、答題類、互動遊戲類、小程式等多個應用場景，為商家、運營人員提供線上服務，讓不懂設計、不懂程式碼的使用者也可以一鍵上線頁面。
基於「Taro」強大的多端能力，能夠實現一次搭建，生成 H5、小程式、RN等跨端應用，極大地解決重複開發的問題，提高開發效率。
聊聊羚瓏智慧頁面設計的歷史
業務中求突破
在 2017 年以前，京東線上大量的 PC 頻道頁都是通過手工開發的，開發週期非常長，當時公司內部也有一個 CMS 系統，前端開發完的頁面，需要通過這個系統進行釋出上線。整個頁面的開發依賴這個系統，並且需要線上上完成這些工作。另外還要錄入一些資料坑位，才能預覽到頁面。當時為了解決前端的開發效率，我們把線上開發及資料坑位錄入的工作，搬到本地通過一系列自研工具完成。完全顛覆了整個頻道頁的開發方式，整體的開發思路沿用至今。
日積月累，我們手上已經開發了非常多的頻道頁，而且到後面發現，很多頁面都非常相似，只是一些樣式上的差異。當發現工作重複的時候，應該是造車的時候了，可以讓我們跑得更快。
搭建平臺雛形
羚瓏智慧頁面設計的前身，它只能說是一個頁面拼裝系統，有一位頻道運營的同事找過來，希望能快速開發一個頁面，問：“能不能把線上的某幾頁面中的不同樓層拼在一起，快速上線幾個頁面”，很顯然對於不懂技術的人來說似乎非常簡單的事情，但是對於我們開發來說，並非如此簡單。我們嘗試把不同頁面的程式碼找出來，快速開發一個新的頁面，發現很多問題，如樣式衝突、指令碼衝突等一系列問題。
於是後面我們對已有的頁面，進行樓層級的改造，改造後的樓層，能夠獨立執行，並且不同的程式碼及樣式只作用於當前樓層，這樣，不同樓層組合出來的頁面，能夠正常顯示。
經過改造後的公共樓層，為了讓使用者能夠自由組合樓層去拼裝出一個頁面，我們搭建了一個線上視覺化平臺，把所有公共樓層以列表形式展示出來，支援通過拖拽形式組裝頁面，支援一些常規的屬性配置，如公共頭部、顏色等，基本上能滿足部分使用者訴求。
真正的視覺化之路
頁面拼裝系統的痛點
頁面拼裝系統，它主要解決了開發及使用者的一小部分訴求，離真正的視覺化之路，還很遠。很快拼裝系統暴露了它一些問題：
- 在技術層面，由於樓層的粒顆度不夠小，要做一些佈局上的調整，需要調整到程式碼才能支援，缺乏一定的靈活性。以及使用過時的技術棧 jQuery，後期維護成本也非常高。
- 在使用者運營方面，在我們的平臺上不支援根據真實的資料預覽效果，系統只是完成了頁面框架搭建的事情。
- 在資料錄入方面，還是難以擺脫前面提及的 CMS 系統，使用者需要回到 CMS 系統上面填寫真實的素材，所以存在不同系統之間的切換。
視覺化編輯器設計思路
給合拼裝系統的一些問題，我們開始重新設計一款真正基於元件化的頁面搭建平臺。
羚瓏智慧頁面視覺化編輯器，包括幾個基本核心要素：元件庫、設計器、屬性編輯。
-
元件庫分為基礎元件和業務元件，由於 PC 頁面比較複雜，有佈局的概念，所以我們需要設計一套佈局系統，借鑑於業界優秀的柵格設計思想，再結合我們頁面的實際情況，完成了頁面的框架與基礎元件設計。業務元件窮舉了大量線上頁面，把常用的元件進行元件化改造，並且支援靈活的屬性配置。
-
設計器負責元件拖拽、元件載入、渲染邏輯、元件樹操作、動態屬性注入等功能。通過高階元件的方式，能幫助我們輕鬆給元件新增一些特定功能。
-
屬性編輯，元件每個屬性都對應著一個型別，那麼它屬性資料編輯的方式也不一樣。我們設計的型別基本覆蓋所有元件。另外還設計了一套條件規則，讓屬性之間能夠聯動顯示。
實際上要完成一個高可用的視覺化編輯器，需要了解的知識點與細節非常之多，這裡不做詳細展開介紹。
經過近一年的沉澱，頻道頁開發已經從人工開發，全面轉型為視覺化，目前京東線上大部分頻道頁都是通過自助搭建方式完成上線。
編輯器全面升級
2019年初，借鑑於過去在公司內視覺化領域取得了小有成績，我們產品方向重新定位為聚焦商家線上上經營過程中的頁面設計需求，希望通過降低頁面上線門檻，從而提高商家、運營人員上線頁面的效率，因此，對頁面視覺化編輯器進行了一次遷往移動端的升級。整個視覺風格及互動方式，都進行了全面升級，去除了複雜的佈局，使用者使用起來更加便捷。
元件庫升級
我們把元件庫升級為一個全新的平臺「Quark」，它作為一個獨立的設計資產平臺。為編輯器提供元件、圖示庫等物料，目前已經沉澱的官方元件有50多個，200多種佈局形態，能夠滿足大部分頁面需求。同時還支援公司內部其他研發團隊開發自己的元件，接入到我們的視覺化平臺中，通過我們的上線頁面服務上線。
屬性皮膚升級
配置體驗影響使用者搭建效率： 使用者在日常使用編輯器時，需通過更改元件配置項以滿足頁面個性化需求。我們發現，元件配置項的皮膚結構複雜、元件配置項理解成本高、操作方式不符合使用者習慣等體驗問題已經嚴重影響了使用者的配置體驗與搭建效率。
舊版元件配置項皮膚： 分類以「功能」、「樣式」、「資料」做區分，使用者理解成本高，經常出現同一配置項出現在多個分割槽的情況，極大增加了使用者的操作成本。
新版元件配置項皮膚： 重新定義了皮膚結構規範，從使用者配置操作行為區分，劃分為「元件名稱」、「元件佈局」、「資料錄入」、「樣式配置」與「樓層配置」5大區域，不僅利於使用者理解，縮短了使用者的操作路徑，對於產品本身而言，清晰的佈局劃分與功能定義還提效了新增元件的配置項拆解工作。
改版前 v.s 改版後 配置項皮膚整體結構分割槽、配置項元件化示意
元素編輯器
當我們的官方元件無法滿足使用者個性化需求的時候，我們思考著能否為使用者提供一種自定義元件的能力，所以元素編輯器應運而生。它提供了一個自定義畫板的能力，使用者可以自由拖拽一些基礎元素，如文字、圖片、圖形等，新增上一些自定義事件和動畫，一個生動的的自定義元件，便能輕鬆完成。
設計資產沉澱
設計師沉澱了上千套模板提供給使用者使用，這些模板全部接入「羚瓏」智慧圖片設計能力，使用者能夠直接線上修改圖片素材內容，輕鬆實現高質量的頁面。另外我們的模板還支援智慧配色，使用者可以根據配色方案進行頁面整體換膚。
羚瓏智慧作圖
為解決使用者做圖的痛點，羚瓏頁面編輯器與羚瓏圖片編輯器深度結合，為使用者提供線上圖片編輯的能力，使用者無須使用一些做圖軟體，便能線上上完成圖片編輯。
多應用場景適配
活動場景
我們的活動頁是如何完美適配移動端和桌面端的呢？
一個移動端頁面要適配桌面端，通常的做法是通過響應式的手段來實現，這種方式比較簡單粗暴，但是效果其實並不好，例如移動端的首焦圖，如果在桌面端等比放大，那將會佔滿首屏，使用者體驗極差。
所以我們採取了一系列的轉換規則來實現：
舉個例子
PC端的內容其實是跟移動端的內容做了對應關係。並且根據端的特性做了一系列通用的變換規則。比如秒殺商品中秒殺倒數計時與商品在移動端為上下佈局，而在PC端則為左右佈局，商品單元在移動端為一排2個，在PC端則增加為一排4個。
轉化的規則是什麼？
拉伸： 在佈局不發生改變、內容沒有增減的情況下進行拉伸，如廣告組模組：
文字： 文字內容較重要時我們會做無增減的拉伸，當空間位置受限，同時文字內容又不是非常關鍵的資訊時會選擇文字截斷的方式進行拉伸。
圖片： 一般來說細節圖去做等比拉伸，這樣盡最大可能的保證兩端效果的一致性。
由於移動端寬高比相比 PC 端要小很多，為了保證在大屏上的效果不至於出現“霸屏”的情況，還會有取捨的進行裁切。
模組： 移動端通常會將一個樓層劃分為一個模組，對應到PC端會將模組在橫向進行拉伸。
佈局改變： 佈局發生改變時需要將元素進行重排
如頭圖banner模組，如果採取等比拉伸的策略會導致頭圖特別高，在 PC 端影響第一屏的頁面效率，如果採取裁切的形式將會影響圖片的展示效果，所以採取圖片內元素重排的形式進行變化。
錨點導航模組在移動端是橫向的導航，上滑頁面時會吸附到頁面的頂部，而在 PC 端我們一般會吸附在頁面的側邊固定位置。
內容增減： 單元重複展示模組一般會用內容增加和刪減的形式來處理，比如商品模組在 PC 端橫向空間比較大的情況下會多展示單元格數。
結合這些轉換規則，能讓使用者只要搭建一次頁面，便能快速同時生成兩端活動頁，投放到移動、PC端平臺，節省運營成本。
互動營銷場景
過去商家想做一個互動類的頁面，基本上是很難實現的。有著成本高、開發週期長等問題。互動營銷場景為了解決這一系列痛點，把互動玩法進行元件拆解，再通過頁面視覺化平臺進行配置上線。原來一個互動玩法從方案到上線大概需要一個月左右，現在通過視覺化搭建方式只需要十分鐘，大大提高了效率。
小程式場景
我們是京東內部首個小程式視覺化搭建平臺，藉助「Taro」的跨端能力，我們平臺天然具備了釋出跨端小程式頁面的能力，結合京東「開普勒平臺」的黃金流程，快速產生一套完整的電商小程式程式碼。支援釋出微信、百度等多個小程式平臺，完成「九陽」、「戴森」等多個商家小程式上線。
店鋪場景
店鋪場景下，我們實現了三個重要的應用場景：
- 店鋪首頁，為商家提供店鋪首頁搭建的能力，並實現了把設計結果與「京東智鋪」的素材打通，滿足商家店鋪首頁裝修訴求。
- 店鋪推廣，一個基於元素編輯器擴充套件的場景，提供滑屏類頁面活動搭建的能力，提供了極具個性化宣傳頁能力。
- 店鋪購物小程式，以中心化小程式的形式為商家提供私域流量工具，提供豐富的營銷工具，如抽獎、關注有禮、全景館等多種玩法。
編輯器積木化
為何要做編輯器積木化？
- 隨著場景越來越多，編輯器的程式碼邏輯也變得非常複雜，不同場景都有一些特殊的功能邏輯，每個場景又分為模板搭建端和使用者使用端，在編輯器中的表現形式不同，而且編輯器與平臺的業務邏輯強耦合。
- 公司內部很多平臺，都有視覺化搭建的訴求，如果重新開發一個視覺化編輯器，少則至少需要半年時間。如果直接複用我們的編輯器積木，將會大大提升效率。也減少公司內部重複造車的情況。
- 我們編輯器的研發團隊人力有限，不能及時滿足各場景的需求，擴充套件性差。
- 改動一個小小的功能，整個編輯器都需要釋出，如果出問題，所有場景都受影響。
- 編輯器的功能越來越多，體積也隨之上升，時間久了，整個編輯器變得非常臃腫。
為了解決這些問題，我們進行了一次編輯器的架構全面升級
基於配置的外掛化架構
我們將編輯器劃分為：主設計器 + 插槽區域，分別用兩種顏色表示：
- 主設計器：負責編輯器核心邏輯，配置檔案解析、外掛載入器、元件載入、全域性狀態管理等；
- 插槽區域：編輯器會預留幾個主插槽位置用來載入外掛功能；
我們大致來了解一下整個編輯器的工作流程：
- 編輯器讀取配置檔案，配置檔案是對整個編輯器的描述，包括所有外掛的配置。
- 編輯器中提供幾個核心位置以插槽的形式，讀取配置檔案中的外掛。
- 編輯器的功能抽離成一個個外掛檔案，通過非同步的形式進行載入，這樣做的好處是可以按需載入、邏輯解耦、有利於提高系統的擴充套件性。
- 每個外掛載入可以動態注入到編輯器應用中，同時它能夠共享編輯器的狀態，完成外掛之間通訊以及呼叫編輯器的資料和方法。
- 編輯器實際上只做一件事情，就是頁面描述的生成，其他業務邏輯交業務側做，這樣的好處是能使編輯器完全解耦獨立執行。只需要做一些與編輯器、外掛的通訊介面，就能快速使用起來。
- 各使用場景只需要關注自己的編輯器應用配置即可，互相不影響，包括外掛個性化升級。
對外賦能應用
目前，我們的編輯器積木化解決方案已經應用在京東內部其他平臺當中，如京東數科江湖平臺、京東ME行業版平臺等，作為頁面設計引擎助力各平臺的商業化快速發展。
結語
目前為止，業界有很多優秀的頁面視覺化產品，為何一直沒有盡頭，一直有新的平臺出現，但都沒有最終極的解決方案，那是因為沒有真正的「銀彈」，只有適應業務發展的產品，才是最適合的。未來我們將會往智慧化頁面設計的方向努力，必然會擦出新的火花，敬請期待！
參考
歡迎關注凹凸實驗室部落格：aotu.io
或者關注凹凸實驗室公眾號（AOTULabs），不定時推送文章：
