搭建内容管理系统CMS（3）：从原理、需求到设计，一文看懂动态化页面

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

我们都知道，一旦版本发布到客户端进行开发和实现，如果有任何需要调整的地方，代码必须再次修改。即使是很小的变化也需要在测试后更新，而且每次更新本身都有各种问题的风险。

如果我们能够提供动态可配置的能力来通过模板化实现内容呈现，那么开发成本可以降低，同时不同产品/操作方案的比较测试可以更有效地进行。

因此，页面动态配置是内容管理系统如何更灵活地呈现内容的解决方案。

1.页面拆除和组件

在“时尚眼镜专场”的页面上，苏剪下了三张照片。让我们一个接一个地拆开，看看这一页上有什么:

带有黑色和超级优惠券(优惠券收集/有限商店优惠券访问模块)、“超级大品牌”(知名品牌的商店访问模块)“必须购买列表”(热卖/推荐商品的购买访问模块)的王俊凯(图片)...对于像这样的动态页面，我们可以按照以下三个层次来划分:页面-卡片-组件。

页面是指具有完整可滑动页面的实体卡片，是指可以在页面内划分成排的独立块(也称为“楼层”)组件，是指卡片内独立的业务级单元之间的层次关系，如下图所示:

2。实施原则

在理解了动态页面的组成部分之后，他们三个是如何一起工作来最终呈现我们看到的页面内容的？

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

一系列初始化(包括卡库和组件库、数据解析器、布局框架的初始化)数据分析(包括卡和组件的类型分析、卡和组件的基本样式分析)呈现页面(根据卡提供的布局信息进行布局，以及根据组件提供的组件信息获取组件内容)。一般来说，首先根据布局分析每个组件的位置，然后是内容(样式、图片、背景、链接等)。)的组件，最后分析相应的定制页面内容。

3.要点

在谈论动态页面的具体配置过程之前，我想和您多谈一谈。苏总结并整理了学习和工作过程中的一些要点，并通过这些要点加深了对整体的理解。

3.1组件

它不是指一小段文字，一个明显显眼的按钮，或者一个帅哥或美女的明星照片。它需要预先定义并写入框架(代码)中。组件定义的标准是业务，需求是能够承载一定业务能力的最小组合单元。

这基本上是定义项目管理要求的一般原则。

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

组件的基本样式:组件背景、组件外/内边距和组件纵横比。此外，可能还有其他自定义样式，如字体颜色、字体大小、空组件之间的间距、相应的跳转链接等。

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

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

3.2卡

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

卡片的描述可以分为:标题、布局和风格。最重要的部分是布局，因为它包含嵌入的组件模型，卡片的布局是布局包含的组件。常见的布局模式有:水流布局、瀑布布局、吸顶布局、悬挂布局、旋转布局等。卡片的布局描述也是声明性的，但只声明布局模式，不提供布局细节的描述。卡片的基本样式:卡片背景、卡片外缘/内缘、卡片内部组件间距和列数。3.3页

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

4.步骤摘要

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

这里有三个链接:前面、中间和后面，来谈论配置工作中涉及的过程。

4.1开始配置前

1)明确的目的和重点

要配置的此页面的操作目的是什么？你想在这一页里展示什么？内容不同。需要强调的信息是什么？2)确认现有设计，是否需要补充

现有的布局样式和组件能否满足配置要求，从而实现运营目标？是否需要添加新的卡库(布局样式)和组件库？4.2配置时

1)选择/创建页面

通常，有两种情况下页面需要支持动态配置:

一种是有选择地配置固有页面(选择标准将在文章末尾与您讨论)。第二，创建一个新页面，并根据特定的操作目的定制页面，通常是活动或特殊主题的操作要求(不需要单独为这个新页面开发)。2)选择卡片，然后选择用于布局和排版的组件。

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

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

这一步将涉及一系列的风格和细节，从页面的氛围到组件之间的间距。具体样式和信息的配置项应根据具体需求进行定义(感兴趣的合作伙伴可以深入了解具体行业、产品和内容类型，并推荐“电子商务行业的店铺装修”)。避免盲目追求配置的灵活性和细分过多不必要的配置项，这将导致更高的研发成本和复杂的配置工作。应尽可能控制配置项目的数量，并尽可能提供自动信息获取和系统可操作性。4.3配置完成后

1)效果预览-确认发布

2)预览提交-审查发布

预览是一个必要的步骤。本步骤中的预览是指页面配置完成后的最终效果的预览，也可能涉及时间维度(例如，预先设置双11零活动页面的预定发布的预览)。此外，还有一个预览，是指在配置过程中进行匹配时的查看，主要是针对精细风格调整的效果预览(如组件改变不同的背景颜色)。

在配置完成后，发布前，让操作人员预览页面的配置效果，以确保最终呈现的页面满足要求和要求。

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

总体而言，初创公司在组建运营团队方面相对精简。通常的流程是:操作人员完成配置后，预览效果，确认没有问题后，再发布操作。这一步没有中间审查，预览发布，通常是同一个人。

然而，在拥有明确的内容管理程序和规范以及人员充足的公司中，该程序通常是第二个程序。

这涉及许多不同的角色和角色背后的权利细分。有些人负责配置，预览后提交审核，并对演示效果负责。有些人负责审核，最终确认发布并控制整体。

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

附件:总体配置步骤描述图

5。需求提取

明确了页面动态化的实现原理和页面配置的工作流程。然后，项目管理最熟悉的内容是提取需求和完成产品设计。

