新手入门

1.1 活动上线流程

（1）前期准备

  前期准备阶段：负责该活动的运营同学和设计同学参与策划、设计活动形式及产出图片素材。
  活动营销平台：承载了在活动页面搭建、功能实现及上线部分的工作。

（2）各阶段核心 Todo

1.2 平台功能简介

模块	截图	实现的功能
我的活动		·点击「快速开始-创建新的活动」或「我的活动-新建活动」，用户可以快速创建新的活动； ·在「我的活动」标签下，用户可以浏览、编辑过往创建的活动；
互动玩法		·点击「互动玩法」可以创建对应的玩法规则，目前提供「抽奖」「兑换」「投票」「领奖」四个玩法规则的创建； ·具体创建方式可见后文「六、互动玩法」；
我的收藏		·点击可查看收藏过的案例，并且支持通过输入活动名称/ID进行案例搜索，还可以通过包含组件、活动状态、创建时间等方式进行筛选；
案例中心		·查看所有活动；
模板管理		·将高复用性的活动页面沉淀为运营平台的活动模板，业务搭建同学可以直接选择合适的模板修改文案配色，或选择合适的模板框架与设计师提换肤需求；
素材管理		·将高复用性的图片素材沉淀为运营平台的活动素材，在搭建活动时业务同学可以直接选择合适的素材使用，减少设计资源的重复投入；
活动数据		·通过输入活动ID/名称进行活动数据查看；
应用管理		·点击添加「微信公众号」/「手机APP」，即可对相关应用进行管理；

1.3活动创建流程

Step1：新建活动

• 进入【我的活动】，点击新建活动，选择活动类型、目标投放应用并进行活动命名

• 活动类型：

微信活动和手机APP活动需在【系统管理-应用管理】中配置企业内部应用后才可创建， 抖音****活动无需进行应用授权即可创建。详情查看

若需要创建多渠道活动，且每个渠道用户都可以参与完整的活动流程，则需要分开创建不同渠道的活动页面。若活动投放在1个渠道，其他渠道仅做引流，则只需要创建投放渠道的活动，并将该渠道链接配置在其他引流渠道即可

• 活动设置的其他字段含义：

  • 活动名称：根据活动进行自定义，会展示在用户浏览时的页面名称，以及页面分享标题

  • 活动标签：给不同活动打内容标签，便于活动的管理

  • 所属资源组：用于设置不同用户角色的资源组权限，支持自定义资源组，或者按企业部门组织来管理各部门的活动权限

  • 协作人：除了部门/资源组的权限之外，可单独添加某个用户作为活动协作人，添加后该用户也有权限管理这个活动

Step2：活动搭建

• 活动的搭建方式：搭积木

• 你要知道活动的搭建顺序：从背景图片到最上面的按钮，从页面头部到页面下方的搭建顺序，先搭建的元素在最下层。

• 你要准备：背景图片、按钮切图；

• 此时你需要把（设计素材要求的链接）发给你的设计同学，准备好图片素材后开始搭建。

搭背景及图片 利用图片组件来搭建，注意先搭建的元素在最下层。（如果你的背景图片是切过的，那么你要把这些图都拼起来）

如果新上传的图片需要叠加在之前的背景图上，可以选中新图片，在右侧图片参数栏点击“移动”，将图片移动到所需位置上即可。（默认选项为“堆叠”）。

  搭按钮

• 交互都是按钮来承载的，比如跳转其他页面，打开弹窗等等。

• 给按钮配置事件，即想要交互、跳转的内容。

玩法搭建
  如果您在搭建活动中使用到「任务类」「抽奖类」「答题类」「兑换类」「投票类」「助力类」等组件，请进行玩法后端规则配置，并将后端规则与组件关联，更多详情可参考对应组件教程

step3：保存并发布活动

活动界面配置好之后，需要以下几个步骤：保存、预览-编辑分享设置、发布、检测、成功上线。

• 保存：

• 预览-编辑分享设置：

分享设置在预览页面，可对分享内容进行配置，预览界面的链接为测试链接，不能直接投放上线！！！分享图片上传尺寸需要为1：1，不然会被压缩

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

• 检测： 为了确保页面稳定性，建议开展准入检测。

  以上操作完成，一个活动便搭建好啦！

注意：请运营同学至少「提前一天搭建好」活动页面并「充分自测」，防止活动因紧急上线而没有足够的预留时间去调试和修复。千万不要将搭建留到临近再去做！！！

1.4 活动设计规范

（1）H5背景图设计规范

宽度

• 宽为750px(如果大于这个尺寸，魔方会自动压缩成750宽，可能会变形)

• 如果你没注意到我们的要求，设计图宽度是1125px，即三倍图，那么可以在这里调整成三倍，魔方会自动帮你在画布上适配图片

