H5活动页

创建的活动页面

表单

发布页面文件、表单内容给C端用户，并收集相关数据的能力

编辑器

平台上用来自定义搭建页面的功能，可拖拉拽完成页面内容的搭建

图层

编辑器内每一个内容在页面里面重叠时，展示的前后顺序关系

组件

编辑器内搭建页面的内容组件，每一个组件对应的内容、数据、功能逻辑都不一样

插件

用于页面逻辑的二次开发，增加整个活动页面的前端逻辑，实现页面的全局配置

二开

即二次开发，魔方编辑器支持低代码二开新的前端组件

编辑

• 保存：保存你的活动，快捷键ctrl+s；
• 撤销：【←】回到你的上一步操作，快捷键ctrl+z；
• 重做：【→】，回到你最近的一次撤销前的动作（撤销你的最近一个撤销），撤销是重做的前提，没有撤销就不能重做，快捷键ctrl+shift+z；
• 开发者模式：用于开发人员调试二开组件/插件

视图

• 网格线：帮助你更好地齐组件、调整行间距等，后续会上线；
• 拖拽参考线：为你提供对齐组件的基准线，当组件图层模式为「移动」时，拖动便会自动显示；
• 智能吸附：拖动组件时会磁性吸附到参考线上，注意：要使用智能吸附必须打开参考线；
• 展示快捷键提示：选中组件，右键调起；

画布：放大画布-点击一次放大画布大小25%；缩小画布-点击一次缩小画布大小25%；缩放至100%-画布回到100%大小；

PSD导入

• 在Photoshop中安装「魔方插件」，通过插件将PSD设计文件导出为.mdr魔方设计资源；
• 在编辑器中导入魔方设计资源，即可将设计稿转为H5页面，按原尺寸、原比例、原位置导入图片、文字、按钮图层。

图层

• 可以看到整个活动的页面、模块、组件的结构；
• 逻辑是同模块中的组件，在结构树上方的组件在画布上会遮挡在结构树下方的组件；
• 不同模块上下排列的顺序，即为在画布里上下排列的顺序；

点击左下角「+新页面」可增加新的一页；

保存

保存你当前搭建的活动，需要保存或预览过后，才可以进行发布

预览

预览活动在手机展示的效果，可以在此处获取到测试链接，投放到实际的手机端进行查看

发布

可设置分享的标题样式、版本名称以及版本备注信息

分享设置

可设置活动的分享标题、分享描述和分享封面

活动设置

可设置活动展示名称，即C端活动页面的名称

更多操作

版本与草稿：可查看所有历史上线过的活动版本，可以直接替换为旧版本进行发布，也可把旧版本信息删除

活动链接：可查看当前活动的正式链接

组件

提供丰富的页面组件库，在组件上悬停可显示组件解释和预览。

画布区

在此处添加组件或素材，搭建你的活动

页面调整

• 可修改页面名称，选择页面跳转时快速选择，以及方便管理
• 点击右上角可添加新页面，可进入页面配置项

展示设置

页面/组件可配置的内容都在这个区域进行设置

高级设置

页面/组件的开发相关信息、如id、配置代码等内容，在这个页面进行设置和查看

堆叠

• 支持修改按钮透明度
• 宽高：通过W\H值修改按钮高度和宽度，支持锁定宽高比例
• 圆角：支持修改组件的圆角
• 外边距：通过修改（距离其他组件的）边距更改按钮位置

移动

• 支持修改按钮透明度
• 宽高：通过W\H值修改按钮高度和宽度，支持锁定宽高比例
• 圆角：支持修改组件的圆角
• 位置：支持修改组件的X/Y轴，调整在画布上的位置

页面设置

点击画布右上角的设置，可以对整个页面设置背景颜色、背景图片

模块设置

• 点击页面内的任意位置，出现该模块的设置操作，可以对该模块单独设置高度、背景颜色、背景图片
• 由内容撑开：每个模块的高度都可以按照内容自适应地自动撑开，自动撑开的高度由“堆叠”的组件决定，与自由移动的组件无关
• 固定高度：可以设置模块固定高度
• 页面中设置多个模块时，主要考虑是这个模块/楼层的内容是否需要单独维护，是否会经常调整模块高度，为了减少对页面上下方的位置的调整，就可以使用模块来进行编辑，避免修改内容高度后，需要重复地调整整个页面的布局

复制组件

（1）在画布中，使用鼠标拖动选中要复制的组件
（2）点击鼠标右键、点击复制或ctrl+c
（3）打开要粘贴的页面，并鼠标点击选中要粘贴的模块位置，再点击右键、点击粘贴或ctrl+v（会在当前指定的模块，自动把组件内容粘贴上去）
注意：玩法相关配置，复制后需重新设置

复制模块

（1）打开图层，鼠标右键点击要复制的模块名称
（2）点击鼠标右键、点击复制或ctrl+c
（3）打开要粘贴的页面，新增一个空白模块，并鼠标点击选中要粘贴的模块位置，再点击右键、点击粘贴或ctrl+v（会在当前指定的模块，自动把模块中所有组件内容粘贴上去）
注意：玩法相关配置，复制后需重新设置

复制页面

（1）打开图层，鼠标右键点击要复制的页面名称
（2）点击鼠标右键、点击复制或ctrl+c
（3）打开要粘贴的页面位置，在页面名称上鼠标点击右键、点击粘贴或ctrl+v（会在指定页面的后面新增一个页面，并自动把页面所有的内容粘贴上去）
注意：玩法相关配置，复制后需重新设置

模块设置

进入模块的设置面板，开启右上角“个性化展示分组”

新建个性化分组

