SAAS产品体验日记（一）丨8000字深度拆解微盟商号装修功能设计

大家好，我是设计大侦查的主理人，廖尔摩斯。

我从今年年初就卖力一款澳洲房产SAAS产品的设计，以是最近半年对国外内的SAAS产品做了一些研究剖析，本日为大家分享我在微盟产品店铺装修版块的一些思考和收成，希望对你有帮助。

一 、需求剖析1.1. 店铺装修的功能代价

店铺装修是指用户采购SAAS产品往后，可以对自己的店铺进行个性化妆修。
这类SAAS产品在海内紧张以有赞、微盟、小鹅通这种为代表。

店铺装修的代价紧张是帮助商家根据自己的品牌调性和行业属性装扮适宜自己的店铺风格，从而为客户带来精良的用户体验，为店铺的运营做做事支撑。

1.2. 用户需求剖析基本型需求：可以对系统默认模版进行大略的修正，比如改换图片、笔墨、菜单栏内容等。
期望性需求：高效灵巧，操作大略，可快速通过装修工具搭建自己想要的风格和模版。
愉快型需求：有超出其他SAAS产品的创意性功能，比如高品质模版、营销组件、排版样式等，终极可以通过编辑器完美还原店铺装修设计方案。

1.3. 设计谋略剖析

SAAS产品强调标准化，这样才能避免人力本钱的花费。
但对付商家来说，如果欠缺个性化和差异化那就失落去了品牌的生命力，以是店铺装修刚好是这样的调节器，在标准和个性化之间尽可能折衷平台和商家的需求。

微盟是一个私域电商的SAAS产品，紧张结合微信生态为各行业的企业客户搭建电阛阓景的做事前端，客户端包含H5店铺和微信小程序。
对付像微盟这样做事浩瀚行业的产品，如何制订一套知足各行业客户装修需求的店铺装修编辑器，是全体店铺装修设计最大的寻衅。

二、内容拆解2.1. 个性装修

「个性装修」是全体店铺装修的核心，用户可以在这个栏目新建页面，然后进入在线编辑器对页面进行装修。

2.1.1. 店铺页面

这里汇总了商家在店铺装修中创建的所有页面，可以对页面进行编辑、复制、删除和打标签等。
点击「新建页面」后，就能进入在线装修编辑器，这个部分我们放到下面做详细讲解。

设计毛病：

「新建页面」的按钮过小，样式也不足突出，用户会随意马虎忽略，难以找到入口。

2.1.2. 店铺导航

「店铺导航」便是菜单栏，商家可以在这个栏目对菜单栏进行内容设置，包括菜单的增删、内容和图标的变动。

设计亮点：

微盟还供应了一个非常灵巧的功能「赞助导航」，用户建立保存后可运用到其他子页面，帮助用户快速返回顾页或跳转至用户中央等页面。

2.2. 系统页面

「系统页面」包含用户中央、列表模板、分类模板和搜索页四个页面的个性化设置。
微盟把用户前端利用频率最高、视觉设计统一规范的页面单独归类为一个栏目。

2.2.1. 用户中央

「用户中央」是店铺利用频率最高的页面之一，对全体店铺的设计风格及调性也发挥着重要浸染。

顶部导航栏：可设置跟随全局（和店铺风格保持同等）和自定义（可设置背景颜色和内容颜色）。
用户头部：可设置头部风格，支持自定义；可设置会员卡的勾引文案、入口跳转和客户码。
用户资产：可设置展示用户的余额、积分和优惠券数量。
订单信息：固定样式，不支持设置。
图片导航：图片轮播，还可设置可见客户类型。
分销中央：用户分销的干系数据，可设置显示权限、勾引文案等。
菜单：供应列表和宫格两种展示形式，可勾选须要展示的系统功能，还支持自定义菜单功能。

设计思考：

微盟的用户中央页面装修实在很灵巧，全体页面的字段都能进行个性化字段，不过如果能增加几种常见的页面形式，那用户体验将会更好，如果你是一个母婴行业的客户，你更希望页面形式可以个性化一点。

2.2.2. 列表模板

「列表模版」是指商品的列表页，一样平常从首页点击商品的「更多」后就能进入。
这个页面紧张向用户展示店铺的全部商品，视觉重点是商品的展示以及页面的排版。

