## 一、功能介绍 ### 1.功能概述魔方活动落地页是增长营销平台中的H5活动营销搭建产品，提供自定义和拓展能力较高的H5页面搭建工具、灵活丰富的营销玩法、活动二次开发能力、全面的数据化分析能力，用于日常业务的营销活动或者落地页的场景，将活动投放至APP客户端、微信端、小程序等渠道，助力企业营销活动链路的增长和转化。 ### 2.使用场景 * 场景1：**落地页搭建**，用于各渠道引流，在页面上配置介绍图文信息，并在页面中放置一个引导按钮，引导用户点击进入业务页面，达到引流转化的效果。 * 场景2：**表单页面搭建**，用于C端用户的引流和留资信息收集，发布用户信息填写、问卷调研等内容的表单页面。 * 场景3：**图文内容页面搭建**，用于活动或产品内容的图文介绍和宣传 * 场景4：**活动/玩法页面搭建**，用于发布营销活动的参与页面，支持做任务、参与抽奖、兑换等玩法。 ### 3.名词解释 | | | \ |名词 |名词说明 | |---|---| | | | \ |H5活动页 |创建的活动页面 | | | | \ |表单 |发布页面文件、表单内容给C端用户，并收集相关数据的能力 | | | | \ |编辑器 |平台上用来自定义搭建页面的功能，可拖拉拽完成页面内容的搭建 | | | | \ |图层 |编辑器内每一个内容在页面里面重叠时，展示的前后顺序关系 | | | | \ |组件 |编辑器内搭建页面的内容组件，每一个组件对应的内容、数据、功能逻辑都不一样 | | | | \ |插件 |用于页面逻辑的二次开发，增加整个活动页面的前端逻辑，实现页面的全局配置 | | | | \ |二开 |即二次开发，魔方编辑器支持低代码二开新的前端组件 | ### 4.编辑器的使用 #### （1）顶栏区 | | | | \ |操作 |示意图 |详细说明 | |---|---|---| | | | | \ | |\ |编辑 |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/36891f9fb6ba45edbb094a965bc64777~tplv-goo7wpa0wc-image.image =766x) |* 保存：保存你的活动，快捷键ctrl+s； |\ | | |* 撤销：【←】回到你的上一步操作，快捷键ctrl+z； |\ | | |* 重做：【→】，回到你最近的一次撤销前的动作（撤销你的最近一个撤销），撤销是重做的前提，没有撤销就不能重做，快捷键ctrl+shift+z； |\ | | |* 开发者模式：用于开发人员调试二开组件/插件 | | | | | \ | |\ |视图 |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/0fba41295bb64e2b9ebfd15ef0613567~tplv-goo7wpa0wc-image.image =413x) |\ | |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/d9405aa0c2314a64812e9d633c77cae3~tplv-goo7wpa0wc-image.image =1262x) |* 网格线：帮助你更好地齐组件、调整行间距等，后续会上线； |\ | | |* 拖拽参考线：为你提供对齐组件的基准线，当组件图层模式为「移动」时，拖动便会自动显示； |\ | | |* 智能吸附：拖动组件时会磁性吸附到参考线上，注意：要使用智能吸附必须打开参考线； |\ | | |* 展示快捷键提示：选中组件，右键调起； |\ | | | |\ | | | |\ | | |画布：放大画布-点击一次放大画布大小25%；缩小画布-点击一次缩小画布大小25%；缩放至100%-画布回到100%大小； | | | | | \ |PSD导入 |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/227be932e8c84b2ab4b16424ac845c6f~tplv-goo7wpa0wc-image.image =2878x) |\ | |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/62ff101203974284bdf2e7ff4267ad90~tplv-goo7wpa0wc-image.image =2878x) |* 在Photoshop中安装「魔方插件」，通过插件将PSD设计文件导出为.mdr魔方设计资源； |\ | | |* 在编辑器中导入魔方设计资源，即可将设计稿转为H5页面，按原尺寸、原比例、原位置导入图片、文字、按钮图层。 |\ | | | |\ | | | | | | | | \ |图层 |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/df0a02b4644c47f6828e28dc41201945~tplv-goo7wpa0wc-image.image =989x) |* 可以看到整个活动的页面、模块、组件的结构； |\ | | |* 逻辑是同模块中的组件，在结构树上方的组件在画布上会遮挡在结构树下方的组件； |\ | | |* 不同模块上下排列的顺序，即为在画布里上下排列的顺序； |\ | | | |\ | | |点击左下角「+新页面」可增加新的一页； | | | | | \ |保存 |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/0d4cc35812e54932b5d87b24939460c3~tplv-goo7wpa0wc-image.image =646x) |保存你当前搭建的活动，需要保存或预览过后，才可以进行发布 | | | | | \ |预览 |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/e0fb13547e434a8a9f5c5029bc0e7071~tplv-goo7wpa0wc-image.image =2766x) |预览活动在手机展示的效果，可以在此处获取到测试链接，投放到实际的手机端进行查看 | | | | | \ |发布 |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/2ed46388e0b44116acd7e3577a88d153~tplv-goo7wpa0wc-image.image =462x) |可设置分享的标题样式、版本名称以及版本备注信息 | | | | | \ |分享设置 |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/8dd161fc8fda43909cd331e565cdc0de~tplv-goo7wpa0wc-image.image =2354x) |可设置活动的分享标题、分享描述和分享封面 | | | | | \ |活动设置 |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/ab5fd929cf784410af2b2e979eaa0a7f~tplv-goo7wpa0wc-image.image =2738x) |可设置活动展示名称，即C端活动页面的名称 |\ | | |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/990484e3b0684f51a84f346514e92c31~tplv-goo7wpa0wc-image.image =1616x) | | | | | \ |更多操作 |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/d75cc217cd584ac1846c6cd7c09befa5~tplv-goo7wpa0wc-image.image =389x) |版本与草稿：可查看所有历史上线过的活动版本，可以直接替换为旧版本进行发布，也可把旧版本信息删除 |\ | | |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/53e19ac067fa43edbcd3772b5c5f4f0d~tplv-goo7wpa0wc-image.image =1077x) |\ | | |活动链接：可查看当前活动的正式链接 |\ | | |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/9c5bc3a2caac4434a6416fb97d5f5a2c~tplv-goo7wpa0wc-image.image =1135x) | #### （2）组件区 | | | | \ |操作 |示意图 |详细说明 | |---|---|---| | | | | \ |组件 |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/6dfd21d03d7641438acb6a5956ee0534~tplv-goo7wpa0wc-image.image =1296x) |\ | | |提供丰富的页面组件库，在组件上悬停可显示组件解释和预览。 | #### （3）画布区 | | | | \ |操作 |示意图 |详细说明 | |---|---|---| | | | | \ |画布区 |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/1e318248909c4798aeb477078a1061b4~tplv-goo7wpa0wc-image.image =2810x) |在此处添加组件或素材，搭建你的活动 | | | | | \ |页面调整 |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/27ed97e0f4de470293faa96aaf22e7ce~tplv-goo7wpa0wc-image.image =990x) |* 可修改页面名称，选择页面跳转时快速选择，以及方便管理 |\ | | |* 点击右上角可添加新页面，可进入页面配置项 | #### （4）配置区 | | | | \ |操作 |示意图 |详细说明 | |---|---|---| | | | | \ |展示设置 |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/7e027773bde9468ca61532db52fc2f6c~tplv-goo7wpa0wc-image.image =1800x) |页面/组件可配置的内容都在这个区域进行设置 | | | | | \ |高级设置 |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/00e4632927074a1e970897b99c43c283~tplv-goo7wpa0wc-image.image =1742x) |页面/组件的开发相关信息、如id、配置代码等内容，在这个页面进行设置和查看 | #### （5）图层和位置 * 堆叠：类似搭积木的逻辑，一个积木一个积木搭上去，组件会一个个从上往下堆起来，这些组件搭起来的积木会撑起模块，通过右侧配置数值改变大小； * 移动：可以通过右侧数值改变位置和大小，也可以通过在画布区的拖拽自由移动位置、改变大小； | | | | \ |图层模式 |示意图 |详细说明 | |---|---|---| | | | | \ |堆叠 |\ | |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/9cf57606f3da4982b36da22b3d1c7b67~tplv-goo7wpa0wc-image.image =628x) |* 支持修改按钮透明度 |\ | | |* 宽高：通过W\H值修改按钮高度和宽度，支持锁定宽高比例 |\ | | |* 圆角：支持修改组件的圆角 |\ | | |* 外边距：通过修改（距离其他组件的）边距更改按钮位置 |\ | | | |\ | | | | | | | | \ |移动 |\ | |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/a9f2ce2b43f94b9084a58a5eff0cb36a~tplv-goo7wpa0wc-image.image =624x) |* 支持修改按钮透明度 |\ | | |* 宽高：通过W\H值修改按钮高度和宽度，支持锁定宽高比例 |\ | | |* 圆角：支持修改组件的圆角 |\ | | |* 位置：支持修改组件的X/Y轴，调整在画布上的位置 |\ | | | |\ | | | | #### （6）页面和模块一个页面中可以配置多个模块，模块对于用户来说是无感知的，只是方便运营人员对页面的修改和管理。 | | | | \ |操作 |示意图 |详细说明 | |---|---|---| | | | | \ |页面设置 |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/d9ff23bda9da4be583b26c1e7ce40fbb~tplv-goo7wpa0wc-image.image =2808x) |点击画布右上角的设置，可以对整个页面设置背景颜色、背景图片 |\ | | | | | | | | \ |模块设置 |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/d05e750bf33d433bb19b6636b6060e79~tplv-goo7wpa0wc-image.image =2804x) |* 点击页面内的任意位置，出现该模块的设置操作，可以对该模块单独设置高度、背景颜色、背景图片 |\ | | |* 由内容撑开：每个模块的高度都可以按照内容自适应地自动撑开，自动撑开的高度由“堆叠”的组件决定，与自由移动的组件无关 |\ | | |* 固定高度：可以设置模块固定高度 |\ | | |* 页面中设置多个模块时，主要考虑是这个模块/楼层的内容是否需要单独维护，是否会经常调整模块高度，为了减少对页面上下方的位置的调整，就可以使用模块来进行编辑，避免修改内容高度后，需要重复地调整整个页面的布局 | #### （7）复制/粘贴 | | | | \ |操作 |示意图 |详细说明 | |---|---|---| | | | | \ |复制组件 |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/17a19e074caa46be8f9c40297527dcf8~tplv-goo7wpa0wc-image.image =1448x) |\ | |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/03900fa946cc4d4283d205c9d175fa72~tplv-goo7wpa0wc-image.image =1495x) |\ | |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/696b2a6f2a744468be94222ad2949f79~tplv-goo7wpa0wc-image.image =1495x) |（1）在画布中，使用鼠标拖动选中要复制的组件 |\ | | |（2）点击鼠标右键、点击复制或ctrl+c |\ | | |（3）打开要粘贴的页面，并鼠标点击选中要粘贴的模块位置，再点击右键、点击粘贴或ctrl+v（会在当前指定的模块，自动把组件内容粘贴上去） |\ | | |注意：玩法相关配置，复制后需重新设置 | | | | | \ |复制模块 |\ | |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/2d3b0384430c4b0e9c553fdc2e0c134f~tplv-goo7wpa0wc-image.image =1495x) |\ | |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/13bd2ac64b574133bd5663080eed4e79~tplv-goo7wpa0wc-image.image =1495x) |（1）打开图层，鼠标右键点击要复制的模块名称 |\ | | |（2）点击鼠标右键、点击复制或ctrl+c |\ | | |（3）打开要粘贴的页面，新增一个空白模块，并鼠标点击选中要粘贴的模块位置，再点击右键、点击粘贴或ctrl+v（会在当前指定的模块，自动把模块中所有组件内容粘贴上去） |\ | | |注意：玩法相关配置，复制后需重新设置 | | | | | \ |复制页面 |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/bd2fc93b260e474a9ca97d364c08e443~tplv-goo7wpa0wc-image.image =1495x) |\ | |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/643a3a16814943408d778d9217e277c7~tplv-goo7wpa0wc-image.image =1495x) |（1）打开图层，鼠标右键点击要复制的页面名称 |\ | | |（2）点击鼠标右键、点击复制或ctrl+c |\ | | |（3）打开要粘贴的页面位置，在页面名称上鼠标点击右键、点击粘贴或ctrl+v（会在指定页面的后面新增一个页面，并自动把页面所有的内容粘贴上去） |\ | | |注意：玩法相关配置，复制后需重新设置 | #### （8）个性化页面场景（基于用户分群的千人千面）前置条件：已接入CDP或画像人群平台 | | | | \ |操作 |示意图 |详细说明 | |---|---|---| | | | | \ |模块设置 |\ | |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/bd7a611befbb4eb18cadf1d4d55afeaa~tplv-goo7wpa0wc-image.image =1470x) |进入模块的设置面板，开启右上角“个性化展示分组” |\ | | | | | | | | \ |新建个性化分组 |\ | |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/6bf33ba2614045c6b287bc81616c87ac~tplv-goo7wpa0wc-image.image =658x) |\ | |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/c067eecafe324a80b47be06521d14877~tplv-goo7wpa0wc-image.image =715x) |点击新建分组，如果活动中没有创建过分组条件，则点击「去创建」；或者直接点击「管理分组人群条件」，打开弹窗进行创建。 |\ | | | | | | | | \ |分组条件设置 |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/7dd8c77d455e472a88991754858cf2ec~tplv-goo7wpa0wc-image.image =1215x) |\ | |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/37052042160f405b9e57ee13517766bd~tplv-goo7wpa0wc-image.image =931x) |（1）进入分组管理弹窗，点击添加分组 |\ | | |（2）可按照不同条件添加分组的限制： |\ | | | |\ | | |* 指定每日时间：每天可见的时间点，例如10点～11点 |\ | | |* 指定可见时间段：限制可见的日期范围，例如2022-10-20 10:00:00～2022-10-30 10:00:00 |\ | | |* 指定可见人群：指定可访问的人群范围，可选择画像平台已创建的人群列表，支持直接创建CDP人群 |\ | | |* 指定可见应用端：可指定微信端，已对接的APP端，或者其他未包含在内的客户端 |\ | | | |\ | | |（3）创建保存完成，在该活动各个页面模块中都可以使用相同的条件来创建个性化的分组内容 | | | | | \ |设置分组的展示内容 |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/6b5d0a4ef47c48fc99484ed380df4916~tplv-goo7wpa0wc-image.image =641x) |\ | |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/5de84047b379498a8ea03813bf58c577~tplv-goo7wpa0wc-image.image =924x) |\ | |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/3e0c64345eb941c7b03887fe27e808ed~tplv-goo7wpa0wc-image.image =995x) |（1）点击添加分组，把创建好的分组条件添加进来 |\ | | |（2）选中点击分组的卡片，可切换查看模块在不同条件下的内容，并进行编辑 |\ | | |（3）可拖动调整每个卡片的判断顺序，可删除卡片条件和对应的内容 |\ | | | | ### 5.H5页面大小规范 #### （1）H5页面背景图设计规范 **常规手机页面：750x1334px** **全面屏页面：750x1468px** **宽度**：宽为750px(如果大于这个尺寸，魔方会自动压缩成750宽，或者也可使用按这个宽度等比缩放的图片尺寸) **高度**：高为1334px。要求为偶数，最好为6的倍数。需要考虑到不同型号手机屏幕的高度来进行适配，尽量保证在任意手机内都可以看到一屏完整的内容，不然会出现断层或者下方没有内容而一片空白。或者设置一个页面全局的背景颜色。 #### （2）常用组件设计规范 **图片组件尺寸** 魔方图片组件会自适应素材的大小，上传后不用再手动调整大小限制为10M以内，png和gif都是 ![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/62bc62a642664f73a66613f19a2f437c~tplv-goo7wpa0wc-image.image =280x) **组件内图片尺寸** 编辑器组件内更换样式配置或个性化中涉及的可以替换默认图片的尺寸没有具体的要求和推荐尺寸（比如按钮的背景图、选项卡的tab图、用户列表中按钮的背景等），可以根据设计稿来，大小同样在10M以内。 **分享图的尺寸** 分享图片上传尺寸需要为1：1，不然会被压缩

