8000字深度干貨!從0到1拆解微盟店鋪裝修功能設計

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

8000字深度干貨!從0到1拆解微盟店鋪裝修功能設計

一、需求分析

1. 店鋪裝修的功能價值

店鋪裝修是指用戶采購 SAAS 產品以后,可以對自己的店鋪進行個性化裝修。這類 SAAS 產品在國內主要以有贊、微盟、小鵝通這種為代表。店鋪裝修的價值主要是幫助商家根據自己的品牌調性和行業屬性裝扮適合自己的店鋪風格,從而為客戶帶來優秀的用戶體驗,為店鋪的運營做服務支撐。

8000字深度干貨!從0到1拆解微盟店鋪裝修功能設計

2. 用戶需求分析

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

8000字深度干貨!從0到1拆解微盟店鋪裝修功能設計

3. 設計策略分析

SAAS 產品強調標準化,這樣才能避免人力成本的消耗。但對于商家來說,如果欠缺個性化和差異化那就失去了品牌的生命力,所以店鋪裝修剛好是這樣的調節器,在標準和個性化之間盡可能協調平臺和商家的需求。

微盟是一個私域電商的 SAAS 產品,主要結合微信生態為各行業的企業客戶搭建電商場景的服務前端,客戶端包含 H5 店鋪和微信小程序。對于像微盟這樣服務眾多行業的產品,如何制定一套滿足各行業客戶裝修需求的店鋪裝修編輯器,是整個店鋪裝修設計最大的挑戰。

8000字深度干貨!從0到1拆解微盟店鋪裝修功能設計

二、內容拆解

1. 個性裝修

「個性裝修」是整個店鋪裝修的核心,用戶可以在這個欄目新建頁面,然后進入在線編輯器對頁面進行裝修。

① 店鋪頁面

這里匯總了商家在店鋪裝修中創建的所有頁面,可以對頁面進行編輯、復制、刪除和打標簽等。點擊「新建頁面」后,就能進入在線裝修編輯器,這個部分我們放到下面做詳細講解。

8000字深度干貨!從0到1拆解微盟店鋪裝修功能設計

設計缺陷:「新建頁面」的按鈕過小,樣式也不夠突出,用戶會容易忽略,難以找到入口。

8000字深度干貨!從0到1拆解微盟店鋪裝修功能設計

② 店鋪導航

「店鋪導航」就是菜單欄,商家可以在這個欄目對菜單欄進行內容設置,包括菜單的增刪、內容和圖標的更改。

8000字深度干貨!從0到1拆解微盟店鋪裝修功能設計

設計亮點:微盟還提供了一個非常靈活的功能「輔助導航」,用戶建立保存后可應用到其他子頁面,幫助用戶快速返回首頁或跳轉至用戶中心等頁面。

8000字深度干貨!從0到1拆解微盟店鋪裝修功能設計

2. 系統頁面

「系統頁面」包含用戶中心、列表模板、分類模板和搜索頁四個頁面的個性化設置。微盟把用戶前端使用頻率最高、視覺設計統一規范的頁面單獨歸類為一個欄目。

① 用戶中心

「用戶中心」是店鋪使用頻率最高的頁面之一,對整個店鋪的設計風格及調性也發揮著重要作用。

8000字深度干貨!從0到1拆解微盟店鋪裝修功能設計

  1. 頂部導航欄:可設置跟隨全局(和店鋪風格保持一致)和自定義(可設置背景顏色和內容顏色)。
  2. 用戶頭部:可設置頭部風格,支持自定義;可設置會員卡的引導文案、入口跳轉和客戶碼。
  3. 用戶資產:可設置展示用戶的余額、積分和優惠券數量。
  4. 訂單信息:固定樣式,不支持設置。
  5. 圖片導航:圖片輪播,還可設置可見客戶類型。
  6. 分銷中心:用戶分銷的相關數據,可設置顯示權限、引導文案等。
  7. 菜單:提供列表和宮格兩種展示形式,可勾選需要展示的系統功能,還支持自定義菜單功能。

設計思考:微盟的用戶中心頁面裝修其實很靈活,整個頁面的字段都能進行個性化字段,不過如果能增加幾種常見的頁面形式,那用戶體驗將會更好,如果你是一個母嬰行業的客戶,你更希望頁面形式可以個性化一點。

② 列表模板

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

