电商系统前后台解析商号装修方法论

之前写了两篇关于电商系统的文章，这是第三篇。
这篇文章先容电商系统的店铺装修功能，店铺装修大略来说便是对页面的动态配置。

打个比方，我们APP的首页，从上往下的布局是这样：搜索栏、录播图、标签栏、广告位、商品推举；我们可以这样把设计原型交付给研发进行开拓。

那么店铺装修的浸染是什么呢？

店铺装修首先可以改变页面各个组件的布局排版，比如讲标签栏和广告位调换位置；可以增加或者减少页面的组件，可以在首页加上一个优惠券的组件，也可以去掉轮播图的组件；还可以对组件定义不同的样式，轮播图可以选择3张或者4张，标签栏可以选择单行或者多行。

可以看出，店铺装修的过程实在便是我们画原型的过程。
首先定义一个页面，然后定义组件，在设计组件的样式；最终生成页面。
只不过店铺装修把这个过程写到了系统的程序当中，修正保存之后系统也就变成了修正后的样子。

同时，可以看出店铺装修的过程修正了系统的代码，这也就意味着对技能的哀求是比较高的。

实在店铺装修这个功能的本身是CMS系统，店铺装修只是CMS系统在电商系统中的部分运用。

一、CMS系统与店铺装修的关系

CMS系统叫内容管理系统，运用于很多的行业，将CMS系统运用于电商行业就变成了店铺装修。

我们来看下百度百科给出的定义：CMS是”Content Management System”的缩写，意为“内容管理系统”。

内容管理系统是企业信息化培植和电子政务的新宠，也是一个相对较新的市场。
对付内容管理，业界还没有一个统一的定义，不同的机构有不同的理解。
也便是说，对付内容管理系统业界还没有统一的标准，但是我们知道它便是管理内容的；而这个内容放在电商系统当中便是各个页面，对电商系统的内容管理也叫做店铺装修，店铺装修的技能运用的是CMS技能。

而现阶段由于产品的不同、公司的需求不同，导致我们看到很多产品的店铺装修功能是不相同的。
有的产品仅仅是能够调度页面组件的排版，有的产品仅仅能够配置首页，对技能的高哀求表示在我们很多时候无法充分利用CMS系统，而不同产品由于业务的不同也导致其设计不同，

本文将总结店铺装修的设计方法与方法论，拥有一套好的方法论大概不能让我们战无不胜，但是有总比没有好。

二、如何设计店铺装修

之以是将电商系统页面的动态配置叫做店铺装修，是由于这个功能与我们现实中装修屋子比较类似，所有在先容店铺装修之前，我们首先回忆下如何装修屋子：

1. 一间屋子刚盖好有好多的房间，而不同房间的装修办法肯定是不同的——客厅须要放电视，测试须要放马桶，以是我们首页要选择好一个房间。

2. 当我们选择好房间之后然后就要进行装修了，在装修之前我们还须要做一件事情，那便是买家具、买装修材料，现在我们来装修厕所，须要准备马桶、垃圾桶、卫生纸。

3. 当我们要准备马桶时，我们要考虑这么一个问题：利用什么样式的马桶，功能比较完好的最新日式，还是市情上常见的马桶，是用金马桶还是银马桶，也便是说针对用一个物品的装修我们可以有多种选择。

电商系统的店铺装修功能实在便是借鉴我们装修屋子的过程，只不过屋子变成了我们的产品、房间变成了各个页面、装修的物品便是组件。

在我们装修屋子的时候我们要提前想好须要哪些物品，一块买回来然后再装修，这也是最主要的一步。
对付装修屋子，有三步过程：屋子和房间是一定的；关键在于要准备什么物品，由于物品是须要买的，而且各式各样的都有，物品的价格决定了屋子的豪华程度。

同样对付电商的店铺装修，准备组件也是最主要的一步，也便是定义组件的样式和规则，把它写到代码里面，当我们用的时候直接调用。
由于你不可能自己造一个新的组件，我们只能在系统已有的组件库里面选择我们须要的组件，我们可以自定义的是组件的样式，而不同的组件样式又有着不同的规则。

那么组件是什么呢，组件便是各个单元，比如轮播图是一个组件、搜索是一个组件、商品是一个组件，而每一种组件肯定是有着很多的样式的。

下面，我们根据装修屋子的过程来探求店铺装修的过程，以及须要准备的东西。

1. 首选我们要选择要装修的页面，是首页还是详情页还是列表页等等，而每个页面的布局排版肯定是不一样的。

选择页面这一步须要考虑几个问题：是不是每个页面都可以装修、每个页面可以装修吗。
还有这些都是已有的页面，我可不可以新建一个页面进行装修，新建的话这也页面是不属于系统的，如何与系统进行联系。

