大家好，我是設(shè)計(jì)大偵探的主理人，廖爾摩斯。我從今年年初就負(fù)責(zé)一款澳洲房產(chǎn) SAAS 產(chǎn)品的設(shè)計(jì)，所以最近半年對(duì)國外內(nèi)的 SAAS 產(chǎn)品做了一些研究分析，今天為大家分享我在微盟產(chǎn)品店鋪裝修版塊的一些思考和收獲，希望對(duì)你有幫助。

一、需求分析

1. 店鋪裝修的功能價(jià)值

店鋪裝修是指用戶采購 SAAS 產(chǎn)品以后，可以對(duì)自己的店鋪進(jìn)行個(gè)性化裝修。這類 SAAS 產(chǎn)品在國內(nèi)主要以有贊、微盟、小鵝通這種為代表。店鋪裝修的價(jià)值主要是幫助商家根據(jù)自己的品牌調(diào)性和行業(yè)屬性裝扮適合自己的店鋪風(fēng)格，從而為客戶帶來優(yōu)秀的用戶體驗(yàn)，為店鋪的運(yùn)營做服務(wù)支撐。

2. 用戶需求分析

1. 基本型需求：可以對(duì)系統(tǒng)默認(rèn)模版進(jìn)行簡(jiǎn)單的修改，比如更換圖片、文字、菜單欄內(nèi)容等。
2. 期望性需求：高效靈活，操作簡(jiǎn)單，可快速通過裝修工具搭建自己想要的風(fēng)格和模版。
3. 興奮型需求：有超出其他 SAAS 產(chǎn)品的創(chuàng)意性功能，比如高品質(zhì)模版、營銷組件、排版樣式等，最終可以通過編輯器完美還原店鋪裝修設(shè)計(jì)方案。

3. 設(shè)計(jì)策略分析

SAAS 產(chǎn)品強(qiáng)調(diào)標(biāo)準(zhǔn)化，這樣才能避免人力成本的消耗。但對(duì)于商家來說，如果欠缺個(gè)性化和差異化那就失去了品牌的生命力，所以店鋪裝修剛好是這樣的調(diào)節(jié)器，在標(biāo)準(zhǔn)和個(gè)性化之間盡可能協(xié)調(diào)平臺(tái)和商家的需求。

微盟是一個(gè)私域電商的 SAAS 產(chǎn)品，主要結(jié)合微信生態(tài)為各行業(yè)的企業(yè)客戶搭建電商場(chǎng)景的服務(wù)前端，客戶端包含 H5 店鋪和微信小程序。對(duì)于像微盟這樣服務(wù)眾多行業(yè)的產(chǎn)品，如何制定一套滿足各行業(yè)客戶裝修需求的店鋪裝修編輯器，是整個(gè)店鋪裝修設(shè)計(jì)最大的挑戰(zhàn)。

二、內(nèi)容拆解

1. 個(gè)性裝修

「?jìng)€(gè)性裝修」是整個(gè)店鋪裝修的核心，用戶可以在這個(gè)欄目新建頁面，然后進(jìn)入在線編輯器對(duì)頁面進(jìn)行裝修。

① 店鋪頁面

這里匯總了商家在店鋪裝修中創(chuàng)建的所有頁面，可以對(duì)頁面進(jìn)行編輯、復(fù)制、刪除和打標(biāo)簽等。點(diǎn)擊「新建頁面」后，就能進(jìn)入在線裝修編輯器，這個(gè)部分我們放到下面做詳細(xì)講解。

設(shè)計(jì)缺陷：「新建頁面」的按鈕過小，樣式也不夠突出，用戶會(huì)容易忽略，難以找到入口。

② 店鋪導(dǎo)航

「店鋪導(dǎo)航」就是菜單欄，商家可以在這個(gè)欄目對(duì)菜單欄進(jìn)行內(nèi)容設(shè)置，包括菜單的增刪、內(nèi)容和圖標(biāo)的更改。

設(shè)計(jì)亮點(diǎn)：微盟還提供了一個(gè)非常靈活的功能「輔助導(dǎo)航」，用戶建立保存后可應(yīng)用到其他子頁面，幫助用戶快速返回首頁或跳轉(zhuǎn)至用戶中心等頁面。

2. 系統(tǒng)頁面

「系統(tǒng)頁面」包含用戶中心、列表模板、分類模板和搜索頁四個(gè)頁面的個(gè)性化設(shè)置。微盟把用戶前端使用頻率最高、視覺設(shè)計(jì)統(tǒng)一規(guī)范的頁面單獨(dú)歸類為一個(gè)欄目。

① 用戶中心