8000字深度干貨!從0到1拆解微盟店鋪裝修功能設計

  1. 默認樣式:可選擇單列(側重突出商品信息)和雙列(側重突出商品圖片)。
  2. 顯示元素:可設置商品銷量、售罄標識和商品標簽。
  3. 綜合排序:可設置默認排序和智能排序。

8000字深度干貨!從0到1拆解微盟店鋪裝修功能設計

設計缺陷:「智能排序」缺少幫助提示文字,用戶難以感知「智能排序」「和默認排序」的區別。

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

8000字深度干貨!從0到1拆解微盟店鋪裝修功能設計

設計亮點:很亮眼的功能,提前預判用戶的分享場景,通過設置分享標題和描述幫助商家提升用戶轉化。

分享描述:對分享網頁的內容描述。

③ 分類模板

分類是一個重要的頁面,可以向客戶清晰展示商品的詳細分類。

8000字深度干貨!從0到1拆解微盟店鋪裝修功能設計

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

設計亮點:根據商家的行業以及使用場景提供了四種常見的頁面樣式,充分考慮了商家真實的運營訴求。

8000字深度干貨!從0到1拆解微盟店鋪裝修功能設計

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

④ 搜索頁

搜索是電商中一個非常重要的入口,可以幫助用戶快速檢索商品。和下面講解的「搜索」組件不同,這里主要是針對搜索引導頁和搜索結果頁的設置。

8000字深度干貨!從0到1拆解微盟店鋪裝修功能設計

  1. 搜索頁設置:可開啟分詞搜索(系統自動讀取搜索內容并分詞進行搜索,可以提高搜索結果精準度),添加搜索頁熱詞(搜索引導頁的關鍵詞)。
  2. 搜索結果設置:包含商品和專題文章兩個類型,可拖曳排序以及選擇是否展示。

設計亮點:搜索這個頁面的設置給了我很大驚喜,沒想到一個搜索頁還可以設置得如此精細,特別是搜索頁熱詞,可以支持設置跳轉鏈接、圖標和高亮樣式,功能設計考慮得很完善。

8000字深度干貨!從0到1拆解微盟店鋪裝修功能設計

設計缺陷:添加熱詞后系統沒有提示用戶需要保存,再次返回頁面,發現熱詞沒有保存,沒有遵循防錯原則。

8000字深度干貨!從0到1拆解微盟店鋪裝修功能設計

3. 店鋪風格

店鋪設計風格整體的色系設置,可設置頂部色系(頭部導航欄)和頁面色系(品牌色)。

8000字深度干貨!從0到1拆解微盟店鋪裝修功能設計

設計思考:「頂部色系」個人認為是一個比較雞肋的設置,大面積的品牌色其實會讓整個店鋪沒有視覺重心,對用戶體驗沒有任何幫助,可以直接取消。

4. 裝修編輯器

在「個性裝修-店鋪頁面」點擊「新建頁面」以后就能進入微盟的在線裝修編輯器。

8000字深度干貨!從0到1拆解微盟店鋪裝修功能設計

① 頁面類型

行業模板:提供多種行業的裝修模板,用戶可一鍵購買使用。

8000字深度干貨!從0到1拆解微盟店鋪裝修功能設計

設計亮點:提供了多種行業的店鋪模板,提升了商家的裝修效率,豐富了平臺的變現方式。

功能模版:按功能場景量身定制的頁面模板,有外賣模板、視頻模板等類型。

8000字深度干貨!從0到1拆解微盟店鋪裝修功能設計

設計亮點:針對商家在運營過程中使用頻率最高的頁面進行單獨設置,滿足了商家更多的個性化需求。

主頁模板:店鋪的首頁模板,點擊后可按照模板框架修改裝修。

8000字深度干貨!從0到1拆解微盟店鋪裝修功能設計

設計亮點:提供了多個首頁不同樣式的店鋪模板,提升商家的裝修效率,降低操作成本。

我的模版:用戶購買的付費模板,在這里可進行統一管理。

② 頁面設置

「頁面設置」提供對整個頁面設計的基礎設置。

8000字深度干貨!從0到1拆解微盟店鋪裝修功能設計

1)基本信息

  1. 頁面名稱:頁面的名稱,點擊可直接輸入。
  2. 頁面導航:頁面的導航形式,點擊添加后可跳轉到導航管理欄目,微盟提供了四種導航形式,靈活度高。

8000字深度干貨!從0到1拆解微盟店鋪裝修功能設計

設計缺陷:在頁面切換了自定義的導航,但是頁面也沒有顯示,不知道該如何操作,對用戶造成一定的困擾。

  1. 背景:頁面的背景顏色或圖片。
  2. 頁面標簽:頁面標簽,方便用戶統一管理。
  3. 頁面備注:支持對頁面增加備注,方便管理。