2. 选好页面之后我们要选择组件进行布局排版、以首页为例，搜索放在哪里、轮播图放在哪里、广告位放在哪里，是我们须要考虑的问题。

这是选择组件，条件是我们得有组件，也便是说我们在产品设计的时候，须要为每个组件定义样式与规则，把这些组件写到系统里面之后，我们才可以调用这些组件。

3. 我们做好布局排版之后，便是为每个组件选择样式以及配置信息。

比如轮播图我们选择几张的，三张的还是四张的；选择样式之后要配置详细的信息：我们要上传图片，然后为图片设置链接。
这些组件点击可以跳转到别的页面，而不同组件须要配置的信息也是不同的，取决于组件本身。

总结一下：须要提前定义组件的规则；装修分三步：选择/创建页面——组件排版——组件配置。

下面将进入文章的重点内容，我会首先先容不同组件的样式以及配置信息，然后先容店铺装修流程的细节问题。

三、组件的种类

组件种类的丰富程度决定了装修的效果，组件越丰富，装修的可选性就越多。

举例解释，常用的组件随着产品的迭代与完善，组件的种类也会不断地增加，设计职员根据详细需求进行组件的迭代，对付组件的定义也是原谅性的。
很多东西都可以定义为一个组件，颗粒度也不是固定的，两个功能可以当做一个组件，一个活动也可以当做一个组件。

常见的组件形式：

顶部搜索栏、搜索栏、公告、商品组、商户组、二级导航、列表导航、富文本、标题栏、赞助线、赞助空缺、按钮组图文、按钮组笔墨、单张图片、图片轮播、图片橱窗、图片展览、图标组、音频播放、优惠券。

这里解释一下，关于组件的配置问题，系统还在优化当中，可能会存在一些功能大家看不懂的地方。
但是这不是重点，重点是要明白其设计的逻辑和方法，然后结合自己的履历总结本钱身的知识、

关于组件的核心便是要配置组件样式和信息，紧张看我用笔墨写的一些配置信息，这些是比较主要的，图片中显示的配置信息太过繁芜，一样平常来说有时是用不到的。

关于组件的配置可以设计的繁芜也可以设计地大略，根据详细的需求。

3.1 顶部搜索栏

顶部搜索栏是嵌入到顶部导航里面的，如果页面内容较多，就须要采取嵌入的办法，为页面供应更大的空间。

如果页面内容不是太多，顶部导航栏可以只显示标题，顶部搜索栏是固定在顶部的；搜索栏当点击搜索区域的时候，须要跳转到单独的搜索页面以及搜索结果页面，搜索栏须要配置的信息有：

是否添加按钮：可以选择不添加；若添加按钮选择在搜索栏的左侧还是右侧，须要上传按钮图标和图标颜色，图标的链接地址。
图标也可以用图片的形式代替，若用图片则不须要设置背景颜色。
按钮可以设置左侧按钮，也可以设置右侧按钮。
搜索框背景颜色用户搜索时输入的笔墨颜色搜索框的样式：直角、圆弧、圆角

3.2 搜索栏

搜索栏与顶部搜索栏类似，不同点是顶部搜索栏是固定在顶部的，而搜索栏的位置是不固定的，可以自由地放位置。
同样，关于搜索页面以及搜索结果页面都须要提前定义好。

3.3 公告

公告便是类似横幅广告的那种，一样平常是系统有文章的产品产品须要，跳转到文章详情，也可以自由设置链接。

3.4 商品组

商品组是比较繁芜的组件之一，由于对付电商系统来说，最主要的便是商品了，而在电商系统当中展示商品的形式紧张有两种：

商品列表商品详情

不可否认，商品详情是展示商品信息的紧张位置，用户购买与否很大程度上取决于商品详情页面的设计。
但是在进入商品详情页面之前，首先面对的是商品列表页面，商品列表页面设置的好坏决定了用户进入详情页面的概率，以是商品列表组件在配置的时候也是比较繁芜的，紧张配置信息有：

列表样式：单列显示、双列显示、三列显示、列表先显示（这个紧张是商品的列表展示形式）。
商品选择：选择商品可以直接从商品列表获取，也可以通过分类，商品组进行批量选择。

3.5 商户组

选择商户：选择商户与选择商品类似，可以通过商户列表直接获取，也可以通过分类进行获取

3.6 列表导航

列表导航大多数情形下用在个人中央的页面，是许多功能的入口，须要编辑列表标题、链接地址。
可以添加多个多个列表；也可以选择不同的样式，比如加不加图标，加不加“查看”提示笔墨。

3.7 富文本

富文本编辑器的运用情形不是太多，紧张运用于一些倾向先容的地方利用。

