現實生活中，經營店鋪需要進行裝修；而電商亦是如此，需要通過CMS系統完成“店鋪裝修”——各項欄目的設計與布局。

之前寫了兩篇關于電商系統的文章，這是第三篇。這篇文章介紹電商系統的店鋪裝修功能，店鋪裝修簡單來說就是對頁面的動態配置。打個比方，我們APP的首頁，從上往下的布局是這樣：搜索欄、錄播圖、標簽欄、廣告位、商品推薦；我們可以這樣把設計原型交付給研發進行開發。

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

店鋪裝修首先可以改變頁面各個組件的布局排版，比如講標簽欄和廣告位調換位置；可以增加或者減少頁面的組件，可以在首頁加上一個優惠券的組件，也可以去掉輪播圖的組件；還可以對組件定義不同的樣式，輪播圖可以選擇3張或者4張，標簽欄可以選擇單行或者多行。

可以看出，店鋪裝修的過程其實就是我們畫原型的過程。首先定義一個頁面，然后定義組件，在設計組件的樣式；最終生成頁面。只不過店鋪裝修把這個過程寫到了系統的程序當中，修改保存之后系統也就變成了修改后的樣子。

同時，可以看出店鋪裝修的過程修改了系統的代碼，這也就意味著對技術的要求是比較高的。

其實店鋪裝修這個功能的本身是CMS系統，店鋪裝修只是CMS系統在電商系統中的部分應用。

一、CMS系統與店鋪裝修的關系

CMS系統叫內容管理系統，應用于很多的行業，將CMS系統應用于電商行業就變成了店鋪裝修。

我們來看下百度百科給出的定義：CMS是”Content Management System”的縮寫，意為“內容管理系統”。

內容管理系統是企業信息化建設和電子政務的新寵，也是一個相對較新的市場。對于內容管理，業界還沒有一個統一的定義，不同的機構有不同的理解。也就是說，對于內容管理系統業界還沒有統一的標準，但是我們知道它就是管理內容的；而這個內容放在電商系統當中就是各個頁面，對電商系統的內容管理也叫做店鋪裝修，店鋪裝修的技術應用的是CMS技術。

而現階段由于產品的不同、公司的需求不同，導致我們看到很多產品的店鋪裝修功能是不相同的。有的產品僅僅是能夠調整頁面組件的排版，有的產品僅僅能夠配置首頁，對技術的高要求體現在我們很多時候無法充分利用CMS系統，而不同產品由于業務的不同也導致其設計不同，

本文將總結店鋪裝修的設計方法與方法論，擁有一套好的方法論也許不能讓我們戰無不勝，但是有總比沒有好。

二、如何設計店鋪裝修

之所以將電商系統頁面的動態配置叫做店鋪裝修，是因為這個功能與我們現實中裝修房子比較類似，所有在介紹店鋪裝修之前，我們首先回想下如何裝修房子：

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

2. 當我們選擇好房間之后然后就要進行裝修了，在裝修之前我們還需要做一件事情，那就是買家具、買裝修材料，現在我們來裝修廁所，需要準備馬桶、垃圾桶、衛生紙。

3. 當我們要準備馬桶時，我們要考慮這么一個問題：使用什么樣式的馬桶，功能比較齊全的最新日式，還是市面上常見的馬桶，是用金馬桶還是銀馬桶，也就是說針對用一個物品的裝修我們可以有多種選擇。

電商系統的店鋪裝修功能其實就是借鑒我們裝修房子的過程，只不過房子變成了我們的產品、房間變成了各個頁面、裝修的物品就是組件。

在我們裝修房子的時候我們要提前想好需要哪些物品，一塊買回來然后再裝修，這也是最重要的一步。對于裝修房子，有三步過程：房子和房間是一定的；關鍵在于要準備什么物品，因為物品是需要買的，而且各式各樣的都有，物品的價格決定了房子的豪華程度。

同樣對于電商的店鋪裝修，準備組件也是最重要的一步，也就是定義組件的樣式和規則，把它寫到代碼里面，當我們用的時候直接調用。因為你不可能自己造一個新的組件，我們只能在系統已有的組件庫里面選擇我們需要的組件，我們可以自定義的是組件的樣式，而不同的組件樣式又有著不同的規則。

那么組件是什么呢，組件就是各個單元，比如輪播圖是一個組件、搜索是一個組件、商品是一個組件，而每一種組件肯定是有著很多的樣式的。

下面，我們根據裝修房子的過程來尋找店鋪裝修的過程，以及需要準備的東西。

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

選擇頁面這一步需要考慮幾個問題：是不是每個頁面都可以裝修、每個頁面可以裝修嗎。還有這些都是已有的頁面，我可不可以新建一個頁面進行裝修，新建的話這也頁面是不屬于系統的，如何與系統進行聯系。