設計亮點:在裝修頁面可視化區域,微盟設計了一個首屏的分界線,這個提示很貼心,對頁面首屏的排版布局有很大幫助。

8000字深度干貨!從0到1拆解微盟店鋪裝修功能設計

2)分享信息

  1. 分享標題:這里的標題是指 H5 網頁分享出去的標題,提供了自定義功能,對商家的推廣運營更有幫助。
  2. 分享描述:手動直接輸入文字,可加入促銷文案等。
  3. 分享圖片:頁面分享出去的縮略圖。
  4. 預覽效果:小程序、H5 和海報的預覽效果。

8000字深度干貨!從0到1拆解微盟店鋪裝修功能設計

設計亮點:這個功能的設計非常亮眼,結合了商家在運營推廣的場景,為用戶提供了功能強大的個性化設置。

③ 基礎組件

1)搜索

「搜索」是一個常見的組件,主要應用于首頁以及商品列表頁,展示形式也相對簡單固定。

8000字深度干貨!從0到1拆解微盟店鋪裝修功能設計

內容設置

功能設置:點擊可直接輸入文字。

樣式設置

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

組件樣式:提供組件上邊距和下邊距的調整,分位小中大三種類型,像素分別為 0px、15px 和 30px。

8000字深度干貨!從0到1拆解微盟店鋪裝修功能設計

設計思考:關于上下邊距高度的調整,固定為大中小三個類型雖然高效,不過欠缺靈活性,其次 15px 和 30px 也不是常見設計規范,我認為如果不向用戶提供自定義間距的調整,應該設置為 16px 和 32px 更為合理。

2)圖片

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

8000字深度干貨!從0到1拆解微盟店鋪裝修功能設計

展示類型

提供縱向平鋪、橫向平鋪和橫向滾動三種展示形式。

內容設置

添加圖片:可最多添加 10 張圖片,圖片上傳后,可設置單張跳轉和繪制熱區域跳轉。

設計亮點:點擊「設置跳轉鏈接」,可以看到微盟提供了整個店鋪各功能版塊以及商品的鏈接,極大提升了用戶的操作效率,為店鋪的運營做強有力的支持。

8000字深度干貨!從0到1拆解微盟店鋪裝修功能設計

設計亮點:「熱區跳轉」這個功能很方便,支持用戶在圖片繪制區域后進行跳轉,這對于用戶設計專題頁有很大幫助。

8000字深度干貨!從0到1拆解微盟店鋪裝修功能設計

設計缺陷:圖片上傳需要審核,而且審核時間并沒有明確告知用戶,給用戶造成了焦慮,沒有遵循系統可見性原則。

8000字深度干貨!從0到1拆解微盟店鋪裝修功能設計

樣式設置

內容樣式:可調整邊角樣式(直角和圓角)和圖片間距(小中大)。

組件樣式:提供頁邊距、上邊距和下邊距的調整,分位小中大三種類型。

3)輪播圖

「輪播圖」和「圖片」組件相似,它也是頁面設計中提升視覺表現力的重要組件,一般在「首頁」中使用。

8000字深度干貨!從0到1拆解微盟店鋪裝修功能設計

展示類型

提供滾動播放和滑動播放兩種交互形式。

內容設置

和「圖片」組件內容一樣。

樣式設置

內容樣式:可調整輪播間隔、圖片邊角(直角和圓角),以及提供了四種輪播按鈕的樣式。

組件樣式:提供頁邊距、上邊距和下邊距的調整。

4)標題欄

「標題欄」是純文本,主要告知用戶當前所處的頁面位置,是一個輔助組件。

8000字深度干貨!從0到1拆解微盟店鋪裝修功能設計

展示類型

提供純文本和帶入口(點擊可進入詳細頁面)兩種形式。

內容設置

標題文案:手動輸入。

樣式設置

內容樣式:可調整字號大小、對齊方式、文字顏色、背景顏色以及標題加粗,選用「帶箭頭」的模式還可以切換右側入口的展示形式(圖標和文字)。

組件樣式:提供上邊距和下邊距的調整。

8000字深度干貨!從0到1拆解微盟店鋪裝修功能設計

設計缺陷:上下邊距的大小為 30px 和 40px,和其他組件的上下邊距的大小不統一。

5)商品

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

8000字深度干貨!從0到1拆解微盟店鋪裝修功能設計