点击新建分组，如果活动中没有创建过分组条件，则点击「去创建」；或者直接点击「管理分组人群条件」，打开弹窗进行创建。

分组条件设置

（1）进入分组管理弹窗，点击添加分组
（2）可按照不同条件添加分组的限制：

• 指定每日时间：每天可见的时间点，例如10点～11点
• 指定可见时间段：限制可见的日期范围，例如2022-10-20 10:00:00～2022-10-30 10:00:00
• 指定可见人群：指定可访问的人群范围，可选择画像平台已创建的人群列表，支持直接创建CDP人群
• 指定可见应用端：可指定微信端，已对接的APP端，或者其他未包含在内的客户端

（3）创建保存完成，在该活动各个页面模块中都可以使用相同的条件来创建个性化的分组内容

设置分组的展示内容

（1）点击添加分组，把创建好的分组条件添加进来
（2）选中点击分组的卡片，可切换查看模块在不同条件下的内容，并进行编辑
（3）可拖动调整每个卡片的判断顺序，可删除卡片条件和对应的内容

分组模块高度和背景样式支持单独设置

（1）选中个性化分组
（2）开启分组容器设置，即可针对选中分组单独设置模块高度、背景类型、背景图片、填充方式、重复、位置等

基础操作

编辑、收藏、查看线上链接、预览活动页面

更多操作

• 设为优秀案例：设置优秀案例后，其他所有用户可以在「案例中心」查看到这个活动，不需要查看权限
• 复制：复制当前活动的页面内容来创建一个新的活动
• 修改信息：修改活动的基础信息，包括活动渠道、活动名称、活动标签、资源组、协作人等
• 查看活动数据：跳转至活动数据分析页面
• 查看表单数据：跳转至活动表单明细数据页面
• 修改协作人：修改活动的协作人信息，其他协作人也拥有管理活动的权限
• 发布：进入编辑器，进行活动的发布操作
• 删除：未上线/已下线的活动可以删除，已上线的活动不允许删除
• 下载预览图：已上线的活动可将活动页面内容下载为图片
• 下线：对已上线的活动进行下线操作

下载预览图

• 原始尺寸：按页面现有内容的高度进行导出下载，不做裁剪
• 自定义尺寸：可自由调整/裁剪需要下载的图片区域
• 增加固定尺寸：可保存常用的尺寸类型，便于快速进行下载保存

活动信息

可展开查看：创建人、创建时间、活动ID、活动状态

审批

存在审批申请单时，显示审批标识，鼠标hover可点击「查看详情」查看审批单详情；负责审批的用户可以在此操作审批通过/驳回。

搭背景及图片

1. 利用图片组件来搭建，注意先搭建的元素在最下层。（如果背景图片是切图，则需要把这些切图拼接起来）
2. 页面搭建使用到的图片尺寸分为两种：
   1. 无限制大小：页面搭建时基本上所有样式的大小都可以自由拖拽，或自定义设置大小尺寸。这种类型可以按设计师自由确定尺寸，只要最后在页面上设置的大小和设计师定义的大小比例一致，展示则不会有拉伸问题。
   2. 有限制大小：部分玩法相关的组件会有固定的展示位，例如抽奖大转盘，每个奖品位的展示大小是固定的。具体参考各组件的说明。

搭按钮

页面间的交互通过按钮来承载，给按钮组件配置交互动作，实现跳转其他页面、打开弹窗等场景。

玩法搭建

如果在搭建活动的过程中使用到「抽奖类」「投票类」「兑换类」「签到类」「任务类」「玩法通用类」等组件，需要先完成玩法后端规则的配置，并将后端规则与组件关联，更多详情可参考对应组件的操作说明。

跳转活动内页面

在同一个活动中存在多个页面，点击图片可跳转至任意页面。

跳转链接

点击图片可以跳转至其他链接。

打开弹窗

点击图片后在原页面弹出一个弹窗，需要配合「弹窗」组件使用。常见于抽奖兑换活动中，用来展示用户所得奖品

关闭弹窗

点击图片后关闭弹窗。

JS动作

可由研发人员定制开发对应的按钮动作代码，快速实现临时的定制开发需求，场景举例：APP端JSB能力调用、APP页面跳转等（注意：为了方便运营人员日常使用，建议二开动作，可直接增加动作类型）

跳转活动内页面

在同一个活动中存在多个页面，点击文字可跳转至任意页面，但不支持跳转到当前页面具体的某个组件位置。

跳转链接

点击文字可以跳转至其他链接。

打开弹窗

点击文字后在原页面弹出一个弹窗，需要配合「弹窗」组件使用。常见于抽奖兑换活动中，用来展示用户所得奖品

关闭弹窗

点击文字后关闭弹窗。

JS动作

可由研发人员定制开发对应的按钮动作代码，快速实现临时的定制开发需求，场景举例：APP端JSB能力调用、APP页面跳转等（注意：为了方便运营人员日常使用，建议二开动作，可直接增加动作类型）

跳转活动内页面

在同一个活动中存在多个页面，点击文字可跳转至任意页面，但不支持跳转到当前页面具体的某个组件位置。

跳转链接

点击文字可以跳转至其他链接。

打开弹窗

点击文字后在原页面弹出一个弹窗，需要配合「弹窗」组件使用。常见于抽奖兑换活动中，用来展示用户所得奖品

关闭弹窗

点击文字后关闭弹窗。

隐藏自己

点击按钮后隐藏当前按钮组件。

JS动作

可由研发人员定制开发对应的按钮动作代码，快速实现临时的定制开发需求，场景举例：APP端JSB能力调用、APP页面跳转等（注意：为了方便运营人员日常使用，建议二开动作，可直接增加动作类型）

海报/二维码

