火星网校
电商后台产品设计:页面动态配置(CMS系统)重新解读
发布时间：2024-08-04 09:38:47 浏览量：282次
本文提供了CMS系统的产品设计思路，落到实际项目中，还需要权衡实际需求和自定义配置程度之间的关系。
这几天刚过去的3.8妇女节，各大电商都推出了不同的促销活动，借势营销。电商平台似乎无时无刻不在寻找各种营销话题，不断创新。通过10多年的电商经验积累，如今举办活动已经得心应手，形式多样化。
下面展示了我从淘宝、京东上找到的两个活动页面，可以看到页面的自定义程度很高，设计简洁大方。另一个称呼是店铺装修或页面配置，那么问题来了，这样一个自定义页面如何配置？如何通过系统化的方式实现页面动态配置。
淘宝、京东3.8节活动页
由于页面动态配置涉及内容较多，因此决定分两篇文章介绍，第一篇讲述页面动态配置的整体产品逻辑，第二篇详细描述各组件功能，直至组装后的解析。
1.页面动态配置的前世今生
页面动态配置是CMS系统（内容管理系统）的一部分，在电商领域，CMS系统有时会被限定为页面动态配置的功能。有时也被称为“装修”，店铺装修、页面装修或自定义新页面。平台看到的首页管理和新建活动页面都属于这个范畴。
在PC电商时代，页面的自定义就像建楼一样，增加一个楼层，每层可自定义内容，例如商品、优惠券、商品排名等。“淘宝旺铺”就是店铺装修发展而来的一个行业，淘宝店家可以选择基础模块的内容，编辑首页或新建页面，实现页面的动态配置。
淘宝的店铺PC端自定义设置
在移动互联网时代，页面动态配置功能升级，可以自定义的要素越来越多，页面布局也更加灵活。用户可以选择添加ICON、banner、商品等模块。
京东的手机装修页面
2.配置的产品逻辑
可以将页面的动态配置比作乐高积木，每个组件就像乐高积木，可以用它们搭建不同的乐高模型，类似地组装成不同的动态页面。我将页面的动态配置分为3步：组件→ 位置+内容 → 动态页面，如下图。
页面动态配置
2.1 基础组件
组件是动态页面的基础，提供给用户编辑具体展示的信息。有多种类型的组件：图片轮播、ICON、优惠券等，每种组件都可有多种样式，选择内部展示的内容或自定义。最常用的是链接，组件的展示样式多样，但点击后跳转页面的选择是统一的。例如：新的活动页面、商品详情页、商品聚合页、购物车、客服等。
基础组件的定义和解析是自定义页面的核心，不同的组件具有不同的功能，呈现不同类型的内容。每个组件都需要单独设计，定义其规则和样式。例如ICON、图片轮播是简单的图片展示，商品排名涉及的算法较为复杂，需要实时获取动态排名。
2.2 位置+内容
有了组件后，用户设置或系统解析时，首先需要确定组件在自定义页面中的位置。位置可以称为“楼层”，每个页面的不同楼层可以定义名称、设置背景、配置内容，目前最流行的交互方式是拖动组件到相应位置，设置内容后即时预览，实现自定义页面动态可视化。
2.3 动态页面
对于整个动态页面，需要定义生效时间、结束时间、活动页面名称等基础信息。设置后可生成相应链接进行预览。
动态页面由不同组件内容构成，首先按照各组件位置解析，再解析组件内容（样式、图片/商品、背景、链接等）。按照上图的反向过程，即可解析出对应自定义页面的内容。
首页设置同样如此，类似自定义页面，可动态设置首页内容，动态添加自定义组件。目前大多数电商首页都是动态配置的，具备丰富的自定义内容。
3.常用的配置组件
配置组件种类繁多，常见的有图片轮播、商品推荐、商品分类、宝贝排行、图标（ICON）等形式，实际上还有富文本、客服、优惠券、满减活动、满赠活动、自定义区域、商品搜索、文字、公告、倒计时、Tab组件（顶部、底部）。
丰富的自定义组件能实现各种活动页面，前文提到的京东、淘宝活动页都是通过CMS配置实现的。
关于不同组件的设计和功能，下篇文章会做详细介绍。
4.可自定义的一些要素
组件间有一些通用的自定义要素:
- 背景颜色/图片;
- 组件间的间距;
- 对应链接。点击组件将跳转至相应页面，包括其他活动页、商品详情、商品聚合页、店铺主页、购物车、在线客服、积分商城、购物券、外链等。
页面动态配置的整体产品逻辑基本介绍完毕，可以看出，虽然页面动态配置看起来复杂，但归根结底是分为三个步骤，复杂度主要集中在基础配置组件的丰富程度上。
虽然CMS系统的产品逻辑相对简单，但要实现高度自定义的页面配置，需要高效的技术框架和强大的可扩展性。当浏览一个自定义页面时，系统需要逐步解析该页面下的自定义组件内容和要素，计算量巨大。
目前绝大部分电商公司的自定义页面仅停留在初级阶段，限于首页和少数特殊页面的自定义配置，自定义程度较低。本文提供了CMS系统的产品设计思路，实际应用中，需权衡实际需求和自定义配置程度之间的关系。
热门课程推荐
热门资讯
-
怎样可以提升你的UI设计能力!第一个:站酷站酷想必是设计师都知道的一个网站,里面不止有UI设计的资源,还有其他设计的,不如:平面设计、网页设计、字体...
-
想要了解iPhone6界面设计的尺寸规范吗？这里为您详细介绍iPhone6的UI设计尺寸规范，包括界面尺寸、图标尺寸、可点击高度规范、搜索栏高度规范以及界面元素之间的距离规范。
-
3. 移动端UI设计中常见的5种APP界面类型，你get到了吗？
通过介绍移动端UI设计中的闪屏页、引导页、浮层引导页、空白页和首页等5种APP界面类型，帮助大家更好地了解UI设计的基本知识
-
将为大家介绍12个绝佳的UI设计网站,这些网站不仅可以为你提供灵感,还可以帮助你学习新的技巧,助力你的创意之旅!dribbbleDribbble 是一个面向设计师的...
-
在移动端设计中,列表页和表单页是不可或缺的部分。一个好的列表页和表单页设计能够让用户轻松地获取信息并产生点击欲望,从而提高点击率。本文将为你...
-
对于想要提高自己的设计能力和创造力的小白和UI设计师来说,这本书是一个很好的选择。4.《设计的觉醒》(IKKO TANAKA)推荐理由: 这本书是日本现代平面...
-
7. 设计中的色彩心理学:浅析中西方色彩的历史演变与设计应用
摘要:本文探讨了色彩的历史演变和设计应用。通过对色彩在早期文明社会中的实用运用、不同文化背景下色彩观念的差异、色彩在设计中的重要性以及新兴技...
-
8. 史上最全，平面设计UI设计必备的77个国内外素材、设计资源网站
ui设计社区,大神太多了。3、behance: https://www.behance.net/ ,著名设计... 对于品牌设计师来说,除了图案素材收集之外,还有一个很重要的,就是设计故...
-
探索零基础UI设计培训的时长与薪资前景。了解数字艺术教育领域的专业课程，以及培训后的职业发展机会。
-
10. 武汉UI设计培训班费用怎么样？想学UI设计要多少钱？
想了解武汉UI设计培训班的费用是多少吗？不知道学UI设计要花多少钱？不妨看看这篇文章，了解UI设计培训班的学费价格以及学习内容。
最新文章