2. 選好頁面之后我們要選擇組件進行布局排版、以首頁為例，搜索放在哪里、輪播圖放在哪里、廣告位放在哪里，是我們需要考慮的問題。

這是選擇組件，前提是我們得有組件，也就是說我們在產品設計的時候，需要為每個組件定義樣式與規則，把這些組件寫到系統里面之后，我們才可以調用這些組件。

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

比如輪播圖我們選擇幾張的，三張的還是四張的；選擇樣式之后要配置具體的信息：我們要上傳圖片，然后為圖片設置鏈接。這些組件點擊可以跳轉到別的頁面，而不同組件需要配置的信息也是不同的，取決于組件本身。

總結一下：需要提前定義組件的規則；裝修分三步：選擇/創建頁面——組件排版——組件配置。

下面將進入文章的重點內容，我會首先介紹不同組件的樣式以及配置信息，然后介紹店鋪裝修流程的細節問題。

三、組件的種類

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

舉例說明，常用的組件隨著產品的迭代與完善，組件的種類也會不斷地增加，設計人員根據具體需求進行組件的迭代，對于組件的定義也是包容性的。很多東西都可以定義為一個組件，顆粒度也不是固定的，兩個功能可以當做一個組件，一個活動也可以當做一個組件。

常見的組件形式：

頂部搜索欄、搜索欄、公告、商品組、商戶組、二級導航、列表導航、富文本、標題欄、輔助線、輔助空白、按鈕組圖文、按鈕組文字、單張圖片、圖片輪播、圖片櫥窗、圖片展覽、圖標組、音頻播放、優惠券。

這里說明一下，關于組件的配置問題，系統還在優化當中，可能會存在一些功能大家看不懂的地方。但是這不是重點，重點是要明白其設計的邏輯和方法，然后結合自己的經驗總結成自己的知識、

關于組件的核心就是要配置組件樣式和信息，主要看我用文字寫的一些配置信息，這些是比較重要的，圖片中顯示的配置信息太過復雜，一般來說有時是用不到的。

關于組件的配置可以設計的復雜也可以設計地簡單，根據具體的需求。

3.1 頂部搜索欄

頂部搜索欄是嵌入到頂部導航里面的，如果頁面內容較多，就需要采用嵌入的方式，為頁面提供更大的空間。

如果頁面內容不是太多，頂部導航欄可以只顯示標題，頂部搜索欄是固定在頂部的；搜索欄當點擊搜索區域的時候，需要跳轉到單獨的搜索頁面以及搜索結果頁面，搜索欄需要配置的信息有：

• 是否添加按鈕：可以選擇不添加；若添加按鈕選擇在搜索欄的左側還是右側，需要上傳按鈕圖標和圖標顏色，圖標的鏈接地址。圖標也可以用圖片的形式代替，若用圖片則不需要設置背景顏色。按鈕可以設置左側按鈕，也可以設置右側按鈕。
• 搜索框背景顏色
• 用戶搜索時輸入的文字顏色
• 搜索框的樣式：直角、圓弧、圓角

3.2 搜索欄

搜索欄與頂部搜索欄類似，不同點是頂部搜索欄是固定在頂部的，而搜索欄的位置是不固定的，可以自由地放位置。同樣，關于搜索頁面以及搜索結果頁面都需要提前定義好。

3.3 公告

公告就是類似橫幅廣告的那種，一般是系統有文章的產品產品需要，跳轉到文章詳情，也可以自由設置鏈接。

3.4 商品組

商品組是比較復雜的組件之一，因為對于電商系統來說，最重要的就是商品了，而在電商系統當中展示商品的形式主要有兩種：

1. 商品列表
2. 商品詳情

不可否認，商品詳情是展示商品信息的主要位置，用戶購買與否很大程度上取決于商品詳情頁面的設計。但是在進入商品詳情頁面之前，首先面對的是商品列表頁面，商品列表頁面設置的好壞決定了用戶進入詳情頁面的概率，所以商品列表組件在配置的時候也是比較復雜的，主要配置信息有：

• 列表樣式：單列顯示、雙列顯示、三列顯示、列表先顯示（這個主要是商品的列表展示形式）。
• 商品選擇：選擇商品可以直接從商品列表獲取，也可以通過分類，商品組進行批量選擇。

3.5 商戶組

選擇商戶：選擇商戶與選擇商品類似，可以通過商戶列表直接獲取，也可以通過分類進行獲取

3.6 列表導航

列表導航大多數情況下用在個人中心的頁面，是許多功能的入口，需要編輯列表標題、鏈接地址?？梢蕴砑佣鄠€多個列表；也可以選擇不同的樣式，比如加不加圖標，加不加“查看”提示文字。