**1.设置【页面背景图】** 如果你是长图，且不想切图，并且你的活动会包含容器或者多个模块（模块的概念见[这里](https://bytedance.feishu.cn/wiki/wikcnep2IgrFwU8MSmyh7fhDVOg#mcl13G)，请直接在【页面设置】背景处设置背景图）

需要注意的是，如果你设置的是页面背景图，那么你的上面所有组件都需要完全按设计图上的尺寸来做，这样才能刚好把页面撑起来，与背景图对应，页面中没有组件的时候背景图是显示不完全的（页面没有被撑起来），需要往里面添加东西如图

**2.设置【模块背景图】** 如果你要设置模块背景图，你需要提前想好你的活动包含哪些模块，每个模块的高度，按模块切背景图。进入【模块设置】更改背景图，可以将模块固定高度撑起，或者将高度设置为按内容撑开，你在里面添加其他组件后他会被自动撑开显示完整（同设置页面背景一样，这样的话你需要按设计图严格控制每个组件的大小，不然可能会让背景图撑开不完全）

**3.在模块中添加【图片组件】作为背景** > 我们更推荐这种方式，比较灵活，而且对于简单活动来说，一个活动中有一个模块就够了你可以直接添加图片组件，并在图片组件中上传背景图这种情况下你的搭建能够更灵活，不用严格按照设计图控制高度。但是如果是多模块活动，或者包含容器的活动，因为一个图片组件不能够跨模块存在，你需要切图。（把每个模块和容器的背景单独切出来，每个模块里添加一个图片组件放这个部分的背景图，如果是容器的话可以直接把背景图上传成组件的[背景](https://bytedance.feishu.cn/wiki/wikcnep2IgrFwU8MSmyh7fhDVOg#Fn66SB)）

## 二、功能使用 ### 1.H5活动列表 #### 1.1 功能界面组成

* 新建活动：可点击新建，或者快速点击最近操作过的活动内容 * 查询条件：可按不同的条件筛选查询活动列表 * 活动列表：当前登录账号有权限查看到的所有活动列表内容 #### 1.2 活动列表操作 | | | | \ |操作 |示意图 |详细说明 | |---|---|---| | | | | \ |基础操作 |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/be2ca5bb6a1340308f7da48a68987535~tplv-goo7wpa0wc-image.image =554x) |编辑、收藏、查看线上链接、预览活动页面 | | | | | \ |更多操作 |\ | |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/86c2550803ad4250806dfa3e0589c658~tplv-goo7wpa0wc-image.image =550x) |\ | |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/9ffdece6d4f84ce3ae5a601a5816f513~tplv-goo7wpa0wc-image.image =548x) |* 设为优秀案例：设置优秀案例后，其他所有用户可以在「案例中心」查看到这个活动，不需要查看权限 |\ | | |* 复制：复制当前活动的页面内容来创建一个新的活动 |\ | | |* 修改信息：修改活动的基础信息，包括活动渠道、活动名称、活动标签、资源组、协作人等 |\ | | |* 查看活动数据：跳转至活动数据分析页面 |\ | | |* 查看表单数据：跳转至活动表单明细数据页面 |\ | | |* 修改协作人：修改活动的协作人信息，其他协作人也拥有管理活动的权限 |\ | | |* 发布：进入编辑器，进行活动的发布操作 |\ | | |* 删除：未上线/已下线的活动可以删除，已上线的活动不允许删除 |\ | | |* 下载预览图：已上线的活动可将活动页面内容下载为图片 |\ | | |* 下线：对已上线的活动进行下线操作 | | | | | \ |下载预览图 |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/bf16b6c2182240a695f584ae5d208d6d~tplv-goo7wpa0wc-image.image =907x) |* 原始尺寸：按页面现有内容的高度进行导出下载，不做裁剪 |\ | | |* 自定义尺寸：可自由调整/裁剪需要下载的图片区域 |\ | | |* 增加固定尺寸：可保存常用的尺寸类型，便于快速进行下载保存 | | | | | \ |活动信息 |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/34f265abfc574643a23dde9b8b505505~tplv-goo7wpa0wc-image.image =540x) |可展开查看：创建人、创建时间、活动ID、活动状态 | | | | | \ |审批 |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/11806e60b8434b748eb7e87b2fbe5348~tplv-goo7wpa0wc-image.image =564x) |存在审批申请单时，显示审批标识，鼠标hover可点击「查看详情」查看审批单详情；负责审批的用户可以在此操作审批通过/驳回。 | #### 1.3 活动创建流程 **Step1：新建活动** * 进入【H5活动页】，点击新建活动，选择活动渠道、目标投放应用并进行活动命名

* **活动渠道：** * APP/小程序活动：适合投放至APP端、小程序端，实现用户登录授权。前置条件：需要在【活动落地页-应用管理】中完成手机APP或小程序应用的接入 * 微信活动：适合投放至微信网页端，实现微信公众号用户登录授权。前置条件：需要在【管理中心-通道管理-微信公众号】中完成微信公众号的接入 * 通用活动：仅适用于纯展示类的品牌宣传、客户留资等内容场景，**无法使用需要授权登录的组件**。 :::tip 若需要创建多渠道活动，且每个渠道用户都可以参与完整的活动流程，则需分开创建不同渠道的活动页面。 :::

* **活动设置的其他字段：** * 活动名称：根据活动进行自定义，会展示在C端用户浏览时的页面名称，以及页面分享标题 * 活动标签：给不同活动打标签，便于活动的管理 * 所属资源组：用于设置不同用户角色的资源组权限，支持自定义资源组，或者按企业部门组织架构来管理各部门的活动权限 * 协作人：除了部门/资源组的权限之外，可单独添加某个用户作为活动协作人，添加后该用户也有权限管理这个活动 **Step2：编辑搭建活动** * 活动的搭建方式：可以将页面的搭建理解为搭积木，首先需要完成最底部背景的搭建，然后从页面最上面（头图）到最底部依次搭建即可。 * 活动物料的准备：背景图片、按钮切图、页面内容切图；把素材的设计要求发给设计师同学，准备好图片素材后开始搭建。 | | | | \ |步骤 |示意图 |详细说明 | |---|---|---| | | | | \ |搭背景及图片 |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/8d9f3460038c43e29743da8b5db482e8~tplv-goo7wpa0wc-image.image =1912x) |\ | |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/0f5e65e4d6754dd9a0532d12edc36b8b~tplv-goo7wpa0wc-image.image =836x) |1. 利用**图片组件**来搭建，注意先搭建的元素在最下层。（如果背景图片是切图，则需要把这些切图拼接起来） |\ | | |2. 页面搭建使用到的图片尺寸分为两种： |\ | | | 1. 无限制大小：页面搭建时基本上所有样式的大小都可以自由拖拽，或自定义设置大小尺寸。这种类型可以按设计师自由确定尺寸，只要最后在页面上设置的大小和设计师定义的大小比例一致，展示则不会有拉伸问题。 |\ | | | 2. 有限制大小：部分玩法相关的组件会有固定的展示位，例如抽奖大转盘，每个奖品位的展示大小是固定的。具体参考各组件的说明。 | | | | | \ |搭按钮 |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/75ec8a81c808496a9908c1056da657e1~tplv-goo7wpa0wc-image.image =2806x) |\ | |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/28a6c83cdf0c4f9088e66affe94feb8e~tplv-goo7wpa0wc-image.image =1152x) |页面间的交互通过按钮来承载，给按钮组件配置交互动作，实现跳转其他页面、打开弹窗等场景。 |\ | | | | | | | | \ |玩法搭建 |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/a438d8f55be54364a2cffac6a94fc03d~tplv-goo7wpa0wc-image.image =2806x) |\ | |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/90429ab9fe824a95bfd51c7813ce078f~tplv-goo7wpa0wc-image.image =2810x) |如果在搭建活动的过程中使用到「抽奖类」「投票类」「兑换类」「签到类」「任务类」「玩法通用类」等组件，需要先完成玩法后端规则的配置，并将后端规则与组件关联，更多详情可参考对应组件的操作说明。 | **Step3：保存并发布活动** 活动界面配置完成后，可以对活动进行保存、预览-编辑分享设置、发布、检测、成功上线。 * **保存：**

* **预览-编辑分享设置**： :::tip 可对分享内容进行配置，预览界面的链接为测试链接，可用于样式预验证，不能直接投放上线！ 分享图片上传尺寸需要为1:1，否则会被压缩。 :::

* **发布**：全部设置完成后可点击「发布」

以上操作完成，一个活动便搭建好啦！ :::tip 注意：请运营同学至少「提前几天搭建好」活动页面并「充分自测」，防止活动因紧急上线而没有足够的预留时间去调试和修复。 ::: #### 1.4 活动审批 * 创建审批流程：在「管理中心-审批管理-流程管理」中创建审批流程，完成审批流程节点的配置

* 新建审批策略：在「管理中心-审批管理-策略管理」中新建审批策略，指定功能「H5活动页」，提交类型根据业务需要指定上线、下线；若涉及资源组权限，可指定某个资源组的审批流，若不指定则默认所有资源组都走该审批。

* 活动提交发布时，展示审批相关信息

* 提交审批后，列表展示审批状态。审批状态下不允许编辑活动、不允许重复提交审批，需完成当前审批后，才可以编辑和重新提交。 ![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/190bc359c1f3414a846271add945ed87~tplv-goo7wpa0wc-image.image =306x) # 2. 页面组件教程 #### 2.1 基础类 ##### （1）图片组件