「用戶中心」是店鋪使用頻率最高的頁面之一，對(duì)整個(gè)店鋪的設(shè)計(jì)風(fēng)格及調(diào)性也發(fā)揮著重要作用。

1. 頂部導(dǎo)航欄：可設(shè)置跟隨全局（和店鋪風(fēng)格保持一致）和自定義（可設(shè)置背景顏色和內(nèi)容顏色）。
2. 用戶頭部：可設(shè)置頭部風(fēng)格，支持自定義；可設(shè)置會(huì)員卡的引導(dǎo)文案、入口跳轉(zhuǎn)和客戶碼。
3. 用戶資產(chǎn)：可設(shè)置展示用戶的余額、積分和優(yōu)惠券數(shù)量。
4. 訂單信息：固定樣式，不支持設(shè)置。
5. 圖片導(dǎo)航：圖片輪播，還可設(shè)置可見客戶類型。
6. 分銷中心：用戶分銷的相關(guān)數(shù)據(jù)，可設(shè)置顯示權(quán)限、引導(dǎo)文案等。
7. 菜單：提供列表和宮格兩種展示形式，可勾選需要展示的系統(tǒng)功能，還支持自定義菜單功能。

設(shè)計(jì)思考：微盟的用戶中心頁面裝修其實(shí)很靈活，整個(gè)頁面的字段都能進(jìn)行個(gè)性化字段，不過如果能增加幾種常見的頁面形式，那用戶體驗(yàn)將會(huì)更好，如果你是一個(gè)母嬰行業(yè)的客戶，你更希望頁面形式可以個(gè)性化一點(diǎn)。

② 列表模板

「列表模版」是指商品的列表頁，一般從首頁點(diǎn)擊商品的「更多」后就能進(jìn)入。這個(gè)頁面主要向用戶展示店鋪的全部商品，視覺重點(diǎn)是商品的展示以及頁面的排版。

1. 默認(rèn)樣式：可選擇單列（側(cè)重突出商品信息）和雙列（側(cè)重突出商品圖片）。
2. 顯示元素：可設(shè)置商品銷量、售罄標(biāo)識(shí)和商品標(biāo)簽。
3. 綜合排序：可設(shè)置默認(rèn)排序和智能排序。

設(shè)計(jì)缺陷：「智能排序」缺少幫助提示文字，用戶難以感知「智能排序」「和默認(rèn)排序」的區(qū)別。

1. 購物車：提供兩種樣式選擇。
2. 分享標(biāo)題：頁面分享至微信群以及朋友圈的標(biāo)題。

設(shè)計(jì)亮點(diǎn)：很亮眼的功能，提前預(yù)判用戶的分享場(chǎng)景，通過設(shè)置分享標(biāo)題和描述幫助商家提升用戶轉(zhuǎn)化。

分享描述：對(duì)分享網(wǎng)頁的內(nèi)容描述。

③ 分類模板

分類是一個(gè)重要的頁面，可以向客戶清晰展示商品的詳細(xì)分類。

頁面樣式：提供四種常見的頁面樣式選擇。

設(shè)計(jì)亮點(diǎn)：根據(jù)商家的行業(yè)以及使用場(chǎng)景提供了四種常見的頁面樣式，充分考慮了商家真實(shí)的運(yùn)營訴求。

1. 顯示元素：可設(shè)置是否展示商品銷量。
2. 購物車：提供兩種樣式選擇。
3. 廣告位：可設(shè)置開啟或關(guān)閉
4. 分享標(biāo)題/描述：上文已介紹過。

④ 搜索頁

搜索是電商中一個(gè)非常重要的入口，可以幫助用戶快速檢索商品。和下面講解的「搜索」組件不同，這里主要是針對(duì)搜索引導(dǎo)頁和搜索結(jié)果頁的設(shè)置。

1. 搜索頁設(shè)置：可開啟分詞搜索（系統(tǒng)自動(dòng)讀取搜索內(nèi)容并分詞進(jìn)行搜索，可以提高搜索結(jié)果精準(zhǔn)度），添加搜索頁熱詞（搜索引導(dǎo)頁的關(guān)鍵詞）。
2. 搜索結(jié)果設(shè)置：包含商品和專題文章兩個(gè)類型，可拖曳排序以及選擇是否展示。

設(shè)計(jì)亮點(diǎn)：搜索這個(gè)頁面的設(shè)置給了我很大驚喜，沒想到一個(gè)搜索頁還可以設(shè)置得如此精細(xì)，特別是搜索頁熱詞，可以支持設(shè)置跳轉(zhuǎn)鏈接、圖標(biāo)和高亮樣式，功能設(shè)計(jì)考慮得很完善。

