現(xiàn)實(shí)生活中评腺，經(jīng)營(yíng)店鋪需要進(jìn)行裝修；而電商亦是如此，需要通過CMS系統(tǒng)完成“店鋪裝修”——各項(xiàng)欄目的設(shè)計(jì)與布局焰宣。

這篇文章介紹電商系統(tǒng)的店鋪裝修功能，店鋪裝修簡(jiǎn)單來說就是對(duì)頁面的動(dòng)態(tài)配置捕仔。打個(gè)比方匕积，我們APP的首頁，從上往下的布局是這樣：搜索欄榜跌、錄播圖闪唆、標(biāo)簽欄、廣告位钓葫、商品推薦悄蕾；我們可以這樣把設(shè)計(jì)原型交付給研發(fā)進(jìn)行開發(fā)。

那么店鋪裝修的作用是什么呢础浮？

店鋪裝修首先可以改變頁面各個(gè)組件的布局排版帆调，比如講標(biāo)簽欄和廣告位調(diào)換位置；可以增加或者減少頁面的組件豆同，可以在首頁加上一個(gè)優(yōu)惠券的組件番刊，也可以去掉輪播圖的組件；還可以對(duì)組件定義不同的樣式影锈，輪播圖可以選擇3張或者4張芹务，標(biāo)簽欄可以選擇單行或者多行。

可以看出精居，店鋪裝修的過程其實(shí)就是我們畫原型的過程锄禽。首先定義一個(gè)頁面，然后定義組件靴姿，在設(shè)計(jì)組件的樣式沃但；最終生成頁面。只不過店鋪裝修把這個(gè)過程寫到了系統(tǒng)的程序當(dāng)中佛吓，修改保存之后系統(tǒng)也就變成了修改后的樣子宵晚。

同時(shí)垂攘，可以看出店鋪裝修的過程修改了系統(tǒng)的代碼，這也就意味著對(duì)技術(shù)的要求是比較高的淤刃。

其實(shí)店鋪裝修這個(gè)功能的本身是CMS系統(tǒng)晒他，店鋪裝修只是CMS系統(tǒng)在電商系統(tǒng)中的部分應(yīng)用。

一逸贾、CMS系統(tǒng)與店鋪裝修的關(guān)系

CMS系統(tǒng)叫內(nèi)容管理系統(tǒng)陨仅，應(yīng)用于很多的行業(yè)，將CMS系統(tǒng)應(yīng)用于電商行業(yè)就變成了店鋪裝修铝侵。

我們來看下百度百科給出的定義：CMS是”Content Management System”的縮寫灼伤，意為“內(nèi)容管理系統(tǒng)”。

內(nèi)容管理系統(tǒng)是企業(yè)信息化建設(shè)和電子政務(wù)的新寵咪鲜，也是一個(gè)相對(duì)較新的市場(chǎng)狐赡。對(duì)于內(nèi)容管理，業(yè)界還沒有一個(gè)統(tǒng)一的定義疟丙，不同的機(jī)構(gòu)有不同的理解颖侄。也就是說，對(duì)于內(nèi)容管理系統(tǒng)業(yè)界還沒有統(tǒng)一的標(biāo)準(zhǔn)享郊，但是我們知道它就是管理內(nèi)容的览祖；而這個(gè)內(nèi)容放在電商系統(tǒng)當(dāng)中就是各個(gè)頁面，對(duì)電商系統(tǒng)的內(nèi)容管理也叫做店鋪裝修拂蝎，店鋪裝修的技術(shù)應(yīng)用的是CMS技術(shù)穴墅。

而現(xiàn)階段由于產(chǎn)品的不同、公司的需求不同温自，導(dǎo)致我們看到很多產(chǎn)品的店鋪裝修功能是不相同的玄货。有的產(chǎn)品僅僅是能夠調(diào)整頁面組件的排版，有的產(chǎn)品僅僅能夠配置首頁悼泌，對(duì)技術(shù)的高要求體現(xiàn)在我們很多時(shí)候無法充分利用CMS系統(tǒng)松捉，而不同產(chǎn)品由于業(yè)務(wù)的不同也導(dǎo)致其設(shè)計(jì)不同，

