網(wǎng)店的裝修方法

2021-02-20 分類：網(wǎng)站建設(shè)

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

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

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

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

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

其實(shí)店鋪裝修這個功能的本身是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ù)的新寵，也是一個相對較新的市場。對于內(nèi)容管理，業(yè)界還沒有一個統(tǒng)一的定義，不同的機(jī)構(gòu)有不同的理解。也就是說，對于內(nèi)容管理系統(tǒng)業(yè)界還沒有統(tǒng)一的標(biāo)準(zhǔn)，但是我們知道它就是管理內(nèi)容的；而這個內(nèi)容放在電商系統(tǒng)當(dāng)中就是各個頁面，對電商系統(tǒng)的內(nèi)容管理也叫做店鋪裝修，店鋪裝修的技術(shù)應(yīng)用的是CMS技術(shù)。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

三、組件的種類

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

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

常見的組件形式：

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

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

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

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

3.1 頂部搜索欄

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

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

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

3.2 搜索欄

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

3.3 公告

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

3.4 商品組

商品組是比較復(fù)雜的組件之一，因?yàn)閷τ?a target="_blank">電商系統(tǒng)來說，最重要的就是商品了，而在電商系統(tǒng)當(dāng)中展示商品的形式主要有兩種：

商品列表
商品詳情

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

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

3.5 商戶組

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

3.6 列表導(dǎo)航

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

3.7 富文本

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

3.8 按鈕組圖文

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

3.9 按鈕組文字

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

3.10 單張圖片

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

3.11 圖片輪播

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

3.12 優(yōu)惠券

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

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

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

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

對接第三方插件：這種方式方便快捷，不需要研發(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修是沒有意義的，所以我們必須要先想好哪些頁面需要裝修，哪些頁面不需要裝修，這對于我們來說是非常重要的。

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

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

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

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

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

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

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

有人可能會說商品詳情頁面需要裝修，我們來談?wù)勆唐吩斍轫撁?，商品詳情頁面的意義在于展示商品的詳情信息。

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

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

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

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

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

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

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

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

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

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

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

用戶接觸頻率：接觸頻率越高的我們越需要裝修（首頁、購物車）。
用戶停留時間：用戶停留時間越長的頁面越需要裝修（首頁）。
用戶點(diǎn)擊頻率：用戶在頁面上點(diǎn)擊的概率越高越需要裝修（搜索結(jié)果頁）。

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

信息繁雜的頁面：這些頁面一般有固定的格式用戶展示信息（詳情頁面、個人中心）。
與商品關(guān)聯(lián)不強(qiáng)的頁面：（幫助、設(shè)置）。

4.2 配置組件信息

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

說明

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

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

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

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