默认样式：可选择单列（侧重突出商品信息）和双列（侧重突出商品图片）。
显示元素：可设置商品销量、售罄标识和商品标签。
综合排序：可设置默认排序和智能排序。

设计毛病：

「智能排序」短缺帮助提示笔墨，用户难以感知「智能排序」「和默认排序」的差异。

购物车：供应两种样式选择。
分享标题：页面分享至微信群以及朋友圈的标题。

设计亮点：

很亮眼的功能，提前预判用户的分享场景，通过设置分享标题和描述帮助商家提升用户转化。

2.2.3. 分类模板

分类是一个主要的页面，可以向客户清晰展示商品的详细分类。

设计亮点：

根据商家的行业以及利用场景供应了四种常见的页面样式，充分考虑了商家真实的运营诉求。

显示元素：可设置是否展示商品销量。
购物车：供应两种样式选择。
广告位：可设置开启或关闭分享标题/描述：上文已先容过。

2.2.4. 搜索页

搜索是电商中一个非常主要的入口，可以帮助用户快速检索商品。
和下面讲解的「搜索」组件不同，这里紧张是针对搜索勾引页和搜索结果页的设置。

搜索页设置：可开启分词搜索（系统自动读取搜索内容并分词进行搜索，可以提高搜索结果精准度），添加搜索页热词（搜索勾引页的关键词）。
搜索结果设置：包含商品和专题文章两个类型，可拖曳排序以及选择是否展示。

设计亮点

搜索这个页面的设置给了我很大惊喜，没想到一个搜索页还可以设置得如此风雅，特殊是搜索页热词，可以支持设置跳转链接、图标和高亮样式，功能设计考虑得很完善。

设计毛病

添加热词后系统没有提示用户须要保存，再次返回页面，创造热词没有保存，没有遵照防错原则。

2.3. 店铺风格

店铺设计风格整体的色系设置，可设置顶部色系（头部导航栏）和页面色系（品牌色）。

设计思考

「顶部色系」个人认为是一个比较鸡肋的设置，大面积的品牌色实在会让全体店铺没有视觉重心，对用户体验没有任何帮助，可以直接取消。

2.4. 装修编辑器

在「个性装修-店铺页面」点击「新建页面」往后就能进入微盟的在线装修编辑器。

2.4.1. 页面类型

设计亮点

供应了多种行业的店铺模板，提升了商家的装修效率，丰富了平台的变现办法。

功能模版：按功能场景量身定制的页面模板，有外卖模板、视频模板等类型。

设计亮点

针对商家在运营过程中利用频率最高的页面进行单独设置，知足了商家更多的个性化需求。

设计亮点

供应了多个首页不同样式的店铺模板，提升商家的装修效率，降落操作本钱。

2.4.2. 页面设置

「页面设置」供应对全体页面设计的根本设置。

2.4.2.1. 基本信息

页面名称：页面的名称，点击可直接输入。
页面导航：页面的导航形式，点击添加后可跳转到导航管理栏目，微盟供应了四种导航形式，灵巧度高。

设计毛病

在页面切换了自定义的导航，但是页面也没有显示，不知道该如何操作，对用户造成一定的困扰。

背景：页面的背景颜色或图片。
页面标签：页面标签，方便用户统一管理。
页面备注：支持对页面增加备注，方便管理。

设计亮点

在装修页面可视化区域，微盟设计了一个首屏的分边界，这个提示很知心，对页面首屏的排版布局有很大帮助。

2.4.2.2. 分享信息

分享标题：这里的标题是指H5网页分享出去的标题，供应了自定义功能，对商家的推广运营更有帮助。
分享描述：手动直接输入笔墨，可加入匆匆销文案等。
分享图片：页面分享出去的缩略图。
预览效果：小程序、H5和海报的预览效果。

设计亮点

这个功能的设计非常亮眼，结合了商家在运营推广的场景，为用户供应了功能强大的个性化设置。

2.4.3. 根本组件

2.4.3.1. 搜索

「搜索」是一个常见的组件，紧张运用于首页以及商品列表页，展示形式也相对大略固定。

2.4.3.1.1. 内容设置

2.4.3.1.2. 样式设置