設(shè)計(jì)缺陷：添加熱詞后系統(tǒng)沒有提示用戶需要保存，再次返回頁面，發(fā)現(xiàn)熱詞沒有保存，沒有遵循防錯(cuò)原則。

3. 店鋪風(fēng)格

店鋪設(shè)計(jì)風(fēng)格整體的色系設(shè)置，可設(shè)置頂部色系（頭部導(dǎo)航欄）和頁面色系（品牌色）。

設(shè)計(jì)思考：「頂部色系」個(gè)人認(rèn)為是一個(gè)比較雞肋的設(shè)置，大面積的品牌色其實(shí)會(huì)讓整個(gè)店鋪沒有視覺重心，對(duì)用戶體驗(yàn)沒有任何幫助，可以直接取消。

4. 裝修編輯器

在「?jìng)€(gè)性裝修-店鋪頁面」點(diǎn)擊「新建頁面」以后就能進(jìn)入微盟的在線裝修編輯器。

① 頁面類型

行業(yè)模板：提供多種行業(yè)的裝修模板，用戶可一鍵購買使用。

設(shè)計(jì)亮點(diǎn)：提供了多種行業(yè)的店鋪模板，提升了商家的裝修效率，豐富了平臺(tái)的變現(xiàn)方式。

功能模版：按功能場(chǎng)景量身定制的頁面模板，有外賣模板、視頻模板等類型。

設(shè)計(jì)亮點(diǎn)：針對(duì)商家在運(yùn)營過程中使用頻率最高的頁面進(jìn)行單獨(dú)設(shè)置，滿足了商家更多的個(gè)性化需求。

主頁模板：店鋪的首頁模板，點(diǎn)擊后可按照模板框架修改裝修。

設(shè)計(jì)亮點(diǎn)：提供了多個(gè)首頁不同樣式的店鋪模板，提升商家的裝修效率，降低操作成本。

我的模版：用戶購買的付費(fèi)模板，在這里可進(jìn)行統(tǒng)一管理。

② 頁面設(shè)置

「頁面設(shè)置」提供對(duì)整個(gè)頁面設(shè)計(jì)的基礎(chǔ)設(shè)置。

1）基本信息

1. 頁面名稱：頁面的名稱，點(diǎn)擊可直接輸入。
2. 頁面導(dǎo)航：頁面的導(dǎo)航形式，點(diǎn)擊添加后可跳轉(zhuǎn)到導(dǎo)航管理欄目，微盟提供了四種導(dǎo)航形式，靈活度高。

設(shè)計(jì)缺陷：在頁面切換了自定義的導(dǎo)航，但是頁面也沒有顯示，不知道該如何操作，對(duì)用戶造成一定的困擾。

1. 背景：頁面的背景顏色或圖片。
2. 頁面標(biāo)簽：頁面標(biāo)簽，方便用戶統(tǒng)一管理。
3. 頁面?zhèn)渥ⅲ褐С謱?duì)頁面增加備注，方便管理。

設(shè)計(jì)亮點(diǎn)：在裝修頁面可視化區(qū)域，微盟設(shè)計(jì)了一個(gè)首屏的分界線，這個(gè)提示很貼心，對(duì)頁面首屏的排版布局有很大幫助。

2）分享信息

1. 分享標(biāo)題：這里的標(biāo)題是指 H5 網(wǎng)頁分享出去的標(biāo)題，提供了自定義功能，對(duì)商家的推廣運(yùn)營更有幫助。
2. 分享描述：手動(dòng)直接輸入文字，可加入促銷文案等。
3. 分享圖片：頁面分享出去的縮略圖。
4. 預(yù)覽效果：小程序、H5 和海報(bào)的預(yù)覽效果。

設(shè)計(jì)亮點(diǎn)：這個(gè)功能的設(shè)計(jì)非常亮眼，結(jié)合了商家在運(yùn)營推廣的場(chǎng)景，為用戶提供了功能強(qiáng)大的個(gè)性化設(shè)置。

③ 基礎(chǔ)組件

1）搜索

「搜索」是一個(gè)常見的組件，主要應(yīng)用于首頁以及商品列表頁，展示形式也相對(duì)簡(jiǎn)單固定。

內(nèi)容設(shè)置

功能設(shè)置：點(diǎn)擊可直接輸入文字。

樣式設(shè)置

內(nèi)容樣式：包含搜索欄樣式（描邊和填充）、背景顏色、框體樣式（圓角和方角）和文本位置（居左和居中）。

組件樣式：提供組件上邊距和下邊距的調(diào)整，分位小中大三種類型，像素分別為 0px、15px 和 30px。

