> ## Documentation Index
> Fetch the complete documentation index at: https://documentation.onesignal.com/llms.txt
> Use this file to discover all available pages before exploring further.
# 使用拖放设计应用内消息
> 使用 OneSignal 的可视化编辑器构建高转化率的应用内消息，包括块、布局、轮播图和个性化功能。
OneSignal 的拖放编辑器让您可以使用模块化块元素构建应用内消息——无需编码。如果您喜欢使用标记语言，请参见[使用 HTML 设计应用内消息](./design-your-in-app-message-with-html)。
## 前置条件
* 您已在应用中安装并初始化 OneSignal SDK。
* 您正在使用推荐的 SDK 版本以获取最新的编辑器功能：
* iOS 5.1.5+
* Android 5.1.9+
* 如果不将图片上传到 OneSignal，则您的图片应托管在快速、可公开访问的 URL 上（推荐使用 CDN），并针对移动屏幕适当调整大小。
请确保在您的应用中使用最新版本的 OneSignal SDK。
旧版本仍然可能显示消息，但会使用回退样式（例如，默认边距或默认覆盖层）。使用**预览**和**设备测试**来确认在您支持的最低 SDK 版本上的行为。
***
## 从预建模板开始
预建模板帮助您快速启动，使用专为转化设计的布局（包括权限提示）。选择一个模板，然后更新文案、颜色和操作以匹配您的品牌。
\*\*设备测试：\*\*预建设计已在 Pixel 6+、iPhone（iOS 14+）、Huawei Nova 9、Huawei P50 Foldable 和 iPad（第10代+）上进行了测试。这些模板针对竖屏方向进行了优化，可能在横屏模式下无法按预期显示。
***
## 选择消息布局
消息布局控制应用内消息在屏幕上的显示方式。
| 消息类型 | 最适合 | 行为方式 |
| ------ | -------------- | -------------- |
| **顶部** | 简洁公告和确认消息 | 从顶部滑下 |
| **中心** | 大多数营销和产品提示 | 从中心展开并部分填充屏幕 |
| **底部** | 快讯栏、同意提示 | 从底部滑上 |
| **全屏** | 引导流程、多步骤优惠、轮播图 | 展开填充整个屏幕（可选边距） |
### 使用轮播图构建多屏流程
轮播图让您创建多屏应用内体验，如引导流程、功能介绍或多步骤优惠。
1. 选择**全屏**消息类型。
2. 点击**创建轮播图**。
3. 添加最多 10 张卡片（屏幕）。
4. 使用任意块组合自定义每张卡片。
### 方向支持
应用内消息支持竖屏和横屏模式，但布局（特别是模板）可能需要调整才能在两种模式下都表现良好。
如果您预计会频繁使用横屏（平板电脑、游戏、视频应用），请在发布前测试横屏模式下的消息。宽屏布局通常需要更小的文本大小、更紧凑的间距或更少的堆叠块。
***
## 使用块和间距创建整洁布局
所有内容都位于背景块（画布）上。使用：
* 背景上的**内边距**来控制内容与消息边缘之间的间距。
* 单个块上的**外边距**来控制元素之间的间距（标题 → 图像 → 按钮）。
**保持布局一致性的快速规则**
1. 使用**内边距**控制与消息边缘的距离。
2. 使用**外边距**垂直分隔块。
3. 避免在同一侧堆叠大量内边距和外边距。
4. 优先使用居中、基于流的布局，而非紧凑/边缘对齐设计。
5. 发布前始终在多种设备尺寸上使用**预览**。
***
## 块参考
使用这些块来构建您的消息。每个块都支持样式设置，并且（在大多数情况下）支持可选的点击操作。
### 文本块
用于标题、描述、免责声明或个性化文案。
**可自定义内容**
* **响应式尺寸**：宽度/高度以百分比表示。
* **字体**：Google Fonts。
* **格式化**：粗体、斜体、下划线。
* **颜色**：十六进制或 RGBA（支持透明度）。
* **对齐**：左对齐、居中、右对齐。
* **尺寸**：可调节的字体大小。
**高级选项**
* **外边距**：块周围的空间。
**提示**
* 使用基于语言的分段或[使用 Liquid 语法](./using-liquid-syntax)进行本地化。
* 使用[数据标签](./message-personalization)进行个性化。
### 图像块
使用图像来强调优惠、展示功能或添加品牌元素。
**支持的格式和限制**
* `.jpg`、`.png`、`.gif`
* 最大文件大小：5MB
**提示和建议**
* 使用常见的宽高比，如 `16:9`、`4:3` 或 `3:2`。
* 您可以使用服务器托管的路径动态替换链接和图像 URL。参见[动态 URL](./links#dynamic-urls)。
* 示例：`https://example.com/images/{{ tag_key }}.png`
**可自定义内容**
* **图像 URL**：推荐使用托管 URL 以获得更好的性能。
* **点击操作**：可选（链接、深度链接、标签、结果、提示）。
**高级选项**
* **点击时关闭**
* **外边距**：块周围的空间。
如果图像 URL 加载缓慢、被阻止或返回错误，您的消息可能会显示损坏或空白的媒体内容。请将图像托管在可靠的 CDN 上，并验证它们在移动网络上能快速加载。
### 按钮块
使用按钮来驱动主要操作，如导航、收集反馈或权限提示。
**可自定义内容**
* 按钮文本和字体样式
* 背景颜色、尺寸和圆角半径
* 可选图标/图像
* 点击操作（标记、结果、提示、深度链接）
**高级选项**
* 点击时关闭
* 外边距
* 边框和阴影
**提示**
* 使用标签个性化按钮文本或目标链接。
* 通过将背景不透明度设置为 0 来制作纯图像按钮。
* 使用微妙的阴影（低不透明度，高模糊）来突出主要 CTA。
### 关闭按钮块
关闭按钮控制用户是否可以使用"X"图标关闭消息。
**可自定义内容**
* 启用/禁用可见性
* 自定义图标（`.jpg`、`.png`、`.svg`、`.gif`）
* 推荐尺寸：`10x10px`
* 可选点击操作
**高级选项**
* 外边距
如果您禁用了关闭按钮，请确保用户仍有明确的退出方式（例如，按钮或背景上的**关闭操作**，或者如果您的体验使用了关闭计时器）。否则，您可能会将用户困在消息中。
### 背景块
背景是承载您布局的画布。
**可自定义内容**
* 背景颜色（支持 RGBA）
* 背景图像（`.jpg`、`.png`、`.gif`）
* 可选点击操作
**高级选项**
* 内边距（默认 `24px`）
* 点击时关闭
***
## 个性化和本地化
您可以使用[数据标签](./add-user-data-tags)个性化应用内消息，包括文本、按钮标签和 URL。
有关本地化，请参见[多语言消息](./multi-language-messaging#send-messages-in-different-languages)。
一个好的个性化测试方法是将消息发送到一个具有已知标签值的小型内部分段，并确认：
* 文本和图像以预期的替换内容呈现
* 链接正确解析
* 按钮触发预期的点击结果/标签
***
## 常见问题
### 如何移除顶部/底部横幅应用内消息的灰色覆盖层或投影？
是的——更新您的 SDK 并添加以下配置。
**iOS 5.1.5+**
```xml iOS Info.plist theme={null}
OneSignal_in_app_message_hide_drop_shadow
OneSignal_in_app_message_hide_gray_overlay
```
**Android 5.1.9+**
```xml Android Manifest.xml theme={null}
```
***
## 后续步骤
* 了解[应用内点击操作](./iam-click-actions)，自定义用户点击消息中元素时的行为。
* 尝试不同的[应用内消息触发器](./iam-triggers)来控制消息出现的时机。
* 需要更多自定义？尝试[使用 HTML 设计应用内消息](./design-your-in-app-message-with-html)。
***