内容样式：包含搜索栏样式（描边和添补）、背景颜色、框体样式（圆角和方角）和文当地位（居左和居中）。
组件样式：供应组件上边距和下边距的调度，分位小中大三种类型，像素分别为0px、15px和30px。

设计思考

关于高下边距高度的调度，固定为大中小三个类型虽然高效，不过欠缺灵巧性，其次15px和30px也不是常见设计规范，我认为如果不向用户供应自定义间距的调度，该当设置为16px和32px更为合理。

2.4.3.2. 图片

「图片」是店铺装修中利用频率最高的组件之一，它是提升页面的视觉表现力最佳工具。

2.4.3.2.1. 展示类型

供应纵向平铺、横向平铺和横向滚动三种展示形式。

2.4.3.2.2. 内容设置

添加图片：可最多添加10张图片，图片上传后，可设置单张跳转和绘制热区域跳转。

设计亮点：

点击「设置跳转链接」，可以看到微盟供应了全体店铺各功能版块以及商品的链接，极大提升了用户的操作效率，为店铺的运营做强有力的支持。

设计亮点：

「热区跳转」这个功能很方便，支持用户在图片绘制区域后进行跳转，这对付用户设计专题页有很大帮助。

设计毛病

图片上传须要审核，而且审核韶光并没有明确奉告用户，给用户造成了焦虑，没有遵照系统可见性原则。

2.4.3.2.3. 样式设置

内容样式：可调度边角样式（直角和圆角）和图片间距（小中大）。
组件样式：供应页边距、上边距和下边距的调度，分位小中大三种类型。

2.4.3.3. 轮播图

「轮播图」和「图片」组件相似，它也是页面设计中提升视觉表现力的主要组件，一样平常在「首页」中利用。

2.4.3.3.1. 展示类型

供应滚动播放和滑动播放两种交互形式。

2.4.3.3.2. 内容设置

和「图片」组件内容一样。

2.4.3.3.3. 样式设置

内容样式：可调度轮播间隔、图片边角（直角和圆角），以及供应了四种轮播按钮的样式。
组件样式：供应页边距、上边距和下边距的调度。

2.4.3.4. 标题栏

「标题栏」是纯文本，紧张奉告用户当前所处的页面位置，是一个赞助组件。

2.4.3.4.1. 展示类型

供应纯文本和带入口（点击可进入详细页面）两种形式。

2.4.3.4.2. 内容设置

2.4.3.4.3. 样式设置

内容样式：可调度字号大小、对齐办法、笔墨颜色、背景颜色以及标题加粗，选用「带箭头」的模式还可以切换右侧入口的展示形式（图标和笔墨）。
组件样式：供应上边距和下边距的调度。

设计毛病

高下边距的大小为30px和40px，和其他组件的高下边距的大小分歧一。

2.4.3.5. 商品

「商品」是店铺装修的核心组件，紧张读取商家在店铺已发布上架的商品。

2.4.3.5.1. 展示类型

供应了五种展示形式，包含一行一个、一行两个、一行三个、大图列表和旁边滑动。

知识拓展：

一行一个：图片展示空间大，视觉冲击力强，适宜商品少，图片精美的店铺。

一行两个：最常见的展示形式，适宜多数商家店铺。

一行三个：图片展示空间小，视觉冲击力弱，适宜商品种类多、图片品质一样平常的商家店铺。

大图列表：旁边排版，空间占比适中，更适宜商品列表页。

旁边滑动：增加了旁边滑动，不仅可以掌握图片展示空间，也可以丰富页面的展示形式。

2.4.3.5.2. 内容设置

选择商品：用户须要手动添加商品。
商品内容：可设置对齐办法（居左和居中）、划线价、购物车（有四种样式）、商品标签、商品销量和售罄提示。

2.4.3.5.3. 样式设置

内容样式：可设置主图比例（1:1和2:1）、商品样式（扁平、卡片和描边）和边角样式（直角和圆角）。
组件样式：供应上边距和下边距的调度。

2.4.3.6. 文本

「文本」是一个非常根本的组件，可用于商品描述、版权解释等场景。

2.4.3.6.1. 内容设置

2.4.3.6.2. 样式设置

内容样式：供应字号大小、对齐办法、字体颜色、背景颜色和分外样式（加粗、斜体和下划线）的调度。
组件样式：供应上边距和下边距的调度。