* 支持上传图片，多用于页面背景图；图片可实现多种基础交互动作。 | | | | \ |交互动作 |示意图 |详细说明 | |---|---|---| | | | | \ |跳转活动内页面 |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/8408782bb4bb4fdca3c16d3d6f620f95~tplv-goo7wpa0wc-image.image =1126x) |在同一个活动中存在多个页面，点击图片可跳转至任意页面。 | | | | | \ |跳转链接 |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/53c10e8e55874a3daefe61079f141144~tplv-goo7wpa0wc-image.image =1128x) |点击图片可以跳转至其他链接。 | | | | | \ |打开弹窗 |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/aa71ee96837348939d76c079c48e59a6~tplv-goo7wpa0wc-image.image =1122x) |点击图片后在原页面弹出一个弹窗，需要配合「弹窗」组件使用。常见于抽奖兑换活动中，用来展示用户所得奖品 | | | | | \ |关闭弹窗 |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/059e1aea30e945dcb42fc35ff7cee2d3~tplv-goo7wpa0wc-image.image =1108x) |点击图片后关闭弹窗。 | | | | | \ |JS动作 |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/22d5738200584ae9af643b6ff84fb8e9~tplv-goo7wpa0wc-image.image =1120x) |可由研发人员定制开发对应的按钮动作代码，快速实现临时的定制开发需求，场景举例：APP端JSB能力调用、APP页面跳转等（注意：为了方便运营人员日常使用，建议二开动作，可直接增加动作类型） | * 其他常用配置： * 图层、位置大小：将图层模式设置为「移动」，拖拽即可移动位置，调整大小；也可以调整W/H、X/Y值调整位置和大小，调整圆角、透明度。 * 内容设置：支持上传图片/选择其他图片素材，设置「加载中状态展示颜色」，开启「用户长按可保存」（常用于答题测评类活动，用户拿到测试结果后促使其分享至朋友圈）。 * 动画效果：增强页面动态交互体验，支持7种效果（心跳、果冻、橡胶、弹跳、摇晃、扭动、震动） * 发光效果：支持配置组件的发光效果，增强页面动态交互体验，支持3种效果（波浪、呼吸、流动）

##### （2）文字组件

* 支持自由编辑文字，包括字体、字号、字体颜色、加粗、下划线、倾斜、选项文本缩进、选项文本左对齐/居中/右对齐、选项上下对齐； * 字体：目前为用户提供了丰富的字体以供使用（目前提供的字体均为第三方提供的开源字体）； * 文字组件可实现多种基础交互动作。 | | | | \ |交互动作 |示意图 |详细说明 | |---|---|---| | | | | \ |跳转活动内页面 |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/d54a2b5f3fc74c20b119fa5a143db79d~tplv-goo7wpa0wc-image.image =1126x) |在同一个活动中存在多个页面，点击文字可跳转至任意页面。 |\ | | | | | | | | \ |跳转链接 |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/6cecdbec4bc443b284070a73605772cd~tplv-goo7wpa0wc-image.image =1128x) |点击文字可以跳转至其他链接。 | | | | | \ |打开弹窗 |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/315a52ee65a84f2c9a8e8cafcc32d2ff~tplv-goo7wpa0wc-image.image =1122x) |点击文字后在原页面弹出一个弹窗，需要配合「弹窗」组件使用。常见于抽奖兑换活动中，用来展示用户所得奖品 | | | | | \ |关闭弹窗 |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/5188a586912f4ef089bbaed683164046~tplv-goo7wpa0wc-image.image =1108x) |点击文字后关闭弹窗。 | | | | | \ |JS动作 |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/f237fb3ed80e430dbcd69e7230a97367~tplv-goo7wpa0wc-image.image =1120x) |可由研发人员定制开发对应的按钮动作代码，快速实现临时的定制开发需求，场景举例：APP端JSB能力调用、APP页面跳转等（注意：为了方便运营人员日常使用，建议二开动作，可直接增加动作类型） | * 动画效果：增强页面动态交互体验，支持7种效果（心跳、果冻、橡胶、弹跳、摇晃、扭动、震动）

##### （3）矩形形状组件

* 支持更改颜色、圆角设置等，多用作文字背景图。 ##### （4）富文本组件

* 富文本是基础组件的一种，是编辑文字的一种工具。 * 在富文本设置栏内点击「编辑富文本内容」即可编辑文本内容，支持设置：字体，字号，加租，斜体，删除线，下划线，有序列表，无序列表，字间距，行间距，超链接，字体颜色，对齐。 * 使用场景：作为某个活动的规则页使用，添加规则内容在页面中。

##### （5）按钮组件

* 点击按钮可实现多种基础交互动作。 | | | | \ |交互动作 |示意图 |详细说明 | |---|---|---| | | | | \ |跳转活动内页面 |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/b69ea117ecc547649d533768ff1af656~tplv-goo7wpa0wc-image.image =1126x) |在同一个活动中存在多个页面，点击文字可跳转至任意页面。 |\ | | | | | | | | \ |跳转链接 |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/892bb310211f4a22a77131b329c29905~tplv-goo7wpa0wc-image.image =1128x) |点击文字可以跳转至其他链接。 | | | | | \ |打开弹窗 |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/6221640e33784b0fb042304fb426d177~tplv-goo7wpa0wc-image.image =1122x) |点击文字后在原页面弹出一个弹窗，需要配合「弹窗」组件使用。常见于抽奖兑换活动中，用来展示用户所得奖品 | | | | | \ |关闭弹窗 |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/37d1de0c69094600889243bf84b2e9b4~tplv-goo7wpa0wc-image.image =1108x) |点击文字后关闭弹窗。 | | | | | \ |隐藏自己 |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/d2c7d3bc178b4a8fba538b9479593d3f~tplv-goo7wpa0wc-image.image =1104x) |点击按钮后隐藏当前按钮组件。 | | | | | \ |JS动作 |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/31fdcbcdcd2b4257a3c4fdb27ccd54c0~tplv-goo7wpa0wc-image.image =1120x) |可由研发人员定制开发对应的按钮动作代码，快速实现临时的定制开发需求，场景举例：APP端JSB能力调用、APP页面跳转等（注意：为了方便运营人员日常使用，建议二开动作，可直接增加动作类型） | * 其他常用配置： * 图层、位置大小：将图层模式设置为「移动」，拖拽即可移动位置，调整大小；也可以调整W/H、X/Y值调整位置和大小，调整圆角、透明度。 * 将图层模式设置为「固定」，可以实现按钮在屏幕的某个固定位置不动。

* 动画效果：增强页面动态交互体验，支持7种效果（心跳、果冻、橡胶、弹跳、摇晃、扭动、震动） * 发光效果：支持配置组件的发光效果，增强页面动态交互体验，支持3种效果（波浪、呼吸、流动）

##### （6）分享按钮组件

* 点击按钮可弹窗生成分享海报，或调用浏览器的分享操作。 * 支持分享当前活动链接、公众号二维码、其他链接。

| | | | \ |分享方式 |示意图 |详细说明 | |---|---|---| | | | | \ |海报/二维码 |\ | |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/4d1643521aef43c0a095fcf08d4522b1~tplv-goo7wpa0wc-image.image =304x) |\ | |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/55e08d57e479481aa53b8d650c464626~tplv-goo7wpa0wc-image.image =901x) |\ | | |* 相关页配置中选择「海报二维码」，打开海报样式的配置。海报默认展示的元素：用户头像、用户昵称、图片、二维码、描述文案、关闭按钮、保存图片提示文案 |\ | | |* 可自定义关闭不需要展示的元素 | |^^| | | \ | |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/8c16a922ccab4ddb9b839f54da8a2e84~tplv-goo7wpa0wc-image.image =1441x) |单击海报中的内容，可进行内容编辑，可调整图片、文字等内容的大小和位置 |\ | | | |\ | | |* 用户头像：默认获取用户的头像，可设置兜底图片，用户没有头像时自动展示兜底图片 |\ | | |* 用户昵称：默认获取用户的昵称，可设置兜底昵称内容，用户没有昵称信息时显示兜底名称 |\ | | |* 图片：可自定义修改主图，可修改主图大小，可调整主图在整个海报中的布局，支持覆盖整张海报 |\ | | |* 二维码：可调整大小，不建议小于108px，否则扫码时不容易识别 |\ | | |* 描述文案：海报中可自定义的文字，可修改颜色、大小等 |\ | | |* 关闭按钮：海报弹窗的关闭按钮，可修改按钮图片 |\ | | |* 保存图片提示文案：海报弹窗下方的提示文案，可修改 |\ | | | |\ | | |注意：海报图片一般是由用户长按后保存至本地，建议检查一下访问的APP端是否支持长按保存，若不支持可提醒用户进行截图保存 | | | | | \ |端内分享+海报兜底 |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/d50b25c34f694a3caac1288b0ca15198~tplv-goo7wpa0wc-image.image =304x) |* 端内分享：指H5在各个APP应用端内访问时，调用该APP原生的分享操作，将H5分享出去 | |^^| | | \ | |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/32fd71fb280f4e74b8d067fbc5b56513~tplv-goo7wpa0wc-image.image =313x) |* 左侧示例图是微信内的分享，引导用户点击微信右上角的分享操作 | |^^| | | \ | |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/73e7a64f967141b48e28633731837802~tplv-goo7wpa0wc-image.image =453x) |* 左侧示例图是某APP的分享，会直接调起该APP的分享操作 |\ | | |* 哪些APP支持直接调起：市面上大部分手机浏览器，有提供分享操作的都可调起 |\ | | |* 自有APP是否可以调起：可以，需通过应用管理把APP的share调起方法写入SDK，详情参考「8 应用管理」的操作说明 | |^^| | | \ | |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/735525a2284e41469580065c4daac46a~tplv-goo7wpa0wc-image.image =901x) |* 什么情况下会展示海报：当访问的APP端**没有**分享操作可以调用时，用户点击分享会自动展示为海报 |\ | | |* 相关页配置中选择「海报二维码」，打开海报样式的配置。海报默认展示的元素：用户头像、用户昵称、图片、二维码、描述文案、关闭按钮、保存图片提示文案 |\ | | |* 可自定义关闭不需要展示的元素 | ##### （7）页面嵌入组件 1. 添加「页面嵌入」组件到页面模块中 2. 选中组件，可以在右侧面板对组件进行设置： 1. 转为组件模板：支持转为组件模板，在后续搭建活动时复用 2. 图层：支持设置堆叠或移动、组件透明度 3. 位置大小：支持设置组件的宽、高、圆角、外边距 4. 内容设置：可选择魔方活动或者外部页面作为页面来源，外部页面支持填入页面url或者关联数据源动态展示。

#### 2.2 头图类 **智能头图组件** 通过大模型一键智能生成与企业风格适配的落地页头图，文本内容均支持通过大模型能力一键生成，可对头图内容进行替换修改。还可以基于物料投放的不同尺寸，一键生成与活动头图匹配的banner宣传图。 **配置流程** | | | \ |示意图 |步骤说明 | |---|---| | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/530764c6ee7c48468fbac4e65c3284c2~tplv-goo7wpa0wc-image.image =1415x) |**step1: 添加头图组件** |\ | | |\ | |1. 添加「智能头图」组件到页面模块中，每个页面只能添加1个头图组件 |\ | |2. 选中「智能头图」组件，可以在右侧面板对组件进行设置： |\ | | 1. 转为组件模板：支持转为组件模板，在后续搭建活动时复用 |\ | | 2. 图层：支持设置堆叠或移动、组件透明度，默认为“堆叠” |\ | | 3. 位置大小：支持设置组件的宽、高、圆角、外边距 |\ | | 4. 智能生成：点击【智能生成个性化头图】按钮，即可配置参数生成头图智能头图生成弹窗 |\ | | 5. 显隐设置：默认全选，也可以移除选项，包括主标题、副标题、主体图、副标题背景、logo |\ | | 6. 背景：用于设置组件背景图，即头图背景 |\ | | 7. 边框：用于设置组件边框样式 | | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/3a073272892d491b8b7b41fc38c33d98~tplv-goo7wpa0wc-image.image =2878x) |\ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/4e21ee551bca4173a434d00f5e3f78f0~tplv-goo7wpa0wc-image.image =2878x) |**step2: 配置生成参数** |\ | |点击【智能生成个性化头图】，打开弹窗，开始配置参数生成头图： |\ | | |\ | |1. 头图标题： |\ | | 1. 根据需要填入活动的主标题、副标题文案 |\ | | 2. AI帮我写：头图标题支持通过大模型进行生成，点击【AI帮我写】即可输入需求描述，由AI生成营销活动标题。 |\ | |2. 品牌信息：支持上传企业LOGO，生成的头图将展示对应LOGO |\ | |3. 参数配置完成后，点击【开始生成】按钮，在右侧区域将会展示智能生成的头图，支持生成更多头图或者重新生成 |\ | |4. 对于生成的头图，支持保存、立即使用和下载： |\ | | 1. 保存：点击【保存】按钮，将头图保存到【素材管理=常规素材-图片】内 |\ | | 2. 立即使用：点击【立即使用】按钮，将头图样式添加到编辑器页面中 |\ | | 3. 下载：点击【下载】按钮，将头图保存至本地 | | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/85623686f9344ba488b028f28f9929e6~tplv-goo7wpa0wc-image.image =2878x) |\ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/e7a6fa264a0743cb8dce3ca07b722c66~tplv-goo7wpa0wc-image.image =2878x) |**step3: 生成多尺寸物料** |\ | |支持基于头图生成多尺寸物料。 |\ | | |\ | |1. 点击【去生成】按钮：跳转至多尺寸生成页面 |\ | |2. 选择需要生成的尺寸，点击【立即生成】，既可以生成对应尺寸的物料 |\ | |3. 支持编辑、保存和下载： |\ | | 1. 编辑：点击【编辑】按钮，跳转至编辑器页面，可以对物料进行二次编辑修改 |\ | | 2. 保存：点击【保存】按钮，将物料保存到【素材管理=常规素材-图片】内 |\ | | 3. 下载：点击【下载】按钮，将物料保存至本地 |\ | | |\ | | | #### 2.3 表单类 ##### （1）勾选条款组件 * 默认用户勾选后才可提交表单，可用于勾选用户隐私协议等。 | | | \ |示意图 |详细说明 | |---|---| | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/191ce05b83d24d2185a56ab6af3f4442~tplv-goo7wpa0wc-image.image =1738x) |\ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/e449969c97d947c7b8e9026f2fcc675f~tplv-goo7wpa0wc-image.image =1698x) |【勾选条款设置】 |\ | | |\ | |1. 内容设置：支持修改表单项名称、提示的文案 |\ | |2. 校验规则： |\ | | 1. 设为必填：若设为必填项，用户提交时没有勾选会弹出错误提示 |\ | | 2. 错误提示：支持设置错误提示，toast、图片或弹窗的形式 |\ | |3. 跳转文本： |\ | | 1. 提示文案：支持修改条款名称 |\ | | 2. 点击反馈：支持设置点击条款的反馈动作，toast、图片、弹窗、跳转页面或跳转URL的形式 |\ | |4. 文本样式： |\ | | 1. 设置字体、字号、字体颜色 |\ | | 2. 设置加粗、下划线、倾斜、选项文本缩进、选项文本左对齐/居中/右对齐、选项上下对齐 |\ | | 3. 设置背景和边框，不用的话可以不勾选 |\ | | |\ | | | | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/0d31532571ba49109f4706aa6df3dfbc~tplv-goo7wpa0wc-image.image =1714x) |选中条款可以修改位置大小、文本样式。 | ##### （2）图片上传组件 * 使用该功能后，用户可以点击“+”上传图片，建议用户上传小于10M的图片，大于10M可能会上传超时导致上传失败； * 为方便后台数据区分，请务必记得填写「表单项名称」；

