菜单

弹窗配置的 UI 规范说明

神策智能运营-弹窗计划支持多种平台触达,无论您选择使用哪种平台,神策均可帮助您在各个平台适配弹窗,以确保最佳的效果。「弹窗计划」是一项强大的功能,提供 6 种不同种类的弹窗帮助您满足更多场景需求。

基础机型与图片分辨率

基础机型说明

神策智能运营-弹窗计算基准以 iPhone 7 尺寸 375x667 @1x为标准

图片分辨率(px)

此处仅对图片分辨率进行说明;关于图片展示区域的说明,可查看下一节 ‘图片类型’ 中的内容。

弹窗类型

分辨率@1x

仅图片

无限制

图片+按钮

310x280

图片+文字+按钮

310x220

背景图+文字

310x430

背景图+按钮

310x430

背景图+文字+按钮

310x430

文字+按钮

-

tips:上传图片时建议使用@2x 及以上的图片,以确保弹窗在所有机型保持最佳分辨率

弹窗适配规则说明

图片类型

以下适配规则基于 iPhone7@1x进行解释说明,上传的图片均不需配置圆角

仅图片型

弹窗展示的安全区域(310x430):

安全区域即保障弹窗于不同机型、平台触发时,始终展示完整的区域范围。

图片素材上传时,将自动换算为@1x 尺寸进行展示。


上传图片素材大于安全域尺寸,将按照图片最长边进行适配,填充安全域;图片等比缩放。可通过缩放调整图片在安全域中的展示效果。

上传图片素材小于安全区域时,标记为@1x 图,居中平铺于安全域中。

 

可以导出 PNG 进行异形弹窗设计,为保障展示效果,建议按照 310x430 的比例进行设计。

图片+文字+按钮

图片区域(固定高度):

图片素材尺寸固定,不跟随元素的增减变化而变化。

 

文本区域:

文本区域为动态计算高度。

标题不限定字数,高度限定 102 px。按照 24px/25 个字符高度限定,超过高度内滚。

内容不限定字数,高度限定 60px。按照 14px/50个字符高度限定,超过高度内滚。

 

操作区域:

操作区域为动态计算区域。

纵排 2 个按钮,高度限定 94 px(按钮高度x2 + 间距)

纵排 1 个按钮,高度限定 40 px

横排按钮按钮,高度限定 40 px

图片素材 URL:https://s1.ax1x.com/2020/07/14/UNwjOg.png

标题(居中):- 恭喜你获得 1 张券 - 

内容(居中):新用户打开神策商城 App,登陆即可领取 ;活动时间:2020年7月1日—2020年9月1日;

按钮(横排):

按钮 A:领取优惠券 

字号:16px   #FFFFFF

色值: #FF5A5A

描边: #FF5A5A


按钮 B:残忍拒绝

字号:16px   #1F2D3D

色值: #FFFFFF

描边: #D3DCE6


图片+按钮

图片区域(固定高度):

图片素材尺寸固定,不跟随元素的增减变化而变化。

 

操作区域:

操作区域为动态计算区域。

纵排 2 个按钮,高度限定 94 px(按钮高度x2 + 间距)

纵排 1 个按钮,高度限定 40 px

横排按钮按钮,高度限定 40 px

文字类型

文字+按钮

文字区域(动态高度):

标题不限定字数,高度限定 136 px,超过高度内滚。

标题不限定字数,高度限定 239 px,超过高度内滚。

背景图类型

以下适配规则基于 iPhone7@1x进行解释说明,上传的图片按需配置圆角大小

背景图+文字+按钮

背景图+文字+按钮

背景图区域:

整个弹窗区域即为背景图区域。


文本区域:

文本区域为动态计算高度。

标题不限定字数,高度限定 102 px。按照 24px/25 个字符高度限定,超过高度内滚。

内容不限定字数,高度限定 60px。按照 14px/50个字符高度限定,超过高度内滚。

 

操作区域:

操作区域为动态计算区域。

纵排 2 个按钮,高度限定 94 px(按钮高度x2 + 间距)

纵排 1 个按钮,高度限定 40 px

横排按钮按钮,高度限定 40 px

 

背景素材说明:背景图类型弹窗,背景图高度固定,元素可调整距离顶部距离以适应背景图内容展示

图片素材 URL:https://s1.ax1x.com/2020/07/14/UU9rBq.png

标题(居中):- 恭喜你获得 1 张券 - 

内容(居中):新用户打开神策商城 App,登陆即可领取;活动时间:2020年7月1日—2020年9月1日;

按钮(横排):

按钮 A:领取优惠券 

字号:16px   #FFFFFF

色值: #FF5A5A

描边: #FF5A5A


按钮 B:残忍拒绝

字号:16px   #1F2D3D

色值: #FFFFFF

描边: #D3DCE6

背景图+按钮

背景图区域:

整个弹窗区域即为背景图区域。


操作区域:

操作区域为动态计算区域。

纵排 2 个按钮,高度限定 94 px(按钮高度x2 + 间距)

纵排 1 个按钮,高度限定 40 px

横排按钮按钮,高度限定 40 px

图片素材 URL:https://s1.ax1x.com/2020/07/14/UU9RCF.png

按钮(纵排):

按钮 A:领取优惠券 

字号:16px   #FF4646 100%

色值: #FFDD4A 100%

描边: #FFDD4A 100%


按钮 B:残忍拒绝

字号:16px   #FFFFFF 100%

色值: #FFFFFF 0%

描边: #FF4646 100%

背景图+文字

背景图区域:

整个弹窗区域即为背景图区域。


操作区域:

操作区域为动态计算区域。

纵排 2 个按钮,高度限定 94 px(按钮高度x2 + 间距)

纵排 1 个按钮,高度限定 40 px

横排按钮按钮,高度限定 40 px

图片素材 URL:https://s1.ax1x.com/2020/07/14/UU9g4U.png

标题(居中):- 活动规则 - 

内容(左对齐):1. 活动时间:2020年7月1日—2020年9月1日(在活动时间内,活动资源送完则活动自动结束)2. 参与方式:新用户打开神策商城 App,登陆即可领取3. 活动规则:用户在活动期间参与活动,可通过本人参与、受邀、邀请好友三种方式参与活动,每个手机号累计最多获得领取 1 次优惠券4.同一手机号、身份证号与用户身份相关的信息,其中任意一项或者多项存在相同、相似或非真实有效等情况的,均可能被认定为同一用户,按照营销活动规则中的同一用户处理 













上一个
弹窗计划配置说明
下一个
自定义弹窗计划
最近修改: 2024-12-27