• 相关页配置中选择「海报二维码」，打开海报样式的配置。海报默认展示的元素：用户头像、用户昵称、图片、二维码、描述文案、关闭按钮、保存图片提示文案
• 可自定义关闭不需要展示的元素

单击海报中的内容，可进行内容编辑，可调整图片、文字等内容的大小和位置

• 用户头像：默认获取用户的头像，可设置兜底图片，用户没有头像时自动展示兜底图片
• 用户昵称：默认获取用户的昵称，可设置兜底昵称内容，用户没有昵称信息时显示兜底名称
• 图片：可自定义修改主图，可修改主图大小，可调整主图在整个海报中的布局，支持覆盖整张海报
• 二维码：可调整大小，不建议小于108px，否则扫码时不容易识别
• 描述文案：海报中可自定义的文字，可修改颜色、大小等
• 关闭按钮：海报弹窗的关闭按钮，可修改按钮图片
• 保存图片提示文案：海报弹窗下方的提示文案，可修改

注意：海报图片一般是由用户长按后保存至本地，建议检查一下访问的APP端是否支持长按保存，若不支持可提醒用户进行截图保存

端内分享+海报兜底

• 端内分享：指H5在各个APP应用端内访问时，调用该APP原生的分享操作，将H5分享出去

• 左侧示例图是微信内的分享，引导用户点击微信右上角的分享操作

• 左侧示例图是某APP的分享，会直接调起该APP的分享操作
• 哪些APP支持直接调起：市面上大部分手机浏览器，有提供分享操作的都可调起
• 自有APP是否可以调起：可以，需通过应用管理把APP的share调起方法写入SDK，详情参考「8 应用管理」的操作说明

• 什么情况下会展示海报：当访问的APP端没有分享操作可以调用时，用户点击分享会自动展示为海报
• 相关页配置中选择「海报二维码」，打开海报样式的配置。海报默认展示的元素：用户头像、用户昵称、图片、二维码、描述文案、关闭按钮、保存图片提示文案
• 可自定义关闭不需要展示的元素

step1: 添加头图组件

1. 添加「智能头图」组件到页面模块中，每个页面只能添加1个头图组件
2. 选中「智能头图」组件，可以在右侧面板对组件进行设置：
   1. 转为组件模板：支持转为组件模板，在后续搭建活动时复用
   2. 图层：支持设置堆叠或移动、组件透明度，默认为“堆叠”
   3. 位置大小：支持设置组件的宽、高、圆角、外边距
   4. 智能生成：点击【智能生成个性化头图】按钮，即可配置参数生成头图智能头图生成弹窗
   5. 显隐设置：默认全选，也可以移除选项，包括主标题、副标题、主体图、副标题背景、logo
   6. 背景：用于设置组件背景图，即头图背景
   7. 边框：用于设置组件边框样式

step2: 配置生成参数
点击【智能生成个性化头图】，打开弹窗，开始配置参数生成头图：

1. 头图标题：
   1. 根据需要填入活动的主标题、副标题文案
   2. AI帮我写：头图标题支持通过大模型进行生成，点击【AI帮我写】即可输入需求描述，由AI生成营销活动标题。
2. 品牌信息：支持上传企业LOGO，生成的头图将展示对应LOGO
3. 参数配置完成后，点击【开始生成】按钮，在右侧区域将会展示智能生成的头图，支持生成更多头图或者重新生成
4. 对于生成的头图，支持保存、立即使用和下载：
   1. 保存：点击【保存】按钮，将头图保存到【素材管理=常规素材-图片】内
   2. 立即使用：点击【立即使用】按钮，将头图样式添加到编辑器页面中
   3. 下载：点击【下载】按钮，将头图保存至本地

step3: 生成多尺寸物料
支持基于头图生成多尺寸物料。

1. 点击【去生成】按钮：跳转至多尺寸生成页面
2. 选择需要生成的尺寸，点击【立即生成】，既可以生成对应尺寸的物料
3. 支持编辑、保存和下载：
   1. 编辑：点击【编辑】按钮，跳转至编辑器页面，可以对物料进行二次编辑修改
   2. 保存：点击【保存】按钮，将物料保存到【素材管理=常规素材-图片】内
   3. 下载：点击【下载】按钮，将物料保存至本地

【勾选条款设置】

1. 内容设置：支持修改表单项名称、提示的文案
2. 校验规则：
   1. 设为必填：若设为必填项，用户提交时没有勾选会弹出错误提示
   2. 错误提示：支持设置错误提示，toast、图片或弹窗的形式
3. 跳转文本：
   1. 提示文案：支持修改条款名称
   2. 点击反馈：支持设置点击条款的反馈动作，toast、图片、弹窗、跳转页面或跳转URL的形式
4. 文本样式：
   1. 设置字体、字号、字体颜色
   2. 设置加粗、下划线、倾斜、选项文本缩进、选项文本左对齐/居中/右对齐、选项上下对齐
   3. 设置背景和边框，不用的话可以不勾选

选中条款可以修改位置大小、文本样式。

【单行输入框设置】

1. 内容设置：支持修改表单项名称、提示的文案
2. 校验规则：
   1. 设为用户属性：开启后，用户提交的表单数据中将会把这项内容进行单独处理，用于营销平台对用户进行二次营销
   2. 设为必填：若设为必填项，用户提交时没有填写会弹出错误提示
   3. 限制字符长度：开启后，可以设置输入的字符数上限/下限、不符条件时的错误提示。如果填写的内容超出这个范围，输入框失去焦点会弹出错误提示（4类：无提示、Toast、图片、弹窗）
   4. 内容格式：默认不限格式，支持设置为「中国手机号」、「邮箱」，手机号格式为11位数字，邮箱格式为xxx@xxx.xxx，输入的内容不符要求时，输入框失去焦点会弹出错误提示（4类：无提示、Toast、图片、弹窗）