本文將總結(jié)店鋪裝修的設(shè)計(jì)方法與方法論馆里，擁有一套好的方法論也許不能讓我們戰(zhàn)無不勝隘世，但是有總比沒有好。

二鸠踪、如何設(shè)計(jì)店鋪裝修

之所以將電商系統(tǒng)頁面的動(dòng)態(tài)配置叫做店鋪裝修丙者，是因?yàn)檫@個(gè)功能與我們現(xiàn)實(shí)中裝修房子比較類似，所有在介紹店鋪裝修之前营密，我們首先回想下如何裝修房子：

1. 一間房子剛蓋好有好多的房間械媒，而不同房間的裝修方式肯定是不同的——客廳需要放電視，測(cè)試需要放馬桶，所以我們首頁要選擇好一個(gè)房間纷捞。

2. 當(dāng)我們選擇好房間之后然后就要進(jìn)行裝修了痢虹，在裝修之前我們還需要做一件事情，那就是買家具主儡、買裝修材料奖唯，現(xiàn)在我們來裝修廁所，需要準(zhǔn)備馬桶糜值、垃圾桶丰捷、衛(wèi)生紙。

3. 當(dāng)我們要準(zhǔn)備馬桶時(shí)寂汇，我們要考慮這么一個(gè)問題：使用什么樣式的馬桶瓢阴，功能比較齊全的最新日式，還是市面上常見的馬桶健无，是用金馬桶還是銀馬桶，也就是說針對(duì)用一個(gè)物品的裝修我們可以有多種選擇液斜。

電商系統(tǒng)的店鋪裝修功能其實(shí)就是借鑒我們裝修房子的過程累贤，只不過房子變成了我們的產(chǎn)品、房間變成了各個(gè)頁面少漆、裝修的物品就是組件臼膏。

在我們裝修房子的時(shí)候我們要提前想好需要哪些物品，一塊買回來然后再裝修示损，這也是最重要的一步渗磅。對(duì)于裝修房子，有三步過程：房子和房間是一定的检访；關(guān)鍵在于要準(zhǔn)備什么物品始鱼，因?yàn)槲锲肥切枰I的，而且各式各樣的都有脆贵，物品的價(jià)格決定了房子的豪華程度医清。

同樣對(duì)于電商的店鋪裝修，準(zhǔn)備組件也是最重要的一步卖氨，也就是定義組件的樣式和規(guī)則会烙，把它寫到代碼里面，當(dāng)我們用的時(shí)候直接調(diào)用筒捺。因?yàn)槟悴豢赡茏约涸煲粋€(gè)新的組件柏腻，我們只能在系統(tǒng)已有的組件庫里面選擇我們需要的組件，我們可以自定義的是組件的樣式系吭，而不同的組件樣式又有著不同的規(guī)則五嫂。

那么組件是什么呢，組件就是各個(gè)單元村斟，比如輪播圖是一個(gè)組件贫导、搜索是一個(gè)組件抛猫、商品是一個(gè)組件，而每一種組件肯定是有著很多的樣式的孩灯。

下面闺金，我們根據(jù)裝修房子的過程來尋找店鋪裝修的過程，以及需要準(zhǔn)備的東西峰档。

1. 首選我們要選擇要裝修的頁面败匹，是首頁還是詳情頁還是列表頁等等，而每個(gè)頁面的布局排版肯定是不一樣的讥巡。

選擇頁面這一步需要考慮幾個(gè)問題：是不是每個(gè)頁面都可以裝修掀亩、每個(gè)頁面可以裝修嗎。還有這些都是已有的頁面欢顷，我可不可以新建一個(gè)頁面進(jìn)行裝修槽棍，新建的話這也頁面是不屬于系統(tǒng)的，如何與系統(tǒng)進(jìn)行聯(lián)系抬驴。

2. 選好頁面之后我們要選擇組件進(jìn)行布局排版炼七、以首頁為例，搜索放在哪里布持、輪播圖放在哪里豌拙、廣告位放在哪里，是我們需要考慮的問題题暖。

這是選擇組件按傅，前提是我們得有組件，也就是說我們?cè)诋a(chǎn)品設(shè)計(jì)的時(shí)候胧卤，需要為每個(gè)組件定義樣式與規(guī)則唯绍，把這些組件寫到系統(tǒng)里面之后，我們才可以調(diào)用這些組件灌侣。

