以京東為例，電商會(huì )場(chǎng)應該如何實(shí)現模塊化？

作者：小魚(yú)兒

來(lái)源：未知素設計（ID:gh_49d55c1b69ec）

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

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

文章主要包含4部分：

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

2.什么是“會(huì )場(chǎng)模塊化”

3.“會(huì )場(chǎng)模塊化”的3大好處

4.“會(huì )場(chǎng)模塊化”需要考慮哪些內容

預計閱讀時(shí)間10分鐘

 

---

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

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

 

什么是“會(huì )場(chǎng)模塊化”？

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

“會(huì )場(chǎng)模塊化”的3大好處

1.提升內部效率

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

2.提高統一性

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

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

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

 

“會(huì )場(chǎng)模塊化”需要考慮哪些內容

1.模塊拆解&靈活組合

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

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

 

2.模塊如何使用

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

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

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

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

 

3.如何優(yōu)化

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

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

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

 

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

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

 

總結

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

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

 

寫(xiě)在結尾：

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

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

文章推薦

高級運營(yíng)必會(huì )技能：節奏感

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

裂變套路看似多，總結起來(lái)就一個(gè)