选中标题可以修改位置大小、文本样式。

选中输入框可以修改位置大小、文本样式。

【多行输入框设置】

1. 内容设置：支持修改表单项名称、提示的文案
2. 校验规则：
   1. 设为用户属性：开启后，用户提交的表单数据中将会把这项内容进行单独处理，用于营销平台对用户进行二次营销
   2. 设为必填：若设为必填项，用户提交时没有填写会弹出错误提示
   3. 限制字符长度：开启后，可以设置输入的字符数上限/下限、不符条件时的错误提示。如果填写的内容超出这个范围，输入框失去焦点会弹出错误提示（4类：无提示、Toast、图片、弹窗）
   4. 内容格式：默认不限格式，支持设置为「中国手机号」、「邮箱」，手机号格式为11位数字，邮箱格式为xxx@xxx.xxx，输入的内容不符要求时，输入框失去焦点会弹出错误提示（4类：无提示、Toast、图片、弹窗）

选中标题可以修改位置大小、文本样式。

选中输入框可以修改位置大小、文本样式。

【单项选择设置】

1. 内容设置：支持修改表单项名称、添加选项
2. 校验规则：
   1. 设为用户属性：开启后，用户提交的表单数据中将会把这项内容进行单独处理，用于营销平台对用户进行二次营销
   2. 设为必填：若设为必填项，用户提交时没有选择会弹出错误提示

选中标题可以修改位置大小、文本样式。

选中选项区域可以修改位置大小、文本样式。

【多项选择设置】

1. 内容设置：支持修改表单项名称、添加选项
2. 校验规则：
   1. 设为用户属性：开启后，用户提交的表单数据中将会把这项内容进行单独处理，用于营销平台对用户进行二次营销
   2. 设为必填：若设为必填项，用户提交时没有选择会弹出错误提示
   3. 限制可选数量：开启后，可以设置最多选择几项、勾选超出限制时的错误提示（4类：无提示、Toast、图片、弹窗）。

选中标题可以修改位置大小、文本样式。

选中选项区域可以修改位置大小、文本样式。

【下拉列表设置】

1. 内容设置：
   1. 表单项名称：修改表单项名称
   2. 添加选项：单个添加下拉选项
   3. 批量管理：批量添加、删除下拉选项
2. 校验规则：
   1. 设为用户属性：开启后，用户提交的表单数据中将会把这项内容进行单独处理，用于营销平台对用户进行二次营销
   2. 设为必填：若设为必填项，用户提交时没有选择会弹出错误提示

选中标题可以修改位置大小、文本样式。

选中下拉框可以修改位置大小、文本样式。

【日期选择框设置】

1. 内容设置：
   1. 表单项名称：修改表单项名称
   2. 提示文案：修改选择框的提示文案
   3. 时间格式：支持年-月-日、年-月两种格式
2. 校验规则：
   1. 设为用户属性：开启后，用户提交的表单数据中将会把这项内容进行单独处理，用于营销平台对用户进行二次营销
   2. 设为必填：若设为必填项，用户提交时没有选择会弹出错误提示

选中标题可以修改位置大小、文本样式。

选中下拉框可以修改位置大小、文本样式。

【提交按钮校验规则】

1. 提交成功提示：提交成功的提示有六种，无提示、Toast、图片、弹窗、跳转页面、跳转URL。
   1. Toast：提交后弹出Toast提示
   2. 图片：提交后展示一张图片;
   3. 弹窗：弹窗内可以放各种组件，比如抽奖等，增强活动丰富性;
   4. 跳转页面：跳转到本活动的某一页（针对多页面的活动）
   5. 跳转URL：跳转到某个链接，这里和其他活动关联起来
2. 登录后才可提交：
   1. 如果需要收集用户的id，可以把“登录后才可提交”打开；
   2. 若用户没有登录便提交，会出现错误提示。
3. 必填项校验：开启后，如果有设置表单组件为必填项，那么用户点击提交按钮时会对必填项的填写情况进行检验，如果存在没有填写完的必填项，则会弹出错误提示。
4. 只允许提交一次：开启后，用户无法二次提交，按钮会展示”不可提交“状态，并且再次点击时弹出错误提示。
5. 展示用户上次填写数据：开启后，用户在进入活动页时表单将会展示上次填写的内容（注意：若使用此项功能，建议活动页面上线后，不要修改相关表单类组件的「表单项名称」，否则，在回显数据时，会展示错误信息。）

【内容设置】可关联玩法提交表单任务，需在玩法规则设置时添加「提交表单任务」。

【样式设置】可设置「未报名」和「已报名」的按钮样式，目前默认表单任务都只允许提交报名1次。

【反馈设置】主要针对用户点击报名提交后，不同场景提示内容的配置

1. 报名成功提醒：用户提交数据完成时的提示内容
2. 用户未登录：
   1. 如果需要收集用户的id，可以把“用户未登录”打开；
   2. 若用户没有登录便提交，会出现错误提示。
3. 不在活动时间内：用户点击提交时，不在玩法活动可参与的时间范围内的提示内容
4. 不再报名任务时间：用户点击提交时，不在报名任务可参与的时间范围内的提示内容
5. 命中黑名单：用户在黑名单内时的提示内容
6. 不在本次活动范围：用户点击提交时，用户不在玩法圈选的可参与范围内的提示内容
7. 参与机会不足：用户点击提交时，用户参与玩法机会不足的提示内容
8. 参与次数达到上限：用户点击提交时，用户参与玩法次数达到上限的提示内容
9. 频繁点击：频繁点击时的提示内容
10. 兜底错误提醒+错误代码：系统服务异常或网络错误等的提示内容
11. 必填项校验：用户提交时部分必填项没有填写完整的提示内容