3. 我們做好布局排版之后推捐，就是為每個(gè)組件選擇樣式以及配置信息。

比如輪播圖我們選擇幾張的侧啼，三張的還是四張的牛柒；選擇樣式之后要配置具體的信息：我們要上傳圖片，然后為圖片設(shè)置鏈接痊乾。這些組件點(diǎn)擊可以跳轉(zhuǎn)到別的頁面皮壁，而不同組件需要配置的信息也是不同的，取決于組件本身哪审。

總結(jié)一下：需要提前定義組件的規(guī)則蛾魄；裝修分三步：選擇/創(chuàng)建頁面——組件排版——組件配置。

下面將進(jìn)入文章的重點(diǎn)內(nèi)容，我會(huì)首先介紹不同組件的樣式以及配置信息滴须，然后介紹店鋪裝修流程的細(xì)節(jié)問題舌狗。

三、組件的種類

組件種類的豐富程度決定了裝修的效果扔水，組件越豐富痛侍，裝修的可選性就越多。

舉例說明魔市，常用的組件隨著產(chǎn)品的迭代與完善主届，組件的種類也會(huì)不斷地增加，設(shè)計(jì)人員根據(jù)具體需求進(jìn)行組件的迭代待德，對(duì)于組件的定義也是包容性的君丁。很多東西都可以定義為一個(gè)組件，顆粒度也不是固定的将宪，兩個(gè)功能可以當(dāng)做一個(gè)組件绘闷，一個(gè)活動(dòng)也可以當(dāng)做一個(gè)組件。

常見的組件形式：

頂部搜索欄较坛、搜索欄簸喂、公告、商品組燎潮、商戶組、二級(jí)導(dǎo)航扼倘、列表導(dǎo)航确封、富文本、標(biāo)題欄再菊、輔助線爪喘、輔助空白、按鈕組圖文纠拔、按鈕組文字秉剑、單張圖片、圖片輪播稠诲、圖片櫥窗侦鹏、圖片展覽、圖標(biāo)組臀叙、音頻播放略水、優(yōu)惠券。

這里說明一下劝萤，關(guān)于組件的配置問題渊涝，系統(tǒng)還在優(yōu)化當(dāng)中，可能會(huì)存在一些功能大家看不懂的地方。但是這不是重點(diǎn)跨释，重點(diǎn)是要明白其設(shè)計(jì)的邏輯和方法胸私，然后結(jié)合自己的經(jīng)驗(yàn)總結(jié)成自己的知識(shí)、

關(guān)于組件的核心就是要配置組件樣式和信息鳖谈，主要看我用文字寫的一些配置信息岁疼，這些是比較重要的，圖片中顯示的配置信息太過復(fù)雜蚯姆，一般來說有時(shí)是用不到的五续。

關(guān)于組件的配置可以設(shè)計(jì)的復(fù)雜也可以設(shè)計(jì)地簡(jiǎn)單，根據(jù)具體的需求龄恋。

3.1 頂部搜索欄

頂部搜索欄是嵌入到頂部導(dǎo)航里面的疙驾，如果頁面內(nèi)容較多，就需要采用嵌入的方式郭毕，為頁面提供更大的空間它碎。

如果頁面內(nèi)容不是太多，頂部導(dǎo)航欄可以只顯示標(biāo)題显押，頂部搜索欄是固定在頂部的扳肛；搜索欄當(dāng)點(diǎn)擊搜索區(qū)域的時(shí)候，需要跳轉(zhuǎn)到單獨(dú)的搜索頁面以及搜索結(jié)果頁面乘碑，搜索欄需要配置的信息有：

是否添加按鈕：可以選擇不添加挖息；若添加按鈕選擇在搜索欄的左側(cè)還是右側(cè)，需要上傳按鈕圖標(biāo)和圖標(biāo)顏色兽肤，圖標(biāo)的鏈接地址套腹。圖標(biāo)也可以用圖片的形式代替，若用圖片則不需要設(shè)置背景顏色资铡。按鈕可以設(shè)置左側(cè)按鈕电禀，也可以設(shè)置右側(cè)按鈕。

搜索框背景顏色

用戶搜索時(shí)輸入的文字顏色

搜索框的樣式：直角笤休、圓弧尖飞、圓角

3.2 搜索欄

