森马官方旗舰店秋季改版 | Revision design

序言

在开始正式讲改版案例之前，我想和大家先聊一下什么是品牌？品牌在商业战略上又有什么作用？

品牌是一种集合，涵盖了所有元素，品牌为商业而服务，和消费者共生，是用户在接触了解你的商业视，听，触等各种touch point的总和 —— 印象；

品牌的最终的目的一般是传递/创造/增强商品的价值，满足消费者的需求，并使得利益最大化，也是体现产品差异化的重要因素，而品牌形象是顾客对于品牌的感知，它反映为顾客记忆中关于该品牌的记忆点（品牌联想）。

或者上述有点抽象，我们举两个例子，我们在谈起麦当劳，首先进入你脑海应该是红色底上面一个黄色的M的图像（当然现在更有一个非常贴切的中文名金拱门），再而你会想是年轻的感觉，聚会会选择的地方，是快乐的。那么像Nike，你又会想到什么？每个人脑海所浮现的这个印象，记忆集合体其实就是品牌。

Background

森马以前是一家大众休闲的服装品牌，但在18年从线下实体店到线上官方旗舰店进行品牌升级，转变 → Shopping Mall一站式购物。伴随引入箱包，鞋品，家纺等新品类的引入，森马天猫官方旗舰店必须进行改版重设以满足大森马的品牌战略，所以有了此次的秋季改版——品牌重塑。

前期分析调研

[用户行为路径图]

改版设计的前期如同医生对患者进行望闻问切，需要对品牌/用户/产品/竞品多个维度分析考虑再而策略制定，然后进行设计。上图是用户研究方法里面的用户行为分析，我们可以发现其实客户通过阿里系及外投素材多种渠道进入店铺，他们的目的需要大体分为三种：

①了解当前店铺活动玩法（新老客均有可能）

②寻找相关类别商品（具有明显的购物目的）

③浏览季度新品（相对忠诚粉丝客户为主）

而客户通过首页往下进行的行为只有两种：留存与跳失，留存到本店铺的其他二级页面进行浏览，跳失到其他店铺。

所以首页体验的核心是关键点提供的内容和用户预期的匹配度，匹配度越高用户使用体感越好。（这里的体感是体验与感受）

 

 [当前页面问题分析]

商业设计其实在服务层面上是有两个客户，一个是品牌方（商家公司），一个就是消费者（目标人群）。设计起到的作用是沟通与连接的作用，将商家品牌通过设计优质产品服务传递给到用户，促进转化达成。所以对页面的问题分析可以分为两个大方向：设计呈现&逻辑思维：

设计呈现：有没有通过合适的设计手法去包装，将优质产品/良好服务展示给到用户

逻辑思维：在页面布局呈现上，有没有将商家/品牌最想强调的信息点分层级传递给到用户

下图则是对当前森马页面进行这两个维度的分析思考。

其实可以看见其实森马当时的页面主要的问题是由于页面的细节设计处理不到位，导致页面传达给到用户的品质感较弱，对于品牌商家想传达的信息没有很好的归类分级呈现。

除了对于自身页面问题的分析，还需要结合行业商家对比，从而更加深入思考改版的方向与策略。

下图通过对于不同服饰类别的优良商家的首屏，可以发现SEMIR与balbala（同电商公司）拥有同样的问题——首屏信息过于复杂臃肿，阅读成本大，海报高度压缩严重影响用户体感。

[竞品/优秀商家分析]

再而通过搜寻和对比，我们找到三家优秀的商家进行分析学习：

①淘宝心选，作为阿里巴巴全新推出的一个生活方式品牌，它涵盖多类目的生活产品，丰富多样的产品线在页面布局更考验设计师归类以及导视的能力。

②GXG，男装服装类目的Top5品牌，多年依旧能保持其洒脱自在的品牌调性，大片式的海报不仅是视觉体验还是品牌传递都是可借鉴的。

③太平鸟男装，同样也是男装服装类目的Top5品牌，店铺页面

统一和谐的色调风格彰显着该品牌一如既往的品质感。

有了上述的各种调研分析，我们可以初步制定本季的改版方向与计划了。

本次的改版主要的目标有3个，如下图所示。丰富精准的内容&服务和提升品牌力都是此次品牌升级最核心点，关于用户的留存和转化则不仅是商业销售的需求更是用户体验的衡量指标。

有了目标就会相应作出举措策略去保证目标的达成，此外关于监控指标会在本文最后讲解。

策略1.内容的视觉层次设计

针对目前加入新品类的大森马系统现状，需要对全货品在首页上有序分层级区分展示。布局形式，路标导航。

策略2.分屏展现的最佳体验

能够更好的保证用户信息的触达和转化效率。通过分屏能够帮助我们更了解用户的需求并进行拆解，分屏设计中要注意的是每屏都需要定义清楚1～3个核心的用户诉求（首屏：玩法利益点，当季形象新品展现等），从而能够有效的匹配相应的内容。

策略3.严格统一的规范化