1125px宽的图和750px宽的图活动完成的清晰度都是一样的，魔方会统一尺寸，因此1125px宽的图并不会比750px宽的要更清晰，同时你按设计稿调整组件位置时可能还会涉及到换算。所以，为了方便搭建，我们建议同学直接要求设计出750px宽的设计稿噢~

• H5默认的场景为手机，所以页面在电脑上可能会变形（不同业务线情况会不同），如果你不想让他变形，请专门搭一个宽度为1920px的活动用于电脑端的投放，同样在这里切换

  高度
  高度：需要为偶数，最好为6的倍数

附：背景图添加方式
  1.设置【页面背景图】
  如果你是长图，且不想切图，并且你的活动会包含容器或者多个模块（模块的概念见这里，请直接在【页面设置】背景处设置背景图）

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

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

  3.在模块中添加【图片组件】作为背景

我们更推荐这种方式，比较灵活，而且对于简单活动来说，一个活动中有一个模块就够了

你可以直接添加图片组件，并在图片组件中上传背景图
  这种情况下你的搭建能够更灵活，不用严格按照设计图控制高度。
  但是如果是多模块活动，或者包含容器的活动，因为一个图片组件不能够跨模块存在，你需要切图。（把每个模块和容器的背景单独切出来，每个模块里添加一个图片组件放这个部分的背景图，如果是容器的话可以直接把背景图上传成组件的背景）

（2）常用组件设计规范

图片组件尺寸
  魔方图片组件现在会自适应你素材的大小，上传后不用再手动调整
  大小限制为10M以内，png和gif都是

组件内图片尺寸
  编辑器组件内更换样式配置或个性化中涉及的可以替换默认图片的图片尺寸没有具体的要求和推荐尺寸（比如按钮的背景图、选项卡的tab图、用户列表中按钮的背景等），可以根据设计稿来，大小同样在10M以内。
  📢但需要注意的是，像用户列表内这种同一个按钮，但根据状态不同按钮图片会自动更换的图的大小最好一样，比如下图中已关注、不可关注、关注这一套按钮图

分享图的尺寸
  分享图片上传尺寸需要为1：1，不然会被压缩

（3）活动页面高度

• 普通机型一屏高度为1334px

• 如果是iphoneX等较长机型，1334高的页面下面会出现留白

• 方案一：

  • 不更改短页面设计稿

  • 设置魔方页面长度为1624

  • 填充与设计稿背景图相近的背景色

• 方案二：

  • 设计稿改为1624长度

  • 建议页面的主要内容集中在1334以上的区域，因为在iPhone6等机型上超过1334长度需要下滑阅读

1.5 编辑器的使用

1、顶栏区

顶栏
编辑		保存：保存你的活动，快捷键ctrl+s； 撤销：【←】回到你的上一步操作，快捷键ctrl+z； 重做：【→】，回到你最近的一次撤销前的动作（撤销你的最近一个撤销），撤销是重做的前提，没有撤销就不能重做，快捷键ctrl+shift+z； 切图倍数：一般H5背景图宽为750px，如果你设计图宽度是1125px，即三倍图，那么可以在这里调整成三倍，平台会自动帮你在画布上适配图片； 图片保真度：越高图片越清晰；
视图		网格线：帮助你更好地齐组件、调整行间距等，后续会上线； 拖拽参考线：为你提供对齐组件的基准线，当组件图层模式为「移动」时，拖动便会自动显示； 智能吸附：拖动组件时会磁性吸附到参考线上，注意：要使用智能吸附必须打开参考线； 展示快捷键提示：选中组件，右键调起； 画布：放大画布-点击一次放大画布大小25%；缩小画布-点击一次缩小画布大小25%；缩放至100%-画布回到100%大小；
结构树		可以看到整个活动的页面、模块、组件的结构； 逻辑是同模块中的组件，在结构树上方的组件在画布上会遮挡在结构树下方的组件； 不同模块上下排列的顺序，即为在画布里上下排列的顺序； 点击左下角「+新页面」可增加新的一页；
页面调整
保存		保存你当前搭建的活动
预览
发布
分享设置更改		打开活动时顶端tab显示的名字也在这里更改，而不是在列表页更改

2、组件区

组件
组件上悬停可显示组件解释和预览

3、画布区

画布		在此处搭建你的活动

4、配置区

配置

5、图层和位置

• 堆叠： 类似搭积木的逻辑，一个积木一个积木搭上去，组件会一个个从上往下堆起来，这些组件搭起来的积木会撑起模块。通过右侧配置数值改变位置和大小；

• 移动： 可以通过右侧数值改变位置和大小，也可以通过在画布区的拖拽自由移动位置、改变大小；

当图层模式为堆叠时 通过W\H值更改按钮高度和宽度 通过更改（距离其他组件的）边距更改按钮位置		更改按钮透明度 锁定按钮横纵比例 点击展开
当图层模式为移动时 这部分内容与上面同理

6、页面和组件的复制

7、个性化页面内容（千人千面）

前置条件：已接入CDP或画像人群平台