在電商的世界，似乎一切時間都可以和購物掛鉤，5.20、6.18、11.11、12.12、年貨…..;有購物節(jié)就要有各種各樣的會場進行促銷展示;面對越來越細分化的類目會場，作為設(shè)計師需要把多達幾十個會場一一設(shè)計出嗎?
NO!如何提高設(shè)計及后續(xù)工作的效率，似乎在工業(yè)產(chǎn)品的標準化零件中找到了答案——標準化模塊設(shè)計
如果將會場比作工業(yè)產(chǎn)品，模塊即是零件，動線即是圖紙;使用不同的模塊與動線，即可組成滿足不同需求的會場。
如何進行會場模塊與動線設(shè)計?接下來將從模塊設(shè)計原則、其它設(shè)計要求、會場動線設(shè)計三個部分進行講解。
從往年多次負責(zé)大促分會場的設(shè)計實踐中，總結(jié)出一些模塊化設(shè)計原則：可變性、可拓展性、豐富性、創(chuàng)新性。其中可變性與可拓展性屬于結(jié)構(gòu)化原則，創(chuàng)新性和豐富性屬于內(nèi)容性原則;接下來將逐一介紹遵循這些原則的原因以及如何遵循。
Part 1. 可變性原則
模塊化設(shè)計并不意味著所有會場一成不變，需求總是多種多樣的，如何在模塊設(shè)計下滿足需求的多樣性，是遵循可變性原則的重要原因。
案例 1：
不同會場因其自身的需求，所要求放置的類目入口數(shù)量不可能完全相同，而在類目入口模塊的設(shè)計中，如何滿足數(shù)量的可變性呢?需要我們把握屏幕尺寸、模塊最小可接受尺寸、瀏覽動線、尺寸的規(guī)律和融合，然后設(shè)計基礎(chǔ)組件，需求方可根據(jù)不同的基礎(chǔ)組件搭建不同數(shù)量的的類目入口。
如下圖示：
案例 2：
單品模塊的設(shè)計，不同類目要求展示的信息側(cè)重點不同，拿一排一個單品展示樣式為例：我們會模塊化商品展示尺寸，固定信息可變區(qū)域，設(shè)計可變信息的基礎(chǔ)組件。
在可變區(qū)域內(nèi)，考慮信息的布局、尺寸、字號、間距等，在方寸間千變?nèi)f化，如圖示：
Part 2. 可拓展性原則
方盤貨策略、用戶瀏覽記錄、實時庫存等都會影響會場各模塊的內(nèi)容展示數(shù)量，如何滿足因數(shù)量變化而形成的會場差異，是模塊化設(shè)計中考慮可拓展性原則的重要原因
案例 1：「加車商品降價提醒」模塊：此模塊自動拉取用戶加車商品降價記錄，因此用戶不同看到的內(nèi)容數(shù)量不同，此時的模塊設(shè)計需要考慮0、1、2、3…數(shù)量的變化，同時需要考慮頁面布局、模塊占用高度等，如下圖示：(此時，不使用一排多個豎排版的布局樣式，是因為當(dāng)只有1/2個商品時，布局有缺陷，對數(shù)量的兼容性較差)
案例2：優(yōu)惠券模塊：同樣是需要考慮數(shù)量變化帶來的樣式不同，如下圖示：
案例3：常用的品牌+單品的模塊設(shè)計，因考慮平鋪單品模塊較高，采用單品橫行滑動的設(shè)計，既能拓展單品展示數(shù)量，又能較好的控制模塊高度，如下圖示：
Tips：有些模塊的設(shè)計要同時考慮不同原則的設(shè)計要求，就如類目入口的設(shè)計需要遵循可變性原則的同時，也要遵循可拓展性來滿足數(shù)量的變化。
Part 3. 豐富性原則
需求總是多種多樣的，以品牌模塊為例，不同的類目有不同的展示需求;我們不能強迫所有會場使用同樣的模板，這違背了類目個性;此時需要我們收集類目需求，判斷需求的合理性，然后進行樣式設(shè)計：
Part 4. 創(chuàng)新性原則
模塊設(shè)計并不是延續(xù)以往一成不變的，好的模塊需要繼承，但更需要創(chuàng)新來應(yīng)對需求的變化;創(chuàng)新并不是天馬行空毫無根據(jù)的，需要我們在充分了解需求的前提下同時考慮尺寸、間距、大小等天然限制，更需要我們平時素材的積累來尋找靈感：
在實際的會場模塊設(shè)計中，除了要遵循上述四條設(shè)計原則，還有一些更細致的設(shè)計要求需要我們綜合考量：
1. 挖掘運營實際需求
2. 屏幕的天然限制(尺寸、字號、間距、大小等)
3. 技術(shù)的可實施性
4. 用戶體驗感受
5. 視覺氛圍呈現(xiàn)
已經(jīng)講了很多關(guān)于會場標準模塊化設(shè)計的原則和注意事項，此時我們會根據(jù)設(shè)計，輸出一份包含各種各樣的模塊組件庫交付給需求方。我們的設(shè)計工作完結(jié)了嗎?當(dāng)然不是!
正如剛開始所提到的：將會場比作工業(yè)產(chǎn)品，模塊即是零件，動線即是圖紙;若沒有一份圖紙的指引，需求方搭建出的會場頁面可能是千奇百怪的，這無疑增加了我們后續(xù)評審的工作，同時需求方也可能因為錯誤的搭建而做無用功;此時我們不僅要輸出模塊組件，還要給到動線設(shè)計示例。
作為設(shè)計師如何給出合理的動線設(shè)計示例?對于這個問題比較難回答，更多的源于日常工作的經(jīng)驗積累，這里有三條積累途徑分享給大家：
1. 來自日常各類目促銷賣場的設(shè)計、評審總結(jié)(熟知各類目特性、日常賣場結(jié)構(gòu)與沉淀)
2. 來自往年大促設(shè)計的經(jīng)驗沉淀(各類目上線后的實際情況、數(shù)據(jù)分析、效果對比;總結(jié)精華，剔除糟粕)
3. 來自對競品的學(xué)習(xí)(多看、多截屏，分析總結(jié)競品動線優(yōu)缺點)
最后輸出動線示例圖，如下圖：(一般會給出常用的幾條示例)
動線設(shè)計示例更多是作為參照物存在的，類目還需根據(jù)實際需求看待，動線搭建應(yīng)以簡潔高效、清晰明了為核心設(shè)計點，更要在各類目搭建完會場后進行逐一的交互評審檢查。
以上就是上海網(wǎng)站制作公司——海淘科技為你推出《京東分會場模塊化電商設(shè)計總結(jié)》的全部內(nèi)容。想看更多的內(nèi)容，可點擊：如何利用微博做營銷，于此同時，海淘科技還提供了網(wǎng)站建設(shè)案例，可點擊：金融類網(wǎng)站設(shè)計案例
