以京東為例，電商會場應(yīng)該如何實(shí)現(xiàn)模塊化？

作者：小魚兒

來源：未知素設(shè)計(jì)（ID:gh_49d55c1b69ec）

本文為作者授權(quán)鳥哥筆記發(fā)布，轉(zhuǎn)載請聯(lián)系作者并注明出處。

電商活動(dòng)頁面數(shù)量急劇增加，幾乎每天都有新活動(dòng)上線，大到雙11、小到“格力電器日”，活動(dòng)已經(jīng)成為一種常見的運(yùn)營模式。基于此，結(jié)合行業(yè)內(nèi)的觀察，我們提出了“活動(dòng)會場的模塊化”思路。

文章主要包含4部分：

1.為什么要做“活動(dòng)會場模塊化”

2.什么是“會場模塊化”

3.“會場模塊化”的3大好處

4.“會場模塊化”需要考慮哪些內(nèi)容

預(yù)計(jì)閱讀時(shí)間10分鐘

 

---

為什么要做“活動(dòng)會場模塊化”

今天的電商平臺，活動(dòng)作為較為日常的運(yùn)營模式，呈現(xiàn)出“頁面基數(shù)大”、“上線時(shí)間短”、“更新速度快”3大特征。原有的瀑布流式開發(fā)流程，涉及環(huán)節(jié)眾多，包括業(yè)務(wù)、產(chǎn)品、交互、視覺、前端、開發(fā)、測試等。如果每個(gè)活動(dòng)都這樣做，效率很低?；诖?，結(jié)合行業(yè)內(nèi)的觀察，我們提出了“活動(dòng)會場的模塊化”思路。

 

什么是“會場模塊化”？

活動(dòng)會場模塊化，也可以理解為活動(dòng)會場組件化，指的是將活動(dòng)會場拆解成一個(gè)一個(gè)可拼裝組件，之后將多個(gè)組件聚類歸納和整理，形成一套“模版庫”，并在多次活動(dòng)中不斷擴(kuò)充迭代便于使用，提升活動(dòng)搭建效率及設(shè)計(jì)品質(zhì)。模塊化思路落地可大可小，它可以小到一個(gè)Sketch文件，也可以大到一個(gè)系統(tǒng)。不管能實(shí)現(xiàn)到何種程度，它都能有效地提升效率。

“會場模塊化”的3大好處

1.提升內(nèi)部效率

通過“會場模塊化思路”，可以將一些模塊固化下來，做成前端寫好的模塊，以可視化、簡單、易操作的方式，方便運(yùn)營在沒有產(chǎn)品、交互、開發(fā)等資源的情況下，快速搭建活動(dòng)頁，為業(yè)務(wù)賦能。

2.提高統(tǒng)一性

雖然不同活動(dòng)存在一些差異，但通過選用模版庫的組件，可以有效保證統(tǒng)一性，避免活動(dòng)頁面“各做各的”。

3.提升活動(dòng)質(zhì)量

通過模塊化思路，可以將各個(gè)活動(dòng)的交互設(shè)計(jì)經(jīng)驗(yàn)沉淀下來，有效指導(dǎo)其他活動(dòng)的設(shè)計(jì)，提升整體品質(zhì)。如果運(yùn)營沒有相關(guān)交互背景，也可以用低成本的方式搭建質(zhì)量還不錯(cuò)的頁面。

 

“會場模塊化”需要考慮哪些內(nèi)容

1.模塊拆解&靈活組合

一般來說，不建議將會場拆分的過于瑣碎，每個(gè)模塊至少都是“有含義”的。 比如以京東618主會場為例，模塊都是“坑位組合”，如下圖所示，其中包含了“會場——1行1個(gè)/2個(gè)/3個(gè)/4個(gè)”等模塊。通過對“會場、品牌、關(guān)鍵詞”等元素進(jìn)行組合拼裝，結(jié)合業(yè)務(wù)場景，快速產(chǎn)出了3套會場樓層組合。

除此之外，模塊梳理中，還需保留一定的靈活度。比如有的單品有“秒殺價(jià)、原價(jià)、銷量、好評數(shù)”等信息，但有的單品是新品，沒有大力度的優(yōu)惠。這就要求我們在考慮基礎(chǔ)模塊時(shí)，留有一定的靈活度，可以在一定范圍內(nèi)隱藏/展示部分信息。如果完全是2種類別的坑位，則可以考慮獨(dú)立成一個(gè)新的模塊。

 