产品设计和后期的持续迭代优化应始终关注以下方向:

如何使工作更有效率，如何使合作更顺畅，如何使管理更智能，如何使责任更明确，如何使风险更可控，以及如何支持快速测试。利用数据指导决策基于实施原则、配置流程和产品设计方向，Sue提炼出以下6个主要需求点:

(1)管理

组件库管理:不支持直接创建新组件，只能从系统中现有的组件库中选择。卡库管理:(与组件库相同)不支持直接创建，但可以直接调用。此外，还有一个非常重要的功能:支持一键上下卡(遇到问题可以立即进行紧急在线处理)。页面管理:需要支持一键上下页面(也支持紧急处理功能)和版本发布(可以解决新版本发布时的配置效率)。权限管理:根据组织结构或业务线细分页面、操作和数据的权限。更改记录:为每次更改提供记录，以防止在线数据随意更改。(2)编辑(配置)

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

1)固有页面的配置

选择页面选择卡、定义卡样式、配置卡内容(选择组件)选择组件、定义组件样式、配置组件内容配置更多页面信息:定义有效时间、到期时间、页面名称2)配置创建的页面

创建页面选择卡、定义卡样式、配置卡内容(选择组件)选择组件、定义组件样式、配置组件内容以配置更多页面信息:定义有效时间、到期时间、页面名称3)。此外，它还应该提供副本创建和其他功能，以满足高效的配置

创建批量复制页面创建批量复制的卡片预览(3)

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

白名单预览:对应预发布状态，可以通过白名单预览提前查看效果。

时间机器预览:

通过时光机调整时间，可以预览未来某个时间对应的效果。因为不同时间点的有效数据不同，所以请确保配置满足要求和要求。(4)审计

该流程与一般应用程序审查大致相同，需要支持和满足的要求应包括但不限于:

待审核记录的处理通知待审核记录的呈现审核操作(效果、内容呈现、功能使用等)。-预览功能)审核记录审核记录:通过或失败(原因通知、修改指南)(5)发布

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

在发布阶段，应该满足两个发布功能:

预发布:增加预发布状态是为了进一步检查和确认配置效果，降低问题风险。计划发布:由支持设置配置的页面仅在特定时间生效。因此，相关的配置、审计等工作可以提前完成。临时配置很容易导致问题，这也使得风险更加可控。(6)ABtest

俞军老师在书中分享道，他认为自己经过仔细调查后做出的所有判断和行为都是由于信息不完整而造成的客观的反复试验。

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

支持页面和卡级别的ABtest功能。每一个配置的改变都可以成为ABtest的实验性改变。在小范围内测试变化的影响，最后根据数据做出决定。(苏前一段时间刚刚梳理并建立了自己项目的ABtest系统，并做了一些特别深入的研究和总结。我以后也想和你谈谈，即使我在这里给你一个预览。

用需求点梳理大脑地图(但还是这句话:设计的产品只有在需要根据具体情况进行定义时才满足需求)

6。想法。想法

最后，总结一下，内容管理系统通过动态页面展示了内容的基本思想和设计概念。

基本想法:

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

设计理念:

内容管理系统(CMS)的设计理念是通过动态页面呈现内容:它具有足够的灵活性。只有具备足够的灵活性，我们才能满足日常运营的需要。灵活性体现在:

布局能力动态地变化，并且要构建到框架中的布局样式的最小数量被清楚地定义。动态能力是粗粒度的，定义了在框架中注册多少组件；组件业务，组件需求是能够承载一定业务能力的最小复用单元；组件可以重用，并且有能力回收和重用相同类型的组件是必要的。7.产品思维

我们都知道动态页面配置对于运营和营销的重要性。一方面，它实际上减少了重复和不必要的开发工作，避免了对开发资源的竞争和长时间的等待。然而，另一方面，灵活的配置方案和方便的配置工具具有相对较高的技术要求。如何更好地平衡这两个方面是产品需要思考的问题。

所有页面都必须支持动态配置吗？哪些页面需要支持？不支持哪些页面？不应支持哪些页面？判断的标准和依据是什么？关于这些问题，Sue认为不是所有的页面都需要支持动态配置，这是不必要的。

符合以下标准的页面需要支持动态配置:

用户流量集中的页面(如主页)用户停留时间较长的页面(如主页)用户经常使用的页面(如搜索页面)营销空和高价值页面(如特殊事件页面)满足以下条件的页面不需要支持动态配置:

它不是交易流程的必要页面流(例如分类页面；应该注意的是，交易并不具体指订单的支付，内容的消费本质上是一种交易)。用户不经常使用的页面(如帮助页面和设置页面)如果满足以下条件，则不应支持动态配置:

通常，有固定格式的显示信息(例如个人中心页面)，关键信息对页面转换有直接影响。用户只关注关键信息，所以需要突出显示在固定的位置来培养用户的习惯，不能随意改变(如详细页面)以上，这是Sue在内容展示中对CMS的总结和分享。

当涉及到相应的工作时，我们应该比这篇文章分享的内容考虑得更多。我希望苏所分享的东西能起到吸引宝贵捐款的作用。

坚持分享一些个人的想法和想法，以保持输入转换和输出总结的学习习惯。如果有任何不成熟或不正确的地方，我希望一些小伙伴能给我一些建议。欢迎洽谈，共同进步。

这篇文章最初由@ su小白发表。每个人都是产品经理。未经允许禁止转载。

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

本文由 在线网速测试 整理编辑，转载请注明出处，原文链接：https://www.wangsu123.cn/news/6534.html。