##### （3）单行输入框组件 * 单行输入框，C端用户可输入单行文本提交数据 | | | \ |示意图 |详细说明 | |---|---| | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/489fd79c953a45edb3d9b91f33ea8da6~tplv-goo7wpa0wc-image.image =1766x) |\ | |\ | |【单行输入框设置】 |\ | | |\ | |1. 内容设置：支持修改表单项名称、提示的文案 |\ | |2. 校验规则： |\ | | 1. 设为用户属性：开启后，用户提交的表单数据中将会把这项内容进行单独处理，用于营销平台对用户进行二次营销 |\ | | 2. 设为必填：若设为必填项，用户提交时没有填写会弹出错误提示 |\ | | 3. 限制字符长度：开启后，可以设置输入的字符数上限/下限、不符条件时的错误提示。如果填写的内容超出这个范围，输入框失去焦点会弹出错误提示（4类：无提示、Toast、图片、弹窗） |\ | | 4. 内容格式：默认不限格式，支持设置为「中国手机号」、「邮箱」，手机号格式为11位数字，邮箱格式为xxx@xxx.xxx，输入的内容不符要求时，输入框失去焦点会弹出错误提示（4类：无提示、Toast、图片、弹窗） | | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/415923d009164811a4d2c904ef173f96~tplv-goo7wpa0wc-image.image =1708x) |选中标题可以修改位置大小、文本样式。 |\ | | | | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/ffa5bd50f7de49a7907cbf061efe3e18~tplv-goo7wpa0wc-image.image =1696x) |选中输入框可以修改位置大小、文本样式。 | ##### （4）多行输入框组件 * 多行输入框，C端用户可输入多行文本提交数据 | | | \ |示意图 |详细说明 | |---|---| | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/269886c65e1c4e8c9d30f2885e379917~tplv-goo7wpa0wc-image.image =1700x) |【多行输入框设置】 |\ | | |\ | |1. 内容设置：支持修改表单项名称、提示的文案 |\ | |2. 校验规则： |\ | | 1. 设为用户属性：开启后，用户提交的表单数据中将会把这项内容进行单独处理，用于营销平台对用户进行二次营销 |\ | | 2. 设为必填：若设为必填项，用户提交时没有填写会弹出错误提示 |\ | | 3. 限制字符长度：开启后，可以设置输入的字符数上限/下限、不符条件时的错误提示。如果填写的内容超出这个范围，输入框失去焦点会弹出错误提示（4类：无提示、Toast、图片、弹窗） |\ | | 4. 内容格式：默认不限格式，支持设置为「中国手机号」、「邮箱」，手机号格式为11位数字，邮箱格式为xxx@xxx.xxx，输入的内容不符要求时，输入框失去焦点会弹出错误提示（4类：无提示、Toast、图片、弹窗） | | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/a7243a3dd2c14a0eb07c2a2653a22805~tplv-goo7wpa0wc-image.image =1716x) |选中标题可以修改位置大小、文本样式。 |\ | | | | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/d1a8859597a34e5ca299432af40e14af~tplv-goo7wpa0wc-image.image =1710x) |选中输入框可以修改位置大小、文本样式。 | ##### （5）单项选择组件 * 设置选项供用户点击一项选择，选择数据可回收至后台。 | | | \ |示意图 |详细说明 | |---|---| | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/a5a6ef1482da4fcd9528744f0815a066~tplv-goo7wpa0wc-image.image =1704x) |【单项选择设置】 |\ | | |\ | |1. 内容设置：支持修改表单项名称、添加选项 |\ | |2. 校验规则： |\ | | 1. 设为用户属性：开启后，用户提交的表单数据中将会把这项内容进行单独处理，用于营销平台对用户进行二次营销 |\ | | 2. 设为必填：若设为必填项，用户提交时没有选择会弹出错误提示 | | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/8fced22ba2ea47bda5932926cd1c4a73~tplv-goo7wpa0wc-image.image =1718x) |选中标题可以修改位置大小、文本样式。 | | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/873cbc6369674e169139893bf4d17b63~tplv-goo7wpa0wc-image.image =1714x) |选中选项区域可以修改位置大小、文本样式。 |\ | | | ##### （6）多项选择组件 * 设置选项供用户点击一项或多项选择，可设置最多选择几项，选择数据可回收至后台； | | | \ |示意图 |详细说明 | |---|---| | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/6832ac57ddb84e348fe01fab19cf5e39~tplv-goo7wpa0wc-image.image =1698x) |【多项选择设置】 |\ | | |\ | |1. 内容设置：支持修改表单项名称、添加选项 |\ | |2. 校验规则： |\ | | 1. 设为用户属性：开启后，用户提交的表单数据中将会把这项内容进行单独处理，用于营销平台对用户进行二次营销 |\ | | 2. 设为必填：若设为必填项，用户提交时没有选择会弹出错误提示 |\ | | 3. 限制可选数量：开启后，可以设置最多选择几项、勾选超出限制时的错误提示（4类：无提示、Toast、图片、弹窗）。 | | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/61ad35b69f6b45d4b72e447a84e566eb~tplv-goo7wpa0wc-image.image =1716x) |选中标题可以修改位置大小、文本样式。 | | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/56e1a8b6be694a988453fa4bc087cdb5~tplv-goo7wpa0wc-image.image =1702x) |选中选项区域可以修改位置大小、文本样式。 |\ | | | ##### （7）下拉列表组件 * 设置选项供用户下拉选择其中一项，选择数据可回收至后台； | | | \ |示意图 |详细说明 | |---|---| | | | \ | |\ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/3434737244d24fcf985e4c9db0f56e53~tplv-goo7wpa0wc-image.image =2036x) |\ | |【下拉列表设置】 |\ | | |\ | |1. 内容设置： |\ | | 1. 表单项名称：修改表单项名称 |\ | | 2. 添加选项：单个添加下拉选项 |\ | | 3. 批量管理：批量添加、删除下拉选项 |\ | |2. 校验规则： |\ | | 1. 设为用户属性：开启后，用户提交的表单数据中将会把这项内容进行单独处理，用于营销平台对用户进行二次营销 |\ | | 2. 设为必填：若设为必填项，用户提交时没有选择会弹出错误提示 | | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/26013da70a3d4258942bc0e58d8f59c9~tplv-goo7wpa0wc-image.image =1700x) |选中标题可以修改位置大小、文本样式。 | | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/c2e4f0f2ea7b4c0e95e602f66d976cd2~tplv-goo7wpa0wc-image.image =1694x) |选中下拉框可以修改位置大小、文本样式。 |\ | | | ##### （8）日期选择框组件 * 设置选项供用户选择日期，选择数据可回收至后台； | | | \ |示意图 |详细说明 | |---|---| | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/1073dd0fc8704acbafcb2def3ee04f33~tplv-goo7wpa0wc-image.image =2794x) |【日期选择框设置】 |\ | | |\ | |1. 内容设置： |\ | | 1. 表单项名称：修改表单项名称 |\ | | 2. 提示文案：修改选择框的提示文案 |\ | | 3. 时间格式：支持年-月-日、年-月两种格式 |\ | |2. 校验规则： |\ | | 1. 设为用户属性：开启后，用户提交的表单数据中将会把这项内容进行单独处理，用于营销平台对用户进行二次营销 |\ | | 2. 设为必填：若设为必填项，用户提交时没有选择会弹出错误提示 | | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/8dffe609dabb490c9afa6662bf6aceaa~tplv-goo7wpa0wc-image.image =2800x) |选中标题可以修改位置大小、文本样式。 | | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/321a81a16bd1462785af32672507dcea~tplv-goo7wpa0wc-image.image =2800x) |选中下拉框可以修改位置大小、文本样式。 |\ | | | ##### （9）提交按钮组件 * 用户点击按钮后可提交表单信息，收集以上所有组件的数据。使用表单组件一定要有提交按钮，否则无法收集信息在后台形成表单（注意：一个活动中只能放置一个提交按钮）； * 表单中所有组件设置必填后，除了勾选条款组件外，如果有必填项没填，在用户提交按钮时将会弹出toast提示，默认文案为“请填写完整“； * 勾选条款组件的错误提示方式和文案支持自定义； | | | \ |示意图 |详细说明 | |---|---| | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/80ea2ce797ff4e6496490fe10c15af7d~tplv-goo7wpa0wc-image.image =1706x) |【提交按钮校验规则】 |\ | | |\ | |1. 提交成功提示：提交成功的提示有六种，无提示、Toast、图片、弹窗、跳转页面、跳转URL。 |\ | | 1. Toast：提交后弹出Toast提示 |\ | | 2. 图片：提交后展示一张图片; |\ | | 3. 弹窗：弹窗内可以放各种组件，比如抽奖等，增强活动丰富性; |\ | | 4. 跳转页面：跳转到本活动的某一页（针对多页面的活动） |\ | | 5. 跳转URL：跳转到某个链接，这里和其他活动关联起来 |\ | |2. 登录后才可提交： |\ | | 1. 如果需要收集用户的id，可以把“登录后才可提交”打开； |\ | | 2. 若用户没有登录便提交，会出现错误提示。 |\ | |3. 必填项校验：开启后，如果有设置表单组件为必填项，那么用户点击提交按钮时会对必填项的填写情况进行检验，如果存在没有填写完的必填项，则会弹出错误提示。 |\ | |4. 只允许提交一次：开启后，用户无法二次提交，按钮会展示”不可提交“状态，并且再次点击时弹出错误提示。 |\ | |5. 展示用户上次填写数据：开启后，用户在进入活动页时表单将会展示上次填写的内容（注意：若使用此项功能，建议活动页面上线后，不要修改相关表单类组件的「表单项名称」，否则，在回显数据时，会展示错误信息。） | ##### （10）报名按钮组件 * 用户点击按钮后可提交表单信息，收集以上所有组件的数据。 * 与提交按钮不同的是，报名按钮可以关联玩法「提交表单任务」，用户点击报名按钮提交表单后可获得玩法机会。 | | | \ |示意图 |详细说明 | |---|---| | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/145edbb774bd4d7ba2bd226377e6a2f2~tplv-goo7wpa0wc-image.image =295x) |【内容设置】可关联玩法提交表单任务，需在玩法规则设置时添加「提交表单任务」。 | | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/526c9e74d39c49e29ed83f88a05582ca~tplv-goo7wpa0wc-image.image =295x) |【样式设置】可设置「未报名」和「已报名」的按钮样式，目前默认表单任务都只允许提交报名1次。 |\ | | | | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/de451d6d1de640b1b1e7996cf0c69871~tplv-goo7wpa0wc-image.image =622x) |\ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/8b23f6d1b0584bc58dcfad46de633ff4~tplv-goo7wpa0wc-image.image =600x) |【反馈设置】主要针对用户点击报名提交后，不同场景提示内容的配置 |\ | | |\ | |1. 报名成功提醒：用户提交数据完成时的提示内容 |\ | |2. 用户未登录： |\ | | 1. 如果需要收集用户的id，可以把“用户未登录”打开； |\ | | 2. 若用户没有登录便提交，会出现错误提示。 |\ | |3. 不在活动时间内：用户点击提交时，不在玩法活动可参与的时间范围内的提示内容 |\ | |4. 不再报名任务时间：用户点击提交时，不在报名任务可参与的时间范围内的提示内容 |\ | |5. 命中黑名单：用户在黑名单内时的提示内容 |\ | |6. 不在本次活动范围：用户点击提交时，用户不在玩法圈选的可参与范围内的提示内容 |\ | |7. 参与机会不足：用户点击提交时，用户参与玩法机会不足的提示内容 |\ | |8. 参与次数达到上限：用户点击提交时，用户参与玩法次数达到上限的提示内容 |\ | |9. 频繁点击：频繁点击时的提示内容 |\ | |10. 兜底错误提醒+错误代码：系统服务异常或网络错误等的提示内容 |\ | |11. 必填项校验：用户提交时部分必填项没有填写完整的提示内容 | ##### （11）级联选择框 * 通过多级联动的下拉菜单形式，用户依序选择具有层级关联的选项，最多支持四级，选择数据可回收至后台； | | | \ |示意图 |详细说明 | |---|---| | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/33337631188d46aeaa9e5873b8efe2bb~tplv-goo7wpa0wc-image.image =826x) |【下拉列表设置】 |\ | | |\ | |1. 内容设置： |\ | | 1. 表单项名称：修改表单项名称 |\ | | 2. 提示文案：修改选择框内的提示文案 |\ | | 3. 必须选择末级选项：默认开启，用户需选完最后一级选项，关闭后则无需选到最后一级选项 |\ | | 4. 选项设置：支持下载模板，按要求填写选项数据后批量导入 |\ | |2. 校验规则： |\ | | 1. 设为用户属性：开启后，用户提交的表单数据中将会把这项内容进行单独处理，用于营销平台对用户进行二次营销 |\ | | 2. 设为必填：若设为必填项，用户提交时没有选择会弹出错误提示 | | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/39ad481b15bd40d1be5c0f027cbf0843~tplv-goo7wpa0wc-image.image =802x) |选中标题可以修改位置大小、文本样式。 | | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/da28bbc46ad4437d82d361c3b34901f6~tplv-goo7wpa0wc-image.image =797x) |选中下拉框可以修改位置大小、文本样式。 |\ | | | #### 2.4 图表类 **（1）折线图** **功能介绍** 折线图图表形式，支持对接自有数据源，动态渲染图表数据。 **配置流程** 1. 添加「折线图」组件到页面模块中 2. 选中组件，可以在右侧面板对组件进行设置： 1. 转为组件模板：支持转为组件模板，在后续搭建活动时复用 2. 图层：支持设置堆叠或移动、组件透明度 3. 位置大小：支持设置组件的宽、高、圆角、外边距 4. 数据设置：支持设置X轴、Y轴的数据，静态数据可输入数据内容，动态数据需关联数据源 5. 渲染设置：支持设置是否显示渲染动画、数据提示、坐标轴、折线平滑，以及设置数据点符号、线条宽度、坐标轴颜色和图形颜色 6. 背景：用于设置组件背景图 7. 边框：用于设置组件边框样式

