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