設(shè)計(jì)思考：關(guān)于上下邊距高度的調(diào)整，固定為大中小三個(gè)類型雖然高效，不過欠缺靈活性，其次 15px 和 30px 也不是常見設(shè)計(jì)規(guī)范，我認(rèn)為如果不向用戶提供自定義間距的調(diào)整，應(yīng)該設(shè)置為 16px 和 32px 更為合理。

2）圖片

「圖片」是店鋪裝修中使用頻率最高的組件之一，它是提升頁面的視覺表現(xiàn)力最佳工具。

展示類型

提供縱向平鋪、橫向平鋪和橫向滾動(dòng)三種展示形式。

內(nèi)容設(shè)置

添加圖片：可最多添加 10 張圖片，圖片上傳后，可設(shè)置單張?zhí)D(zhuǎn)和繪制熱區(qū)域跳轉(zhuǎn)。

設(shè)計(jì)亮點(diǎn)：點(diǎn)擊「設(shè)置跳轉(zhuǎn)鏈接」，可以看到微盟提供了整個(gè)店鋪各功能版塊以及商品的鏈接，極大提升了用戶的操作效率，為店鋪的運(yùn)營做強(qiáng)有力的支持。

設(shè)計(jì)亮點(diǎn)：「熱區(qū)跳轉(zhuǎn)」這個(gè)功能很方便，支持用戶在圖片繪制區(qū)域后進(jìn)行跳轉(zhuǎn)，這對(duì)于用戶設(shè)計(jì)專題頁有很大幫助。

設(shè)計(jì)缺陷：圖片上傳需要審核，而且審核時(shí)間并沒有明確告知用戶，給用戶造成了焦慮，沒有遵循系統(tǒng)可見性原則。

樣式設(shè)置

內(nèi)容樣式：可調(diào)整邊角樣式（直角和圓角）和圖片間距（小中大）。

組件樣式：提供頁邊距、上邊距和下邊距的調(diào)整，分位小中大三種類型。

3）輪播圖

「輪播圖」和「圖片」組件相似，它也是頁面設(shè)計(jì)中提升視覺表現(xiàn)力的重要組件，一般在「首頁」中使用。

展示類型

提供滾動(dòng)播放和滑動(dòng)播放兩種交互形式。

內(nèi)容設(shè)置

和「圖片」組件內(nèi)容一樣。

樣式設(shè)置

內(nèi)容樣式：可調(diào)整輪播間隔、圖片邊角（直角和圓角），以及提供了四種輪播按鈕的樣式。

組件樣式：提供頁邊距、上邊距和下邊距的調(diào)整。

4）標(biāo)題欄

「標(biāo)題欄」是純文本，主要告知用戶當(dāng)前所處的頁面位置，是一個(gè)輔助組件。

展示類型

提供純文本和帶入口（點(diǎn)擊可進(jìn)入詳細(xì)頁面）兩種形式。

內(nèi)容設(shè)置

標(biāo)題文案：手動(dòng)輸入。

樣式設(shè)置

內(nèi)容樣式：可調(diào)整字號(hào)大小、對(duì)齊方式、文字顏色、背景顏色以及標(biāo)題加粗，選用「帶箭頭」的模式還可以切換右側(cè)入口的展示形式（圖標(biāo)和文字）。

組件樣式：提供上邊距和下邊距的調(diào)整。

設(shè)計(jì)缺陷：上下邊距的大小為 30px 和 40px，和其他組件的上下邊距的大小不統(tǒng)一。

5）商品

「商品」是店鋪裝修的核心組件，主要讀取商家在店鋪已發(fā)布上架的商品。

展示類型

提供了五種展示形式，包含一行一個(gè)、一行兩個(gè)、一行三個(gè)、大圖列表和左右滑動(dòng)。

知識(shí)拓展：

1. 一行一個(gè)：圖片展示空間大，視覺沖擊力強(qiáng)，適合商品少，圖片精美的店鋪。
2. 一行兩個(gè)：最常見的展示形式，適合多數(shù)商家店鋪。
3. 一行三個(gè)：圖片展示空間小，視覺沖擊力弱，適合商品種類多、圖片品質(zhì)一般的商家店鋪。
4. 大圖列表：左右排版，空間占比適中，更適合商品列表頁。
5. 左右滑動(dòng)：增加了左右滑動(dòng)，不僅可以控制圖片展示空間，也可以豐富頁面的展示形式。

內(nèi)容設(shè)置

選擇商品：用戶需要手動(dòng)添加商品。