【下拉列表设置】

1. 内容设置：
   1. 表单项名称：修改表单项名称
   2. 提示文案：修改选择框内的提示文案
   3. 必须选择末级选项：默认开启，用户需选完最后一级选项，关闭后则无需选到最后一级选项
   4. 选项设置：支持下载模板，按要求填写选项数据后批量导入
2. 校验规则：
   1. 设为用户属性：开启后，用户提交的表单数据中将会把这项内容进行单独处理，用于营销平台对用户进行二次营销
   2. 设为必填：若设为必填项，用户提交时没有选择会弹出错误提示

选中标题可以修改位置大小、文本样式。

选中下拉框可以修改位置大小、文本样式。

step1: 添加弹窗组件

step2: 添加弹窗背景

1. 加入「矩形形状」组件作为弹窗背景
2. 按需调整矩形尺寸、背景颜色等

step3: 添加弹窗内容
选中弹窗后，将文字、图片、按钮等组件添加至弹窗容器内

step4: 设置弹窗位置和大小

1. 「图层」面板选中弹窗，可以设置弹窗的高度、位置、点击蒙层可关闭弹窗
2. 关闭弹窗：
   1. 若勾选「点击蒙层可关闭」，则用户在查看弹窗时点击灰色透明蒙层可以关闭弹窗；（蒙层即弹窗以外灰色的透明部分）
   2. 若不勾选「点击蒙层可关闭」，则需要额外的按钮来关闭弹窗。
3. 修改弹窗名称：在「图层」面板双击弹窗（如弹窗）即可修改名称

step5: 设置打开弹窗的交互动作
以点击按钮打开弹窗为例：

1. 页面加入一个按钮，点击「编辑交互动作」打开弹窗设置
2. 动作触发条件选「单击事件」，动作类型选「打开弹窗」，弹窗组件选择前面设置的弹窗

step1: 添加滑动容器组件

step2: 设置图层、位置大小

1. 滑动容器的显示页面默认宽度为600px，默认高度为400px
2. 可以设置滑动容器组件的大小、位置移动、透明度

step3: 设置滑动内容可查看宽度和滑动方向

• 滑动方向支持水平、垂直方向
• 支持鼠标拖拽，可以将需要的组件拖拽到滑动容器内
• 内容宽度要根据设计稿需求，多次调节至理想大小

step4: 添加容器内容
选中滑动容器后，点击文字、图片等组件依次添加至容器内

step1: 添加折叠面板组件

step2: 内容设置

1. 操作栏位置：下拉操作栏所在位置，支持设置「顶部」或「底部」
2. 默认状态：支持设置初始默认是「展开」或「折叠」的状态
3. 操作栏高度：支持设置操作栏的高度
4. 操作栏背景图：支持自行上传图片作为操作栏的背景图
5. 折叠图标：支持设置是否显示折叠图标，也可以上传图片，把原来的箭头样式替换成自己需要的箭头样式
6. 内容面板高度：可选择「由内容撑开」或「固定高度」
   • 由内容撑开：根据内容高度自动匹配高度
   • 固定高度：可自行设置固定高度

内容面板背景自行上传或默认

step3: 内容面板背景
设置内容面板区域的背景样式

step4: 添加容器内容
选中折叠面板后，点击文字、图片等组件依次添加至容器内

step1: 添加导航栏组件

step2: 设置导航栏tab样式
点击导航栏tab区域，对导航栏进行如下设置：

1. 选项栏高度：支持调整tab栏的高度
2. 选项个数：支持设置tab个数（2-5个）
3. 热区设置：支持自定义每个tab所占宽度比例，如下图所示

4. 是否开启吸顶：开启后，tab栏就会一直显示在导航栏最上方
5. 选项栏背景图片：支持替换tab栏的背景图片

step3: 设置导航栏子容器样式
选中导航栏子容器，可以设置容器高度和背景样式

step4: 添加容器内容

1. 选中导航栏子容器后，点击文字、图片等组件依次添加至容器内
2. 你可以打开结构树查看，确认自己要添加的组件添加到了你想添加的子容器中

step1: 添加轮播容器组件

step2: 设置轮播容器样式
点击最外层的轮播容器，进行如下设置：

1. 修改图层、位置大小
2. 内容设置：
   1. 添加或删除轮播子容器
   2. 默认展示：选择初始默认展示的轮播子容器
   3. 子容器宽度：设置子容器的宽度
   4. 自动轮播：开启后，将会自动切换不同子容器模块的内容，支持设置间隔时间
   5. 数量指示点：开启后，将会在组件底部显示数量指示点，支持修改指示点的默认色和选中色
   6. 切换箭头：开启后，将会在组件左右侧显示切换箭头，支持修改左箭头和右箭头的图片
   7. 左右间距：指箭头与组件边框的水平方向距离，该数值须小于组件宽度的一半
   8. 循环切换：开启后，将不间断顺序循环切换，即切换到最后一个子轮播容器时，再次点击右箭头将切换至第一个子轮播容器
   9. 背景：支持修改轮播容器的背景样式

step3: 设置轮播子容器样式
选中某个子容器，可以对它单独进行样式设置

step4: 添加容器内容

1. 选中对应的轮播子容器后，点击文字、图片等组件依次添加至容器内
2. 你可以打开结构树查看，确认自己要添加的组件添加到了你想添加的子容器中

step1: 添加单行选项卡组件

step2: 设置单行选项卡样式
点击选项卡tab区域，进行如下设置：