展示類型

提供了五種展示形式,包含一行一個、一行兩個、一行三個、大圖列表和左右滑動。

知識拓展:

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

內容設置

選擇商品:用戶需要手動添加商品。

商品內容:可設置對齊方式(居左和居中)、劃線價、購物車(有四種樣式)、商品標簽、商品銷量和售罄提示。

樣式設置

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

組件樣式:提供上邊距和下邊距的調整。

6)文本

「文本」是一個非常基礎的組件,可用于商品描述、版權說明等場景。

8000字深度干貨!從0到1拆解微盟店鋪裝修功能設計

內容設置

文本內容:可直接輸入文字。

樣式設置

內容樣式:提供字號大小、對齊方式、字體顏色、背景顏色和特殊樣式(加粗、斜體和下劃線)的調整。

組件樣式:提供上邊距和下邊距的調整。

7)分割占位

「分割占位」主要用于劃分頁面的層級,提升頁面閱讀效率。

8000字深度干貨!從0到1拆解微盟店鋪裝修功能設計

空白

空白間距:這里主要是指組件的面積,高度越高,留白越大,可手動調整。

背景顏色:背景顏色設置。

背景:可設置顯示和隱藏,點擊「隱藏」,組件就是透明效果。

內容設置

線樣式:提供實線、虛線和點線三種形式。

空白間距:和上面一樣。

線顏色:分割線的顏色設置。

背景顏色:和上面一樣。

背景:和上面一樣。

8)圖文導航

「圖文導航」就是我們常說的金剛區,主要有圖標+文字組合,可用于頁面子功能的快速跳轉。

8000字深度干貨!從0到1拆解微盟店鋪裝修功能設計

展示類型

提供單向滑動和兩行排列兩種形式。

內容設置

圖標類型:用戶可使用系統內嵌圖標以及自己上傳,高效靈活。

樣式設置

內容樣式:可設置圖標顏色(只支持 SVG 圖標)、文字顏色和背景顏色。

組件樣式:提供上邊距和下邊距的調整。

9)商品分組

「商品分組」就是 TAB 切換,主要用于商品分類展示,優化信息層級,減少頁面空間。

8000字深度干貨!從0到1拆解微盟店鋪裝修功能設計

內容設置

分組設置:點擊后可在操作區直接拖曳分組,高效靈活。

組件內容:可開啟搜索功能以及分隔符。

樣式設置

內容樣式:可設置文字顏色、背景顏色。

組件樣式:提供上邊距和下邊距的調整。

10)店鋪頭部

「店鋪頭部」可跳轉至店鋪首頁,可應用在專題頁或單頁面等場景中,幫助用戶快速返回首頁。

8000字深度干貨!從0到1拆解微盟店鋪裝修功能設計

展示類型

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

內容設置

店鋪公告:可直接輸入公告內容。

樣式設置

內容樣式:可設置文字顏色、背景顏色。

組件樣式:提供上邊距和下邊距的調整。

11)店鋪公告

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

8000字深度干貨!從0到1拆解微盟店鋪裝修功能設計

內容設置

圖標類型:可設置是否需要圖標以及自定義上傳。

樣式設置

內容樣式:可設置滾動方向、文本顏色和背景顏色。

組件樣式:提供上邊距和下邊距的調整。

④ 高級組件

1)定位菜單

「定位菜單」是可以設置每個菜單跳轉的組件(必須在當前頁面),它的樣式和商品分組相似,但使用場景和功能設置都完全不同。

8000字深度干貨!從0到1拆解微盟店鋪裝修功能設計

內容設置

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

定位組件:下拉選擇,只能選定同頁面組件,不支持跳轉其他頁面。

8000字深度干貨!從0到1拆解微盟店鋪裝修功能設計

設計缺陷:對于復雜的組件使用,沒有遵循尼爾森可用性原則的幫助提示原則,缺少組件的詳細操作說明。

樣式設置

內容樣式:可設置文字顏色、背景顏色和選中色。

組件樣式:可設置上下間距。

2)倒計時

「倒計時」可配合店鋪的促銷活動,增加活動的搶購氛圍,有效提升用戶轉化。

8000字深度干貨!從0到1拆解微盟店鋪裝修功能設計

內容設置

顯示設置:可按小時或天設置活動的開始停止時間以及輔助文案。

樣式設置

內容樣式:提供了三種樣式的選擇,其次可設置文案顏色、倒計時顏色、背景樣式。

組件樣式:可設置上下間距。

