要打开元素库并向屏幕添加新元素，请点击左侧面板或设备预览上方的加号按钮 Plus。 元素分为以下几类：

• 基础元素（布局容器、文本、媒体、列表、徽章、勾选标记）
• 表单与测验（按钮、输入框、测验、标签页）
• 付费墙与商务（产品、试用切换、用户互动、倒计时）
• 进度指示器与加载动画

每个元素都提供多种预设——即带有占位内容或预定义交互的模板。

基础知识

布局

布局元素是用于组织内部子元素的容器。

• 垂直堆叠（Vertical Stack）：将子元素从上到下排列
• 水平堆叠（Horizontal Stack）：将子元素从左到右排列
• 分割线（Dividers，水平和垂直）：用于在视觉上分隔内容区域的线条
• 轮播（Carousel）：可滑动的容器
• 底部面板（Bottom Sheet）：从屏幕底部滑出的悬浮面板

文本

文本可以是静态内容，也可以包含变量（例如用户名）和本地化内容。

以下文本预设为标准配置。如需修改此列表，请添加或删除已保存的文本样式：

• H1
• H2
• H3
• Button Label
• Body
• Caption
• Small Label

媒体

• Icon：内置图标库中的矢量图标，可自定义大小和颜色
• Image：图片——上传本地文件或提供 URL
• Video：嵌入式视频播放器，支持最大 50MB 的文件，支持循环播放。

列表

列表元素将内容组织成行和列，以统一格式展示数据。其底层本质上是一个堆栈。

• 图标列表：每行包含一个前置图标和文字标签
• 时间轴：带有连接步骤指示器的垂直序列
• 图片列表：每行包含一个前置图片和文字
• 图标卡片：以居中图标展示内容的卡片网格
• 图片卡片：带图片的卡片网格
• 对比表格：多列表格，用于跨方案对比功能差异（例如免费版 vs 专业版）

徽标

一种小型叠加标签，用于突出显示某个元素——通常用于推广折扣或特定方案（例如”节省 5%”）。使用绝对定位将徽标叠加到其他元素上方。

勾选标记

用于可选择元素内部的选中状态指示图标。每种勾选标记预设均包含选中和未选中两种状态，会根据用户操作自动切换。

• Checkbox
• Circle
• Radiobutton
• Toggle

表单与测验

按钮

点击按钮可触发相应操作——跳转到其他页面、打开 URL 或关闭当前流程。

每个预设都只是一个起点——可以自由修改样式并分配任意操作。在 Interactions 选项卡中配置按钮的行为。

• Base：带居中文字的普通按钮
• Right Icon：右侧带图标的按钮
• With Subtitle：包含两行文字
• Pulse Animation：包含脉冲动画效果
• Purchase：触发购买操作
• Secondary Outline：用于次要操作的描边按钮
• Back：返回上一屏
• Close flow：退出当前流程
• View more plans：展示更多产品选项
• Links：底部链接

输入框

输入框允许用户输入数据。每种类型都会强制使用相应的输入方式并进行格式校验。

• 文本
• 电子邮件
• 密码
• 数字
• 手机号码
• 日期
• 时间
• 日期与时间

日期、时间以及日期与时间输入框在点击时会调出设备原生选择器（滚轮或日历）。

使用变量来处理用户输入并影响条件逻辑。

测验

测验元素提供多选项选择界面，用于调查、偏好收集和用户细分。可设置交互操作，根据用户的回答进行流程分支。

• Icon Options：带图标的单列列表
• Emoji Options：带表情符号的单列列表
• Image Options：带图片的单列列表
• Icon Grid：带图标的多列网格
• Emoji Grid：带表情符号的多列网格
• Image Grid：带照片的多列网格
• Rating：数字评分（例如 1–5）

选项卡

选项卡将页面某一区域拆分为可切换的内容面板。用户选择某个选项卡后，下方内容随之更新。常用于对产品套餐进行分组，或在月付与年付方案之间切换。

• 分段控件：带圆角边框的胶囊形切换器，选中项有包裹样式
• 按钮选项卡：独立的按钮样式选项卡
• 下划线：文字标签，选中项下方显示下划线

付费墙与商务

产品

产品元素用于展示应用内购买的详情，并处理产品选择。每种预设以不同的布局排列产品数据。将你的产品与之关联，即可用 Adapty 中的真实数据填充这些元素。

• 纵向列表：堆叠排列的产品卡片
• 横向列表：并排排列的产品卡片
• 功能轮播：带有功能清单的可滑动卡片
• 功能卡片：带有功能清单的静态卡片
• Banner 列表：带有内联徽章的紧凑行

试用切换

这是一个用于在标准价格与免费试用优惠之间切换所展示产品的开关。激活后，产品选择和元素状态会自动更新。

用户互动

预设样式的用户评分模块，有助于建立信任感并提升转化率。这些模板均为基础容器，内含占位内容。

• Review：显示星级评分、评论内容及评论者姓名
• Rating：以星形图标展示数字评分
• App Rating：大号评分数字，配有星级进度条和评论数量
• Social Proof：头像叠加展示，并显示用户总数

倒计时

显示倒计时的时、分、秒，归零为止。用它为限时优惠营造紧迫感。计时器归零时可触发相应操作——例如跳转到其他页面或隐藏折扣标签。

• Inline：紧凑型数字显示
• Inline with units：带单位标签的数字显示
• Badge：小型高亮计时器浮层
• Blocks：分别显示天、时、分、秒的独立卡片

进度

进度指示器

基于步骤的进度条，用于显示用户在多屏流程中所处的位置。适合用于用户引导序列，让用户了解还剩多少步骤。

• 线性（Linear）：单条连续进度条，随用户操作逐步填满
• 分段（Segmented）：进度条被分为若干离散段，每步对应一段
• 连接器（Connectors）：带编号的步骤标记，由短连接线相连

加载动画

用于过渡场景的动态加载指示器。当应用处理用户数据时（例如提交问卷后），可使用加载动画。

• Spinner：旋转圆形指示器
• Spinner with label：带文字标签的旋转指示器（如”Loading…”）
• Loader：水平进度条