UI 设计语境 · 主题 / Forms & Conversion
表单与转化
设计从理解价值到提交、注册、购买或联系的连续路径。
Identity · 身份
- 子类型
- UI 设计语境主题
- 父级类目
- Web 界面设计
- 层级
- UI 设计语境 · 主题
What · 是什么
- 定义
- 设计从理解价值到提交、注册、购买或联系的连续路径。
Why · 为什么
- 核心问题
- 用户为什么愿意完成行动,哪里可能犹豫或流失?
- 分类目的
- 优化 CTA、表单、信任和转化摩擦。
Where · 在哪里
- 适用场景
- Home、Tool、Contact / Conversion、Pricing、Pricing & Plan Selection、Checkout Flow、Shopping Cart、Account / Profile、Password Reset、MFA / Verification、Email Verification、Contact / Lead Page、Settings Page、CRUD Management、Event Registration Flow、CTA Band、Feature & Value、Hero / Page Intro、Pricing Comparison、Tool Input、Tool Result、Social Proof、Product Comparison、通用 Web 设计框架、Button / CTA、Input、Search Field
Lifecycle · 生命周期
- 状态
- 草稿
所属 UI 领域与横向 Web 关系
关系来自本地关系表,并包含反向关联。
- Contact / ConversionContact & Conversion Page应用于
承接用户咨询、注册、预约或其他高意图行动的转化页面。
- HomeHome Page应用于
面向首次访问和回访用户的站点入口页面,解释站点价值并提供主要探索路径。
- PricingPricing Page应用于
解释方案、价格、差异和购买或联系路径的商业页面。
- ToolTool Page应用于
让用户输入信息、等待处理并获得可操作结果的工具型页面。
- CTA BandCall-to-action Band应用于
在页面中段或结尾集中呈现下一步行动的转化区块。
- Feature & ValueFeature & Value Section应用于
把产品能力、服务内容或页面价值转化为用户可理解结果的说明区块。
- Hero / Page IntroHero & Page Introduction应用于
页面开头用于确认页面主题、价值和主要行动的介绍区块。
- Pricing ComparisonPricing Comparison应用于
并列或分层展示方案、价格、限制和适用对象的商业比较区块。
- Product ComparisonProduct Comparison Section应用于
按一致维度比较产品、竞品或替代方案,并说明差异、限制、证据和适用对象的页面区块。
- Social ProofSocial Proof应用于
通过证据、案例、评价、数据、合作方或透明说明降低用户不确定性的区块。
- Tool InputTool Input应用于
工具型页面中收集用户输入、设置参数和触发处理的输入区块。
- Tool ResultTool Result应用于
工具处理完成后展示结果、解释结果并提供复制、保存、导出或继续操作的区块。
- App DownloadApp Download反向 · 应用于
引导用户下载移动应用、桌面客户端或浏览器扩展,并说明平台兼容性。
- Awards & CertificationsAwards & Certifications反向 · 应用于
展示奖项、认证、评测或资质信息,并提供来源和有效期上下文。
- Benefits GridBenefits Grid反向 · 应用于
用短标题、解释和视觉线索把功能转译成用户收益。
- Case Study TeaserCase Study Teaser反向 · 应用于
用案例摘要连接具体客户、问题、过程和结果,支持进一步阅读。
- Checkout / Order SummaryCheckout / Order Summary反向 · 应用于
总结商品、价格、地址、支付和风险信息,支持用户完成交易。
- Comparison TableComparison Table反向 · 应用于
按维度对比产品、方案、服务或决策选项,帮助用户减少记忆和来回跳转。
- Contact & SupportContact & Support反向 · 应用于
让用户提出问题、请求支持或找到合适的联系渠道。
- CTA BandCTA Band反向 · 应用于
在页面节点提供清晰的下一步行动、利益说明和低摩擦入口。
- Customer Logo CloudCustomer Logo Cloud反向 · 应用于
以客户、合作方或使用组织的标志形成快速可扫读的信任线索。
- Demo RequestDemo Request反向 · 应用于
收集最少需求并预约产品、服务或销售演示。
- Donation / FundraisingDonation / Fundraising反向 · 应用于
说明目标、进展和资金用途,并提供低摩擦的捐赠或支持入口。
- Event RegistrationEvent Registration反向 · 应用于
提供活动信息、报名字段、名额、费用和确认提醒。
- HeroHero反向 · 应用于
用一句核心承诺、支持说明和主要行动让用户快速判断页面价值。
- Integration / Partner LogosIntegration / Partner Logos反向 · 应用于
展示可连接的平台、技术伙伴或生态服务,降低兼容性和迁移疑虑。
- Lead CaptureLead Capture反向 · 应用于
收集完成转化所需的最少信息,并提供明确的价值交换和提交反馈。
- Login / AuthLogin / Auth反向 · 应用于
提供登录、注册、身份恢复或切换账户的入口与恢复路径。
- Loyalty / RewardsLoyalty / Rewards反向 · 应用于
表达积分、等级、权益和兑换路径,帮助用户理解长期价值。
- Newsletter SignupNewsletter Signup反向 · 应用于
以低承诺方式收集邮箱并持续提供内容、产品或活动更新。
- Partner DirectoryPartner Directory反向 · 应用于
按地区、能力、行业或集成方式浏览合作伙伴和服务提供方。
- Press MentionsPress Mentions反向 · 应用于
展示媒体报道、行业引用或第三方提及,补充外部可信度。
- Pricing ComparisonPricing Comparison反向 · 应用于
把方案、价格、权益、限制和选择动作放在同一比较结构中。
- Product / Plan CardsProduct / Plan Cards反向 · 应用于
用可扫描的方案或产品卡片呈现价格、权益、限制和主要动作。
- Referral / InviteReferral / Invite反向 · 应用于
说明邀请机制、奖励和状态,让用户能安全分享并追踪邀请结果。
- Review SummaryReview Summary反向 · 应用于
聚合评分、评论量、分布和代表性评论,让评价证据可比较。
- Social ProofSocial Proof反向 · 应用于
通过用户证言、评分、数量、客户标志或外部评价降低不确定性。
- Testimonial BlockTestimonial Block反向 · 应用于
以一个或多个用户/客户证言呈现具体体验、身份和可信上下文。
- Trust BadgesTrust Badges反向 · 应用于
呈现安全、认证、付款、隐私或平台资质等降低风险的标识。
- Usage MetricsUsage Metrics反向 · 应用于
用数量、比例、增长或规模指标让产品价值和使用结果可快速理解。
- Waitlist / PrelaunchWaitlist / Prelaunch反向 · 应用于
在产品或活动尚未开放时收集兴趣、说明预期并提供状态更新。
- Web 界面设计Web Interface Design属于
围绕浏览器环境组织页面架构、导航、内容、区块、组件、转化和性能的界面设计领域。
- Color AreaColor Area反向 · 应用于
在二维色彩空间中选择饱和度、明度或色调。
- Color FieldColor Field反向 · 应用于
输入或编辑颜色值的单一字段。
- Color SliderColor Slider反向 · 应用于
沿一维色带选择色相、透明度或其他颜色通道。
- Currency InputCurrency Input反向 · 应用于
输入金额并显示货币和数值格式的字段。
- Date FieldDate Field反向 · 应用于
由日期分段或单一文本组成的日期输入控件。
- Date SegmentDate Segment反向 · 应用于
日期字段中的年、月、日等可独立编辑的分段。
- Email InputEmail Input反向 · 应用于
输入并验证电子邮件地址的字段。
- File TriggerFile Trigger反向 · 应用于
触发系统文件选择器但不承担完整上传流程的控件。
- Password Visibility TogglePassword Visibility Toggle反向 · 应用于
切换密码字段可见性的单一控制。
- Quantity InputQuantity Input反向 · 应用于
输入商品或资源数量的数字字段。
- Tel InputTel Input反向 · 应用于
输入电话号码并适配地区、键盘和格式化规则的字段。
- Text FieldText Field反向 · 应用于
提供文本输入、名称、帮助和验证语义的基础字段单元。
- Time FieldTime Field反向 · 应用于
由时间分段或单一文本组成的时间输入控件。
- Time SegmentTime Segment反向 · 应用于
时间字段中的时、分、秒和周期等可独立编辑的分段。
- URL InputURL Input反向 · 应用于
输入并验证 URL 的字段。
- CascaderCascader反向 · 应用于
按层级逐步选择国家、分类、目录或其他树状选项。
- Color PickerColor Picker反向 · 应用于
把颜色区域、滑块、预览、输入和最近使用值组合起来。
- Comment ComposerComment Composer反向 · 应用于
提供评论、回复、提及、附件和提交动作的编辑器。
- Date Range CalendarDate Range Calendar反向 · 应用于
在日历视图中选择、预览和修改日期范围。
- File Drop AreaFile Drop Area反向 · 应用于
提供拖拽、选择、预览和移除文件的上传入口。
- Mention InputMention Input反向 · 应用于
在文本编辑过程中搜索并插入用户、团队或对象提及。
- Query BuilderQuery Builder反向 · 相关
用字段、运算符和值构造可保存或复用的结构化查询。
- Rich Text FieldRich Text Field反向 · 应用于
提供带格式文本、链接、列表和嵌入内容的编辑字段。
- Tag PickerTag Picker反向 · 应用于
搜索、创建和移除多个标签的字段组合。
- Time Range PickerTime Range Picker反向 · 应用于
选择开始与结束时间并处理跨日、时区和步长。
- Transfer ListTransfer List反向 · 应用于
在两个列表之间移动、搜索和排序可选对象。
- Upload QueueUpload Queue反向 · 应用于
管理多文件上传的队列、进度、错误、重试和取消。
- Account / ProfileAccount / Profile应用于
查看和管理个人资料、偏好、凭证与账户动作的页面。
- Checkout FlowCheckout Flow应用于
从购物车、地址、支付到确认的交易完成流程。
- Contact / Lead PageContact / Lead Page应用于
收集联系信息、需求和来源并完成转化的页面。
- CRUD ManagementCRUD Management应用于
围绕创建、读取、编辑、删除和批量管理对象的后台页面模式。
- Email VerificationEmail Verification应用于
确认邮箱地址并处理过期、重发和成功状态的流程。
- Event Registration FlowEvent Registration Flow应用于
从活动信息、报名、支付/确认到提醒的事件参与流程。
- MFA / VerificationMFA / Verification应用于
通过一次性密码、设备或其他因子完成身份确认的流程。
- Password ResetPassword Reset应用于
帮助用户安全找回或重设凭证的页面流程。
- Pricing & Plan SelectionPricing & Plan Selection应用于
比较方案、解释权益并引导选择或开始订阅的页面流程。
- Settings PageSettings Page应用于
按领域组织偏好、权限、账户和系统设置的管理页面。
- Shopping CartShopping Cart应用于
管理待购买商品、数量、价格、优惠和下一步结算动作的页面。
- Button / CTAButton & Call to Action应用于
触发操作、提交或导航的高优先级交互组件。
- CTA BandCall-to-action Band反向 · 属于
在页面中段或结尾集中呈现下一步行动的转化区块。
- Contact / ConversionContact & Conversion Page反向 · 属于
承接用户咨询、注册、预约或其他高意图行动的转化页面。
- Feature & ValueFeature & Value Section反向 · 属于
把产品能力、服务内容或页面价值转化为用户可理解结果的说明区块。
- FormForm反向 · 属于
组织多个输入、校验、提交和结果反馈的任务组件。
- Hero / Page IntroHero & Page Introduction反向 · 属于
页面开头用于确认页面主题、价值和主要行动的介绍区块。
- HomeHome Page反向 · 属于
面向首次访问和回访用户的站点入口页面,解释站点价值并提供主要探索路径。
- InputInput应用于
收集单项文本、数值或格式化信息的基础表单控件。
- Plan CardPlan Card反向 · 属于
呈现一个定价方案、适用对象、价格、限制和行动的比较组件。
- Pricing ComparisonPricing Comparison反向 · 属于
并列或分层展示方案、价格、限制和适用对象的商业比较区块。
- PricingPricing Page反向 · 属于
解释方案、价格、差异和购买或联系路径的商业页面。
- Search FieldSearch Field应用于
让用户输入查询词并触发内容或数据检索的专用输入组件。
- TestimonialTestimonial反向 · 属于
呈现用户评价、身份和上下文的信任证明组件。
- Tool InputTool Input反向 · 属于
工具型页面中收集用户输入、设置参数和触发处理的输入区块。
- ToolTool Page反向 · 属于
让用户输入信息、等待处理并获得可操作结果的工具型页面。
- Tool ResultTool Result反向 · 属于
工具处理完成后展示结果、解释结果并提供复制、保存、导出或继续操作的区块。
- Trust / ProofTrust & Proof反向 · 属于
通过证据、案例、评价、数据、合作方或透明说明降低用户不确定性的区块。
- 通用 Web 设计框架Universal Web Design应用于
一个不绑定真实网站的 Web 界面知识框架,用页面、区块、组件、模式和原则描述 Web 设计对象之间的关系。