4)專題推薦

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

8000字深度干貨!從0到1拆解微盟店鋪裝修功能設計

展示類型

提供一行兩個、一行三個和滑動(不限制商品數量)。

內容設置

添加圖片:頭部大圖,可設置跳轉鏈接。

選擇商品:從商品庫選擇。

商品內容:可設置居左居中,其他內容和商品組件一致。

樣式設置

內容樣式:可設置疊加(突出商品)和貼合兩種商品樣式,其次還可以設置直角和圓角。

組件樣式:可設置上下間距。

5)定向圖片

「定向圖片」這個組件很有創意,它可以幫助商家根據不同的用戶人群展示不同的內容,從而提升用戶轉化。

8000字深度干貨!從0到1拆解微盟店鋪裝修功能設計

展示類型

提供縱向平鋪和橫向滾動兩種形式。

內容設置

添加圖片:最多設置 5 張,上傳圖片后,選擇可見人群,然后設置跳轉鏈接。

8000字深度干貨!從0到1拆解微盟店鋪裝修功能設計

樣式設置

內容樣式:可設置邊角樣式和圖片間距。

組件樣式:可設置頁邊距及上下間距。

6)會員卡

「會員卡」是一個常見的促銷工具,它可以幫助商家發展穩定的用戶消費人群,從而提升品牌的忠誠度。

8000字深度干貨!從0到1拆解微盟店鋪裝修功能設計

內容設置

會員卡入口:可選擇會員卡類型,編輯引導文案。

會員卡內容:可對會員碼、簽到、余額、積分和優惠券等字段設置是否顯示。

樣式設置

會員卡風格:系統提供兩種風格的會員卡樣式,其次用戶也可以自定義設置,包括背景圖片、背景顏色和字體顏色等。

內容樣式:可設置會員卡樣式、外框背景、邊角樣式以及上下邊距。

⑤ 促銷活動

1)優惠券

「優惠券」是一個基礎的促銷工具,主要吸引用用戶領取購買,刺激消費。

8000字深度干貨!從0到1拆解微盟店鋪裝修功能設計

內容設置

添加優惠券:點擊可直接從店鋪添加優惠券。

樣式設置

內容樣式:可設置字體顏色、券面顏色和背景內容。

組件樣式:可設置上下邊距大小。

2)限時折扣

「限時折扣」是活動促銷的必備工具,利用稀缺性刺激用戶購買商品。

8000字深度干貨!從0到1拆解微盟店鋪裝修功能設計

展示形式

提供列表和左右滑動兩種形式。

內容設置

添加活動:點擊后從店鋪添加。

活動內容:可設置倒計時、劃線價、庫存/銷量和售罄提示是否展示。

樣式設置

內容樣式:可設置商品樣式、背景和邊角樣式。

組件樣式:可設置上下邊距大小。

3)拼團

「拼團」和「限時折扣」的功能樣式大同小異。

8000字深度干貨!從0到1拆解微盟店鋪裝修功能設計

4)砍價

「砍價」和「限時折扣」的功能樣式大同小異。

8000字深度干貨!從0到1拆解微盟店鋪裝修功能設計

5)滿減滿折

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

8000字深度干貨!從0到1拆解微盟店鋪裝修功能設計

6)滿包郵

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

8000字深度干貨!從0到1拆解微盟店鋪裝修功能設計

7)N 元 N 件

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

8000字深度干貨!從0到1拆解微盟店鋪裝修功能設計

設計缺陷:促銷活動的 7 個組件,樣式全都一模一樣,欠缺一些個性化的設計。

⑥ 內容營銷

1)視頻

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

8000字深度干貨!從0到1拆解微盟店鋪裝修功能設計

展示形式

提供展示和點擊兩種形式。

內容設置

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

播放設置:可設置是否顯示進度條以及自動播放。

樣式設置

內容樣式:可設置視頻圓角(直角和圓角)和視頻尺寸(1:1 和自適應)。

組件樣式:可設置頁邊距及上下邊距。

2)專題文章

「文章」是一個常用的功能,不僅可以豐富頁面表現形式,對用戶的留存也有一定幫助。

8000字深度干貨!從0到1拆解微盟店鋪裝修功能設計

展示形式

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

內容設置

專題文章:點擊添加已發布的圖文內容。

組件內容:可設置是否展示分組標簽、閱讀量和點贊數。

樣式設置

內容樣式:可設置文章樣式(卡片、扁平和描邊)、圖片圓角和標題樣式。