**（2）柱状图** **功能介绍** 柱状图图表形式，支持对接自有数据源，动态渲染图表数据。 **配置流程** 1. 添加「柱状图」组件到页面模块中 2. 选中组件，可以在右侧面板对组件进行设置： 1. 转为组件模板：支持转为组件模板，在后续搭建活动时复用 2. 图层：支持设置堆叠或移动、组件透明度 3. 位置大小：支持设置组件的宽、高、圆角、外边距 4. 数据设置：支持设置X轴、Y轴的数据，静态数据可输入数据内容，动态数据需关联数据源 5. 渲染设置：支持设置是否显示渲染动画、数据提示、坐标轴，以及设置柱子宽度、坐标轴颜色和图形颜色 6. 背景：用于设置组件背景图 7. 边框：用于设置组件边框样式

**（3）高级图表** **功能介绍** 柱状、折线混合图表形式，支持对接自有数据源，动态渲染图表数据 **配置流程** 1. 添加「高级图表」组件到页面模块中 2. 选中组件，可以在右侧面板对组件进行设置： 1. 转为组件模板：支持转为组件模板，在后续搭建活动时复用 2. 图层：支持设置堆叠或移动、组件透明度 3. 位置大小：支持设置组件的宽、高、圆角、外边距 4. 图表数据：，静态数据可输入数据内容，动态数据需关联数据源 5. 背景：用于设置组件背景图 6. 边框：用于设置组件边框样式

#### 2.5 容器类 ##### 1）数据列表 **功能介绍** 数据列表展示形式，支持对接自有数据源，动态渲染图表数据。 **配置流程** 1. 添加「数据列表」组件到页面模块中 2. 选中组件，可以在右侧面板对组件进行设置： 1. 转为组件模板：支持转为组件模板，在后续搭建活动时复用 2. 图层：支持设置堆叠或移动、组件透明度 3. 位置大小：支持设置组件的宽、高、圆角、外边距 4. 列表数据：关联数据源和数据源字段 3. 在组件容器内添加文本、图片等组件，选中容器内的组件，可关联动态数据源和数据来源字段。

##### （2）弹窗组件 **功能介绍** * 弹窗是一个在蒙版上的独立页面，可以在弹窗内插入文字、图片等多种组件 * 通常与其他组件的交互功能组合使用，常见于基础按钮的交互行为、抽奖结果展示、表单提交成功提示等场景

**配置流程** | | | \ |示意图 |步骤说明 | |---|---| | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/a9c5942b5e964b668ed316ed42b9e846~tplv-goo7wpa0wc-image.image =2176x) |**step1: 添加弹窗组件** | | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/da889cc02c9f481cae54de6cceacee3e~tplv-goo7wpa0wc-image.image =2190x) |\ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/111c3acd58e2424f9057efecb3ce177b~tplv-goo7wpa0wc-image.image =1708x) |**step2: 添加弹窗背景** |\ | | |\ | |1. 加入「矩形形状」组件作为弹窗背景 |\ | |2. 按需调整矩形尺寸、背景颜色等 | | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/d9c30d32cae84325b1a864f0bf76ea4c~tplv-goo7wpa0wc-image.image =2188x) |**step3: 添加弹窗内容** |\ | |选中弹窗后，将文字、图片、按钮等组件添加至弹窗容器内 | | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/899f7e2b87bb4623b09cfec7c0aaa7ad~tplv-goo7wpa0wc-image.image =2814x) |\ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/0498cf41d97d436285a04b6dfb0b52b1~tplv-goo7wpa0wc-image.image =2810x) |**step4: 设置弹窗位置和大小** |\ | | |\ | |1. 「图层」面板选中弹窗，可以设置弹窗的高度、位置、点击蒙层可关闭弹窗 |\ | |2. 关闭弹窗： |\ | | 1. 若勾选「点击蒙层可关闭」，则用户在查看弹窗时点击灰色透明蒙层可以关闭弹窗；（蒙层即弹窗以外灰色的透明部分） |\ | | 2. 若不勾选「点击蒙层可关闭」，则需要额外的按钮来关闭弹窗。 |\ | |3. 修改弹窗名称：在「图层」面板双击弹窗（如弹窗）即可修改名称 | | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/f7e446a7b4c1453dbf3a3c8106b89588~tplv-goo7wpa0wc-image.image =1738x) |\ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/9bd0cdf3590f4e459da270870cc3597c~tplv-goo7wpa0wc-image.image =1156x) |**step5: 设置打开弹窗的交互动作** |\ | |以点击按钮打开弹窗为例： |\ | | |\ | |1. 页面加入一个按钮，点击「编辑交互动作」打开弹窗设置 |\ | |2. 动作触发条件选「单击事件」，动作类型选「打开弹窗」，弹窗组件选择前面设置的弹窗 | ##### （3）滑动容器 **功能介绍** * 支持在滑动容器区域内左右、上下滑动查看内容 * 可以在容器内插入文字、图片等多种组件

**配置流程** | | | \ |示意图 |步骤说明 | |---|---| | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/9bdb5a82011d4aefba78017ba0a8adfd~tplv-goo7wpa0wc-image.image =2216x) |**step1: 添加滑动容器组件** | | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/3feacdfaa2bd4de9ba66b276c78b1b38~tplv-goo7wpa0wc-image.image =1730x) |**step2: 设置图层、位置大小** |\ | | |\ | |1. 滑动容器的显示页面默认宽度为600px，默认高度为400px |\ | |2. 可以设置滑动容器组件的大小、位置移动、透明度 | | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/ea2e476471c4450aba7b84e269ed4e90~tplv-goo7wpa0wc-image.image =2196x) |**step3: 设置滑动内容可查看宽度和滑动方向** |\ | | |\ | |* 滑动方向支持水平、垂直方向 |\ | |* 支持鼠标拖拽，可以将需要的组件拖拽到滑动容器内 |\ | |* 内容宽度要根据设计稿需求，多次调节至理想大小 | | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/347f3ffeac8a4a2588ae55ceaf7fbc26~tplv-goo7wpa0wc-image.image =2174x) |**step4: 添加容器内容** |\ | |选中滑动容器后，点击文字、图片等组件依次添加至容器内 | ##### （4）折叠面板 **组件效果** 可以通过对箭头的点击实现内容的展示和收起，折叠过程的切换会有动画效果。

**配置流程** | | | \ |示意图 |步骤说明 | |---|---| | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/3a39e7447d1942cab5525e9d687bf192~tplv-goo7wpa0wc-image.image =2180x) |**step1: 添加折叠面板组件** | | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/ad31e6a6d8314dfeb89d5947a7fbf09c~tplv-goo7wpa0wc-image.image =628x) |\ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/4456640649584abf8133db759ca4f0ab~tplv-goo7wpa0wc-image.image =610x) |**step2: 内容设置** |\ | | |\ | |1. 操作栏位置：下拉操作栏所在位置，支持设置「顶部」或「底部」 |\ | |2. 默认状态：支持设置初始默认是「展开」或「折叠」的状态 |\ | |3. 操作栏高度：支持设置操作栏的高度 |\ | |4. 操作栏背景图：支持自行上传图片作为操作栏的背景图 |\ | |5. 折叠图标：支持设置是否显示折叠图标，也可以上传图片，把原来的箭头样式替换成自己需要的箭头样式 |\ | |6. 内容面板高度：可选择「由内容撑开」或「固定高度」 |\ | | * 由内容撑开：根据内容高度自动匹配高度 |\ | | * 固定高度：可自行设置固定高度 |\ | | |\ | | |\ | |内容面板背景自行上传或默认 | | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/7533be4df03e42d486b3e8fe4a0ae90c~tplv-goo7wpa0wc-image.image =630x) |**step3: 内容面板背景** |\ | |设置内容面板区域的背景样式 | | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/43c27c923fc2460bb11ae9266e27851b~tplv-goo7wpa0wc-image.image =2200x) |**step4: 添加容器内容** |\ | |选中折叠面板后，点击文字、图片等组件依次添加至容器内 | ##### （5）导航栏组件 **组件效果** 不同块的内容全部排列，当选择不同模块内容时对应的导航栏的tab时会自动定位到该模块内容的位置。

**配置流程** | | | \ |示意图 |步骤说明 | |---|---| | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/d0b1a4c8e112432c9eb97522d43b149c~tplv-goo7wpa0wc-image.image =2194x) |**step1: 添加导航栏组件** |\ | | | | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/9e08ac112ebc48e590bf1d0fbc410df2~tplv-goo7wpa0wc-image.image =2812x) |**step2: 设置导航栏tab样式** |\ | |点击导航栏tab区域，对导航栏进行如下设置： |\ | | |\ | |1. 选项栏高度：支持调整tab栏的高度 |\ | |2. 选项个数：支持设置tab个数（2-5个） |\ | |3. 热区设置：支持自定义每个tab所占宽度比例，如下图所示 |\ | | |\ | |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/e2f0102e8bb844328d3d5a5dbea39314~tplv-goo7wpa0wc-image.image =1740x) |\ | | |\ | |4. 是否开启吸顶：开启后，tab栏就会一直显示在导航栏最上方 |\ | |5. 选项栏背景图片：支持替换tab栏的背景图片 | | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/de9cc23f31c642f793bd95f49dcf96c1~tplv-goo7wpa0wc-image.image =2812x) |**step3: 设置导航栏子容器样式** |\ | |选中导航栏子容器，可以设置容器高度和背景样式 |\ | | |\ | | | | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/7ecb9c2776c44762aa6d59ff1579bb1b~tplv-goo7wpa0wc-image.image =2812x) |**step4: 添加容器内容** |\ | | |\ | |1. 选中导航栏子容器后，点击文字、图片等组件依次添加至容器内 |\ | |2. 你可以打开结构树查看，确认自己要添加的组件添加到了你想添加的子容器中 | ##### （6）轮播容器 **组件效果** 可以手动点击箭头左右切换不同模块的内容，也支持自动轮播