搜索欄與頂部搜索欄類似，不同點(diǎn)是頂部搜索欄是固定在頂部的店雅，而搜索欄的位置是不固定的政基，可以自由地放位置。同樣闹啦，關(guān)于搜索頁面以及搜索結(jié)果頁面都需要提前定義好腋么。

3.3 公告

公告就是類似橫幅廣告的那種，一般是系統(tǒng)有文章的產(chǎn)品產(chǎn)品需要亥揖，跳轉(zhuǎn)到文章詳情珊擂，也可以自由設(shè)置鏈接圣勒。

3.4 商品組

商品組是比較復(fù)雜的組件之一，因?yàn)閷?duì)于電商系統(tǒng)來說摧扇，最重要的就是商品了圣贸，而在電商系統(tǒng)當(dāng)中展示商品的形式主要有兩種：

商品列表

商品詳情

不可否認(rèn)，商品詳情是展示商品信息的主要位置扛稽，用戶購(gòu)買與否很大程度上取決于商品詳情頁面的設(shè)計(jì)吁峻。但是在進(jìn)入商品詳情頁面之前，首先面對(duì)的是商品列表頁面在张，商品列表頁面設(shè)置的好壞決定了用戶進(jìn)入詳情頁面的概率用含，所以商品列表組件在配置的時(shí)候也是比較復(fù)雜的，主要配置信息有：

列表樣式：?jiǎn)瘟酗@示帮匾、雙列顯示啄骇、三列顯示、列表先顯示（這個(gè)主要是商品的列表展示形式）瘟斜。

商品選擇：選擇商品可以直接從商品列表獲取缸夹，也可以通過分類，商品組進(jìn)行批量選擇螺句。

3.5 商戶組

選擇商戶：選擇商戶與選擇商品類似虽惭，可以通過商戶列表直接獲取，也可以通過分類進(jìn)行獲取

3.6 列表導(dǎo)航

列表導(dǎo)航大多數(shù)情況下用在個(gè)人中心的頁面蛇尚，是許多功能的入口芽唇，需要編輯列表標(biāo)題肌厨、鏈接地址内斯。可以添加多個(gè)多個(gè)列表跑揉；也可以選擇不同的樣式勇凭，比如加不加圖標(biāo)，加不加“查看”提示文字义辕。

3.7 富文本

富文本編輯器的應(yīng)用情況不是太多虾标，主要應(yīng)用于一些偏向介紹的地方使用。

3.8 按鈕組圖文

按鈕組主要應(yīng)用于主要頁面灌砖，比如首頁輪播圖下方璧函，可以是多個(gè)分類的入口，也可以是分模塊的入口基显；給每個(gè)按鈕定義文字蘸吓，上傳圖標(biāo)，然后設(shè)置跳轉(zhuǎn)鏈接撩幽，可以設(shè)置多行库继。

3.9 按鈕組文字

不加圖標(biāo)的按鈕箩艺，主要應(yīng)用場(chǎng)景為某個(gè)模塊下的功能分類，比如積分下面的我的積分和兌換記錄宪萄。

3.10 單張圖片

單張大圖組件艺谆，主要應(yīng)用于專題活動(dòng)的介紹頁面，通過鏈接進(jìn)入專題活動(dòng)列表拜英。

3.11 圖片輪播

輪播圖片静汤，每個(gè)主頁面要用到，設(shè)置圖片張數(shù)居凶，鏈接地址虫给。

3.12 優(yōu)惠券

優(yōu)惠券一般不用下面的樣式設(shè)計(jì)，沒有實(shí)際意義侠碧。一般是利用圖片鏈接優(yōu)惠券抹估，或者設(shè)計(jì)好多種優(yōu)惠券樣式，選擇不同的樣式舆床，選擇優(yōu)惠券時(shí)自動(dòng)填充內(nèi)容棋蚌。

關(guān)于組件的定義和設(shè)計(jì)的說明

組件的種類和樣式越多越好，但是組件的配置內(nèi)容越少越好挨队，種類的豐富度決定了裝修的靈活性谷暮。但是組件的配置信心盡量不要太多，能自動(dòng)獲取就要自動(dòng)獲仁⒖选湿弦；我上面放的圖片僅做了解，因?yàn)楹芏嗯渲眯畔⑹菦]有用的腾夯，主要還是要明白CMS系統(tǒng)的邏輯颊埃。