2.4.3.7. 分割占位

「分割占位」紧张用于划分页面的层级，提升页面阅读效率。

2.4.3.7.1. 空缺

空缺间距：这里紧张是指组件的面积，高度越高，留白越大，可手动调度。
背景颜色：背景颜色设置。
背景：可设置显示和隐蔽，点击「隐蔽」，组件便是透明效果。

2.4.3.7.2. 内容设置

线样式：供应实线、虚线和点线三种形式。
空缺间距：和上面一样。
线颜色：分割线的颜色设置。
背景颜色：和上面一样。
背景：和上面一样。

2.4.3.8. 图文导航

「图文导航」便是我们常说的金刚区，紧张有图标+笔墨组合，可用于页面子功能的快速跳转。

2.4.3.8.1. 展示类型

供应单向滑动和两行排列两种形式。

2.4.3.8.2. 内容设置

2.4.3.8.3. 样式设置

内容样式：可设置图标颜色（只支持SVG图标）、笔墨颜色和背景颜色。
组件样式：供应上边距和下边距的调度。

2.4.3.9. 商品分组

「商品分组」便是TAB切换，紧张用于商品分类展示，优化信息层级，减少页面空间。

2.4.3.9.1. 内容设置

分组设置：点击后可在操作区直接拖曳分组，高效灵巧。
组件内容：可开启搜索功能以及分隔符。

2.4.3.9.2. 样式设置

内容样式：可设置笔墨颜色、背景颜色。
组件样式：供应上边距和下边距的调度。

2.4.3.10. 店铺头部

「店铺头部」可跳转至店铺首页，可运用在专题页或单页面等场景中，帮助用户快速返回顾页。

2.4.3.10.1. 展示类型

供应纯色和图片两种形式。

2.4.3.10.2. 内容设置

2.4.3.10.3. 样式设置

2.4.3.11. 店铺公告

「店铺公告」是一个常用组件，紧张用于向客户关照店铺的各种匆匆销及公告。

2.4.3.11.1. 内容设置

2.4.3.11.2. 样式设置

内容样式：可设置滚动方向、文本质彩和背景颜色。
组件样式：供应上边距和下边距的调度。

2.4.4. 高等组件

2.4.4.1. 定位菜单

「定位菜单」是可以设置每个菜单跳转的组件（必须在当前页面），它的样式和商品分组相似，但利用场景和功能设置都完备不同。

2.4.4.1.1. 内容设置

菜单名称：可直接输入菜单名称。
定位组件：下拉选择，只能选定同页面组件，不支持跳转其他页面。

设计毛病

对付繁芜的组件利用，没有遵照尼尔森可用性原则的帮助提示原则，短缺组件的详细操作解释。

2.4.4.1.2. 样式设置

内容样式：可设置笔墨颜色、背景颜色和选中色。
组件样式：可设置高下间距。

2.4.4.2. 倒计时

「倒计时」可合营店铺的匆匆销活动，增加活动的抢购氛围，有效提升用户转化。

2.4.4.2.1. 内容设置

2.4.4.3. 样式设置

内容样式：供应了三种样式的选择，其次可设置文案颜色、倒计时颜色、背景样式。
组件样式：可设置高下间距。

2.4.4.4. 专题推举

「专题推举」实在看作是一个图片+商品组合的组件，头部是匆匆销大图，下方是商品。
这类组件可以帮助商家把页面的内容拆分为不同的主题，提升用户转化。

2.4.4.4.1. 展示类型

供应一行两个、一行三个和滑动（不限定商品数量）。

2.4.4.4.2. 内容设置

添加图片：头部大图，可设置跳转链接。
选择商品：从商品库选择。
商品内容：可设置居左居中，其他内容和商品组件同等。

2.4.4.4.3. 样式设置

内容样式：可设置叠加（突出商品）和贴合两种商品样式，其次还可以设置直角和圆角。
组件样式：可设置高下间距。

2.4.4.5. 定向图片

「定向图片」这个组件很有创意，它可以帮助商家根据不同的用户人群展示不同的内容，从而提升用户转化。

2.4.4.5.1. 展示类型

供应纵向平铺和横向滚动两种形式。

2.4.4.5.2. 内容设置