**配置流程** | | | \ |示意图 |步骤说明 | |---|---| | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/ead4b4398128420b8454bab683f03a90~tplv-goo7wpa0wc-image.image =2198x) |**step1: 添加轮播容器组件** |\ | | | | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/020fe769a2fc41cdac02fd32a688e0da~tplv-goo7wpa0wc-image.image =2812x) |\ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/e4a034b289164158bfc55e7f7024a00b~tplv-goo7wpa0wc-image.image =622x) |\ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/bdd474e2e96e4e95a3c4a4c56a167616~tplv-goo7wpa0wc-image.image =600x) |\ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/fdc76f20a3f44df6a0c8138363e8b1e1~tplv-goo7wpa0wc-image.image =618x) |**step2: 设置轮播容器样式** |\ | |点击最外层的轮播容器，进行如下设置： |\ | | |\ | |1. 修改图层、位置大小 |\ | |2. 内容设置： |\ | | 1. 添加或删除轮播子容器 |\ | | 2. 默认展示：选择初始默认展示的轮播子容器 |\ | | 3. 子容器宽度：设置子容器的宽度 |\ | | 4. 自动轮播：开启后，将会自动切换不同子容器模块的内容，支持设置间隔时间 |\ | | 5. 数量指示点：开启后，将会在组件底部显示数量指示点，支持修改指示点的默认色和选中色 |\ | | 6. 切换箭头：开启后，将会在组件左右侧显示切换箭头，支持修改左箭头和右箭头的图片 |\ | | 7. 左右间距：指箭头与组件边框的水平方向距离，该数值须小于组件宽度的一半 |\ | | 8. 循环切换：开启后，将不间断顺序循环切换，即切换到最后一个子轮播容器时，再次点击右箭头将切换至第一个子轮播容器 |\ | | 9. 背景：支持修改轮播容器的背景样式 | | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/c337179c85b441c8938baeb38aace9c5~tplv-goo7wpa0wc-image.image =2814x) |**step3: 设置轮播子容器样式** |\ | |选中某个子容器，可以对它单独进行样式设置 | | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/9a8aebff7fff4f24b8d3dbecb86e0227~tplv-goo7wpa0wc-image.image =2218x) |**step4: 添加容器内容** |\ | | |\ | |1. 选中对应的轮播子容器后，点击文字、图片等组件依次添加至容器内 |\ | |2. 你可以打开结构树查看，确认自己要添加的组件添加到了你想添加的子容器中 | #### 2.6 选项卡 ##### （1）单行选项卡 **组件效果** 可以实现**不同tab（2-5个）下不同模块内容的切换**，比如： ![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/8f2b6d8944c3483f8fb040f1a4057917~tplv-goo7wpa0wc-image.image =321x) ![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/adee0b7c3e984abca01a6d99b8adb7f5~tplv-goo7wpa0wc-image.image =322x) **配置流程** | | | \ |示意图 |步骤说明 | |---|---| | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/e31bb5f30ba94c5e9fa019f1f3e53a61~tplv-goo7wpa0wc-image.image =2162x) |**step1: 添加单行选项卡组件** | | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/9d5ce23292b74af684a6882f680a4242~tplv-goo7wpa0wc-image.image =2814x) |**step2: 设置单行选项卡样式** |\ | |点击选项卡tab区域，进行如下设置： |\ | | |\ | |1. 选项栏高度：支持调整tab栏的高度 |\ | |2. 选项个数：支持设置tab个数（2-5个） |\ | |3. 可点击项：支持设置可点击的tab项 |\ | |4. 默认选中项：选择初始默认展示的tab |\ | |5. 热区设置：支持自定义每个tab所占宽度比例，如下图所示： |\ | | |\ | |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/e217af1f2543497ababc3f3b806fcde1~tplv-goo7wpa0wc-image.image =1696x) |\ | | |\ | |6. 选项栏背景图片：支持替换tab栏的背景图片 | | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/76c931cd8b4049a788ef5845f6d50e94~tplv-goo7wpa0wc-image.image =2814x) |**step3: 设置选项卡子容器样式** |\ | |选中某个子容器，可以对它单独进行样式设置 | | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/f61f4c26a91f49f9a63c4cf671f7d890~tplv-goo7wpa0wc-image.image =2224x) |**step4: 添加容器内容** |\ | | |\ | |1. 选中对应的选项卡子容器后，点击文字、图片等组件依次添加至容器内 |\ | |2. 你可以打开结构树查看，确认自己要添加的组件添加到了你想添加的子容器中 | ##### （2）探索版选项卡 **组件介绍** * 探索版选项卡最多支持添加20个选项卡，可以左右滑动查看选项 * 选项文字内容支持编辑 **配置流程** | | | \ |示意图 |步骤说明 | |---|---| | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/61276c778eb24f3baee5d8af9ce4648e~tplv-goo7wpa0wc-image.image =2162x) |**step1: 添加探索版选项卡组件** | | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/af5d8ee447074237aff1787c7d50e6af~tplv-goo7wpa0wc-image.image =2812x) |\ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/f9a1508f6a9f4baea5d1413920669b0e~tplv-goo7wpa0wc-image.image =614x) |\ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/84ed483c10ec4001a8f1f8cee650f1bf~tplv-goo7wpa0wc-image.image =612x) |\ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/3e2d9d4950044617bdb4ca4d7b74b76a~tplv-goo7wpa0wc-image.image =590x) |\ | |**step2: 设置探索版选项卡样式** |\ | |点击选项卡tab区域，进行如下设置： |\ | | |\ | |1. 外边距：这四个数值分别对应选项卡距离上、右、下、左四个边的距离 |\ | |2. 选项栏高度：支持调整tab栏的高度 |\ | |3. 选项栏背景色：设置选项栏整体的背景颜色 |\ | |4. 各选项间距：设置tab之间的距离 |\ | |5. 选项背景：支持设置各选项一致、各选项不一致 |\ | | 1. 各选项一致时： |\ | | * 只需要设计选中状态和未选中状态两张图片； |\ | | * 注意：选项卡默认宽度210px，高度84px。实际样式会根据上传的背景图片而变化。 |\ | | |\ | |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/7de72742d9c34c6c97b017d0950d8413~tplv-goo7wpa0wc-image.image =596x) |\ | | |\ | | 4. 各选项不一致时： |\ | | * 需要为每张选项卡设计选中状态和未选中状态两张图片。 |\ | | * 注意：选项卡默认宽度210px，高度84px。实际样式会根据上传的背景图片而变化。 |\ | | |\ | |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/007582561004419687dd8e1f73069cd6~tplv-goo7wpa0wc-image.image =592x) |\ | | |\ | |6. 在最下方可以添加更多选项 | | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/70b7b2658afa4318ac9275fd7d9abd1c~tplv-goo7wpa0wc-image.image =2814x) |**step3: 设置选项卡子容器样式** |\ | |选中某个子容器，可以对它单独进行样式设置 | | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/c1b524005a9f4cfc89c5026289e0309b~tplv-goo7wpa0wc-image.image =2170x) |**step4: 添加容器内容** |\ | | |\ | |1. 选中对应的选项卡子容器后，点击文字、图片等组件依次添加至容器内 |\ | |2. 你可以打开结构树查看，确认自己要添加的组件添加到了你想添加的子容器中 | **只有两个选项时，如何配置？** 在探索版选项卡的默认状态下，如果只有两个选项的情况下会靠左展示，选项卡宽度会根据上传图片自动撑开；建议设计尺寸：宽度：335px，外边距：20，选项间距：40。如果外边距和选项卡距离有所改变请自行计算宽度。计算方法：选项宽度=（750-外边距*2-选项间距）/2

##### （3）箭头选项卡 **组件效果** 可以通过对左右箭头的点击实现不同块内容之间的切换,两个tab之间的切换会有动画效果

**配置流程** | | | \ |示意图 |步骤说明 | |---|---| | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/7efeed94ae104236982093e7a6d77627~tplv-goo7wpa0wc-image.image =2162x) |**step1: 添加箭头选项卡组件** | | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/b0f42e6c733f44e393ebede20cf656c1~tplv-goo7wpa0wc-image.image =2814x) |**step2: 设置箭头选项卡样式** |\ | |点击选项卡tab区域，进行如下设置： |\ | | |\ | |1. 选项栏高度：支持调整tab栏的高度 |\ | |2. 选项个数：支持设置tab个数（2-5个） |\ | |3. 默认选中项：选择初始默认展示的tab |\ | |4. 选项栏背景图片：支持替换tab栏的背景图片 |\ | |5. 左右箭头图标：支持替换左箭头和右箭头的图片 | | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/6757feee01c24124a405234f2c05ae9e~tplv-goo7wpa0wc-image.image =2812x) |**step3: 设置选项卡子容器样式** |\ | |选中某个子容器，可以对它单独进行样式设置 | | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/1b9dfac0467241f59cb933262daec565~tplv-goo7wpa0wc-image.image =2156x) |**step4: 添加容器内容** |\ | | |\ | |1. 选中对应的选项卡子容器后，点击文字、图片等组件依次添加至容器内 |\ | |2. 你可以打开结构树查看，确认自己要添加的组件添加到了你想添加的子容器中 | #### 2.7 答题类答题类组件目前主要用于趣味答题、性格测试等**前端**页面内容，没有关联玩法规则，不会记录用户的答题数据，仅用于用户趣味引流和分享。 ##### （1）知识问答 **组件效果** 答题可以区分正确和错误，存在正确/错误提示，问题内容可以是图片或文字（该组件只有一个正确答案，答对可以增加分值）

**知识问答配置流程（以图片为例）** | | | \ |示意图 |步骤说明 | |---|---| | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/3be0dbd565eb420aa4ae8d362d2449c6~tplv-goo7wpa0wc-image.image =2184x) |**step1: 添加知识问答组件** | | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/783e78a7466444eebbe93376a67ce193~tplv-goo7wpa0wc-image.image =624x) |\ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/c09c9082241c45a88eeb6c249a12d40e~tplv-goo7wpa0wc-image.image =604x) |\ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/4d2a1378c99f49e3adf1cc7a47cbae98~tplv-goo7wpa0wc-image.image =582x) |\ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/1d67cd54fc454543a3e8aa25e84eb6f0~tplv-goo7wpa0wc-image.image =590x) |**step2: 知识问答设置** |\ | |一个问答组件对应一道题目，在不同页面添加对问答组件，可以实现答题跳转的效果。 |\ | |选中组件进行如下设置： |\ | | |\ | |1. 设置组件的图层、大小位置 |\ | |2. 选项类型：支持选择图片、文字类型的选项 |\ | |3. 本题分值：设置本题分值 |\ | |4. 翻页时间（ms）：用户选完答案之后，从一道题自动跳转下一题的时间 |\ | |5. 选中图标：用户选中答案的图标默认是一个灰色背景的图标，可以重新上传设计好的图片 |\ | |6. 选项内容：知识问答组件默认有四个选项，可以手动添加、删减选项 |\ | | 1. 选项的图片可以删除，重新上传设计好的图片 |\ | | 2. 知识问答组件支持勾选正确答案，用户只有选中正确答案，才得分 |\ | | 3. 不勾选则默认为错误答案 |\ | | 4. 可以手动增加选项，选项数量没有限制 |\ | |7. 正误反馈：用户选择正确/错误答案的反馈设置，可以选择无、Toast、图片和弹窗 |\ | |8. 支持设置背景和边框样式 | | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/50213013dde74dac99fda4a0f2249154~tplv-goo7wpa0wc-image.image =1730x) |**step3: 答题通用配置** |\ | |点击右上角图标，进入答题通用配置，设置答题后相关页面的跳转逻辑。 |\ | | |\ | |1. 跳转规则： |\ | | 1. 不记分跳转：不论用户取得多少分，答完所有题后，都跳转到指定的页面，指定多个页面时，随机跳转其中一个 |\ | | 2. 记分跳转：答完所有题后，按照用户得分的区间，指定下一个跳转的答题页面；在最后一题时，可根据不同的分数跳转至不同的答案结果页面，或者展示对应的最终分数 |\ | |2. 题目随机下发：开启后，设置下发题目数量，将会从多个题目中随机抽取n道题给用户作答 | ##### （2）测试测评 **组件效果** 答题不区分正误，每个选项有不同分值，不提供正误反馈，问题内容可以是图片或文字（该组件无标准答案，每个答案都有对应的分值）

**测试测评配置流程（以文字为例）** | | | \ |示意图 |步骤说明 | |---|---| | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/2836ccafdd214c5ea7e41bb21c6e395e~tplv-goo7wpa0wc-image.image =2166x) |**step1: 添加测试测评组件** | | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/71f57f3cf09140b88f225d0bb786fe21~tplv-goo7wpa0wc-image.image =608x) |\ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/e5b1fab65b9946b0a35c27ee4fdfaee9~tplv-goo7wpa0wc-image.image =594x) |\ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/beaa02879261482aa7f602c1a476a129~tplv-goo7wpa0wc-image.image =592x) |**step2: 测试测评设置** |\ | |一个测评组件对应一道题目，在不同页面添加对测评组件，可以实现答题跳转的效果。 |\ | |选中组件进行如下设置： |\ | | |\ | |1. 设置组件的图层、大小位置 |\ | |2. 选项类型：支持选择图片、文字类型的选项 |\ | |3. 翻页时间（ms）：用户选完答案之后，从一道题自动跳转下一题的时间 |\ | |4. 选项内容：测试测评组件默认有四个选项，可以手动添加、删减选项 |\ | | 1. 选项的对应文案可以手动编辑 |\ | | 2. 每个选项的分值需要手动输入 |\ | | 3. 每个选项不区分正误 |\ | | 4. 可以手动增加选项，选项数量没有限制 |\ | |5. 选中文字色：可以设置选中选项时的文字颜色 |\ | |6. 选中背景色：可以设置选中选项时的背景颜色 |\ | |7. 支持设置背景和边框样式 | | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/388e7744021e4f0b96ad2dec91cbfa3d~tplv-goo7wpa0wc-image.image =1716x) |**step3: 答题通用配置** |\ | |点击右上角图标，进入答题通用配置，设置答题后相关页面的跳转逻辑。 |\ | | |\ | |1. 跳转规则： |\ | | 1. 不记分跳转：不论用户取得多少分，答完所有题后，都跳转到指定的页面，指定多个页面时，随机跳转其中一个 |\ | | 2. 记分跳转：答完所有题后，按照用户得分的区间，指定下一个跳转的答题页面；在最后一题时，可根据不同的分数跳转至不同的答案结果页面，或者展示对应的最终分数 |\ | |2. 题目随机下发：开启后，设置下发题目数量，将会从多个题目中随机抽取n道题给用户作答 | ##### （3）答题得分 **组件效果** 自动根据知识问答组件、测试测评组件累计用户最终得分并展示分数。