通过栅格系统，季度色值，设计元素，用片规范，字体字号，排版形式，活动日常等要素制作全季度的规范系统，并严格控制后期页面落地执行的情况，以保证品牌形象的有效建立。（支持：拍摄品牌组全季度片子风格色调管控）

| 分屏框架梳理 |

首先，对整个首页进行每个模块分层级梳理，并确定每个模块核心功能是什么，这样在进行改版时候更有针对性设计。

第一层级的信息是吸顶和海报部分，作为用户直接进来的首屏应当是品牌形象展示，它可以表现为当前活动KV，当季新品发售海报；而吸顶是常驻于页面的顶部，作为分类导航是最适合不过的，用户在不论滑到哪一屏都能快速找到分类入口。这就是吸顶和海报不同的目的功能。

第二层级信息是细分的品类列表，SEMIR因为它的品牌属性所以导致它产品线非常丰富，首先男女装，再而上下装，还有新进引入的新品类箱包鞋品等。从用户角度出发，如同你进入一家大型的Supermarket，它有各种大型的分类指示牌，你才不会费时间去绕弯路。所以一个清晰明了的品类列表能够帮助用户快速找到合适产品，缩短购物路径，细分流量。

第三和第四层级信息是商家经营销售战略的布局区，有部分用户可能并没有明确目的需要购买什么类型的产品，通过一些外投素材恰好感兴趣进来，商家就在快捷通道有意识引导用户进入这些爆款专区或者新品专区等，从而给到主推产品导流。

最后一层信息就是产品拉list，在首页上直接给到主推产品的流量入口。

下面我们会逐一讲述每一层级设计思路。

| 吸顶模块 |

以前的吸顶放置是每个单独细分的品类，所以非常冗长，用户需要滑动才能看到所有信息。但通过后台数据分析，前5个入口点击率与第6个被隐藏的入口呈断层式，我们可以推断用户1.没有发现可以滑动的交互方式2.并没有产生更多浏览的动机。

优化设计思路：

由横轴一排多个细分品类的陈列改为固定五个最大类别的入口：男女装，童装，配件，居家。设计形式也从方形改变为圆形，在与下面的专区进行一定的视觉区分。

1. 建立用户大森马时尚生活体系的心智

2. 聚焦流量，减少不必要的流量细分

3. 展现形式更多元化
   

| 海报BANNER |

一个人最容易记住的是名字，一个品牌最容易记住则是logo。从SEMIR的logo形式是纯英文形式，字体修长，重心较高，简约时髦。DINCond与其具有同样独特的调性，所以作为海报固定统一的字体是最适合不过的。

| 细分品类 |

细分品类，这一个模块核心目的是让用户快速找到所需的服装类别，所以设计要点简单清晰。新的设计形式不仅采用扁平化设计更借鉴两个伟大品牌的经典设计：

一个是Apple IOS 11 大字标题，合适的字体以及较大的字号吸引眼球，以传递“直觉，快速，现代”的感觉。而且用户不论滑动到任何位置都可以通过站牌一样的大字标题快速理解所处屏位的模块内容，起到引导和定位作用。

另外一个则是微软window桌面图标设计，上图下文这种视觉形式已经在用户认知上形成习惯，这种简单而直接的设计形式在众多不同造型的服装品类中是最适合不过的。

新品类专区对比之前点击率平均提升约5%

| 活动专区 |

过去的活动专区设计追求形式丰富性，而忽略了信息的传递有效性。再一个在选择用图上需要考虑上下相邻的和谐度，并非所有专区都采用模特展示才具有点击欲望。可以通过引入一些空景调节视觉感觉，产生主次与节奏。如果专区过多，可以使用交互方式解决篇幅冗长的问题，类似轮播。

| 其他模块 |

互动精选在用户点击权重上占比较小，只有较小的用户感兴趣，所以在设计形式上不需要过分强调，圆形的icon对比之前设计形式更统一明了。

新品专辑采用杂志设计形式，体现出服装类目时尚潮流的特质，往右滑动的交互形式让用户像在书架上选阅合适的书籍一般。

| 输出规范 |

设计规范是设计团队中以及对外商业合作一种非常有效的沟通方式，通过输出设计规范，能够最少的时间成本下帮助各个team member快速掌握理解。而且也能更高效统一品牌视觉各端口的输出。

最终效果呈现

| 监控指标 |

监控指标的目的是指导改版设计中调整，为后续的迭代提供数据的参考。作为一名优秀的设计不仅需要有良好的设计功底，也需要用户研究以及数据分析能力，去帮助检视自己的设计成效。

指标1: 分屏中的内容的点击PV分布：主要目的是监控该分屏中内容的吸引度。

指标2: 分屏中的内容到二级页PV占比：主要目的是监控该分屏到次级核心页面的转化率。

写在最后

设计师工作思考不应单单是停留在视觉美感的层面。如果仅仅局限于视觉层面去做设计，会脱离产品和用户，设计作品只满足了个人而不是商业。设计师是品牌（商家，产品）与消费者（用户，客群）的连接者，需要将两者的利益与诉求相结合才能做出优质合适的商业设计。