添加图片：最多设置5张，上传图片后，选择可见人群，然后设置跳转链接。

2.4.4.5.3. 样式设置

内容样式：可设置边角样式和图片间距。
组件样式：可设置页边距及高下间距。

2.4.4.6. 会员卡

「会员卡」是一个常见的匆匆销工具，它可以帮助商家发展稳定的用户消费人群，从而提升品牌的忠实度。

2.4.4.6.1. 内容设置

会员卡入口：可选择会员卡类型，编辑勾引文案。
会员卡内容：可对会员码、签到、余额、积分和优惠券等字段设置是否显示。

2.4.4.6.2. 样式设置

会员卡风格：系统供应两种风格的会员卡样式，其次用户也可以自定义设置，包括背景图片、背景颜色和字体颜色等。
内容样式：可设置会员卡样式、外框背景、边角样式以及高下边距。

2.4.5. 匆匆销活动

2.4.5.1. 优惠券

「优惠券」是一个根本的匆匆销工具，紧张吸引用用户领取购买，刺激消费。

2.4.5.1.1. 内容设置

2.4.5.1.2. 样式设置

内容样式：可设置字体颜色、券面颜色和背景内容。
组件样式：可设置高下边距大小。

2.4.5.2. 限时折扣

「限时折扣」是活动匆匆销的必备工具，利用稀缺性刺激用户购买商品。

2.4.5.2.1. 展示形式

供应列表和旁边滑动两种形式。

2.4.5.2.2. 内容设置

添加活动：点击后从店铺添加。
活动内容：可设置倒计时、划线价、库存/销量和售罄提示是否展示。

2.4.5.2.3. 样式设置

内容样式：可设置商品样式、背景和边角样式。
组件样式：可设置高下边距大小。

2.4.5.3. 拼团

「拼团」和「限时折扣」的功能样式大同小异。

2.4.5.4. 砍价

「砍价」和「限时折扣」的功能样式大同小异。

2.4.5.5. 满减满折

「满减满折」和「限时折扣」的功能样式大同小异。

2.4.5.6. 满包邮

「满包邮」和「限时折扣」的功能样式大同小异。

2.4.5.7. N元N件

「N元N件」和「限时折扣」的功能样式大同小异。

设计毛病：

匆匆销活动的7个组件，样式全都千篇一律，欠缺一些个性化的设计。

2.4.6. 内容营销

2.4.6.1. 视频

「视频」可以作为一种宣扬工具，不仅可以丰富页面的表现形式，也能向用户进行跟高效的传播。

2.4.6.1.1. 展示形式

供应展示和点击两种形式。

2.4.6.1.2. 内容设置

视频来源：可直接添加视频以及从外部粘贴视频地址。
播放设置：可设置是否显示进度条以及自动播放。

2.4.6.1.3. 样式设置

内容样式：可设置视频圆角（直角和圆角）和视频尺寸（1:1和自适应）。
组件样式：可设置页边距及高下边距。

2.4.6.2. 专题文章

「文章」是一个常用的功能，不仅可以丰富页面表现形式，对用户的留存也有一定帮助。

2.4.6.2.1. 展示形式

供应大图列表和旁边图文两种形式。

2.4.6.2.2. 内容设置

专题文章：点击添加已发布的图文内容。
组件内容：可设置是否展示分组标签、阅读量和点赞数。

2.4.6.2.3. 样式设置

内容样式：可设置文章样式（卡片、扁平和描边）、图片圆角和标题样式。
组件样式：可设置高下边距大小。

2.4.6.3. 直播

「直播」是现在电阛阓景中比较主要的一个组件，是商家在店铺运营过程中的主要工具。

2.4.6.3.1. 展示形式

供应旁边滑动和大图列表两种展示形式。

2.4.6.3.2. 内容设置

设计亮点

微盟支持从视频号直接调用直播预报数据，高效便捷。

直播内容：可手动输入直播数量。
展示元素：可设置直播间信息和商品信息是否展示。

2.4.6.3.3. 样式设置

三、总结

通过对全体店铺装修版块的功能拆解，我们从以下三个方面进行一个总结。