2.模塊如何使用

除了模塊拆解，模塊的使用也十分重要。如果設(shè)計(jì)出來的組件庫沒有人使用，也無法真正提高效率。如何依托現(xiàn)有的平臺，將模塊簡單高效的同步使用者，也是模塊化中非常重要的問題。

有的模塊使用十分簡單，比如小組內(nèi)某位同學(xué)整理了一份模版，將Sketch文件在組內(nèi)同步應(yīng)用，其他設(shè)計(jì)同學(xué)只需要復(fù)制就好。這是只涉及設(shè)計(jì)層面的“模塊化思路”。有的模塊會對應(yīng)到一個(gè)系統(tǒng)，功能更強(qiáng)大，使用起來也更復(fù)雜。以京東內(nèi)部工具體系中，對類似系統(tǒng)做了大致的梳理，如下圖所示。因?yàn)檫^于復(fù)雜，所以進(jìn)行了簡化以幫助理解。

在A系統(tǒng)中，運(yùn)營需要提供原始素材，視覺需要上傳坑位PSD視覺模版，系統(tǒng)組合生成坑位圖片；之后圖片被上傳到B系統(tǒng)中，運(yùn)營依據(jù)會場的框架，將圖片收集到一起（比如樓層1中所有的圖片、樓層2中所有的圖片等）；再由B系統(tǒng)將圖片傳到C系統(tǒng)，運(yùn)營通過該系統(tǒng)選擇可交互的模塊，搭建頁面，系統(tǒng)自動(dòng)填充從B系統(tǒng)獲取的圖片，最終頁面上線。

其實(shí)不難看出，如果將運(yùn)營作為一個(gè)用戶，整個(gè)系統(tǒng)較復(fù)雜，系統(tǒng)和系統(tǒng)之間也存在一些壁壘，用起來并不是十分順暢，后續(xù)還是有一些提升空間。

 

3.如何優(yōu)化

模塊的優(yōu)化思路共涉及2個(gè)方面，如下圖所示。

a.面向內(nèi)部——內(nèi)部人員使用體驗(yàn)優(yōu)化

不管模塊化落地規(guī)模如何，是簡單的Sketch/PS文件復(fù)用，還是以復(fù)雜系統(tǒng)落地，必然會有相應(yīng)的使用流程。如何提升內(nèi)部員工的使用效率，是核心優(yōu)化點(diǎn)之一。 除此之外，通過收集模塊內(nèi)部的使用數(shù)據(jù)，比如“3C哪個(gè)模塊用的最多”、“哪個(gè)模塊的成交數(shù)據(jù)表現(xiàn)更好”，給出參考意見，幫助他們更好的搭建頁面，但這對系統(tǒng)要求會更高一些。

 

b.面向外部——模塊本身的迭代

面向C端的用戶，模塊本身也需要不斷驗(yàn)證、迭代，優(yōu)化我們的設(shè)計(jì)。 這就需要我們的“模塊化系統(tǒng)”功能必須包含“數(shù)據(jù)統(tǒng)計(jì)&查看”的功能，通過統(tǒng)計(jì)用戶操作的數(shù)據(jù)，為后期的迭代提供基礎(chǔ)數(shù)據(jù)支持。

 

總結(jié)

關(guān)于“活動(dòng)會場模塊化”的思考大概就是這些。模塊化的思路可大可小，不管是簡單的Sketch集合，還是龐大的系統(tǒng)，只要是沿著模塊化的思路進(jìn)行梳理，都可以幫助我們提升自己的效率。

隨著AI技術(shù)的發(fā)展，未來簡單、重復(fù)性的工作必然會被取代。希望可以通過模塊化的思路，解決一些重復(fù)性的工作，讓自己有更多的精力投入到機(jī)器無法替代的，整合性更強(qiáng)，難度更大的活動(dòng)設(shè)計(jì)中去。

 

寫在結(jié)尾：

大家在工作中有什么模塊化的好建議or好工具，熱切期盼留言分享！

以上都是我的初步思考，還有很多地方不完善，歡迎大家批評指正。感謝大家的耐心閱讀，么么噠～～

文章推薦

高級運(yùn)營必會技能：節(jié)奏感

電商小白如何從0到1策劃一場七夕節(jié)大促？

裂變套路看似多，總結(jié)起來就一個(gè)