1. 选项栏高度：支持调整tab栏的高度
2. 选项个数：支持设置tab个数（2-5个）
3. 可点击项：支持设置可点击的tab项
4. 默认选中项：选择初始默认展示的tab
5. 热区设置：支持自定义每个tab所占宽度比例，如下图所示：

6. 选项栏背景图片：支持替换tab栏的背景图片

step3: 设置选项卡子容器样式
选中某个子容器，可以对它单独进行样式设置

step4: 添加容器内容

1. 选中对应的选项卡子容器后，点击文字、图片等组件依次添加至容器内
2. 你可以打开结构树查看，确认自己要添加的组件添加到了你想添加的子容器中

step1: 添加探索版选项卡组件

step2: 设置探索版选项卡样式
点击选项卡tab区域，进行如下设置：

1. 外边距：这四个数值分别对应选项卡距离上、右、下、左四个边的距离
2. 选项栏高度：支持调整tab栏的高度
3. 选项栏背景色：设置选项栏整体的背景颜色
4. 各选项间距：设置tab之间的距离
5. 选项背景：支持设置各选项一致、各选项不一致
   1. 各选项一致时：
   • 只需要设计选中状态和未选中状态两张图片；
   • 注意：选项卡默认宽度210px，高度84px。实际样式会根据上传的背景图片而变化。

4. 各选项不一致时：

• 需要为每张选项卡设计选中状态和未选中状态两张图片。
• 注意：选项卡默认宽度210px，高度84px。实际样式会根据上传的背景图片而变化。

6. 在最下方可以添加更多选项

step3: 设置选项卡子容器样式
选中某个子容器，可以对它单独进行样式设置

step4: 添加容器内容

1. 选中对应的选项卡子容器后，点击文字、图片等组件依次添加至容器内
2. 你可以打开结构树查看，确认自己要添加的组件添加到了你想添加的子容器中

step1: 添加箭头选项卡组件

step2: 设置箭头选项卡样式
点击选项卡tab区域，进行如下设置：

1. 选项栏高度：支持调整tab栏的高度
2. 选项个数：支持设置tab个数（2-5个）
3. 默认选中项：选择初始默认展示的tab
4. 选项栏背景图片：支持替换tab栏的背景图片
5. 左右箭头图标：支持替换左箭头和右箭头的图片

step3: 设置选项卡子容器样式
选中某个子容器，可以对它单独进行样式设置

step4: 添加容器内容

1. 选中对应的选项卡子容器后，点击文字、图片等组件依次添加至容器内
2. 你可以打开结构树查看，确认自己要添加的组件添加到了你想添加的子容器中

step1: 添加知识问答组件

step2: 知识问答设置
一个问答组件对应一道题目，在不同页面添加对问答组件，可以实现答题跳转的效果。
选中组件进行如下设置：

1. 设置组件的图层、大小位置
2. 选项类型：支持选择图片、文字类型的选项
3. 本题分值：设置本题分值
4. 翻页时间（ms）：用户选完答案之后，从一道题自动跳转下一题的时间
5. 选中图标：用户选中答案的图标默认是一个灰色背景的图标，可以重新上传设计好的图片
6. 选项内容：知识问答组件默认有四个选项，可以手动添加、删减选项
   1. 选项的图片可以删除，重新上传设计好的图片
   2. 知识问答组件支持勾选正确答案，用户只有选中正确答案，才得分
   3. 不勾选则默认为错误答案
   4. 可以手动增加选项，选项数量没有限制
7. 正误反馈：用户选择正确/错误答案的反馈设置，可以选择无、Toast、图片和弹窗
8. 支持设置背景和边框样式

step3: 答题通用配置
点击右上角图标，进入答题通用配置，设置答题后相关页面的跳转逻辑。

1. 跳转规则：
   1. 不记分跳转：不论用户取得多少分，答完所有题后，都跳转到指定的页面，指定多个页面时，随机跳转其中一个
   2. 记分跳转：答完所有题后，按照用户得分的区间，指定下一个跳转的答题页面；在最后一题时，可根据不同的分数跳转至不同的答案结果页面，或者展示对应的最终分数
2. 题目随机下发：开启后，设置下发题目数量，将会从多个题目中随机抽取n道题给用户作答

step1: 添加测试测评组件

step2: 测试测评设置
一个测评组件对应一道题目，在不同页面添加对测评组件，可以实现答题跳转的效果。
选中组件进行如下设置：

1. 设置组件的图层、大小位置
2. 选项类型：支持选择图片、文字类型的选项
3. 翻页时间（ms）：用户选完答案之后，从一道题自动跳转下一题的时间
4. 选项内容：测试测评组件默认有四个选项，可以手动添加、删减选项
   1. 选项的对应文案可以手动编辑
   2. 每个选项的分值需要手动输入
   3. 每个选项不区分正误
   4. 可以手动增加选项，选项数量没有限制
5. 选中文字色：可以设置选中选项时的文字颜色
6. 选中背景色：可以设置选中选项时的背景颜色
7. 支持设置背景和边框样式

step3: 答题通用配置
点击右上角图标，进入答题通用配置，设置答题后相关页面的跳转逻辑。

1. 跳转规则：
   1. 不记分跳转：不论用户取得多少分，答完所有题后，都跳转到指定的页面，指定多个页面时，随机跳转其中一个
   2. 记分跳转：答完所有题后，按照用户得分的区间，指定下一个跳转的答题页面；在最后一题时，可根据不同的分数跳转至不同的答案结果页面，或者展示对应的最终分数
2. 题目随机下发：开启后，设置下发题目数量，将会从多个题目中随机抽取n道题给用户作答