組件樣式:可設置上下邊距大小。

3)直播

「直播」是現在電商場景中比較重要的一個組件,是商家在店鋪運營過程中的重要工具。

8000字深度干貨!從0到1拆解微盟店鋪裝修功能設計

展示形式

提供左右滑動和大圖列表兩種展示形式。

內容設置

直播源:提供微盟直播、微信直播和視頻號直播三種形式。

8000字深度干貨!從0到1拆解微盟店鋪裝修功能設計

設計亮點:微盟支持從視頻號直接調用直播預告數據,高效便捷。

  1. 直播內容:可手動輸入直播數量。
  2. 展示元素:可設置直播間信息和商品信息是否展示。

樣式設置

組件樣式:可設置背景以及上下邊距。

三、總結

通過對整個店鋪裝修版塊的功能拆解,我們從以下三個方面進行一個總結。

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

1. 設計亮點

個性裝修-店鋪導航:微盟提供了一個非常靈活的功能,輔助導航,用戶建立保存后可應用到其他子頁面,幫助用戶快速返回首頁或跳轉至用戶中心等頁面。

系統頁面-列表模板:很亮眼的功能,提前預判用戶的分享場景,通過設置分享標題和描述幫助商家提升用戶轉化。

系統頁面-分類模板:根據商家的行業以及使用場景提供了四種常見的頁面樣式,充分考慮了商家真實的運營訴求。

系統頁面-搜索頁:搜索這個頁面的設置給了我很大驚喜,沒想到一個搜索頁還可以設置得如此精細,特別是搜索頁熱詞,可以支持設置跳轉鏈接、圖標和高亮樣式,功能設計考慮得很完善。

裝修編輯器-頁面類型-行業模板:提供了多種行業的店鋪模板,提升了商家的裝修效率,豐富了平臺的變現方式。

裝修編輯器-頁面類型-功能模版:針對商家在運營過程中使用頻率最高的頁面進行單獨設置,滿足了商家更多的個性化需求。

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

裝修編輯器-頁面設置-基本信息:在裝修頁面可視化區域,微盟設計了一個首屏的分界線,這個提示很貼心,對頁面首屏的排版布局有很大幫助。

裝修編輯器-頁面設置-分享信息:這個功能的設計非常亮眼,結合了商家在運營推廣的場景,為用戶提供了功能強大的個性化設置。

裝修編輯器-基礎組件-圖片:

  1. 點擊「設置跳轉鏈接」,可以看到微盟提供了整個店鋪各功能版塊以及商品的鏈接,極大提升了用戶的操作效率,為店鋪的運營做強有力的支持。
  2. 「熱區跳轉」這個功能很方便,支持用戶在圖片繪制區域后進行跳轉,這對于用戶設計專題頁有很大幫助。

2. 設計缺陷

個性裝修-店鋪頁面:「新建頁面」的按鈕過小,樣式也不夠突出,用戶會容易忽略,難以找到入口。

系統頁面-列表模板:「智能排序」缺少幫助提示文字,用戶難以感知「智能排序」「和默認排序」的區別。

系統頁面-列表模板:很亮眼的功能,提前預判用戶的分享場景,通過設置分享標題和描述幫助商家提升用戶轉化。

系統頁面-搜索頁:添加熱詞后系統沒有提示用戶需要保存,再次返回頁面,發現熱詞沒有保存,沒有遵循防錯原則。

裝修編輯器-頁面設置-基本信息:在頁面切換了自定義的導航,但是頁面也沒有顯示,不知道該如何操作,對用戶造成一定的困擾。

裝修編輯器-基礎組件-圖片:圖片上傳需要審核,而且審核時間并沒有明確告知用戶,給用戶造成了焦慮,沒有遵循系統可見性原則。

裝修編輯器-基礎組件-標題欄:上下邊距的大小為 30px 和 40px,和其他組件的上下邊距的大小不統一。

高級組件-定位菜單:對于復雜的組件使用,沒有遵循尼爾森可用性原則的幫助提示原則,缺少組件的詳細操作說明。

促銷活動:促銷活動的 7 個組件,樣式全都一模一樣,欠缺一些個性化的設計。

內容營銷-直播:微盟支持從視頻號直接調用直播預告數據,高效便捷。

歡迎關注作者微信公眾號:「設計大偵探」

8000字深度干貨!從0到1拆解微盟店鋪裝修功能設計

收藏 27
點贊 37

復制本文鏈接 文章為作者獨立觀點不代表優設網立場,未經允許不得轉載。