**答题得分配置** | | | \ |示意图 |详细说明 | |---|---| | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/6e3f131a39f840189dac1096118cafdb~tplv-goo7wpa0wc-image.image =606x) |1. 可以设置基础分数，最终得分将在此基础上加总 |\ | |2. 可以选择字体、字号、字体颜色，以及加粗、下划线、斜体等样式设置 | ##### （4）重做按钮 **组件效果** 从得分页跳转测试开始页面，可以重新作答。

**重做按钮配置** | | | \ |示意图 |详细说明 | |---|---| | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/aa51576b58884e5fb9e7957c80462a04~tplv-goo7wpa0wc-image.image =606x) |1. 跳转页码：点击按钮后跳转的页面 |\ | |2. 重做按钮的样式可以手动上传设计图样 | #### 2.8 音视频 ##### （1）视频 **组件场景** 本地上传视频素材，或者利用内部服务器生成的链接承载可在当前页面播放的视频（注意：最好上传横屏视频，竖屏视频不会自适应，竖屏视频播放效果如下）。

**配置流程** | | | \ |示意图 |步骤说明 | |---|---| | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/4fd527af5baf40bb8fe2d609394d2474~tplv-goo7wpa0wc-image.image =2178x) |**step1: 添加视频组件** | | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/e0faa098604e4f4e975aa4f04b76f380~tplv-goo7wpa0wc-image.image =313x) |\ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/afbdfc2fb03942f5a948234c751fa50e~tplv-goo7wpa0wc-image.image =295x) |**step2: 视频设置** |\ | | |\ | |1. 设置视频组件的图层、位置大小 |\ | |2. 选取视频方式： |\ | | 1. 输入URL：需要手动填写视频地址URL，将链接前的【https:】删掉，保留【//】以后的链接，填入地址 |\ | | 2. 选择素材：选择上传至素材管理的视频 |\ | |3. 进入页面自动播放：开启后，打开页面时自动播放该视频内容 |\ | |4. 上传视频封面：系统不会自动抓取视频封面，不上传的话会出现魔方的兜底封面 |\ | |5. 边框：根据需求调整边框样式 |\ | | |\ | | | ##### （2）音频 **组件场景** 可点击后播放/暂停音频文件，也可隐藏按钮设置自动播放（用户对页面进行任意交互后自动播放），通常用作整个活动的背景音乐。 **配置流程** | | | \ |示意图 |步骤说明 | |---|---| | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/3870e5caad6d44b89b797a32da4451ec~tplv-goo7wpa0wc-image.image =2170x) |**step1: 添加音频组件** | | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/e8830ba73f21458dab693e92f964c9bc~tplv-goo7wpa0wc-image.image =347x) |\ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/8fb7a0aa0e724001a719917007057b6d~tplv-goo7wpa0wc-image.image =290x) |**step2: 音频设置** |\ | | |\ | |1. 设置音频组件的图层、位置大小 |\ | |2. 选取音频素材：选择上传至素材管理的音频 |\ | |3. 自动播放：开启后，用户对页面进行交互时(例如滑动页面)可自动播放音频 |\ | |4. 展示音频按钮：设置是否展示音频按钮 |\ | |5. 旋转动画：设置是否开启旋转动画（开启后播放按钮会旋转），会自动循环播放，一遍放完会重复播放第二遍，直到用户关闭页面 |\ | |6. 音频按钮样式：支持修改播放和暂停状态的按钮样式 | #### 2.9 动画效果 ##### （1）计时器 **组件效果** 用于展示距特定时间的正计时和倒计时。 | | | \ |倒计时 |正计时 | |---|---| | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/cf50c4b06d004f4fb58f047ae6d73335~tplv-goo7wpa0wc-image.image =488x) |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/ebb1473b117c442399383dbb2534894d~tplv-goo7wpa0wc-image.image =488x) | **配置流程** | | | \ |示意图 |步骤说明 | |---|---| | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/40b5ea00635c444e9c8bf88415064765~tplv-goo7wpa0wc-image.image =2172x) |**step1: 添加计时器组件** | | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/69539cda4eaa46d182bb1f14df9c0176~tplv-goo7wpa0wc-image.image =320x) |\ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/e7b29eb2837540ec910fa99e85648e46~tplv-goo7wpa0wc-image.image =313x) |\ | |**step2: 计时器设置** |\ | | |\ | |1. 设置计时器组件的图层、位置大小 |\ | |2. 计时方式：设置正计时/倒计时 |\ | |3. 截止/开始时间：对于倒计时来说，时间要设置在未来，对于正计时来说，时间要设置在过去 |\ | |4. 展示文案：默认为“计时：”，可以修改其他文案 |\ | |5. 时间展示格式：可以选择展示哪些时间格式，包括天、小时、分、秒，支持修改格式展示名称 |\ | |6. 设置背景和边框，不用的话可以不勾选 | ##### （2）跑马灯 **组件效果** 可以进行文字内容的滚动播放，比如用作弹幕、留言墙效果 | | | \ |向左滚动 |向上滚动 | |---|---| | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/c39ce558e88f4a9c86c8c7638415643d~tplv-goo7wpa0wc-image.image =488x) |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/626b5d31816f4c18a6ea43a5ffc83117~tplv-goo7wpa0wc-image.image =488x) | **配置流程** | | | \ |示意图 |步骤说明 | |---|---| | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/d96733da74b242a88477b932805dc893~tplv-goo7wpa0wc-image.image =2178x) |**step1: 添加跑马灯组件** | | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/25045c77976a46b3bcc7b5da5293fa55~tplv-goo7wpa0wc-image.image =369x) |\ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/39bbaef052cf47339a929fb9c6196ab8~tplv-goo7wpa0wc-image.image =313x) |\ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/5af9bc30f8c341bfa965b0f99c3e4ad4~tplv-goo7wpa0wc-image.image =297x) |**step2: 跑马灯设置** |\ | | |\ | |1. 设置跑马灯组件的图层、位置大小 |\ | |2. 内容设置： |\ | | 1. 添加或移除跑马灯选项 |\ | | 2. 滚动方向：向上或向左滚动 |\ | | 3. 滚动周期：即滚动一遍所需时长，单位为秒 |\ | | 4. 内容间距：不同选项之间的距离 |\ | |3. 设置选项字体、字号、文字颜色、加粗、下划线、倾斜、文字缩进，点击展开设置字间距、行间距、文字方向、删除线 |\ | |4. 设置背景和边框，不用的话可以不勾选 | ##### （3）Lottie动画 **组件效果** 在H5页面中展示动态图片，与gif图效果类似，但lottie动画的源文件格式在页面上展示会更加高清和流畅。

**配置流程** | | | \ |示意图 |步骤说明 | |---|---| | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/64d3f63d4b2545d1b250211534870424~tplv-goo7wpa0wc-image.image =2172x) |**step1: 添加Lottie动画组件** | | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/aff01addd4b746079ef1d2c5c7308657~tplv-goo7wpa0wc-image.image =347x) |\ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/dd3c56c50cea484cb5200ee6cbe9d4f7~tplv-goo7wpa0wc-image.image =341x) |**step2: Lottie动画设置** |\ | | |\ | |1. 设置动画组件的图层、位置大小 |\ | |2. 交互动作：点击「编辑交互动作」，可以设置动画区域点击后，跳转页面、打开弹窗等等动作 |\ | |3. 内容设置： |\ | | 1. 上传lottie动画文件：点击「重新上传」上传文件，支持zip的压缩文件格式，可由设计师直接从adobe等软件直接导出 |\ | | 2. 循环播放：开启后，默认自动循环播放动画，若关闭则只会播放一次 |\ | | 3. 播放完成后不显示：关闭「循环播放」后，可以开启此项，即播放一次之后隐藏动画 |\ | | 4. 点击穿透：开启后，用户点击动画区域则相当于点击动画底层的内容，例如动画底层有一个按钮，则用户点击的时候触发的是按钮 | #### 2.10 其他 ##### （1）复制文本 **组件效果** 给定一串文字，用户点击文字旁边的button能一键复制你的文字，可用于复制链接/邀请码等场景。

**配置流程** | | | \ |示意图 |步骤说明 | |---|---| | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/2c839350500b433f8a2fbc36fa8372fe~tplv-goo7wpa0wc-image.image =2162x) |**step1: 添加复制文本组件** | | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/a0432214ffe749b79f9a9262638f00a4~tplv-goo7wpa0wc-image.image =311x) |\ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/e923137f8cba407f8d596155dc984c35~tplv-goo7wpa0wc-image.image =299x) |**step2: 复制文本设置** |\ | | |\ | |1. 设置动画组件的图层、位置大小 |\ | |2. 展示文本：支持修改展示的文本内容 |\ | |3. 实际复制文本：支持修改用户实际复制的文本内容 |\ | |4. 提示信息：复制成功的反馈提示，包含Toast、图片、弹窗、无 |\ | |5. 设置背景和边框，不用的话可以不勾选 | | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/2f1ebf68a80a43c5ac4c6a70d2f2a385~tplv-goo7wpa0wc-image.image =1694x) |**step3: 复制文本文字元素设置** |\ | | |\ | |1. 设置文字的图层、位置大小 |\ | |2. 设置文本样式、背景和边框 | | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/eb807a06e1584c66bd31f9afaad4996f~tplv-goo7wpa0wc-image.image =1698x) |**step4: 复制文本按钮元素设置** |\ | | |\ | |1. 设置按钮的位置大小、可见度 |\ | |2. 修改按钮的样式，支持图片、填充的背景类型 |\ | | |\ | | | ##### （2）下拉选择跳转 **组件效果** 点击后展开预先设置的列表，用户自主选择选项后跳转到该选项对应的页面（链接）中。