商品內(nèi)容：可設(shè)置對(duì)齊方式（居左和居中）、劃線價(jià)、購物車（有四種樣式）、商品標(biāo)簽、商品銷量和售罄提示。

樣式設(shè)置

內(nèi)容樣式：可設(shè)置主圖比例（1:1 和 2:1）、商品樣式（扁平、卡片和描邊）和邊角樣式（直角和圓角）。

組件樣式：提供上邊距和下邊距的調(diào)整。

6）文本

「文本」是一個(gè)非?；A(chǔ)的組件，可用于商品描述、版權(quán)說明等場(chǎng)景。

內(nèi)容設(shè)置

文本內(nèi)容：可直接輸入文字。

樣式設(shè)置

內(nèi)容樣式：提供字號(hào)大小、對(duì)齊方式、字體顏色、背景顏色和特殊樣式（加粗、斜體和下劃線）的調(diào)整。

組件樣式：提供上邊距和下邊距的調(diào)整。

7）分割占位

「分割占位」主要用于劃分頁面的層級(jí)，提升頁面閱讀效率。

空白

空白間距：這里主要是指組件的面積，高度越高，留白越大，可手動(dòng)調(diào)整。

背景顏色：背景顏色設(shè)置。

背景：可設(shè)置顯示和隱藏，點(diǎn)擊「隱藏」，組件就是透明效果。

內(nèi)容設(shè)置

線樣式：提供實(shí)線、虛線和點(diǎn)線三種形式。

空白間距：和上面一樣。

線顏色：分割線的顏色設(shè)置。

背景顏色：和上面一樣。

背景：和上面一樣。

8）圖文導(dǎo)航

「圖文導(dǎo)航」就是我們常說的金剛區(qū)，主要有圖標(biāo)+文字組合，可用于頁面子功能的快速跳轉(zhuǎn)。

展示類型

提供單向滑動(dòng)和兩行排列兩種形式。

內(nèi)容設(shè)置

圖標(biāo)類型：用戶可使用系統(tǒng)內(nèi)嵌圖標(biāo)以及自己上傳，高效靈活。

樣式設(shè)置

內(nèi)容樣式：可設(shè)置圖標(biāo)顏色（只支持 SVG 圖標(biāo)）、文字顏色和背景顏色。

組件樣式：提供上邊距和下邊距的調(diào)整。

9）商品分組

「商品分組」就是 TAB 切換，主要用于商品分類展示，優(yōu)化信息層級(jí)，減少頁面空間。

內(nèi)容設(shè)置

分組設(shè)置：點(diǎn)擊后可在操作區(qū)直接拖曳分組，高效靈活。

組件內(nèi)容：可開啟搜索功能以及分隔符。

樣式設(shè)置

內(nèi)容樣式：可設(shè)置文字顏色、背景顏色。

組件樣式：提供上邊距和下邊距的調(diào)整。

10）店鋪頭部

「店鋪頭部」可跳轉(zhuǎn)至店鋪首頁，可應(yīng)用在專題頁或單頁面等場(chǎng)景中，幫助用戶快速返回首頁。

展示類型

提供純色和圖片兩種形式。

內(nèi)容設(shè)置

店鋪公告：可直接輸入公告內(nèi)容。

樣式設(shè)置

內(nèi)容樣式：可設(shè)置文字顏色、背景顏色。

組件樣式：提供上邊距和下邊距的調(diào)整。

11）店鋪公告

「店鋪公告」是一個(gè)常用組件，主要用于向客戶通知店鋪的各類促銷及公告。

內(nèi)容設(shè)置

圖標(biāo)類型：可設(shè)置是否需要圖標(biāo)以及自定義上傳。

樣式設(shè)置

內(nèi)容樣式：可設(shè)置滾動(dòng)方向、文本顏色和背景顏色。

組件樣式：提供上邊距和下邊距的調(diào)整。

④ 高級(jí)組件

1）定位菜單

「定位菜單」是可以設(shè)置每個(gè)菜單跳轉(zhuǎn)的組件（必須在當(dāng)前頁面），它的樣式和商品分組相似，但使用場(chǎng)景和功能設(shè)置都完全不同。

內(nèi)容設(shè)置

菜單名稱：可直接輸入菜單名稱。

定位組件：下拉選擇，只能選定同頁面組件，不支持跳轉(zhuǎn)其他頁面。

設(shè)計(jì)缺陷：對(duì)于復(fù)雜的組件使用，沒有遵循尼爾森可用性原則的幫助提示原則，缺少組件的詳細(xì)操作說明。

樣式設(shè)置

內(nèi)容樣式：可設(shè)置文字顏色、背景顏色和選中色。