3.7 富文本

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

3.8 按鈕組圖文

按鈕組主要應用于主要頁面，比如首頁輪播圖下方，可以是多個分類的入口，也可以是分模塊的入口；給每個按鈕定義文字，上傳圖標，然后設置跳轉鏈接，可以設置多行。

3.9 按鈕組文字

不加圖標的按鈕，主要應用場景為某個模塊下的功能分類，比如積分下面的我的積分和兌換記錄。

3.10 單張圖片

單張大圖組件，主要應用于專題活動的介紹頁面，通過鏈接進入專題活動列表。

3.11 圖片輪播

輪播圖片，每個主頁面要用到，設置圖片張數，鏈接地址。

3.12 優惠券

優惠券一般不用下面的樣式設計，沒有實際意義。一般是利用圖片鏈接優惠券，或者設計好多種優惠券樣式，選擇不同的樣式，選擇優惠券時自動填充內容。

關于組件的定義和設計的說明

組件的種類和樣式越多越好，但是組件的配置內容越少越好，種類的豐富度決定了裝修的靈活性。但是組件的配置信心盡量不要太多，能自動獲取就要自動獲??；我上面放的圖片僅做了解，因為很多配置信息是沒有用的，主要還是要明白CMS系統的邏輯。

店鋪裝修功能是一個營銷利器，同時也對技術有著很高的要求，現在基本有兩種方式使用它：

1. 對接第三方插件：這種方式方便快捷，不需要研發。缺點是功能邏輯繁雜，無法擁有好的用戶體驗，并且不利于后期迭代，也無法很好切合公司業務。
2. 自行研發：這種方式研發成本是很高的，但是優點是可以自行定義組件的樣式與規則，極大地優化用戶體驗與操作性，但是缺點還是成本高。

四、店鋪裝修流程

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

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

當我們開始進行裝修事，第一步首先是要選擇要裝修的頁面。理論上來說，所有的頁面都是可以裝修的，但是實際上我們不需要裝修那么多頁面。因為很多頁面的裝修是沒有意義的，所以我們必須要先想好哪些頁面需要裝修，哪些頁面不需要裝修，這對于我們來說是非常重要的。

因為它直接影響到研發的成本問題以及產品的設計問題，比如一些設置相關的頁面，個人中心頁面是不需要裝修的，在定義需要可以裝修那些頁面之前，我們有必要想想我們做店鋪裝修這個功能的最初想法是什么？我們開了一個店鋪，我們為什么要裝修它呢？

因為好看的門面可以吸引客戶的到來，同時如果我們把室內做的很漂亮，那么客戶就會感覺這個店鋪不錯；也就是說我們做店鋪裝修的初衷是出于營銷的需求，我們的目的是展示給用戶想看的東西。

所以，在定義哪些頁面需要裝修之前，我們不如先想想用戶來到我們的商城哪些頁面對于用戶的購買是起到至關重要的。因為裝修的目的是出于營銷，而營銷的目的是賺錢，而賺不賺錢取決于用戶是否購買，所以我們要思考商城中的哪些頁面對于用戶的最終購買時至關重要的。

我們可以設身處地的想想你在淘寶買東西的時候，你想去哪里看一些你認為重要的信息，而哪些信息對于你的最終購買是起到了決定性作用的；同時哪些頁面是你經常接觸的，說的好聽點就是所謂的思考用戶場景。

首先是首頁，首頁是用戶進入商城的第一和頁面，這個頁面相當于商城的門面——重要的頁面，沒有之一，絕對沒有之一。首頁上需要展示很多的信息，很多的活動包括專題入口，都是在首頁顯示，所以首頁是需要裝修的。

我有時候可能會在首頁停留一段時間，看看最近在搞什么活動；而首頁的配置則需要根據具體營銷的需求了，比如節日來臨可以弄幾個專題活動，有新的商品可以把它推薦到首頁。

在我們進入商品詳情頁面之前我們有時還需要一個頁面，就是分類列表頁，這個頁面只是起到了一個通路的作用。在一些小的商城系統，底部導航欄是有分類的，但是其實稍微成熟的商城系統，都不會讓分類占用底部導航，所以分類頁是不要裝修的。

有人可能會說商品詳情頁面需要裝修，我們來談談商品詳情頁面，商品詳情頁面的意義在于展示商品的詳情信息。

對，這個“信息”二字用得好，劃起來，要考。

因為我們買不買一個東西取決于什么？

有人說是需求，但其實這種說法沒有意義、很浮夸，它是一個非常寬泛的概念，無法指導我們進行具體的決策。