1. 可以设置基础分数，最终得分将在此基础上加总
2. 可以选择字体、字号、字体颜色，以及加粗、下划线、斜体等样式设置

1. 跳转页码：点击按钮后跳转的页面
2. 重做按钮的样式可以手动上传设计图样

step1: 添加视频组件

step2: 视频设置

1. 设置视频组件的图层、位置大小
2. 选取视频方式：
   1. 输入URL：需要手动填写视频地址URL，将链接前的【https:】删掉，保留【//】以后的链接，填入地址
   2. 选择素材：选择上传至素材管理的视频
3. 进入页面自动播放：开启后，打开页面时自动播放该视频内容
4. 上传视频封面：系统不会自动抓取视频封面，不上传的话会出现魔方的兜底封面
5. 边框：根据需求调整边框样式

step1: 添加音频组件

step2: 音频设置

1. 设置音频组件的图层、位置大小
2. 选取音频素材：选择上传至素材管理的音频
3. 自动播放：开启后，用户对页面进行交互时(例如滑动页面)可自动播放音频
4. 展示音频按钮：设置是否展示音频按钮
5. 旋转动画：设置是否开启旋转动画（开启后播放按钮会旋转），会自动循环播放，一遍放完会重复播放第二遍，直到用户关闭页面
6. 音频按钮样式：支持修改播放和暂停状态的按钮样式

step1: 添加计时器组件

step2: 计时器设置

1. 设置计时器组件的图层、位置大小
2. 计时方式：设置正计时/倒计时
3. 截止/开始时间：对于倒计时来说，时间要设置在未来，对于正计时来说，时间要设置在过去
4. 展示文案：默认为“计时：”，可以修改其他文案
5. 时间展示格式：可以选择展示哪些时间格式，包括天、小时、分、秒，支持修改格式展示名称
6. 设置背景和边框，不用的话可以不勾选

step1: 添加跑马灯组件

step2: 跑马灯设置

1. 设置跑马灯组件的图层、位置大小
2. 内容设置：
   1. 添加或移除跑马灯选项
   2. 滚动方向：向上或向左滚动
   3. 滚动周期：即滚动一遍所需时长，单位为秒
   4. 内容间距：不同选项之间的距离
3. 设置选项字体、字号、文字颜色、加粗、下划线、倾斜、文字缩进，点击展开设置字间距、行间距、文字方向、删除线
4. 设置背景和边框，不用的话可以不勾选

step1: 添加Lottie动画组件

step2: Lottie动画设置

1. 设置动画组件的图层、位置大小
2. 交互动作：点击「编辑交互动作」，可以设置动画区域点击后，跳转页面、打开弹窗等等动作
3. 内容设置：
   1. 上传lottie动画文件：点击「重新上传」上传文件，支持zip的压缩文件格式，可由设计师直接从adobe等软件直接导出
   2. 循环播放：开启后，默认自动循环播放动画，若关闭则只会播放一次
   3. 播放完成后不显示：关闭「循环播放」后，可以开启此项，即播放一次之后隐藏动画
   4. 点击穿透：开启后，用户点击动画区域则相当于点击动画底层的内容，例如动画底层有一个按钮，则用户点击的时候触发的是按钮

step1: 添加复制文本组件

step2: 复制文本设置

1. 设置动画组件的图层、位置大小
2. 展示文本：支持修改展示的文本内容
3. 实际复制文本：支持修改用户实际复制的文本内容
4. 提示信息：复制成功的反馈提示，包含Toast、图片、弹窗、无
5. 设置背景和边框，不用的话可以不勾选

step3: 复制文本文字元素设置

1. 设置文字的图层、位置大小
2. 设置文本样式、背景和边框

step4: 复制文本按钮元素设置

1. 设置按钮的位置大小、可见度
2. 修改按钮的样式，支持图片、填充的背景类型

step1: 添加下拉选择跳转组件

step2: 下拉选择跳转设置

1. 设置动画组件的图层、位置大小
2. 展示文案：可以修改下拉框展示的文案
3. 选项内容：设置不同选项的展示文案和点击后跳转的url，链接需要是//开头
   • 比如你平时获取的链接是https://www.bytedance.com/zh/
   • 那么你在这里要填的是//www.bytedance.com/zh/
4. 展开图标、收起图标：可以上传图片替换图标
5. 设置背景和边框，不用的话可以不勾选

step1: 添加玩法跑马灯组件

step2: 玩法跑马灯设置

1. 设置动画组件的图层、位置大小
2. 内容设置：
   1. 玩法规则：选择关联的玩法规则，轮播数据将来源于玩法数据，例如关联抽奖玩法，轮播内容将展示中奖信息
   2. 轮播文本：设置部分轮播文本
3. 轮播样式：可以设置横向轮播、纵向轮播，实际中奖信息将展示用户进入界面时，最近30条中奖用户数据，循环滚动
4. 可配文本样式：设置可配文本的字体、字号、文字颜色、加粗、下划线、倾斜、文字缩进，点击展开设置字间距、行间距、文字方向、删除线
5. 用户及奖品信息样式：设置用户及奖品信息的文吧样式，配置内容同上
6. 设置背景和边框，不用的话可以不勾选

step1: 添加奖品展示组件

step2: 奖品展示设置

1. 设置动画组件的图层、位置大小
2. 玩法规则：选择关联的玩法规则，轮播数据将来源于玩法数据
3. 我的奖品按钮样式：支持修改按钮样式以及显示的文本内容
4. 设置按钮文本的字体、字号、文字颜色、加粗、下划线、倾斜、文字缩进，点击展开设置字间距、行间距、文字方向、删除线
5. 设置背景和边框，不用的话可以不勾选

step3: 相关页配置-地址填写页

