---
title: "流程（Beta）"
description: "可视化无代码编辑工具，用于构建交互式流程。无需发布应用版本即可更新文案、设计和定价。"
---

:::important
流程目前仅支持 iOS SDK v.4 及以上版本。其他平台和框架的支持即将推出。
:::
<CustomDocCardList ids={['builder-ui', 'flow-builder-recipes', 'builder-navigation-actions']} />

在 Adapty 中，你可以在可视化无代码编辑器中创建流程。

- **创建付费墙、用户引导等内容**：创建动态的单屏或多屏流程。
- **灵活设计**：以可视化方式还原复杂界面，无需编写任何代码。
- **原生渲染**：Adapty SDK 以原生方式渲染流程，无需 Web 视图，确保流畅的用户体验。
- **无需重新发布即可更新**：随时修改文案、设计或逻辑，更新无需发布新版本即可触达用户。

## 你可以构建什么 \{#what-you-can-build\}

你可以在应用的任何位置放置流程——首次启动时、高级功能入口前，或某个关键操作完成后。每个页面都可以完全自定义，让每个流程都契合当下的使用场景。以下是一些最常见的用例：
- **应用用户引导**：展示应用功能、提出问题，并根据测验答案个性化突出显示的功能和 CTA。请参阅[构建个性化用户引导流程](onboarding-flow-tutorial)。
- **付费墙页面**：在高级内容前设置功能门槛，并通过功能列表、定价信息和购买按钮展示您的产品。请参阅[创建基础付费墙页面](basic-paywall-screen)。
- **标签页中的分层套餐**：在标签页中并排显示订阅层级，并在用户切换时动态切换功能列表和 CTA 的条件文本。请参阅[创建带标签页的付费墙](paywall-with-tabs)和[为付费墙添加条件文本](paywall-features-per-product)。
- **可展开的套餐列表**：先突出展示一个推荐优惠，在用户想要比较时通过底部弹出层展示完整产品列表。请参阅[在底部弹出层中显示所有套餐](show-plans-bottom-sheet)。
- **问卷与测验**：收集用户目标、偏好或经验水平，然后根据答案进行流程分支或定制后续页面。请参阅[流程编辑工具中的输入与表单](builder-inputs-and-forms)。
- **社会认同**：在购买决策前，通过评价卡片、评分和用户好评建立信任感。请参阅[评价与推荐](builder-reviews-and-testimonials)。
- **促销与赢回页面**：运行限时折扣、免费试用优惠或赢回优惠页面，重新吸引流失用户。
这些只是最常见的几种模式。流程由灵活、可复用的元素构建而成，几乎可以组合出产品所需的任何页面——并且随着产品的演进随时调整。
## 创建流程 \{#create-a-flow\}

打开 **Flows** 页面，点击 **Create flow**。使用以下工具自定义你的流程：
- **[元素库](builder-elements)** — 预置的文本、媒体、按钮、表单及其他内容模块。
- **[操作](onboarding-actions)** — 在屏幕间跳转、打开 URL、执行购买等。
- **[变量](onboarding-variables)** — 在文本中使用变量值，或实现基于触发器的流程逻辑。
- **[条件导航](onboarding-navigation-branching)** — 根据用户输入分支流程。
- **[测验与输入](builder-inputs-and-forms)** — 收集并处理用户输入。
- **[深色模式](paywall-dark-mode)** — 为元素设置与设备主题匹配的样式。
- **[本地化](add-paywall-locale-in-adapty-paywall-builder)** — 支持手动或 AI 辅助。
[保存并发布](builder-save-publish)草稿，然后将其关联到某个[版位](create-placement)。一个版位可以为不同的[目标受众](add-audience-paywall-ab-test)提供不同的流程。

参考以下快速入门视频，创建一个基础的个性化流程：
<div style={{
    maxWidth: '560px',
    margin: '0 auto 2rem',
    position: 'relative',
    aspectRatio: '16/9',
    width: '100%'
}}>
    <iframe
        style={{
            position: 'absolute',
            top: 0,
            left: 0,
            width: '100%',
            height: '100%'
        }}
        src="https://www.youtube.com/embed/aa-m459VIuY?si=zN_Co6B6qB88UPZP"
        title="YouTube video player"
        frameBorder="0"
        allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
        referrerPolicy="strict-origin-when-cross-origin"
        allowFullScreen
    />
</div>
## 后续步骤 \{#next-steps\}

<CustomDocCardList />