ui topic / 表单与转化
Forms & Conversion
设计从理解价值到提交、注册、购买或联系的连续路径。
Identity
- Subtype
- UI 设计语境主题
- Parent Taxonomy
- Web Interface Design
- Hierarchy Level
- UI 设计语境 · 主题
What
- Definition
- 设计从理解价值到提交、注册、购买或联系的连续路径。
Why
- Core Question
- 用户为什么愿意完成行动,哪里可能犹豫或流失?
- Classification Purpose
- 优化 CTA、表单、信任和转化摩擦。
Where
- Applicable Context
- Home Page, Tool Page, Contact & Conversion Page, Pricing Page, 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, Call-to-action Band, Feature & Value Section, Hero & Page Introduction, Pricing Comparison, Tool Input, Tool Result, Social Proof, Product Comparison Section, Universal Web Design, Button & Call to Action, Input, Search Field
Lifecycle
- Status
- 草稿
Related content
Relationships come from the local knowledge graph and include reverse links.
- Contact & Conversion PageContact / ConversionRelated
承接用户咨询、注册、预约或其他高意图行动的转化页面。
- Home PageHomeRelated
面向首次访问和回访用户的站点入口页面,解释站点价值并提供主要探索路径。
- Pricing PagePricingRelated
解释方案、价格、差异和购买或联系路径的商业页面。
- Tool PageToolRelated
让用户输入信息、等待处理并获得可操作结果的工具型页面。
- Call-to-action BandCTA BandRelated
在页面中段或结尾集中呈现下一步行动的转化区块。
- Feature & Value SectionFeature & ValueRelated
把产品能力、服务内容或页面价值转化为用户可理解结果的说明区块。
- Hero & Page IntroductionHero / Page IntroRelated
页面开头用于确认页面主题、价值和主要行动的介绍区块。
- Pricing ComparisonPricing ComparisonRelated
并列或分层展示方案、价格、限制和适用对象的商业比较区块。
- Product Comparison SectionProduct ComparisonRelated
按一致维度比较产品、竞品或替代方案,并说明差异、限制、证据和适用对象的页面区块。
- Social ProofSocial ProofRelated
通过证据、案例、评价、数据、合作方或透明说明降低用户不确定性的区块。
- Tool InputTool InputRelated
工具型页面中收集用户输入、设置参数和触发处理的输入区块。
- Tool ResultTool ResultRelated
工具处理完成后展示结果、解释结果并提供复制、保存、导出或继续操作的区块。
- App DownloadApp DownloadReverse · Related
引导用户下载移动应用、桌面客户端或浏览器扩展,并说明平台兼容性。
- Awards & CertificationsAwards & CertificationsReverse · Related
展示奖项、认证、评测或资质信息,并提供来源和有效期上下文。
- Benefits GridBenefits GridReverse · Related
用短标题、解释和视觉线索把功能转译成用户收益。
- Case Study TeaserCase Study TeaserReverse · Related
用案例摘要连接具体客户、问题、过程和结果,支持进一步阅读。
- Checkout / Order SummaryCheckout / Order SummaryReverse · Related
总结商品、价格、地址、支付和风险信息,支持用户完成交易。
- Comparison TableComparison TableReverse · Related
按维度对比产品、方案、服务或决策选项,帮助用户减少记忆和来回跳转。
- Contact & SupportContact & SupportReverse · Related
让用户提出问题、请求支持或找到合适的联系渠道。
- CTA BandCTA BandReverse · Related
在页面节点提供清晰的下一步行动、利益说明和低摩擦入口。
- Customer Logo CloudCustomer Logo CloudReverse · Related
以客户、合作方或使用组织的标志形成快速可扫读的信任线索。
- Demo RequestDemo RequestReverse · Related
收集最少需求并预约产品、服务或销售演示。
- Donation / FundraisingDonation / FundraisingReverse · Related
说明目标、进展和资金用途,并提供低摩擦的捐赠或支持入口。
- Event RegistrationEvent RegistrationReverse · Related
提供活动信息、报名字段、名额、费用和确认提醒。
- HeroHeroReverse · Related
用一句核心承诺、支持说明和主要行动让用户快速判断页面价值。
- Integration / Partner LogosIntegration / Partner LogosReverse · Related
展示可连接的平台、技术伙伴或生态服务,降低兼容性和迁移疑虑。
- Lead CaptureLead CaptureReverse · Related
收集完成转化所需的最少信息,并提供明确的价值交换和提交反馈。
- Login / AuthLogin / AuthReverse · Related
提供登录、注册、身份恢复或切换账户的入口与恢复路径。
- Loyalty / RewardsLoyalty / RewardsReverse · Related
表达积分、等级、权益和兑换路径,帮助用户理解长期价值。
- Newsletter SignupNewsletter SignupReverse · Related
以低承诺方式收集邮箱并持续提供内容、产品或活动更新。
- Partner DirectoryPartner DirectoryReverse · Related
按地区、能力、行业或集成方式浏览合作伙伴和服务提供方。
- Press MentionsPress MentionsReverse · Related
展示媒体报道、行业引用或第三方提及,补充外部可信度。
- Pricing ComparisonPricing ComparisonReverse · Related
把方案、价格、权益、限制和选择动作放在同一比较结构中。
- Product / Plan CardsProduct / Plan CardsReverse · Related
用可扫描的方案或产品卡片呈现价格、权益、限制和主要动作。
- Referral / InviteReferral / InviteReverse · Related
说明邀请机制、奖励和状态,让用户能安全分享并追踪邀请结果。
- Review SummaryReview SummaryReverse · Related
聚合评分、评论量、分布和代表性评论,让评价证据可比较。
- Social ProofSocial ProofReverse · Related
通过用户证言、评分、数量、客户标志或外部评价降低不确定性。
- Testimonial BlockTestimonial BlockReverse · Related
以一个或多个用户/客户证言呈现具体体验、身份和可信上下文。
- Trust BadgesTrust BadgesReverse · Related
呈现安全、认证、付款、隐私或平台资质等降低风险的标识。
- Usage MetricsUsage MetricsReverse · Related
用数量、比例、增长或规模指标让产品价值和使用结果可快速理解。
- Waitlist / PrelaunchWaitlist / PrelaunchReverse · Related
在产品或活动尚未开放时收集兴趣、说明预期并提供状态更新。
- Web Interface DesignWeb 界面设计Related
围绕浏览器环境组织页面架构、导航、内容、区块、组件、转化和性能的界面设计领域。
- Color AreaColor AreaReverse · Related
在二维色彩空间中选择饱和度、明度或色调。
- Color FieldColor FieldReverse · Related
输入或编辑颜色值的单一字段。
- Color SliderColor SliderReverse · Related
沿一维色带选择色相、透明度或其他颜色通道。
- Currency InputCurrency InputReverse · Related
输入金额并显示货币和数值格式的字段。
- Date FieldDate FieldReverse · Related
由日期分段或单一文本组成的日期输入控件。
- Date SegmentDate SegmentReverse · Related
日期字段中的年、月、日等可独立编辑的分段。
- Email InputEmail InputReverse · Related
输入并验证电子邮件地址的字段。
- File TriggerFile TriggerReverse · Related
触发系统文件选择器但不承担完整上传流程的控件。
- Password Visibility TogglePassword Visibility ToggleReverse · Related
切换密码字段可见性的单一控制。
- Quantity InputQuantity InputReverse · Related
输入商品或资源数量的数字字段。
- Tel InputTel InputReverse · Related
输入电话号码并适配地区、键盘和格式化规则的字段。
- Text FieldText FieldReverse · Related
提供文本输入、名称、帮助和验证语义的基础字段单元。
- Time FieldTime FieldReverse · Related
由时间分段或单一文本组成的时间输入控件。
- Time SegmentTime SegmentReverse · Related
时间字段中的时、分、秒和周期等可独立编辑的分段。
- URL InputURL InputReverse · Related
输入并验证 URL 的字段。
- CascaderCascaderReverse · Related
按层级逐步选择国家、分类、目录或其他树状选项。
- Color PickerColor PickerReverse · Related
把颜色区域、滑块、预览、输入和最近使用值组合起来。
- Comment ComposerComment ComposerReverse · Related
提供评论、回复、提及、附件和提交动作的编辑器。
- Date Range CalendarDate Range CalendarReverse · Related
在日历视图中选择、预览和修改日期范围。
- File Drop AreaFile Drop AreaReverse · Related
提供拖拽、选择、预览和移除文件的上传入口。
- Mention InputMention InputReverse · Related
在文本编辑过程中搜索并插入用户、团队或对象提及。
- Query BuilderQuery BuilderReverse · Related
用字段、运算符和值构造可保存或复用的结构化查询。
- Rich Text FieldRich Text FieldReverse · Related
提供带格式文本、链接、列表和嵌入内容的编辑字段。
- Tag PickerTag PickerReverse · Related
搜索、创建和移除多个标签的字段组合。
- Time Range PickerTime Range PickerReverse · Related
选择开始与结束时间并处理跨日、时区和步长。
- Transfer ListTransfer ListReverse · Related
在两个列表之间移动、搜索和排序可选对象。
- Upload QueueUpload QueueReverse · Related
管理多文件上传的队列、进度、错误、重试和取消。
- Account / ProfileAccount / ProfileRelated
查看和管理个人资料、偏好、凭证与账户动作的页面。
- Checkout FlowCheckout FlowRelated
从购物车、地址、支付到确认的交易完成流程。
- Contact / Lead PageContact / Lead PageRelated
收集联系信息、需求和来源并完成转化的页面。
- CRUD ManagementCRUD ManagementRelated
围绕创建、读取、编辑、删除和批量管理对象的后台页面模式。
- Email VerificationEmail VerificationRelated
确认邮箱地址并处理过期、重发和成功状态的流程。
- Event Registration FlowEvent Registration FlowRelated
从活动信息、报名、支付/确认到提醒的事件参与流程。
- MFA / VerificationMFA / VerificationRelated
通过一次性密码、设备或其他因子完成身份确认的流程。
- Password ResetPassword ResetRelated
帮助用户安全找回或重设凭证的页面流程。
- Pricing & Plan SelectionPricing & Plan SelectionRelated
比较方案、解释权益并引导选择或开始订阅的页面流程。
- Settings PageSettings PageRelated
按领域组织偏好、权限、账户和系统设置的管理页面。
- Shopping CartShopping CartRelated
管理待购买商品、数量、价格、优惠和下一步结算动作的页面。
- Button & Call to ActionButton / CTARelated
触发操作、提交或导航的高优先级交互组件。
- Call-to-action BandCTA BandReverse · Related
在页面中段或结尾集中呈现下一步行动的转化区块。
- Contact & Conversion PageContact / ConversionReverse · Related
承接用户咨询、注册、预约或其他高意图行动的转化页面。
- Feature & Value SectionFeature & ValueReverse · Related
把产品能力、服务内容或页面价值转化为用户可理解结果的说明区块。
- FormFormReverse · Related
组织多个输入、校验、提交和结果反馈的任务组件。
- Hero & Page IntroductionHero / Page IntroReverse · Related
页面开头用于确认页面主题、价值和主要行动的介绍区块。
- Home PageHomeReverse · Related
面向首次访问和回访用户的站点入口页面,解释站点价值并提供主要探索路径。
- InputInputRelated
收集单项文本、数值或格式化信息的基础表单控件。
- Plan CardPlan CardReverse · Related
呈现一个定价方案、适用对象、价格、限制和行动的比较组件。
- Pricing ComparisonPricing ComparisonReverse · Related
并列或分层展示方案、价格、限制和适用对象的商业比较区块。
- Pricing PagePricingReverse · Related
解释方案、价格、差异和购买或联系路径的商业页面。
- Search FieldSearch FieldRelated
让用户输入查询词并触发内容或数据检索的专用输入组件。
- TestimonialTestimonialReverse · Related
呈现用户评价、身份和上下文的信任证明组件。
- Tool InputTool InputReverse · Related
工具型页面中收集用户输入、设置参数和触发处理的输入区块。
- Tool PageToolReverse · Related
让用户输入信息、等待处理并获得可操作结果的工具型页面。
- Tool ResultTool ResultReverse · Related
工具处理完成后展示结果、解释结果并提供复制、保存、导出或继续操作的区块。
- Trust & ProofTrust / ProofReverse · Related
通过证据、案例、评价、数据、合作方或透明说明降低用户不确定性的区块。
- Universal Web Design通用 Web 设计框架Related
一个不绑定真实网站的 Web 界面知识框架,用页面、区块、组件、模式和原则描述 Web 设计对象之间的关系。