3.8 按钮组图文

按钮组紧张运用于紧张页面，比如首页轮播图下方，可以是多个分类的入口，也可以是分模块的入口；给每个按钮定义笔墨，上传图标，然后设置跳转链接，可以设置多行。

3.9 按钮组笔墨

不加图标的按钮，紧张运用处景为某个模块下的功能分类，比如积分下面的我的积分和兑换记录。

3.10 单张图片

单张大图组件，紧张运用于专题活动的先容页面，通过链接进入专题活动列表。

3.11 图片轮播

轮播图片，每个主页面要用到，设置图片张数，链接地址。

3.12 优惠券

优惠券一样平常不用下面的样式设计，没有实际意义。
一样平常是利用图片链接优惠券，或者设计好多种优惠券样式，选择不同的样式，选择优惠券时自动添补内容。

关于组件的定义和设计的解释

组件的种类和样式越多越好，但是组件的配置内容越少越好，种类的丰富度决定了装修的灵巧性。
但是组件的配置信心只管即便不要太多，能自动获取就要自动获取；我上面放的图片仅做理解，由于很多配置信息是没有用的，紧张还是要明白CMS系统的逻辑。

店铺装修功能是一个营销利器，同时也对技能有着很高的哀求，现在基本有两种办法利用它：

对接第三方插件：这种办法方便快捷，不须要研发。
缺陷是功能逻辑繁杂，无法拥有好的用户体验，并且不利于后期迭代，也无法很好相符公司业务。
自行研发：这种办法研发本钱是很高的，但是优点是可以自行定义组件的样式与规则，极大地优化用户体验与操作性，但是缺陷还是本钱高。

四、店铺装修流程

店铺装修店铺首先是页面的选择，然后配置组件信息。

4.1 选择页面：哪些页面须要装修？哪些页面没必要装修？

当我们开始进行装修事，第一步首先是要选择要装修的页面。
理论上来说，所有的页面都是可以装修的，但是实际上我们不须要装修那么多页面。
由于很多页面的装修是没故意义的，以是我们必须要先想好哪些页面须要装修，哪些页面不须要装修，这对付我们来说是非常主要的。

由于它直接影响到研发的本钱问题以及产品的设计问题，比如一些设置干系的页面，个人中央页面是不须要装修的，在定义须要可以装修那些页面之前，我们有必要想想我们做店铺装修这个功能的最初想法是什么？我们开了一个店铺，我们为什么要装修它呢？

由于好看的门面可以吸引客户的到来，同时如果我们把室内做的很俊秀，那么客户就会觉得这个店铺不错；也便是说我们做店铺装修的初衷是出于营销的需求，我们的目的是展示给用户想看的东西。

以是，在定义哪些页面须要装修之前，我们不如先想想用户来到我们的商城哪些页面对于用户的购买是起到至关主要的。
由于装修的目的是出于营销，而营销的目的是赢利，而赚不赢利取决于用户是否购买，以是我们要思考商城中的哪些页面对于用户的终极购买时至关主要的。

我们可以设身处地的想想你在淘宝买东西的时候，你想去哪里看一些你认为主要的信息，而哪些信息对付你的终极购买是起到了决定性浸染的；同时哪些页面是你常常打仗的，说的好听点便是所谓的思考用户场景。

首先是首页，首页是用户进入商城的第一和页面，这个页面相称于商城的门面——主要的页面，没有之一，绝对没有之一。
首页上须要展示很多的信息，很多的活动包括专题入口，都是在首页显示，以是首页是须要装修的。

我有时候可能会在首页勾留一段韶光，看看最近在搞什么活动；而首页的配置则须要根据详细营销的需求了，比如节日来临可以弄几个专题活动，有新的商品可以把它推举到首页。

在我们进入商品详情页面之前我们有时还须要一个页面，便是分类列表页，这个页面只是起到了一个通路的浸染。
在一些小的商城系统，底部导航栏是有分类的，但是实在轻微成熟的商城系统，都不会让分类占用底部导航，以是分类页是不要装修的。

有人可能会说商品详情页面须要装修，我们来谈谈商品详情页面，商品详情页面的意义在于展示商品的详情信息。

对，这个“信息”二字用得好，划起来，要考。

由于我们买不买一个东西取决于什么？

有人说是需求，但实在这种说法没故意义、很浮夸，它是一个非常宽泛的观点，无法辅导我们进行详细的决策。

虽然作为一个产品经理，但是我从来不把需求挂在嘴边，需求是行业内约定俗成的一个东西，大家都知道，不须要反复阐明。
用户既然来到来到详情页面了，他肯定是有需求的；即便不来，他也是有需求的，乃至即便不用淘宝，他同样也是有需求的。

