组件-卡片-页面

一、定义

我们按3层次来拆分：页面——卡片——组件。

• 页面，指的是整体可滑动页面实体
• 卡片，指的是页面内可按行划分的一个一个独立区块（又称为”楼层”）

• 组件，指的是卡片内部一个独立的、业务级别的单元

  
  
  层级关系图

实现原理：首先按照布局去解析出各组件位置，然后再去解析组件的内容（样式、图片、背景、链接等），最终解析出对应的自定义页面内容。

组件

• 组件定义的标准就是业务化，要求是能承担一定业务能力的最小复合单元。
• 它是需要提前定义好，并写入到框架（代码）中的。
• 每个组件都需要单独设计，定义其规则和样式。
• 组件的基本样式：组件背景、组件外边距/内边距、组件的宽高比，除此之外还可能有额外的自定义样式如：字体颜色、字体大小、组件间的空隙，对应的跳转链接等等。
• 不同的组件有不同的功能，表示不同类型的内容。
• 组件的常见种类：搜索栏、公告、列表导航、富文本、标题栏、按钮组图文、按钮组文字、单张图片、图片轮播、优惠券等等。

卡片

卡片负责对组件进行布局。卡片不需要布局模板，只需要描述卡片的类型即可，卡片的类型也是注册在框架里的。

• 对卡片的描述，可分成：标题、布局和样式等。其中最重要的部分是：布局，因为它包含了内嵌的组件模型，卡片的布局就是对包含的组件来布局。
• 常见的布局方式：流式布局、瀑布流布局、吸顶布局、悬浮布局、轮播布局等。
• 卡片的布局描述也是声明式的，但只声明布局方式，不提供布局细节的描述。
• 卡片的基本样式：卡片背景、卡片外边距/内边距、卡片内组件间距、列数。
• 支持卡片在被页面调用时选择相关属性，如列数、背景、组件等，具体参考功能设计。

页面

动态化页面指的是布局动态化，是通过布局嵌套组件的形式搭建整个页面。一个页面内嵌套了多个卡片，一个卡片又嵌套了多个组件。

二、设计要点

业务场景

• 一是，对固有的页面进行选择性的配置。
• 二是，依据具体运营目的，通常是活动或专题类的运营需求，创建一个新的页面，对页面进行自定义（不需要单独为了这个新页面去开发）。
  根据页面想呈现的内容和内容想突出的信息，在已有的卡片库（布局样式）和组件库，选择合适的布局样式和组件。

组件配置（定义样式、配置信息）

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

功能设计

1. 管理

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

2. 编辑（配置）

在配置不同类型的页面时，提供对应的配置功能：
1）对固有页面的配置

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

2）对创建页面的配置

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

3）除此之外，还应该提供复制创建等满足高效配置的功能

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

3. 编辑（配置）预览

• 配置预览：
  对应的是配置过程中的效果查看，主流的交互是拖动到相应位置，设置内容后实时预览。
• 白名单预览：
  对应的是预发布状态，在此状态下，可通过白名单预览，提前查看效果。

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

  
  
  需求点