店鋪裝修功能是一個(gè)營(yíng)銷利器，同時(shí)也對(duì)技術(shù)有著很高的要求蝶俱，現(xiàn)在基本有兩種方式使用它：

對(duì)接第三方插件：這種方式方便快捷班利，不需要研發(fā)。缺點(diǎn)是功能邏輯繁雜榨呆，無法擁有好的用戶體驗(yàn)罗标，并且不利于后期迭代，也無法很好切合公司業(yè)務(wù)积蜻。

自行研發(fā)：這種方式研發(fā)成本是很高的闯割，但是優(yōu)點(diǎn)是可以自行定義組件的樣式與規(guī)則，極大地優(yōu)化用戶體驗(yàn)與操作性竿拆，但是缺點(diǎn)還是成本高宙拉。

四、店鋪裝修流程

店鋪裝修店鋪首先是頁面的選擇丙笋，然后配置組件信息谢澈。

4.1 選擇頁面：哪些頁面需要裝修煌贴？哪些頁面沒必要裝修？

當(dāng)我們開始進(jìn)行裝修事澳化，第一步首先是要選擇要裝修的頁面崔步。理論上來說，所有的頁面都是可以裝修的缎谷，但是實(shí)際上我們不需要裝修那么多頁面井濒。因?yàn)楹芏囗撁娴难b修是沒有意義的，所以我們必須要先想好哪些頁面需要裝修列林，哪些頁面不需要裝修瑞你，這對(duì)于我們來說是非常重要的。

因?yàn)樗苯佑绊懙窖邪l(fā)的成本問題以及產(chǎn)品的設(shè)計(jì)問題希痴，比如一些設(shè)置相關(guān)的頁面者甲，個(gè)人中心頁面是不需要裝修的，在定義需要可以裝修那些頁面之前砌创，我們有必要想想我們做店鋪裝修這個(gè)功能的最初想法是什么虏缸？我們開了一個(gè)店鋪，我們?yōu)槭裁匆b修它呢嫩实？

因?yàn)楹每吹拈T面可以吸引客戶的到來刽辙，同時(shí)如果我們把室內(nèi)做的很漂亮，那么客戶就會(huì)感覺這個(gè)店鋪不錯(cuò)甲献；也就是說我們做店鋪裝修的初衷是出于營(yíng)銷的需求宰缤，我們的目的是展示給用戶想看的東西。

所以晃洒，在定義哪些頁面需要裝修之前慨灭，我們不如先想想用戶來到我們的商城哪些頁面對(duì)于用戶的購(gòu)買是起到至關(guān)重要的。因?yàn)檠b修的目的是出于營(yíng)銷球及，而營(yíng)銷的目的是賺錢氧骤，而賺不賺錢取決于用戶是否購(gòu)買，所以我們要思考商城中的哪些頁面對(duì)于用戶的最終購(gòu)買時(shí)至關(guān)重要的吃引。

我們可以設(shè)身處地的想想你在淘寶買東西的時(shí)候筹陵，你想去哪里看一些你認(rèn)為重要的信息，而哪些信息對(duì)于你的最終購(gòu)買是起到了決定性作用的际歼；同時(shí)哪些頁面是你經(jīng)常接觸的，說的好聽點(diǎn)就是所謂的思考用戶場(chǎng)景姑蓝。

首先是首頁鹅心，首頁是用戶進(jìn)入商城的第一和頁面，這個(gè)頁面相當(dāng)于商城的門面——重要的頁面纺荧，沒有之一旭愧，絕對(duì)沒有之一颅筋。首頁上需要展示很多的信息，很多的活動(dòng)包括專題入口输枯，都是在首頁顯示议泵，所以首頁是需要裝修的。

我有時(shí)候可能會(huì)在首頁停留一段時(shí)間桃熄，看看最近在搞什么活動(dòng)先口；而首頁的配置則需要根據(jù)具體營(yíng)銷的需求了，比如節(jié)日來臨可以弄幾個(gè)專題活動(dòng)瞳收，有新的商品可以把它推薦到首頁碉京。

