【资讯】电商系统前后台解析店铺装修方法论压花辊

“现实生活中，经营店铺需要进行装修；而电商亦是如此，需要通过CMS系统完成“店铺装修”——各项栏目的设计与布局。之前写了两篇关于电商系统的文章，这是第3篇。这篇文章介绍电商系统的店铺装修作用，... <

“现实生活中，经营店铺需要进行装修；而电商亦是如此，需要通过CMS系统完成“店铺装修”——各项栏目的设计与布局。

之前写了两篇关于电商系统的文章，这是第3篇。这篇文章介绍电商系统的店铺装修作用，店铺装修简单来讲就是对页面的动态配置。打个比方，我们APP的首页，从上往下的布局是这样：搜索栏、录播图、标签栏、广告位、商品推荐；我们可以这样把设计原型交付给研发进行开发。

那么店铺装修的作用是什么呢？

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

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

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

事实上，店铺装修这个作用的本身是CMS系统，店铺装修只是CMS系统在电商系统中的部份利用。

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

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

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

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

而现阶段但由于产品的不同、公司的需求不同，致使我们看到许多产品的店铺装修作用是不相同的。有的产品仅仅是能够调剂页面组件的排版，有的产品仅仅能够配置首页，对技术的高要求体目前，我们许多时候没法充分利用CMS系统，而不同产品但由于业务的不同也致使其设计不同，

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

2、如何设计店铺装修

之因此，将电商系统页面的动态配置叫做店铺装修，是由于这个作用与我们现实中装修房子比较类似，所有在介绍店铺装修之前，我们首先回想下如何装修房子：

1. 一间房子刚盖好有大多数的房间，而不同房间的装修方式肯定是不同的——客厅需要放电视，测试需要放马桶，因此，我们首页要选择好一个房间。

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

3. 当我们要准备马桶时，我们要斟酌这么一个问题：使用什么样式的马桶，作用比较齐全的最新日式，还是市场上普遍的马桶，是用金马桶还是银马桶，也就是说针对用一个物品的装修我们可以有多种选择。

电商系统的店铺装修作用事实上，就是鉴戒我们装修房子的进程，只不过房子变成了我们的产品、房间变成了各个页面、装修的物品就是组件。

在我们装修房子的时候我们要提早想好需要哪些物品，一块买回来然后再装修，这也是最重要的一步。对装修房子，有3步进程：房子和房间是一定的；关键在于要准备什么物品，由于物品是需要买的，而且许许多多的都有，物品的价格决定了房子的奢华程度。

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

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

以下，，我们根据装修房子的进程来寻觅店铺装修的进程，和什么是需要准备的东西。

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

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

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

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

3. 我们做好布局排版以后，就是为每一个组件选择样式和什么是配置信息。

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

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

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

3、组件的类型

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

举例说明，经常使用的组件随着产品的迭代与完善，组件的类型也会不断地增加，设计人员根据具体需求进行组件的迭代，对组件的定义也是包容性的。许多东西都可以定义为一个组件，颗粒度也不是固定的，两个作用可以当作一个组件，一个活动也能够当作一个组件。

普遍的组件情势：

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

这里说明一下，关于组件的配置问题，系统还在优化当中，可能会存在一些作用人们看不懂的地方。但是，这不是重点，重点是要明白其设计的逻辑和方法，然后结合自己的经验小编总结成自己的知识、

关于组件的核心就是要配置组件样式和信息，主要看我用文字写的一些配置信息，这些是比较重要的，图片中显示的配置信息太过复杂，在一般情况下有时是用不到的。

关于组件的配置可以设计的复杂也能够设计地简单，根据具体的需求。

3.1 顶部搜索栏

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

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

是不是添加按钮：可以选择不添加；若添加按钮选择在搜索栏的左边还是右边，需要上传按钮图标和图标色彩，图标的链接地址。图标也能够用图片的情势代替，若用图片则不需要设置背景色彩。按钮可以设置左边按钮，也能够设置右边按钮。搜索框背景色彩用户搜索时输入的文字色彩搜索框的样式：直角、圆弧、圆角

3.2 搜索栏

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

3.3 公告

公告就是类似横幅广告的那种，通常为系统有文章的产品产品需要，跳转到文章详情，也能够自由设置链接。

3.4 商品组

商品组是比较复杂的组件之一，由于对电商系统来讲，最重要的就是商品了，而在电商系统当中展现商品的情势主要有两种：

商品列表商品详情不可否认，商品详情是展现商品信息的主要位置，用户购买与否比较大程度上取决于商品详情页面的设计。但是，在进入商品详情页面之前，首先面对的是商品列表页面，商品列表页面设置的好坏决定了用户进入详情页面的几率，因此，商品列表组件在配置的时候也是比较复杂的，主要配置信息有：

列表样式：单列显示、双列显示、3列显示、列表先显示（这个主要是商品的列表展现情势）。商品选择：选择商品可以直接从商品列表获得，也能够通过分类，商品组进

3.5 商户组

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

3.6 列表导航

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

3.7 富文本

富文本编辑器的利用情况不是太多，主要利用于一些偏向介绍的地方使用。

3.8 按钮组图文

按钮组主要利用于主要页面，比如首页轮播图下方，可以是多个分类的入口，也能够是分模块的入口；给每一个按钮定义文字，上传图标，然后设置跳转链接，可以设置多行。

3.9 按钮组文字