微盟把全体前端店铺的功能和页面都切割身分歧的组件，对付有分外需求或高频利用的页面，微盟也单独设计成独立的栏目，比如外卖模板、视频模板等，这样的设计可以知足绝大多数的商家需求，如果还有专业的设计师赞助，店铺的设计品质完备可以达到定制水准。
在内容细节方面，微盟也设计得很细致，比如像搜索勾引页的热词设置，这样的功能真的能给用户带来惊喜。
虽然还有一些细节不足完善，比如设计组件样式的高下边距这些功能不支持手动调度数据，只供应了大中小三种类型，但实在已经足够知足多数客户的需求。
全体店铺装修版块的操作体验也非常顺畅，操作效率高，学习本钱低，各页面和组件的设置只要花上一定的韶光熟习都能快速上手。

3.1. 设计亮点个性装修-店铺导航：微盟供应了一个非常灵巧的功能，赞助导航，用户建立保存后可运用到其他子页面，帮助用户快速返回顾页或跳转至用户中央等页面。
系统页面-列表模板：很亮眼的功能，提前预判用户的分享场景，通过设置分享标题和描述帮助商家提升用户转化。
系统页面-分类模板：根据商家的行业以及利用场景供应了四种常见的页面样式，充分考虑了商家真实的运营诉求。
系统页面-搜索页：搜索这个页面的设置给了我很大惊喜，没想到一个搜索页还可以设置得如此风雅，特殊是搜索页热词，可以支持设置跳转链接、图标和高亮样式，功能设计考虑得很完善。
装修编辑器-页面类型-行业模板：供应了多种行业的店铺模板，提升了商家的装修效率，丰富了平台的变现办法。
装修编辑器-页面类型-功能模版：针对商家在运营过程中利用频率最高的页面进行单独设置，知足了商家更多的个性化需求。
装修编辑器-页面类型-主页模板：供应了多个首页不同样式的店铺模板，提升商家的装修效率，降落操作本钱。
装修编辑器-页面设置-基本信息：在装修页面可视化区域，微盟设计了一个首屏的分边界，这个提示很知心，对页面首屏的排版布局有很大帮助。
装修编辑器-页面设置-分享信息：这个功能的设计非常亮眼，结合了商家在运营推广的场景，为用户供应了功能强大的个性化设置。
装修编辑器-根本组件-图片：①点击「设置跳转链接」，可以看到微盟供应了全体店铺各功能版块以及商品的链接，极大提升了用户的操作效率，为店铺的运营做强有力的支持。
②「热区跳转」这个功能很方便，支持用户在图片绘制区域后进行跳转，这对付用户设计专题页有很大帮助。

3.2. 设计毛病个性装修-店铺页面：「新建页面」的按钮过小，样式也不足突出，用户会随意马虎忽略，难以找到入口。
系统页面-列表模板：「智能排序」短缺帮助提示笔墨，用户难以感知「智能排序」「和默认排序」的差异。
系统页面-列表模板：很亮眼的功能，提前预判用户的分享场景，通过设置分享标题和描述帮助商家提升用户转化。
系统页面-搜索页：添加热词后系统没有提示用户须要保存，再次返回页面，创造热词没有保存，没有遵照防错原则。
装修编辑器-页面设置-基本信息：在页面切换了自定义的导航，但是页面也没有显示，不知道该如何操作，对用户造成一定的困扰。
装修编辑器-根本组件-图片：图片上传须要审核，而且审核韶光并没有明确奉告用户，给用户造成了焦虑，没有遵照系统可见性原则。
装修编辑器-根本组件-标题栏：高下边距的大小为30px和40px，和其他组件的高下边距的大小分歧一。
高等组件-定位菜单：对付繁芜的组件利用，没有遵照尼尔森可用性原则的帮助提示原则，短缺组件的详细操作解释。
匆匆销活动：匆匆销活动的7个组件，样式全都千篇一律，欠缺一些个性化的设计。
内容营销-直播：微盟支持从视频号直接调用直播预报数据，高效便捷。

专栏作家

廖尔摩斯，微信"大众年夜众号：设计大侦查，大家都是产品经理专栏作家。
连续创业者，目标是成为全天下拆解产品设计最多的设计师。

本文原创发布于大家都是产品经理，未经容许，禁止转载。

题图来自Unsplash，基于CC0协议

该文不雅观点仅代表作者本人，大家都是产品经理平台仅供应信息存储空间做事。