UI 组件类型 · 复合组件 / Callout
Callout
用显著的视觉容器强调补充信息、解释或行动建议。
关键字段
Identity · 身份
- 子类型
- 复合组件
- 父级类目
- 内容与数据展示
What · 是什么
- 定义
- 用显著的视觉容器强调补充信息、解释或行动建议。
- 组成与状态
- 容器 + 子组件/部件 + 状态协调 + 操作反馈 + 错误/空状态(按需)
Why · 为什么
- 作用
- 组织子组件、管理局部状态和交互顺序,并保持组合后的语义与可访问性。
Where · 在哪里
- 适用场景
- 内容与界面语言、Default、Focused、Disabled、Loading
How · 怎么做
- 检查清单
- 是否有清晰的阅读顺序、焦点顺序和退化方案;子组件状态是否一致;长内容、错误、加载和空状态是否可用。
Lifecycle · 生命周期
- 状态
- 启用
Relation · 关联
- 相关内容
- 内容与界面语言
所属组件分类、组件部件与横向适用关系
关系来自本地关系表,并包含反向关联。
- Accessibility StatementAccessibility Statement反向 · 应用于
公开说明无障碍承诺、支持范围、已知限制和反馈渠道。
- Announcement / Site AlertAnnouncement / Site Alert反向 · 应用于
在页面顶部或关键上下文中告知维护、政策、活动或高优先级变化。
- Contact & SupportContact & Support反向 · 应用于
让用户提出问题、请求支持或找到合适的联系渠道。
- Cookie / Privacy ConsentCookie / Privacy Consent反向 · 应用于
解释 Cookie、追踪和隐私选择,并让用户能接受、拒绝或细化设置。
- Cookie Preference CenterCookie Preference Center反向 · 应用于
让用户查看、分组和修改非必要 Cookie、追踪或隐私权限。
- CTA BandCTA Band反向 · 应用于
在页面节点提供清晰的下一步行动、利益说明和低摩擦入口。
- Demo RequestDemo Request反向 · 应用于
收集最少需求并预约产品、服务或销售演示。
- Event RegistrationEvent Registration反向 · 应用于
提供活动信息、报名字段、名额、费用和确认提醒。
- FAQFAQ反向 · 应用于
回答高频疑问,减少决策、使用或转化过程中的不确定性。
- Form Success / Next StepsForm Success / Next Steps反向 · 应用于
在表单或任务提交后确认结果、解释后续处理并提供下一步入口。
- Login / AuthLogin / Auth反向 · 应用于
提供登录、注册、身份恢复或切换账户的入口与恢复路径。
- Progress / Empty / ErrorProgress / Empty / Error反向 · 应用于
在内容、任务或数据暂不可用时解释发生了什么,并提供等待、恢复或替代路径。
- Referral / InviteReferral / Invite反向 · 应用于
说明邀请机制、奖励和状态,让用户能安全分享并追踪邀请结果。
- Security & ComplianceSecurity & Compliance反向 · 应用于
解释安全、隐私、合规、数据处理和认证信息,支持高风险决策。
- Share / InviteShare / Invite反向 · 应用于
让用户把页面、结果、资源或邀请以适合目标渠道的方式分享出去。
- Status / AvailabilityStatus / Availability反向 · 应用于
表达服务、产品、库存、功能或内容当前是否可用及其限制。
- Waitlist / PrelaunchWaitlist / Prelaunch反向 · 应用于
在产品或活动尚未开放时收集兴趣、说明预期并提供状态更新。
- 内容与界面语言Content & Interface Language相关
用标签、提示、说明和错误文案帮助用户理解界面和采取行动。
- 内容与数据展示Content & Data Display属于
用于呈现文本、媒体、对象、列表、表格、指标和关系数据的组件。
- ActionAction反向 · 属于
承载解决问题或继续任务的操作
- MessageMessage反向 · 属于
提供可理解上下文的消息正文
- TitleTitle反向 · 属于
概括提示原因或结论的标题
- DefaultDefault应用于
默认状态,组件可被使用但没有额外交互反馈。
- DisabledDisabled应用于
组件暂时不可操作的状态。
- FocusedFocused应用于
键盘或其他输入方式当前定位到组件的状态。
- LoadingLoading应用于
组件正在等待异步结果的状态。