電商實(shí)戰(zhàn)！從京東分會(huì)場(chǎng)學(xué)到的模塊化設(shè)計(jì)方法總結(jié)

Xueyuan：在電商的世界，似乎一切時(shí)間都可以和購(gòu)物掛鉤，5.20、6.18、11.11、12.12、年貨…..；有購(gòu)物節(jié)就要有各種各樣的會(huì)場(chǎng)進(jìn)行促銷展示；面對(duì)越來(lái)越細(xì)分化的類目會(huì)場(chǎng)，作為設(shè)計(jì)師需要把多達(dá)幾十個(gè)會(huì)場(chǎng)一一設(shè)計(jì)出嗎？

NO！如何提高設(shè)計(jì)及后續(xù)工作的效率，似乎在工業(yè)產(chǎn)品的標(biāo)準(zhǔn)化零件中找到了答案——標(biāo)準(zhǔn)化模塊設(shè)計(jì)

如果將會(huì)場(chǎng)比作工業(yè)產(chǎn)品，模塊即是零件，動(dòng)線即是圖紙；使用不同的模塊與動(dòng)線，即可組成滿足不同需求的會(huì)場(chǎng)。

如何進(jìn)行會(huì)場(chǎng)模塊與動(dòng)線設(shè)計(jì)？接下來(lái)將從模塊設(shè)計(jì)原則、其它設(shè)計(jì)要求、會(huì)場(chǎng)動(dòng)線設(shè)計(jì)三個(gè)部分進(jìn)行講解。

零基礎(chǔ)的同學(xué)移步：《設(shè)計(jì)小科普！給設(shè)計(jì)師的模塊化設(shè)計(jì)新手完全入門指南》

一. 模塊設(shè)計(jì)原則

從往年多次負(fù)責(zé)大促分會(huì)場(chǎng)的設(shè)計(jì)實(shí)踐中，總結(jié)出一些模塊化設(shè)計(jì)原則：可變性、可拓展性、豐富性、創(chuàng)新性。其中可變性與可拓展性屬于結(jié)構(gòu)化原則，創(chuàng)新性和豐富性屬于內(nèi)容性原則；接下來(lái)將逐一介紹遵循這些原則的原因以及如何遵循。

Part 1. 可變性原則

模塊化設(shè)計(jì)并不意味著所有會(huì)場(chǎng)一成不變，需求總是多種多樣的，如何在模塊設(shè)計(jì)下滿足需求的多樣性，是遵循可變性原則的重要原因。

案例 1：

不同會(huì)場(chǎng)因其自身的需求，所要求放置的類目入口數(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í)庫(kù)存等都會(huì)影響會(huì)場(chǎng)各模塊的內(nèi)容展示數(shù)量，如何滿足因數(shù)量變化而形成的會(huì)場(chǎng)差異，是模塊化設(shè)計(jì)中考慮可拓展性原則的重要原因

案例 1：「加車商品降價(jià)提醒」模塊：此模塊自動(dòng)拉取用戶加車商品降價(jià)記錄，因此用戶不同看到的內(nèi)容數(shù)量不同，此時(shí)的模塊設(shè)計(jì)需要考慮0、1、2、3…數(shù)量的變化，同時(shí)需要考慮頁(yè)面布局、模塊占用高度等，如下圖示：（此時(shí)，不使用一排多個(gè)豎排版的布局樣式，是因?yàn)楫?dāng)只有1/2個(gè)商品時(shí)，布局有缺陷，對(duì)數(shù)量的兼容性較差）

案例2：優(yōu)惠券模塊：同樣是需要考慮數(shù)量變化帶來(lái)的樣式不同，如下圖示：

案例3：常用的品牌+單品的模塊設(shè)計(jì)，因考慮平鋪單品模塊較高，采用單品橫行滑動(dòng)的設(shè)計(jì)，既能拓展單品展示數(shù)量，又能較好的控制模塊高度，如下圖示：

Tips：有些模塊的設(shè)計(jì)要同時(shí)考慮不同原則的設(shè)計(jì)要求，就如類目入口的設(shè)計(jì)需要遵循可變性原則的同時(shí)，也要遵循可拓展性來(lái)滿足數(shù)量的變化。

Part 3. 豐富性原則

需求總是多種多樣的，以品牌模塊為例，不同的類目有不同的展示需求；我們不能強(qiáng)迫所有會(huì)場(chǎng)使用同樣的模板，這違背了類目個(gè)性；此時(shí)需要我們收集類目需求，判斷需求的合理性，然后進(jìn)行樣式設(shè)計(jì)：

Part 4. 創(chuàng)新性原則