买不买实在取决于什么呢？取决对商品的理解程度，也便是对商品信息的理解程度。
如果我要花很多钱决定买一个东西，我肯定担保自己对这个东西非常理解才能进行购买。

详情页面的核心信息有两部分组成：商品信息先容、商批驳价、那么这些信息的展示都会有一些固定格式的，是不能够随意变动的。
如果详情页面随意变动，就会造成用户对信息的获取滋扰，从而影响用户的终极购买；

进入商城我们利用频率非常高的一个组件是搜索功能，比较于从分类一层层看到我们想要的商品，直接搜索彷佛要方便许多，所有搜索结果页是须要装修的

购物车页面也是我们常常利用的页面，购物车也须要装修，至于个人中央是不要装修的。

同时为了专题活动的需求，店铺装修须要支持自定义页面，用与当做专题商品的展示页面，当然了自定义页面与专题活动没有一定的联系，自定义页面便是创建一个页面，专题活动的展示页面也可以内置成模板

4.1.1 如何判断哪些页面须要装修，哪些页面不须要装修

判断哪些页面须要装修我们可以从这几个维度来思考：

用户打仗频率：打仗频率越高的我们越须要装修（首页、购物车）。
用户勾留韶光：用户勾留韶光越长的页面越须要装修（首页）。
用户点击频率：用户在页面上点击的概率越高越须要装修（搜索结果页）。

4.1.2 如何判断哪些页面不须要装修（不须要装修，但是不是说不用改动，迭代优化）

信息繁杂的页面：这些页面一样平常有固定的格式用户展示信息（详情页面、个人中央）。
与商品关联不强的页面：（帮助、设置）。

4.2 配置组件信息

知道装修哪些页面了，组件也已经弄好了，下一步就须要进入页面配置了（知道哪间屋子、材料也有了，下面干活就行了）。

选择页面然后配置组件信息，末了天生全体页面，并把它同步到系统当中，这个须要落实到详细的产品的交互设计上了；取决于你如何对页面进行布局排版，如何拖动、交互。

下面我来说下，如何将以上信息落实到详细的产品设计上，让大家看得见摸得着。

参考我上面截的图，基本类似那种左侧是预览图，右面是组件，然后添补就行了，末了保存，完事儿。

五、店铺装修的详细产品设计方法

首先说下后台的菜单构造，店铺装修这个功能可以单独拿出来，也可以放到匆匆销模块，这取决系统的繁芜程度。

如果装修功能特殊大略，比如仅能调度首页的组件位置、再比如仅能调度一个或者少数几个组件，直接将它放在匆匆销模块就行了。

如果店铺装修的浸染仅仅是投放广告位，亦或者说专题活动的页面已经内置好，这时的店铺装修的功能是比较大略的，直接放在匆匆销模块就可以，菜单仅须要两个，如下：

5.1 内置于匆匆销系统内

匆匆销系统——广告投放

进去之后是系统页面的预览图，展示广告位的利用情形，可以对广告位的图片、链接进行编辑。

匆匆销系统——专题活动管理

所谓专题活动便是匆匆销活动的一种拓展形式，在上一篇文章中我已经讲到；进来之后可以看到专题活动页面的模块，每个模板的样式肯定是不同的，乃至一个模板有可能多个页面（有底部导航栏的模板），选择模块后，进入页面的配置模式，也便是上面的步骤4.2 须要上传商品，图片等，详细须要配置什么，取决于你设计的模板的样式。

5.2 作为店铺装修系统独立存在

作为店铺装修单独存在的话，菜单和功能如下：

一级菜单：系统页面管理

二级菜单显示可以装修的系统页面，点击页面进入页面的配置界面。
（见4.2）

一级菜单：自定义页面管理

二级菜单显示可以装修的系统页面，点击页面进入页面的配置界面。
（见4.2）

一级菜单：创建自定义页面

点击进入页面的配置界面，只不过是空缺页面。
（见4.2）

解释

大家可能会想了，作为独立系通的存在怎么觉得并没有比嵌入匆匆销活动内多了多少功能，既然是独立的系统该当包含5.1才是，那么广告如何投放，专题活动如何投放？

你可以在所有你可以配置的页面的任何位置添加广告，设置跳转链接，而不受限于页面格式。

你可以通过自定义页面创建你想要的任何页面（当然也就包含专题活动页面了）

大家有想问的可以留言，包括我之前的文章也都可以留言，留言必回，互相交流

推举阅读

电商系统前后台解析——商品管理系统

电商系统前后台解析——匆匆销管理系统

本文由 @感激张师长西席 原创发布于大家都是产品经理。
未经容许，禁止转载

题图来自Unsplash，基于CC0协议