2024-08-1211:27发布于广东人人都是产品经理的官方账号
小编通过深入研究和实践，为我们揭开了微盟产品店铺装修板块的神秘面纱。从需求分析到内容拆解，再到细节设计思考，本文不仅提供了丰富的实操经验，更为SAAS产品设计提供了独到的见解和创新思路。
店铺装修是指用户采购SAAS产品以后，可以对自己的店铺进行个性化装修。这类SAAS产品在国内主要以有赞、微盟、小鹅通这种为代表。
店铺装修的价值主要是帮助商家根据自己的品牌调性和行业属性装扮适合自己的店铺风格，从而为客户带来优秀的用户体验，为店铺的运营做服务支撑。
SAAS产品强调标准化，这样才能避免人力成本的消耗。但对于商家来说，如果欠缺个性化和差异化那就失去了品牌的生命力，所以店铺装修刚好是这样的调节器，在标准和个性化之间尽可能协调平台和商家的需求。
「个性装修」是整个店铺装修的核心，用户可以在这个栏目新建页面，然后进入在线编辑器对页面进行装修。
2.1.1.店铺页面
这里汇总了商家在店铺装修中创建的所有页面，可以对页面进行编辑、复制、删除和打标签等。点击「新建页面」后，就能进入在线装修编辑器，这个部分我们放到下面做详细讲解。
设计缺陷：
「新建页面」的按钮过小，样式也不够突出，用户会容易忽略，难以找到入口。
2.1.2.店铺导航
「店铺导航」就是菜单栏，商家可以在这个栏目对菜单栏进行内容设置，包括菜单的增删、内容和图标的更改。
设计亮点：
微盟还提供了一个非常灵活的功能「辅助导航」，用户建立保存后可应用到其他子页面，帮助用户快速返回首页或跳转至用户中心等页面。
「系统页面」包含用户中心、列表模板、分类模板和搜索页四个页面的个性化设置。微盟把用户前端使用频率最高、视觉设计统一规范的页面单独归类为一个栏目。
2.2.1.用户中心
「用户中心」是店铺使用频率最高的页面之一，对整个店铺的设计风格及调性也发挥着重要作用。
设计思考：
微盟的用户中心页面装修其实很灵活，整个页面的字段都能进行个性化字段，不过如果能增加几种常见的页面形式，那用户体验将会更好，如果你是一个母婴行业的客户，你更希望页面形式可以个性化一点。
2.2.2.列表模板
「列表模版」是指商品的列表页，一般从首页点击商品的「更多」后就能进入。这个页面主要向用户展示店铺的全部商品，视觉重点是商品的展示以及页面的排版。
「智能排序」缺少帮助提示文字，用户难以感知「智能排序」「和默认排序」的区别。
2.2.3.分类模板
分类是一个重要的页面，可以向客户清晰展示商品的详细分类。
根据商家的行业以及使用场景提供了四种常见的页面样式，充分考虑了商家真实的运营诉求。
2.2.4.搜索页
搜索是电商中一个非常重要的入口，可以帮助用户快速检索商品。和下面讲解的「搜索」组件不同，这里主要是针对搜索引导页和搜索结果页的设置。
设计亮点
搜索这个页面的设置给了我很大惊喜，没想到一个搜索页还可以设置得如此精细，特别是搜索页热词，可以支持设置跳转链接、图标和高亮样式，功能设计考虑得很完善。
设计缺陷
添加热词后系统没有提示用户需要保存，再次返回页面，发现热词没有保存，没有遵循防错原则。
店铺设计风格整体的色系设置，可设置顶部色系（头部导航栏）和页面色系（品牌色）。
设计思考
「顶部色系」个人认为是一个比较鸡肋的设置，大面积的品牌色其实会让整个店铺没有视觉重心，对用户体验没有任何帮助，可以直接取消。
2.4.1.页面类型
提供了多种行业的店铺模板，提升了商家的装修效率，丰富了平台的变现方式。
针对商家在运营过程中使用频率最高的页面进行单独设置，满足了商家更多的个性化需求。
提供了多个首页不同样式的店铺模板，提升商家的装修效率，降低操作成本。
2.4.2.页面设置
「页面设置」提供对整个页面设计的基础设置。
2.4.2.1.基本信息
在页面切换了自定义的导航，但是页面也没有显示，不知道该如何操作，对用户造成一定的困扰。
在装修页面可视化区域，微盟设计了一个首屏的分界线，这个提示很贴心，对页面首屏的排版布局有很大帮助。
这个功能的设计非常亮眼，结合了商家在运营推广的场景，为用户提供了功能强大的个性化设置。
2.4.3.基础组件
2.4.3.1.搜索
「搜索」是一个常见的组件，主要应用于首页以及商品列表页，展示形式也相对简单固定。
2.4.3.1.1.内容设置
2.4.3.1.2.样式设置
关于上下边距高度的调整，固定为大中小三个类型虽然高效，不过欠缺灵活性，其次15px和30px也不是常见设计规范，我认为如果不向用户提供自定义间距的调整，应该设置为16px和32px更为合理。
2.4.3.2.图片
「图片」是店铺装修中使用频率最高的组件之一，它是提升页面的视觉表现力最佳工具。
2.4.3.2.1.展示类型
提供纵向平铺、横向平铺和横向滚动三种展示形式。
2.4.3.2.2.内容设置
「热区跳转」这个功能很方便，支持用户在图片绘制区域后进行跳转，这对于用户设计专题页有很大帮助。
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.样式设置
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.样式设置
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.内容设置
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.样式设置
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.样式设置
通过对整个店铺装修版块的功能拆解，我们从以下三个方面进行一个总结。