在我們進(jìn)入商品詳情頁面之前我們有時(shí)還需要一個(gè)頁面，就是分類列表頁螟深，這個(gè)頁面只是起到了一個(gè)通路的作用谐宙。在一些小的商城系統(tǒng)，底部導(dǎo)航欄是有分類的界弧，但是其實(shí)稍微成熟的商城系統(tǒng)凡蜻，都不會(huì)讓分類占用底部導(dǎo)航，所以分類頁是不要裝修的垢箕。

有人可能會(huì)說商品詳情頁面需要裝修划栓，我們來談?wù)勆唐吩斍轫撁妫唐吩斍轫撁娴囊饬x在于展示商品的詳情信息舰讹。

對(duì)茅姜，這個(gè)“信息”二字用得好，劃起來月匣，要考钻洒。

因?yàn)槲覀冑I不買一個(gè)東西取決于什么？

有人說是需求锄开，但其實(shí)這種說法沒有意義素标、很浮夸，它是一個(gè)非常寬泛的概念萍悴，無法指導(dǎo)我們進(jìn)行具體的決策头遭。

雖然作為一個(gè)產(chǎn)品經(jīng)理，但是我從來不把需求掛在嘴邊癣诱，需求是行業(yè)內(nèi)約定俗成的一個(gè)東西计维，大家都知道，不需要反復(fù)解釋撕予。用戶既然來到來到詳情頁面了鲫惶，他肯定是有需求的；即便不來实抡，他也是有需求的欠母，甚至即便不用淘寶欢策，他同樣也是有需求的。

買不買其實(shí)取決于什么呢赏淌？取決對(duì)商品的了解程度踩寇，也就是對(duì)商品信息的了解程度。如果我要花很多錢決定買一個(gè)東西六水，我肯定保證自己對(duì)這個(gè)東西非常了解才能進(jìn)行購(gòu)買俺孙。

詳情頁面的核心信息有兩部分組成：商品信息介紹、商品評(píng)價(jià)缩擂、那么這些信息的展示都會(huì)有一些固定格式的鼠冕，是不能夠隨意變動(dòng)的。如果詳情頁面隨意變動(dòng)胯盯，就會(huì)造成用戶對(duì)信息的獲取干擾懈费，從而影響用戶的最終購(gòu)買；

進(jìn)入商城我們使用頻率非常高的一個(gè)組件是搜索功能博脑，相比于從分類一層層看到我們想要的商品憎乙，直接搜索似乎要方便許多，所有搜索結(jié)果頁是需要裝修的

購(gòu)物車頁面也是我們經(jīng)常使用的頁面叉趣，購(gòu)物車也需要裝修泞边，至于個(gè)人中心是不要裝修的。

同時(shí)為了專題活動(dòng)的需求疗杉，店鋪裝修需要支持自定義頁面阵谚，用與當(dāng)做專題商品的展示頁面，當(dāng)然了自定義頁面與專題活動(dòng)沒有必然的聯(lián)系烟具，自定義頁面就是創(chuàng)建一個(gè)頁面梢什，專題活動(dòng)的展示頁面也可以內(nèi)置成模板

4.1.1 如何判斷哪些頁面需要裝修，哪些頁面不需要裝修

判斷哪些頁面需要裝修我們可以從這幾個(gè)維度來思考：

用戶接觸頻率：接觸頻率越高的我們?cè)叫枰b修（首頁朝聋、購(gòu)物車）嗡午。

用戶停留時(shí)間：用戶停留時(shí)間越長(zhǎng)的頁面越需要裝修（首頁）。

用戶點(diǎn)擊頻率：用戶在頁面上點(diǎn)擊的概率越高越需要裝修（搜索結(jié)果頁）冀痕。

4.1.2 如何判斷哪些頁面不需要裝修（不需要裝修荔睹，但是不是說不用改動(dòng)，迭代優(yōu)化）

信息繁雜的頁面：這些頁面一般有固定的格式用戶展示信息（詳情頁面言蛇、個(gè)人中心）僻他。

與商品關(guān)聯(lián)不強(qiáng)的頁面：（幫助、設(shè)置）腊尚。

4.2 配置組件信息

知道裝修哪些頁面了吨拗，組件也已經(jīng)弄好了，下一步就需要進(jìn)入頁面配置了（知道哪間房子、材料也有了丢胚，下面干活就行了）。

