Sue之前分享了两篇文章，介绍了内容管理系统(CMS)关于内容生产和内容过滤的部分。那么生产和过滤的内容如何呈现给我们的内容消费者呢？

【/h/】众所周知，在客户端开发实现的版本一旦发布，如果有什么东西需要调整，就必须重新修改代码，哪怕是很小的改动，也需要在更新之前进行测试，每一次更新本身都有出现各种问题的风险。

如果能提供动态可配置的能力，通过模板化实现内容的呈现，就能降低开发的成本，同时也能更高效的对比测试不同的产品/运营方案。

可见，页面动态配置是内容管理系统(CMS)关于如何更灵活地呈现内容的解决方案。

1. 页面拆解&组成部分

在这个“时尚眼镜专场”页面上，苏剪了三张图。让我们把它们一个一个拆开，看看这个页面有什么:

一个带着黑超的王俊凯（图片）一堆优惠券（优惠券领取/限定店铺优惠券使用入口模块）“超级大牌”（知名品牌的店铺入口模块）“必买清单”（热销/推荐商品的购买入口模块）……

像这样的动态页面可以分为三个层次:页面-卡片-组件。

页面，指的是整体可滑动页面实体卡片，指的是页面内可按行划分的一个一个独立区块（又称为”楼层”）组件，指的是卡片内部一个独立的、业务级别的单元

它们之间的层级关系见下图:

2. 实现原理

了解了动态页面的组件之后，这三个组件如何协同工作才能最终呈现我们在页面上看到的内容呢？

当用户访问一个页面时，完整的页面内容最终呈现出来，主要通过以下三个步骤:

一系列的初始化（包括初始化卡片库和组件库、数据解析器、布局框架）数据的解析（包括解析卡片和组件的类型，解析卡片和组件的基本样式）对页面进行渲染（根据卡片提供的布局信息进行布局、根据组件提供的组件信息获取组件内容）

总结起来就是:首先根据布局分析各个组件的位置，然后分析组件的内容(样式、图片、背景、链接等。)，最后分析对应的自定义页面内容。

3. 要点说明

在说动态页面的具体配置过程之前，我想和你多聊一聊。苏在学习和工作的过程中总结整理出一些重点，然后通过这些加深整体的理解。

3.1组件

不是指一行小字，一个明显的扣子，或者帅哥美女的明星照。需要提前定义，写入框架(代码)。组件定义的标准是业务，需求是能够承担一定业务能力的最小组合单元。

这基本上是PM定义需求的一个通用原则。

每个组件都需要单独设计，以定义其规则和样式。

组件的基本样式:组件背景、组件外缘/内缘、组件纵横比。此外，还可能有字体颜色、字体大小、组件之间的空间隙、对应的跳转链接等额外的自定义样式。

不同的组件有不同的功能，代表不同类型的内容。

常见的组件类型:搜索栏、公告、列表导航、富文本、标题栏、按钮组文本、按钮组文本、单张图片、图片轮播、优惠券等等。

3.2卡片

卡负责组件的布局。卡片不需要布局模板，只需要描述卡片的类型，也在框架中注册。

对卡片的描述，可分成：标题、布局和样式等。其中最重要的部分是：布局，因为它包含了内嵌的组件模型，卡片的布局就是对包含的组件来布局。常见的布局方式：流式布局、瀑布流布局、吸顶布局、悬浮布局、轮播布局等。卡片的布局描述也是声明式的，但只声明布局方式，不提供布局细节的描述。卡片的基本样式：卡片背景、卡片外边距/内边距、卡片内组件间距、列数。

3.3页

动态页面指的是动态布局，就是以嵌套组件的形式构建整个页面。一个页面内嵌多个卡片，一个卡片嵌套多个组件。

4. 步骤概要

明确了页面动态的实现原理。如果需要配置这样的页面，应该提前准备和做什么？

这里分三个阶段:前中后。先说配置工作涉及的流程。

4.1开始配置前

1)明确目的和重点。

要配置的这个页面，运营目的是什么？通过页面，想呈现的内容是哪些？内容不同，要重点突出的信息是什么？

2)确认现有设计，是否需要补充。

已有的布局样式和组件，是否可以满足配置需求，进而达到运营目的？卡片库（布局样式）和组件库有无需要补充新增的？