不加图标的按钮，主要利用场景为某个模块下的作用分类，比如积分以下，的我的积分和兑换记录。

3.十 单张图片

单张大图组件，主要利用于专题活动的介绍页面，通过链接进入专题活动列表。

3.11 图片轮播

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

3.12 优惠券

优惠券一般不用以下，的样式设计，没有实际意义。通常为利用图片链接优惠券，或设计大多数种优惠券样式，选择不同的样式，选择优惠券时自动填充内容。

关于组件的定义和设计的说明

组件的类型和样式越多越好，但是，组件的配置内容越少越好，类型的丰富度决定了装修的灵活性。但是，组件的配置信心尽可能不要太多，能自动获得就要自动获得；我上面，放的图片仅做了解，由于许多配置信息是没有用的，主要还是要明白CMS系统的逻辑。

店铺装修作用是一个营销利器，同时，也对技术有着很高的要求，目前，基本有两种方式使用它：

对接第3方插件：这类型型方式方便快捷，不需要研发。缺点是作用逻辑复杂，没法具有好的用户体验，并且不利于后期迭代，也没法很好切合公司业务。自行研发：这类型型方式研发本钱是很高的，但是，优点是可以自行定义组件的样式与规则，极大地优化用户体验与操作性，但是，缺点还是本钱高。

4、店铺装修流程

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

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

当我们开始进行装修事，第一步首先是要选择要装修的页面。理论上来讲，所有的页面都是可以装修的，但是，实际上我们不需要装修那么多页面。由于许多页面的装修是没成心义的，因此，我们必须要先想好哪些页面需要装修，哪些页面不需要装修，这对我们来讲是相当重要的。

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

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

因此，，在定义哪些页面需要装修之前，我们不如先想一想用户来到我们的商城哪些页面对用户的购买是起到相当重要的。由于装修的目的是出于营销，而营销的目的是赚钱，而赚不赚钱取决于用户是不是购买，因此，我们要思考商城中的哪些页面对用户的终究购买时相当重要的。

我们可以设身处地的想一想您在淘宝买东西的时候，您想去哪里看一些您认为重要的信息，而哪些信息对您的终究购买是起到了决定性作用的；同时，哪些页面是您常常接触的，说的好听点就是所谓的思考用户场景。

首先是首页，首页是用户进入商城的第一和页面，这个页面相当于商城的门面——重要的页面，没有之一，绝对没有之一。首页上需要展现许多的信息，许多的活动包括专题入口，都是在首页显示，因此，首页是需要装修的。

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

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

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

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

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

有人说是需求，但事实上，这类型型说法没成心义、很浮夸，它是一个相当宽泛的概念，没法指点我们进行具体的决策。

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

买不买事实上，取决于什么呢？取决对商品的了解程度，也就是对商品信息的了解程度。如果我要花许多钱决定买一个东西，我肯定确保自己对这个东西相当了解才能进行购买。

详情页面的核心信息有两部份组成：商品信息介绍、商品评价、那么这些信息的展现都会有一些固定格式的，是不能够随便变动的。如果详情页面随便变动，就会造成用户对信息的获得干扰，从而影响用户的终究购买；

进入商城我们使用频率相当高的一个组件是搜索作用，相比于从分类一层层看到我们想要的商品，直接搜索仿佛要方便许多，所有搜索结果页是需要装修的

购物车页面也是我们常常使用的页面，购物车也需要装修，至于个人中心是不要装修的。

同时，为了专题活动的需求，店铺装修需要支持自定义页面，用与当作专题商品的展现页面，固然了自定义页面与专题活动没有必定的联系，自定义页面就是创建一个页面，专题活动的展现页面也能够内置成模板

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

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

用户接触频率：接触频率越高的我们越需要装修（首页、购物车）。用户停留时间：用户停留时间越长的页面越需要装修（首页）。用户点击频率：用户在页面上点击的几率越高越需要装修（搜索结果页）。4.1.2 如何判断哪些页面不需要装修（不需要装修，但是，否是说不用改动，迭代优化）

信息复杂的页面：这些页面一般有固定的格式用户展现信息（详情页面、个人中心）。与商品关联不强的页面：（帮助、设置）。

4.2 配置组件信息

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

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

以下，我来讲下，如何将以上，信息落实到具体的产品设计上，让人们看得见摸得着。

参考我上面，截的图，基本类似那种左边是预览图，右面是组件，然后填充就好了，最后保存，完事儿。

5、店铺装修的具体产品设计方法

首先说下后台的菜单结构，店铺装修这个作用可以单独拿出来，也能够放到促销模块，这取决系统的复杂程度。

如果装修作用特别简单，比如仅能调剂首页的组件位置、再比如仅能调剂一个或少数几个组件，直接将它放在促销模块就好了。

如果店铺装修的作用仅仅是投放广告位，亦或说专题活动的页面已内置好，这时候的店铺装修的作用是比较简单的，直接放在促销模块就能够，菜单仅需要两个，以下，：

5.1 内置于促销系统内

促销系统——广告投放

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

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

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

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

作为店铺装修单独存在的话，菜单和作用以下，：

一级菜单：系统页面管理

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

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

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

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

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

说明

人们可能会想了，作为独立系通的存在怎样感觉并没有比嵌入促销活动内多了多少作用，既然是独立的系统应当包括5.1才是，那么广告如何投放，专题活动如何投放？

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

来源：人人都是产品经理

alevel考试辅导

a-level课程

alevel 补习

alevel辅导