模塊設(shè)計(jì)并不是延續(xù)以往一成不變的，好的模塊需要繼承，但更需要?jiǎng)?chuàng)新來(lái)應(yīng)對(duì)需求的變化；創(chuàng)新并不是天馬行空毫無(wú)根據(jù)的，需要我們?cè)诔浞至私庑枨蟮那疤嵯峦瑫r(shí)考慮尺寸、間距、大小等天然限制，更需要我們平時(shí)素材的積累來(lái)尋找靈感：

二. 其它設(shè)計(jì)要求

在實(shí)際的會(huì)場(chǎng)模塊設(shè)計(jì)中，除了要遵循上述四條設(shè)計(jì)原則，還有一些更細(xì)致的設(shè)計(jì)要求需要我們綜合考量：

1. 挖掘運(yùn)營(yíng)實(shí)際需求

2. 屏幕的天然限制（尺寸、字號(hào)、間距、大小等）

3. 技術(shù)的可實(shí)施性

4. 用戶體驗(yàn)感受

5. 視覺(jué)氛圍呈現(xiàn)

三. 會(huì)場(chǎng)動(dòng)線設(shè)計(jì)

已經(jīng)講了很多關(guān)于會(huì)場(chǎng)標(biāo)準(zhǔn)模塊化設(shè)計(jì)的原則和注意事項(xiàng)，此時(shí)我們會(huì)根據(jù)設(shè)計(jì)，輸出一份包含各種各樣的模塊組件庫(kù)交付給需求方。我們的設(shè)計(jì)工作完結(jié)了嗎？當(dāng)然不是！

正如剛開(kāi)始所提到的：將會(huì)場(chǎng)比作工業(yè)產(chǎn)品，模塊即是零件，動(dòng)線即是圖紙；若沒(méi)有一份圖紙的指引，需求方搭建出的會(huì)場(chǎng)頁(yè)面可能是千奇百怪的，這無(wú)疑增加了我們后續(xù)評(píng)審的工作，同時(shí)需求方也可能因?yàn)殄e(cuò)誤的搭建而做無(wú)用功；此時(shí)我們不僅要輸出模塊組件，還要給到動(dòng)線設(shè)計(jì)示例。

作為設(shè)計(jì)師如何給出合理的動(dòng)線設(shè)計(jì)示例？對(duì)于這個(gè)問(wèn)題比較難回答，更多的源于日常工作的經(jīng)驗(yàn)積累，這里有三條積累途徑分享給大家：

1. 來(lái)自日常各類目促銷賣場(chǎng)的設(shè)計(jì)、評(píng)審總結(jié)（熟知各類目特性、日常賣場(chǎng)結(jié)構(gòu)與沉淀）

2. 來(lái)自往年大促設(shè)計(jì)的經(jīng)驗(yàn)沉淀（各類目上線后的實(shí)際情況、數(shù)據(jù)分析、效果對(duì)比；總結(jié)精華，剔除糟粕）

3. 來(lái)自對(duì)競(jìng)品的學(xué)習(xí)（多看、多截屏，分析總結(jié)競(jìng)品動(dòng)線優(yōu)缺點(diǎn)）

最后輸出動(dòng)線示例圖，如下圖：（一般會(huì)給出常用的幾條示例）

總結(jié)

動(dòng)線設(shè)計(jì)示例更多是作為參照物存在的，類目還需根據(jù)實(shí)際需求看待，動(dòng)線搭建應(yīng)以簡(jiǎn)潔高效、清晰明了為核心設(shè)計(jì)點(diǎn)，更要在各類目搭建完會(huì)場(chǎng)后進(jìn)行逐一的交互評(píng)審檢查。

「組件化設(shè)計(jì)好文合集」

1. 《這篇8000字長(zhǎng)文，能幫你學(xué)會(huì)組件化設(shè)計(jì)與開(kāi)發(fā)的思維方式》
2. 《進(jìn)階必讀！可能是最全面的組件化開(kāi)發(fā)與設(shè)計(jì)指南》

原文地址：jdc.jd

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：yuan@uisdc.com】

================明星欄目推薦================

優(yōu)優(yōu)教程網(wǎng)： UiiiUiii.com 是優(yōu)設(shè)旗下優(yōu)質(zhì)中文教程網(wǎng)站，分享了大量PS、AE、AI、C4D等中文教程，為零基礎(chǔ)設(shè)計(jì)愛(ài)好者也準(zhǔn)備了貼心的知識(shí)樹(shù)專欄。開(kāi)啟免費(fèi)自學(xué)新篇章，按照我們的專欄一步步學(xué)習(xí)，一定可以迅速上手并制作出酷炫的視覺(jué)效果。

設(shè)計(jì)導(dǎo)航：國(guó)內(nèi)人氣最高的設(shè)計(jì)網(wǎng)址導(dǎo)航，設(shè)計(jì)師必備：http://hao.uisdc.com