組件樣式：可設(shè)置上下間距。

2）倒計(jì)時(shí)

「倒計(jì)時(shí)」可配合店鋪的促銷活動(dòng)，增加活動(dòng)的搶購氛圍，有效提升用戶轉(zhuǎn)化。

內(nèi)容設(shè)置

顯示設(shè)置：可按小時(shí)或天設(shè)置活動(dòng)的開始停止時(shí)間以及輔助文案。

樣式設(shè)置

內(nèi)容樣式：提供了三種樣式的選擇，其次可設(shè)置文案顏色、倒計(jì)時(shí)顏色、背景樣式。

組件樣式：可設(shè)置上下間距。

4）專題推薦

「專題推薦」其實(shí)看作是一個(gè)圖片+商品組合的組件，頭部是促銷大圖，下方是商品。這類組件可以幫助商家把頁面的內(nèi)容拆分為不同的主題，提升用戶轉(zhuǎn)化。

展示類型

提供一行兩個(gè)、一行三個(gè)和滑動(dòng)（不限制商品數(shù)量）。

內(nèi)容設(shè)置

添加圖片：頭部大圖，可設(shè)置跳轉(zhuǎn)鏈接。

選擇商品：從商品庫選擇。

商品內(nèi)容：可設(shè)置居左居中，其他內(nèi)容和商品組件一致。

樣式設(shè)置

內(nèi)容樣式：可設(shè)置疊加（突出商品）和貼合兩種商品樣式，其次還可以設(shè)置直角和圓角。

組件樣式：可設(shè)置上下間距。

5）定向圖片

「定向圖片」這個(gè)組件很有創(chuàng)意，它可以幫助商家根據(jù)不同的用戶人群展示不同的內(nèi)容，從而提升用戶轉(zhuǎn)化。

展示類型

提供縱向平鋪和橫向滾動(dòng)兩種形式。

內(nèi)容設(shè)置

添加圖片：最多設(shè)置 5 張，上傳圖片后，選擇可見人群，然后設(shè)置跳轉(zhuǎn)鏈接。

樣式設(shè)置

內(nèi)容樣式：可設(shè)置邊角樣式和圖片間距。

組件樣式：可設(shè)置頁邊距及上下間距。

6）會(huì)員卡

「會(huì)員卡」是一個(gè)常見的促銷工具，它可以幫助商家發(fā)展穩(wěn)定的用戶消費(fèi)人群，從而提升品牌的忠誠度。

內(nèi)容設(shè)置

會(huì)員卡入口：可選擇會(huì)員卡類型，編輯引導(dǎo)文案。

會(huì)員卡內(nèi)容：可對(duì)會(huì)員碼、簽到、余額、積分和優(yōu)惠券等字段設(shè)置是否顯示。

樣式設(shè)置

會(huì)員卡風(fēng)格：系統(tǒng)提供兩種風(fēng)格的會(huì)員卡樣式，其次用戶也可以自定義設(shè)置，包括背景圖片、背景顏色和字體顏色等。

內(nèi)容樣式：可設(shè)置會(huì)員卡樣式、外框背景、邊角樣式以及上下邊距。

⑤ 促銷活動(dòng)

1）優(yōu)惠券

「優(yōu)惠券」是一個(gè)基礎(chǔ)的促銷工具，主要吸引用用戶領(lǐng)取購買，刺激消費(fèi)。

內(nèi)容設(shè)置

添加優(yōu)惠券：點(diǎn)擊可直接從店鋪添加優(yōu)惠券。

樣式設(shè)置

內(nèi)容樣式：可設(shè)置字體顏色、券面顏色和背景內(nèi)容。

組件樣式：可設(shè)置上下邊距大小。

2）限時(shí)折扣

「限時(shí)折扣」是活動(dòng)促銷的必備工具，利用稀缺性刺激用戶購買商品。

展示形式

提供列表和左右滑動(dòng)兩種形式。

內(nèi)容設(shè)置

添加活動(dòng)：點(diǎn)擊后從店鋪添加。

活動(dòng)內(nèi)容：可設(shè)置倒計(jì)時(shí)、劃線價(jià)、庫存/銷量和售罄提示是否展示。

樣式設(shè)置

內(nèi)容樣式：可設(shè)置商品樣式、背景和邊角樣式。

組件樣式：可設(shè)置上下邊距大小。

3）拼團(tuán)

「拼團(tuán)」和「限時(shí)折扣」的功能樣式大同小異。

4）砍價(jià)

「砍價(jià)」和「限時(shí)折扣」的功能樣式大同小異。

5）滿減滿折