**配置流程** | | | \ |示意图 |步骤说明 | |---|---| | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/902a4b1538714752974d200882b94f07~tplv-goo7wpa0wc-image.image =2178x) |**step1: 添加下拉选择跳转组件** |\ | | | | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/4fea1fc6bcdc4458949286fe541a13c0~tplv-goo7wpa0wc-image.image =291x) |\ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/a9b7b24a51de447c94bde76db1e765f3~tplv-goo7wpa0wc-image.image =314x) |\ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/13fad18eca0e4ac9bc7a3ca49b10c170~tplv-goo7wpa0wc-image.image =303x) |**step2: 下拉选择跳转设置** |\ | | |\ | |1. 设置动画组件的图层、位置大小 |\ | |2. 展示文案：可以修改下拉框展示的文案 |\ | |3. 选项内容：设置不同选项的展示文案和点击后跳转的url，链接需要是//开头 |\ | | * 比如你平时获取的链接是https://www.bytedance.com/zh/ |\ | | * 那么你在这里要填的是//www.bytedance.com/zh/ |\ | |4. 展开图标、收起图标：可以上传图片替换图标 |\ | |5. 设置背景和边框，不用的话可以不勾选 | #### 2.11 通用玩法组件 **了解前端组件与后端玩法功能的关系** 1. 前端组件、后端玩法是什么：一个活动必须配置前端组件和后端玩法。前端组件是指编辑器左侧的各种组件，用来配置活动页面上各种展示信息，如图片、文字等。 2. 后端玩法是指互动玩法规则内的各种玩法，用来控制活动逻辑，不会直观展示在活动页面上，如玩法类型、活动时间、奖励设置、黑白名单等。 ##### （1）玩法跑马灯 **组件效果** 可以进行用户中奖信息的滚动播放，与动画效果组件中的「跑马灯」不同之处在于，「玩法跑马灯」需要关联一个玩法规则。 | | | \ |横向滚动 |纵向滚动 | |---|---| | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/880c555c174e422d8ca3d46368c9d14b~tplv-goo7wpa0wc-image.image =604x) |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/693f182b8df34d7d90f7ebe119bd96e0~tplv-goo7wpa0wc-image.image =616x) | **配置流程** | | | \ |示意图 |步骤说明 | |---|---| | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/7fc7f62b24a1408393430fb26b2dc4e4~tplv-goo7wpa0wc-image.image =2180x) |**step1: 添加玩法跑马灯组件** |\ | | | | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/a433a7651d714e02b29d63b2a456b483~tplv-goo7wpa0wc-image.image =280x) |\ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/fea32303c4404bf79971cbb7cf53958c~tplv-goo7wpa0wc-image.image =291x) |\ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/8c2dcf243a0e460f9bd14a5bd351a475~tplv-goo7wpa0wc-image.image =284x) |**step2: 玩法跑马灯设置** |\ | | |\ | |1. 设置动画组件的图层、位置大小 |\ | |2. 内容设置： |\ | | 1. 玩法规则：选择关联的玩法规则，轮播数据将来源于玩法数据，例如关联抽奖玩法，轮播内容将展示中奖信息 |\ | | 2. 轮播文本：设置部分轮播文本 |\ | |3. 轮播样式：可以设置横向轮播、纵向轮播，实际中奖信息将展示用户进入界面时，最近30条中奖用户数据，循环滚动 |\ | |4. 可配文本样式：设置可配文本的字体、字号、文字颜色、加粗、下划线、倾斜、文字缩进，点击展开设置字间距、行间距、文字方向、删除线 |\ | |5. 用户及奖品信息样式：设置用户及奖品信息的文吧样式，配置内容同上 |\ | |6. 设置背景和边框，不用的话可以不勾选 | ##### （2）奖品展示点击按钮展示用户已获得的奖品，该组件可以关联一个或多个玩法，可以查看所有玩法获得的奖励。 **配置流程** | | | \ |示意图 |步骤说明 | |---|---| | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/0e784e7313f44c949fd8d3591e2aea44~tplv-goo7wpa0wc-image.image =2186x) |**step1: 添加奖品展示组件** |\ | | | | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/1d34a33b9e0646fab247d46a554401aa~tplv-goo7wpa0wc-image.image =299x) |\ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/a8cac64dcc1f4314823c54812c5aa4d0~tplv-goo7wpa0wc-image.image =284x) |\ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/a98dc590ef61424fbdbcbe725b1f124a~tplv-goo7wpa0wc-image.image =276x) |**step2: 奖品展示设置** |\ | | |\ | |1. 设置动画组件的图层、位置大小 |\ | |2. 玩法规则：选择关联的玩法规则，轮播数据将来源于玩法数据 |\ | |3. 我的奖品按钮样式：支持修改按钮样式以及显示的文本内容 |\ | |4. 设置按钮文本的字体、字号、文字颜色、加粗、下划线、倾斜、文字缩进，点击展开设置字间距、行间距、文字方向、删除线 |\ | |5. 设置背景和边框，不用的话可以不勾选 | | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/c7d202d692c3405a80adfe6adc332275~tplv-goo7wpa0wc-image.image =1738x) |**step3: 相关页配置-地址填写页** |\ | | |\ | |1. 设置地址填写页的位置大小、可见度、圆角 |\ | |2. 弹窗设置：开启后将展示勾选条款 |\ | |3. 字段设置：设置需要填写的表单字段 |\ | |4. 校验规则：设置提交成功、未勾选协议提交的反馈文案 |\ | |5. 设置背景和边框，不用的话可以不勾选 | | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/5cb7834d6f684e948c1b5d924278c980~tplv-goo7wpa0wc-image.image =1696x) |**step4: 相关页配置-兑换码详情页** |\ | | |\ | |1. 设置兑换码详情页的位置大小、可见度、圆角 |\ | |2. 设置背景和边框，不用的话可以不勾选 | | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/351292c73dc34e1e9ce953eef6d098da~tplv-goo7wpa0wc-image.image =1706x) |**step5: 相关页配置-我的奖品页** |\ | | |\ | |1. 设置我的奖品页的位置大小、可见度、圆角 |\ | |2. 设置背景和边框，不用的话可以不勾选 | #### 2.12 玩法任务组件 **任务组件功能亮点** * 任务列表组件支持结合规则批量设置规则下的任务，通过任务获得奖励。 * 提供任务列表形式，支持多个任务同一组件配置。 * 提供任务组件的多样式选择，节约配置时间。 * 任务组件支持多个玩法自由选择。例如：抽奖+任务。后续会支持：任务+兑换、任务+投票等玩法联动。（注：本章节仅介绍组件相关样式配置，具体玩法逻辑请参考“互动玩法”） ##### （1）任务列表组件

**搭建case分享** 「任务列表组件」可以关联的任务类型包括：点击任务、行为事件任务、用户分群任务、自定义任务。（无法关联分享任务、提交表单任务，分享任务有单独的「分享任务组件」，提交表单任务有「报名按钮」组件） | | | \ |示意图 |步骤说明 | |---|---| | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/c5a8226fced045ffa56477d7a58407d5~tplv-goo7wpa0wc-image.image =2166x) |**step1: 添加任务列表组件** |\ | | | | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/b5925616db19472faf6f2fee83a3ac3d~tplv-goo7wpa0wc-image.image =275x) |\ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/9f30ad1a6a0e42fb98462cd0713a5e5f~tplv-goo7wpa0wc-image.image =287x) |\ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/a7b524760011475bad417c9623e900cf~tplv-goo7wpa0wc-image.image =281x) |**step2: 任务列表组件设置** |\ | | |\ | |1. 设置任务列表组件的图层、位置大小 |\ | |2. 内容设置： |\ | | 1. 玩法规则：选择配置好的含有多个任务的玩法规则。 |\ | | 2. 选择任务&任务触发机制：选择玩法规则后，在下方选择任务并配置任务触发机制，例如选择「观看视频任务」，触发配置「跳转链接」。 |\ | |3. 样式设置：支持替换组件样式、自定义样式中的展示元素，提供两种样式 |\ | |4. 反馈：主要针对用户点击【去做任务】按钮后，不同场景提示内容的配置 |\ | | 1. 任务已完成：若当前用户已完成此任务，会出现该提示 |\ | | 2. 用户未登录： |\ | | 1. 如果需要收集用户的id，可以把“用户未登录”打开； |\ | | 2. 若用户没有登录，会出现错误提示。 |\ | | 3. 不在活动时间内：用户不在玩法活动可参与的时间范围内的提示内容 |\ | | 4. 不在任务时间：用户不在任务可参与的时间范围内的提示内容 |\ | | 5. 命中黑名单：用户在黑名单内时的提示内容 |\ | | 6. 不在本次活动范围：用户不在玩法圈选的可参与范围内的提示内容 |\ | | 7. 参与机会不足：用户参与玩法机会不足的提示内容 |\ | | 8. 参与次数达到上限：用户参与玩法次数达到上限的提示内容 |\ | | 9. 频繁点击：频繁点击时的提示内容 |\ | | 10. 兜底错误提醒+错误代码：系统服务异常或网络错误等的提示内容 |\ | |5. 设置背景和边框，不用的话可以不勾选 | | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/5837a6622bfb4cbfb572359e687057d2~tplv-goo7wpa0wc-image.image =1704x) |\ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/ec70cd8b88c34dbc9a830c34f7d8d5f9~tplv-goo7wpa0wc-image.image =1694x) |\ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/53a17d8387f14151b5e33e78eb90854b~tplv-goo7wpa0wc-image.image =1696x) |**step3: 组件内元素样式设置** |\ | |选中组件中的按钮、文本、图片等元素，可以进行元素样式设置 |\ | | | ##### （2）分享任务组件

**搭建case分享** 「分享任务组件」可以关联的任务类型包括：分享任务，添加分享任务组件可以通过分享任务获取相应的奖励。 | | | \ |示意图 |步骤说明 | |---|---| | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/2048b08455834983861403a0d47922ad~tplv-goo7wpa0wc-image.image =2194x) |**step1: 添加分享任务组件** |\ | | | | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/a2ef7b4e283747739e0777188078d00b~tplv-goo7wpa0wc-image.image =246x) |\ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/79807c910da344d9b3b7ad00c94b7023~tplv-goo7wpa0wc-image.image =248x) |\ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/d91634f63adb4807aeb64c814f505b2b~tplv-goo7wpa0wc-image.image =241x) |\ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/81b81d0f147946189ae6ae251b35d699~tplv-goo7wpa0wc-image.image =235x) |\ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/2ae5a0b3bad14ee4a333c07efa14aec8~tplv-goo7wpa0wc-image.image =230x) |\ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/35aa43d3f77d4f78bbdfb1822edaeead~tplv-goo7wpa0wc-image.image =235x) |**step2: 分享任务组件设置** |\ | | |\ | |1. 设置分享任务组件的图层、位置大小 |\ | |2. 内容设置： |\ | | 1. 玩法规则：选择含有分享任务的玩法 |\ | | 2. 选择任务：选择玩法规则后，在下方选择分享任务 |\ | |3. 分享设置： |\ | | 1. 分享内容：支持分享当前活动链接、公众号二维码、其他链接 |\ | | 2. 分享方式：支持海报/二维码、端内分享+海报兜底，详情参考「2.1基础类-分享按钮组件」 |\ | |4. 样式设置：支持替换组件样式、自定义样式中的展示元素，提供四种样式 |\ | | |\ | |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/a14b27ba4e6d42f093fe7e407c931eaf~tplv-goo7wpa0wc-image.image =1036x) |\ | | |\ | |5. 按钮状态样式设置：支持修改未完成/已完成状态的样式，建议将「未完成分享」的背景配置为亮色，将「已完成分享」的背景配置为暗色，提高用户感知。 |\ | |6. 反馈：主要针对用户点击【分享得奖励】或【去分享】按钮后，不同场景提示内容的配置 |\ | | 1. 任务已完成：若当前用户已完成此任务，会出现该提示 |\ | | 2. 用户未登录： |\ | | 1. 如果需要收集用户的id，可以把“用户未登录”打开； |\ | | 2. 若用户没有登录，会出现错误提示。 |\ | | 3. 不在活动时间内：用户不在玩法活动可参与的时间范围内的提示内容 |\ | | 4. 不在任务时间：用户不在任务可参与的时间范围内的提示内容 |\ | | 5. 命中黑名单：用户在黑名单内时的提示内容 |\ | | 6. 不在本次活动范围：用户不在玩法圈选的可参与范围内的提示内容 |\ | | 7. 参与机会不足：用户参与玩法机会不足的提示内容 |\ | | 8. 参与次数达到上限：用户参与玩法次数达到上限的提示内容 |\ | | 9. 频繁点击：频繁点击时的提示内容 |\ | | 10. 兜底错误提醒+错误代码：系统服务异常或网络错误等的提示内容 |\ | | 11. 分享中断未完成：用户未完成分享的提示内容 |\ | |7. 设置背景和边框，不用的话可以不勾选 | ##### （3）通用任务组件 **搭建case分享** 「通用任务组件」可以关联的任务类型包括：点击任务、行为事件任务、用户分群任务、自定义任务。（无法关联分享任务、提交表单任务，分享任务有单独的「分享任务组件」，提交表单任务有「报名按钮」组件） | | | \ |示意图 |步骤说明 | |---|---| | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/43ca3974a4704df6879d80b435aa4d0b~tplv-goo7wpa0wc-image.image =2182x) |**step1: 添加通用任务组件** |\ | | | | | | \ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/e745da3175704277aba1676f5d1b4d3d~tplv-goo7wpa0wc-image.image =328x) |\ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/66a5e8b047ba4e6282342e129fce5736~tplv-goo7wpa0wc-image.image =333x) |\ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/04a9c4019d8649659188a5a6d4da72ba~tplv-goo7wpa0wc-image.image =341x) |\ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/cd318c2ba42c4530853ae405cb2cfbe9~tplv-goo7wpa0wc-image.image =336x) |\ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/0cf0cb19473947c4962b91acad63bfcb~tplv-goo7wpa0wc-image.image =333x) |\ |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/5c7828ad95594658a2704c6edbe39ece~tplv-goo7wpa0wc-image.image =337x) |**step2: 通用任务组件设置** |\ | | |\ | |1. 设置通用任务组件的图层、位置大小 |\ | |2. 内容设置： |\ | | 1. 玩法规则：选择配置好的含有多个任务的玩法规则。 |\ | | 2. 选择任务&任务触发机制：选择玩法规则后，在下方选择任务并配置任务触发机制，例如选择「观看视频任务」，触发配置「跳转链接」。 |\ | |3. 样式设置：支持替换组件样式、自定义样式中的展示元素，提供两种样式 |\ | | |\ | |![Image](https://p9-arcosite.byteimg.com/tos-cn-i-goo7wpa0wc/bf920895a5d54e47b92f24f4fd67e130~tplv-goo7wpa0wc-image.image =1020x) |\ | | |\ | |4. 按钮状态样式设置：支持修改未完成/已完成状态的样式，建议将「未完成任务」的背景配置为亮色，将「已完成任务」的背景配置为暗色，提高用户感知。 |\ | |5. 反馈：主要针对用户点击【去做任务】按钮后，不同场景提示内容的配置 |\ | | 1. 任务已完成：若当前用户已完成此任务，会出现该提示 |\ | | 2. 用户未登录： |\ | | 1. 如果需要收集用户的id，可以把“用户未登录”打开； |\ | | 2. 若用户没有登录，会出现错误提示。 |\ | | 3. 不在活动时间内：用户不在玩法活动可参与的时间范围内的提示内容 |\ | | 4. 不在任务时间：用户不在任务可参与的时间范围内的提示内容 |\ | | 5. 命中黑名单：用户在黑名单内时的提示内容 |\ | | 6. 不在本次活动范围：用户不在玩法圈选的可参与范围内的提示内容 |\ | | 7. 参与机会不足：用户参与玩法机会不足的提示内容 |\ | | 8. 参与次数达到上限：用户参与玩法次数达到上限的提示内容 |\ | | 9. 频繁点击：频繁点击时的提示内容 |\ | | 10. 兜底错误提醒+错误代码：系统服务异常或网络错误等的提示内容 |\ | |6. 设置背景和边框，不用的话可以不勾选 |