選擇頁面然后配置組件信息受扳，最后生成整個(gè)頁面携龟，并把它同步到系統(tǒng)當(dāng)中，這個(gè)需要落實(shí)到具體的產(chǎn)品的交互設(shè)計(jì)上了勘高；取決于你如何對(duì)頁面進(jìn)行布局排版峡蟋，如何拖動(dòng)、交互华望。

下面我來說下蕊蝗，如何將以上信息落實(shí)到具體的產(chǎn)品設(shè)計(jì)上，讓大家看得見摸得著赖舟。

參考我上面截的圖蓬戚，基本類似那種左側(cè)是預(yù)覽圖，右面是組件宾抓，然后填充就行了子漩，最后保存，完事兒石洗。

五幢泼、店鋪裝修的具體產(chǎn)品設(shè)計(jì)方法

首先說下后臺(tái)的菜單結(jié)構(gòu)，店鋪裝修這個(gè)功能可以單獨(dú)拿出來讲衫，也可以放到促銷模塊缕棵，這取決系統(tǒng)的復(fù)雜程度。

如果裝修功能特別簡(jiǎn)單涉兽，比如僅能調(diào)整首頁的組件位置招驴、再比如僅能調(diào)整一個(gè)或者少數(shù)幾個(gè)組件，直接將它放在促銷模塊就行了花椭。

如果店鋪裝修的作用僅僅是投放廣告位忽匈，亦或者說專題活動(dòng)的頁面已經(jīng)內(nèi)置好，這時(shí)的店鋪裝修的功能是比較簡(jiǎn)單的矿辽，直接放在促銷模塊就可以丹允，菜單僅需要兩個(gè)，如下：

5.1 內(nèi)置于促銷系統(tǒng)內(nèi)

促銷系統(tǒng)——廣告投放

進(jìn)去之后是系統(tǒng)頁面的預(yù)覽圖袋倔，展示廣告位的使用情況雕蔽，可以對(duì)廣告位的圖片、鏈接進(jìn)行編輯宾娜。

促銷系統(tǒng)——專題活動(dòng)管理

所謂專題活動(dòng)就是促銷活動(dòng)的一種拓展形式批狐，在上一篇文章中我已經(jīng)講到；進(jìn)來之后可以看到專題活動(dòng)頁面的模塊，每個(gè)模板的樣式肯定是不同的嚣艇，甚至一個(gè)模板有可能多個(gè)頁面（有底部導(dǎo)航欄的模板）承冰，選擇模塊后，進(jìn)入頁面的配置模式食零，也就是上面的步驟4.2? 需要上傳商品困乒，圖片等，具體需要配置什么贰谣，取決于你設(shè)計(jì)的模板的樣式娜搂。

5.2 作為店鋪裝修系統(tǒng)獨(dú)立存在

作為店鋪裝修單獨(dú)存在的話，菜單和功能如下：

一級(jí)菜單：系統(tǒng)頁面管理

二級(jí)菜單顯示可以裝修的系統(tǒng)頁面吱抚，點(diǎn)擊頁面進(jìn)入頁面的配置界面百宇。（見4.2）

一級(jí)菜單：自定義頁面管理

二級(jí)菜單顯示可以裝修的系統(tǒng)頁面，點(diǎn)擊頁面進(jìn)入頁面的配置界面秘豹。（見4.2）

一級(jí)菜單：創(chuàng)建自定義頁面

點(diǎn)擊進(jìn)入頁面的配置界面携御，只不過是空白頁面。（見4.2）

說明

大家可能會(huì)想了既绕，作為獨(dú)立系通的存在怎么感覺并沒有比嵌入促銷活動(dòng)內(nèi)多了多少功能因痛，既然是獨(dú)立的系統(tǒng)應(yīng)該包含5.1才是，那么廣告如何投放岸更，專題活動(dòng)如何投放鸵膏？

你可以在所有你可以配置的頁面的任何位置添加廣告，設(shè)置跳轉(zhuǎn)鏈接怎炊，而不受限于頁面格式谭企。

你可以通過自定義頁面創(chuàng)建你想要的任何頁面（當(dāng)然也就包含專題活動(dòng)頁面了）

大家有想問的可以留言，包括我之前的文章也都可以留言评肆，留言必回债查，互相交流！