「滿減滿折」和「限時(shí)折扣」的功能樣式大同小異。

6）滿包郵

「滿包郵」和「限時(shí)折扣」的功能樣式大同小異。

7）N 元 N 件

「N 元 N 件」和「限時(shí)折扣」的功能樣式大同小異。

設(shè)計(jì)缺陷：促銷活動(dòng)的 7 個(gè)組件，樣式全都一模一樣，欠缺一些個(gè)性化的設(shè)計(jì)。

⑥ 內(nèi)容營銷

1）視頻

「視頻」可以作為一種宣傳工具，不僅可以豐富頁面的表現(xiàn)形式，也能向用戶進(jìn)行跟高效的傳播。

展示形式

提供展示和點(diǎn)擊兩種形式。

內(nèi)容設(shè)置

視頻來源：可直接添加視頻以及從外部粘貼視頻地址。

播放設(shè)置：可設(shè)置是否顯示進(jìn)度條以及自動(dòng)播放。

樣式設(shè)置

內(nèi)容樣式：可設(shè)置視頻圓角（直角和圓角）和視頻尺寸（1:1 和自適應(yīng)）。

組件樣式：可設(shè)置頁邊距及上下邊距。

2）專題文章

「文章」是一個(gè)常用的功能，不僅可以豐富頁面表現(xiàn)形式，對(duì)用戶的留存也有一定幫助。

展示形式

提供大圖列表和左右圖文兩種形式。

內(nèi)容設(shè)置

專題文章：點(diǎn)擊添加已發(fā)布的圖文內(nèi)容。

組件內(nèi)容：可設(shè)置是否展示分組標(biāo)簽、閱讀量和點(diǎn)贊數(shù)。

樣式設(shè)置

內(nèi)容樣式：可設(shè)置文章樣式（卡片、扁平和描邊）、圖片圓角和標(biāo)題樣式。

組件樣式：可設(shè)置上下邊距大小。

3）直播

「直播」是現(xiàn)在電商場(chǎng)景中比較重要的一個(gè)組件，是商家在店鋪運(yùn)營過程中的重要工具。

展示形式

提供左右滑動(dòng)和大圖列表兩種展示形式。

內(nèi)容設(shè)置

直播源：提供微盟直播、微信直播和視頻號(hào)直播三種形式。

設(shè)計(jì)亮點(diǎn)：微盟支持從視頻號(hào)直接調(diào)用直播預(yù)告數(shù)據(jù)，高效便捷。

1. 直播內(nèi)容：可手動(dòng)輸入直播數(shù)量。
2. 展示元素：可設(shè)置直播間信息和商品信息是否展示。

樣式設(shè)置

組件樣式：可設(shè)置背景以及上下邊距。

三、總結(jié)

通過對(duì)整個(gè)店鋪裝修版塊的功能拆解，我們從以下三個(gè)方面進(jìn)行一個(gè)總結(jié)。

1. 微盟把整個(gè)前端店鋪的功能和頁面都切割成不同的組件，對(duì)于有特殊需求或高頻使用的頁面，微盟也單獨(dú)設(shè)計(jì)成獨(dú)立的欄目，比如外賣模板、視頻模板等，這樣的設(shè)計(jì)可以滿足絕大多數(shù)的商家需求，如果還有專業(yè)的設(shè)計(jì)師輔助，店鋪的設(shè)計(jì)品質(zhì)完全可以達(dá)到定制水準(zhǔn)。
2. 在內(nèi)容細(xì)節(jié)方面，微盟也設(shè)計(jì)得很細(xì)致，比如像搜索引導(dǎo)頁的熱詞設(shè)置，這樣的功能真的能給用戶帶來驚喜。雖然還有一些細(xì)節(jié)不夠完善，比如設(shè)計(jì)組件樣式的上下邊距這些功能不支持手動(dòng)調(diào)整數(shù)據(jù)，只提供了大中小三種類型，但其實(shí)已經(jīng)足夠滿足多數(shù)客戶的需求。
3. 整個(gè)店鋪裝修版塊的操作體驗(yàn)也非常順暢，操作效率高，學(xué)習(xí)成本低，各頁面和組件的設(shè)置只要花上一定的時(shí)間熟悉都能快速上手。

1. 設(shè)計(jì)亮點(diǎn)

個(gè)性裝修-店鋪導(dǎo)航：微盟提供了一個(gè)非常靈活的功能，輔助導(dǎo)航，用戶建立保存后可應(yīng)用到其他子頁面，幫助用戶快速返回首頁或跳轉(zhuǎn)至用戶中心等頁面。