1. 设置地址填写页的位置大小、可见度、圆角
2. 弹窗设置：开启后将展示勾选条款
3. 字段设置：设置需要填写的表单字段
4. 校验规则：设置提交成功、未勾选协议提交的反馈文案
5. 设置背景和边框，不用的话可以不勾选

step4: 相关页配置-兑换码详情页

1. 设置兑换码详情页的位置大小、可见度、圆角
2. 设置背景和边框，不用的话可以不勾选

step5: 相关页配置-我的奖品页

1. 设置我的奖品页的位置大小、可见度、圆角
2. 设置背景和边框，不用的话可以不勾选

step1: 添加任务列表组件

step2: 任务列表组件设置

1. 设置任务列表组件的图层、位置大小
2. 内容设置：
   1. 玩法规则：选择配置好的含有多个任务的玩法规则。
   2. 选择任务&任务触发机制：选择玩法规则后，在下方选择任务并配置任务触发机制，例如选择「观看视频任务」，触发配置「跳转链接」。
3. 样式设置：支持替换组件样式、自定义样式中的展示元素，提供两种样式
4. 反馈：主要针对用户点击【去做任务】按钮后，不同场景提示内容的配置
   1. 任务已完成：若当前用户已完成此任务，会出现该提示
   2. 用户未登录：
      1. 如果需要收集用户的id，可以把“用户未登录”打开；
      2. 若用户没有登录，会出现错误提示。
   3. 不在活动时间内：用户不在玩法活动可参与的时间范围内的提示内容
   4. 不在任务时间：用户不在任务可参与的时间范围内的提示内容
   5. 命中黑名单：用户在黑名单内时的提示内容
   6. 不在本次活动范围：用户不在玩法圈选的可参与范围内的提示内容
   7. 参与机会不足：用户参与玩法机会不足的提示内容
   8. 参与次数达到上限：用户参与玩法次数达到上限的提示内容
   9. 频繁点击：频繁点击时的提示内容
   10. 兜底错误提醒+错误代码：系统服务异常或网络错误等的提示内容
5. 设置背景和边框，不用的话可以不勾选

step3: 组件内元素样式设置
选中组件中的按钮、文本、图片等元素，可以进行元素样式设置

step1: 添加分享任务组件

step2: 分享任务组件设置

1. 设置分享任务组件的图层、位置大小
2. 内容设置：
   1. 玩法规则：选择含有分享任务的玩法
   2. 选择任务：选择玩法规则后，在下方选择分享任务
3. 分享设置：
   1. 分享内容：支持分享当前活动链接、公众号二维码、其他链接
   2. 分享方式：支持海报/二维码、端内分享+海报兜底，详情参考「2.1基础类-分享按钮组件」
4. 样式设置：支持替换组件样式、自定义样式中的展示元素，提供四种样式

5. 按钮状态样式设置：支持修改未完成/已完成状态的样式，建议将「未完成分享」的背景配置为亮色，将「已完成分享」的背景配置为暗色，提高用户感知。
6. 反馈：主要针对用户点击【分享得奖励】或【去分享】按钮后，不同场景提示内容的配置
   1. 任务已完成：若当前用户已完成此任务，会出现该提示
   2. 用户未登录：
      1. 如果需要收集用户的id，可以把“用户未登录”打开；
      2. 若用户没有登录，会出现错误提示。
   3. 不在活动时间内：用户不在玩法活动可参与的时间范围内的提示内容
   4. 不在任务时间：用户不在任务可参与的时间范围内的提示内容
   5. 命中黑名单：用户在黑名单内时的提示内容
   6. 不在本次活动范围：用户不在玩法圈选的可参与范围内的提示内容
   7. 参与机会不足：用户参与玩法机会不足的提示内容
   8. 参与次数达到上限：用户参与玩法次数达到上限的提示内容
   9. 频繁点击：频繁点击时的提示内容
   10. 兜底错误提醒+错误代码：系统服务异常或网络错误等的提示内容
   11. 分享中断未完成：用户未完成分享的提示内容
7. 设置背景和边框，不用的话可以不勾选

step1: 添加通用任务组件

step2: 通用任务组件设置

1. 设置通用任务组件的图层、位置大小
2. 内容设置：
   1. 玩法规则：选择配置好的含有多个任务的玩法规则。
   2. 选择任务&任务触发机制：选择玩法规则后，在下方选择任务并配置任务触发机制，例如选择「观看视频任务」，触发配置「跳转链接」。
3. 样式设置：支持替换组件样式、自定义样式中的展示元素，提供两种样式

4. 按钮状态样式设置：支持修改未完成/已完成状态的样式，建议将「未完成任务」的背景配置为亮色，将「已完成任务」的背景配置为暗色，提高用户感知。
5. 反馈：主要针对用户点击【去做任务】按钮后，不同场景提示内容的配置
   1. 任务已完成：若当前用户已完成此任务，会出现该提示
   2. 用户未登录：
      1. 如果需要收集用户的id，可以把“用户未登录”打开；
      2. 若用户没有登录，会出现错误提示。
   3. 不在活动时间内：用户不在玩法活动可参与的时间范围内的提示内容
   4. 不在任务时间：用户不在任务可参与的时间范围内的提示内容
   5. 命中黑名单：用户在黑名单内时的提示内容
   6. 不在本次活动范围：用户不在玩法圈选的可参与范围内的提示内容
   7. 参与机会不足：用户参与玩法机会不足的提示内容
   8. 参与次数达到上限：用户参与玩法次数达到上限的提示内容
   9. 频繁点击：频繁点击时的提示内容
   10. 兜底错误提醒+错误代码：系统服务异常或网络错误等的提示内容
6. 设置背景和边框，不用的话可以不勾选