雖然作為一個產品經理，但是我從來不把需求掛在嘴邊，需求是行業內約定俗成的一個東西，大家都知道，不需要反復解釋。用戶既然來到來到詳情頁面了，他肯定是有需求的；即便不來，他也是有需求的，甚至即便不用淘寶，他同樣也是有需求的。

買不買其實取決于什么呢？取決對商品的了解程度，也就是對商品信息的了解程度。如果我要花很多錢決定買一個東西，我肯定保證自己對這個東西非常了解才能進行購買。

詳情頁面的核心信息有兩部分組成：商品信息介紹、商品評價、那么這些信息的展示都會有一些固定格式的，是不能夠隨意變動的。如果詳情頁面隨意變動，就會造成用戶對信息的獲取干擾，從而影響用戶的最終購買；

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

購物車頁面也是我們經常使用的頁面，購物車也需要裝修，至于個人中心是不要裝修的。

同時為了專題活動的需求，店鋪裝修需要支持自定義頁面，用與當做專題商品的展示頁面，當然了自定義頁面與專題活動沒有必然的聯系，自定義頁面就是創建一個頁面，專題活動的展示頁面也可以內置成模板

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

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

1. 用戶接觸頻率：接觸頻率越高的我們越需要裝修（首頁、購物車）。
2. 用戶停留時間：用戶停留時間越長的頁面越需要裝修（首頁）。
3. 用戶點擊頻率：用戶在頁面上點擊的概率越高越需要裝修（搜索結果頁）。

4.1.2 如何判斷哪些頁面不需要裝修（不需要裝修，但是不是說不用改動，迭代優化）

1. 信息繁雜的頁面：這些頁面一般有固定的格式用戶展示信息（詳情頁面、個人中心）。
2. 與商品關聯不強的頁面：（幫助、設置）。

4.2 配置組件信息

知道裝修哪些頁面了，組件也已經弄好了，下一步就需要進入頁面配置了（知道哪間房子、材料也有了，下面干活就行了）。

選擇頁面然后配置組件信息，最后生成整個頁面，并把它同步到系統當中，這個需要落實到具體的產品的交互設計上了；取決于你如何對頁面進行布局排版，如何拖動、交互。

下面我來說下，如何將以上信息落實到具體的產品設計上，讓大家看得見摸得著。

參考我上面截的圖，基本類似那種左側是預覽圖，右面是組件，然后填充就行了，最后保存，完事兒。

五、店鋪裝修的具體產品設計方法

首先說下后臺的菜單結構，店鋪裝修這個功能可以單獨拿出來，也可以放到促銷模塊，這取決系統的復雜程度。

如果裝修功能特別簡單，比如僅能調整首頁的組件位置、再比如僅能調整一個或者少數幾個組件，直接將它放在促銷模塊就行了。

如果店鋪裝修的作用僅僅是投放廣告位，亦或者說專題活動的頁面已經內置好，這時的店鋪裝修的功能是比較簡單的，直接放在促銷模塊就可以，菜單僅需要兩個，如下：

5.1 內置于促銷系統內

促銷系統——廣告投放

進去之后是系統頁面的預覽圖，展示廣告位的使用情況，可以對廣告位的圖片、鏈接進行編輯。

促銷系統——專題活動管理

所謂專題活動就是促銷活動的一種拓展形式，在上一篇文章中我已經講到；進來之后可以看到專題活動頁面的模塊，每個模板的樣式肯定是不同的，甚至一個模板有可能多個頁面（有底部導航欄的模板），選擇模塊后，進入頁面的配置模式，也就是上面的步驟4.2? 需要上傳商品，圖片等，具體需要配置什么，取決于你設計的模板的樣式。

5.2 作為店鋪裝修系統獨立存在

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

一級菜單：系統頁面管理

二級菜單顯示可以裝修的系統頁面，點擊頁面進入頁面的配置界面。（見4.2）

一級菜單：自定義頁面管理

二級菜單顯示可以裝修的系統頁面，點擊頁面進入頁面的配置界面。（見4.2）

一級菜單：創建自定義頁面

點擊進入頁面的配置界面，只不過是空白頁面。（見4.2）

說明

大家可能會想了，作為獨立系通的存在怎么感覺并沒有比嵌入促銷活動內多了多少功能，既然是獨立的系統應該包含5.1才是，那么廣告如何投放，專題活動如何投放？

你可以在所有你可以配置的頁面的任何位置添加廣告，設置跳轉鏈接，而不受限于頁面格式。

你可以通過自定義頁面創建你想要的任何頁面（當然也就包含專題活動頁面了）

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

推薦閱讀

電商系統前后臺解析——商品管理系統

電商系統前后臺解析——促銷管理系統

本文由 @謝謝張先生 原創發布于人人都是產品經理。未經許可，禁止轉載

題圖來自Unsplash，基于CC0協議