系統(tǒng)頁面-列表模板：很亮眼的功能，提前預(yù)判用戶的分享場(chǎng)景，通過設(shè)置分享標(biāo)題和描述幫助商家提升用戶轉(zhuǎn)化。

系統(tǒng)頁面-分類模板：根據(jù)商家的行業(yè)以及使用場(chǎng)景提供了四種常見的頁面樣式，充分考慮了商家真實(shí)的運(yùn)營訴求。

系統(tǒng)頁面-搜索頁：搜索這個(gè)頁面的設(shè)置給了我很大驚喜，沒想到一個(gè)搜索頁還可以設(shè)置得如此精細(xì)，特別是搜索頁熱詞，可以支持設(shè)置跳轉(zhuǎn)鏈接、圖標(biāo)和高亮樣式，功能設(shè)計(jì)考慮得很完善。

裝修編輯器-頁面類型-行業(yè)模板：提供了多種行業(yè)的店鋪模板，提升了商家的裝修效率，豐富了平臺(tái)的變現(xiàn)方式。

裝修編輯器-頁面類型-功能模版：針對(duì)商家在運(yùn)營過程中使用頻率最高的頁面進(jìn)行單獨(dú)設(shè)置，滿足了商家更多的個(gè)性化需求。

裝修編輯器-頁面類型-主頁模板：提供了多個(gè)首頁不同樣式的店鋪模板，提升商家的裝修效率，降低操作成本。

裝修編輯器-頁面設(shè)置-基本信息：在裝修頁面可視化區(qū)域，微盟設(shè)計(jì)了一個(gè)首屏的分界線，這個(gè)提示很貼心，對(duì)頁面首屏的排版布局有很大幫助。

裝修編輯器-頁面設(shè)置-分享信息：這個(gè)功能的設(shè)計(jì)非常亮眼，結(jié)合了商家在運(yùn)營推廣的場(chǎng)景，為用戶提供了功能強(qiáng)大的個(gè)性化設(shè)置。

裝修編輯器-基礎(chǔ)組件-圖片：

1. 點(diǎn)擊「設(shè)置跳轉(zhuǎn)鏈接」，可以看到微盟提供了整個(gè)店鋪各功能版塊以及商品的鏈接，極大提升了用戶的操作效率，為店鋪的運(yùn)營做強(qiáng)有力的支持。
2. 「熱區(qū)跳轉(zhuǎn)」這個(gè)功能很方便，支持用戶在圖片繪制區(qū)域后進(jìn)行跳轉(zhuǎn)，這對(duì)于用戶設(shè)計(jì)專題頁有很大幫助。

2. 設(shè)計(jì)缺陷

個(gè)性裝修-店鋪頁面：「新建頁面」的按鈕過小，樣式也不夠突出，用戶會(huì)容易忽略，難以找到入口。

系統(tǒng)頁面-列表模板：「智能排序」缺少幫助提示文字，用戶難以感知「智能排序」「和默認(rèn)排序」的區(qū)別。

系統(tǒng)頁面-列表模板：很亮眼的功能，提前預(yù)判用戶的分享場(chǎng)景，通過設(shè)置分享標(biāo)題和描述幫助商家提升用戶轉(zhuǎn)化。

系統(tǒng)頁面-搜索頁：添加熱詞后系統(tǒng)沒有提示用戶需要保存，再次返回頁面，發(fā)現(xiàn)熱詞沒有保存，沒有遵循防錯(cuò)原則。

裝修編輯器-頁面設(shè)置-基本信息：在頁面切換了自定義的導(dǎo)航，但是頁面也沒有顯示，不知道該如何操作，對(duì)用戶造成一定的困擾。

裝修編輯器-基礎(chǔ)組件-圖片：圖片上傳需要審核，而且審核時(shí)間并沒有明確告知用戶，給用戶造成了焦慮，沒有遵循系統(tǒng)可見性原則。

裝修編輯器-基礎(chǔ)組件-標(biāo)題欄：上下邊距的大小為 30px 和 40px，和其他組件的上下邊距的大小不統(tǒng)一。

高級(jí)組件-定位菜單：對(duì)于復(fù)雜的組件使用，沒有遵循尼爾森可用性原則的幫助提示原則，缺少組件的詳細(xì)操作說明。

促銷活動(dòng)：促銷活動(dòng)的 7 個(gè)組件，樣式全都一模一樣，欠缺一些個(gè)性化的設(shè)計(jì)。

內(nèi)容營銷-直播：微盟支持從視頻號(hào)直接調(diào)用直播預(yù)告數(shù)據(jù)，高效便捷。

歡迎關(guān)注作者微信公眾號(hào)：「設(shè)計(jì)大偵探」