4.2配置时

1)选择/创建页面

一般来说，页面需要支持动态配置的情况有两种:

一是，对固有的页面进行选择性的配置（选择的标准会在文章最后和大家具体探讨）。二是，依据具体运营目的，通常是活动或专题类的运营需求，创建一个新的页面，对页面进行自定义（不需要单独为了这个新页面去开发）。

2)选择卡片，然后选择组件进行布局排版。

根据页面想要呈现的内容和内容想要突出的信息，在现有的卡片库(布局样式)和组件库中选择合适的布局样式和组件。

3)组件配置(定义样式和配置信息)

这一步会涉及到一系列的样式和细节的配置，大到页面呈现的氛围，小到组件之间的间距等等。具体的样式和信息的配置项，要依据具体的需求来定义（有兴趣的小伙伴可以深入地对具体的行业和产品、内容类型去学习了解，推荐“电商行业的店铺装修”）切忌盲目地追求配置的灵活性，细分出过多的、非必要的配置项，这会导致研发的成本变高，同时导致配置工作变繁琐，应尽量控制配置项的数量，尽量做到自动获取信息，提供系统的操作性。

4.3配置完成后

1)效果预览——确认发布。

2)预览提交-审核发布

预习是必经的一步。苏这一步的预览是指页面配置完成后最终效果的预览，也可能涉及到时间维度(比如双十一零点活动页面预定发布的提前预览)。另外还有一个预览，是指在配置过程中，对样式进行微调(比如把组件换成不同的背景色)的效果的预览。

让操作员在配置后发布前预览页面的配置效果，以保证最终呈现的页面符合要求。

预览完效果，提交等待审批发布，然后你可以根据公司/团队的具体情况细化步骤。

通常情况下，由于初创公司的运营团队相对简化，常见的流程是:运营人员完成配置后，预览效果，确认没有问题后，才放行运营。没有中间的审核步骤，从预览到发布一般都是同一个人。

但是，在内容管理有明确流程和规范、人员配备齐全的公司，流程通常是第二位的)。

涉及到很多不同的角色，角色背后的权限细分。有人负责配置，预览后送审，负责渲染效果。有人负责审核，最后确认发布，控制整体。

所以具体流程是:效果预览-提交审核-审核-确认发布。

附件:整体配置步骤示意图。

5. 需求提取

明确了页面动态的实现原理和页面配置的工作流程，然后下面就是PM最熟悉的:提取需求，完成产品设计。

产品设计和后期持续迭代优化要始终围绕以下几个方向:

如何使工作更高效如何使协作更顺畅如何使管理更智能如何使权责更明确如何使风险更可控支持快速试验，用数据来指导决策

基于实现原理、配置流程和产品设计方向，Sue提取了以下六点需求:

(1)管理

组件库管理：不支持直接创建一个新的组件，只能在系统已有的组件库里面选择。卡片库管理：（同组件库）不支持直接创建但可直接调用。除此之外，还有一个很重要的功能：需支持一键上下线卡片（在出现问题时立即可做线上的紧急处理）。页面管理：需支持一键上下线页面（同样是应急处理的功能支持）、版本通配（可解决新版本发布时的配置效率）。权限管理：对应组织结构或业务线，做页面、操作和数据等的权限细分。变更记录：让每次变更都有记录可查，防止线上数据被随意更改。

(2)编辑(配置)

配置不同类型的页面时，提供了相应的配置功能:

1)固有页面的配置

选择页面选择卡片、定义卡片样式、配置卡片内容（选择组件）选择组件、定义组件样式、配置组件内容配置更多页面信息：定义生效时间、失效时间、页面名称

2)用于创建页面的配置

创建页面选择卡片、定义卡片样式、配置卡片内容（选择组件）选择组件、定义组件样式、配置组件内容配置更多页面信息：定义生效时间、失效时间、页面名称

3)另外还应该提供副本创建等功能，满足高效配置。

可批量复制地创建页面可批量复制地创建卡片

(3)预览

配置预览:对应配置过程中的效果查看。主流的交互是拖动到相应位置，设置好之后实时预览内容。

白名单预览:对应预发布状态。在这种状态下，您可以预览白名单以提前看到效果。

时间机器预览:

通过时间机器调整时间，可预览对应在将来某个时间的效果。因为不同的时间点，生效的数据不一样，确保配置符合要求和需求。

(4)审查

该流程与一般申请审核基本一致，需要支持和满足的需求点应包括但不限于:

待审核记录的处理通知待审核记录的呈现审核操作（效果、内容的展现、功能的使用等——预览功能）审核记录审核记录：通过、不通过（原因告知、修改指导）

(5)发布

一般不建议配置完成后直接发布，以免问题配置直接影响在线用户。

在发布阶段，需要满足两个发布功能:

预发布：增加预发布状态下，是为了进一步检查和确认配置效果，降低出现问题的风险。定时发布：支持设置所配置的页面仅在特定时间生效。由此，可提前完成相关的配置、审核等工作。临时配置容易导致问题出现，这同样也是为了使风险更可控。

(6)ABtest

俞军老师在书中分享:由于信息的不完全性，所有他认为自己经过仔细调查后做出的判断和行为，客观上都是试错。

同样，我们设计的内容管理系统(CMS)也应该有这样的试错能力。

支持页面、卡片级别的ABtest能力。可将每一次的配置变更做成实验变更，进行ABtest。在小范围内先试验变更的效果，最后根据数据来做决策。

(苏前段时间刚刚梳理建立了自己项目的ABtest体系，做了一些专门的深入学习和总结。我也想以后再跟你聊，哪怕在这里先预习一下)

结合脑图和需求点(但还是那句话:需要结合具体情况定义，设计的产品能满足需求)

6. 思路&理念

最后，我们来总结一下内容管理系统(CMS)通过动态页面呈现内容的基本思想和设计理念。

基本思想:

内容管理系统(CMS)通过动态页面呈现内容的基本思想是将内容管理与页面设计分离。页面设计存储在模板中，而内容存储在数据库中。当用户请求一个页面时，所有部分共同动态地生成一个标准页面。

设计理念:

内容管理系统（CMS）通过动态化页面对内容进行呈现的设计理念：具备足够的灵活性。只有足够的灵活，才能满足运营日常的各种需求。

灵活性体现在:

布局能力动态变化，定义清楚最少要有多少种布局样式内置在框架里；动态能力粗粒度化，定义清楚有多少组件要注册到框架里；组件业务化，组件要求是能承担一定业务能力的最小复用单元；组件可复用，需要对同类型的组件具备回收复用的能力。7. 产品思考

我们都明白动态页面配置在运营和营销中的重要性。一方面是实实在在的减少重复性和不必要的开发工作，避免开发资源的争夺和漫长的等待时间。另一方面，灵活的配置方案和便捷的配置工具对技术要求相对较高。如何更好的平衡这两个方面，是产品需要思考的问题。

有必要所有的页面都支持动态配置吗？哪些页面需要支持？哪些页面无需支持？哪些页面不宜支持？判断的标准和依据是什么呢？

Sue对这些问题的回答是，并不是所有的页面都需要支持动态配置，没有必要。

满足以下条件的页面需要支持动态配置:

用户流量集中的页面（例如首页）用户停留时间越长的页面（例如首页）用户频繁使用的页面（例如搜索页）营销空间和价值大的页面（例如专题活动页）

满足以下条件的页面不需要支持动态配置:

不是交易流程必经的页面流（例如分类页；需要说明一下：交易不特指下单付费，对内容的消费本质上也算一个交易）不是用户频繁使用（例如帮助页、设置页）

满足以下条件的页面不应支持动态配置:

一般有固定的格式展示信息（例如个人中心页）关键信息对页面转化有直接影响，用户只关注关键信息，故需突出且固定位置展示，培养用户习惯，不能随意变动（例如详情页）

以上是Sue在内容呈现中对CMS的总结和分享。

说到相应的工作，我们要思考的不仅仅是这篇文章已经分享的内容。希望苏分享的东西能起到抛砖引玉的作用。

坚持分享一些个人的思考和想法，保持转化输入总结输出的学习习惯。如果有不成熟不正确的地方，希望有小伙伴给我指点。欢迎讨论，共同进步。

本文由@苏原创发布。每个人都是产品经理。未经许可，禁止转载。

题图来自Unsplash，基于CC0协议。

,