用途:注册流程是新用户创建账号的过程,通常采集姓名、邮箱和密码等最少必要信息,完成校验并引导用户进入应用。核心目标是减少摩擦:只问必要信息、提供实时校验、支持社交登录等替代注册方式以降低放弃率。
适用场景:需要账号才能使用个性化功能的 Web 应用、支持订单跟踪与心愿单的电商平台、以注册账号为功能门槛的 SaaS 产品、需要身份才能参与社区的平台、需要账单与资料信息的订阅服务。
应避免的场景:无需注册即可自由访问的内容、一次性交易可游客结账的情况、由管理员统一开通账号的内部工具,以及登录墙会把用户赶走的场景(可考虑延迟注册)。
实现流程:先确认模式与问题和约束匹配;从 references/pattern.md 的解剖与示例出发选择最小可行变体;在视觉打磨前先落实可访问性、性能与交互护栏;用测试指南验证键盘、屏幕阅读器、响应式与失败场景。
可访问性要点:所有字段与 label 关联;密码字段使用 autocomplete="new-password" 表示账号创建;用 role="alert" 与 aria-describedby 播报校验错误;密码强度用 role="progressbar" 加 aria-label 提供无障碍信息;条款链接不应导致表单数据丢失。避免只靠颜色表示强度、最后一项填完自动提交、对屏幕阅读器不可用的 CAPTCHA(可用隐形 reCAPTCHA 或 hCaptcha)。
性能目标:完整注册表单渲染小于 100ms;内联字段校验响应小于 100ms;每次按键的密码强度计算小于 16ms;注册请求小于 1500ms(立即显示加载状态);验证邮件在注册后 30 秒内发送。内联校验可防抖,例如 clearTimeout(timeout); timeout = setTimeout(validateEmail, 300); 注意该示例不可直接复制运行,需结合自有代码。
常见错误:注册时索要过多信息,应只问邮箱与密码,后续用渐进式资料补全;不做邮箱验证会带来假账号、垃圾信息与账号找回问题,应注册后立即发验证邮件、验证前给予有限访问;密码规则过于复杂会挫败用户,建议最小长度 8-12 位并配合强度提示,可考虑支持 passkey。
相关模式:账号设置、登录、社交登录。完整实现细节、示例与测试说明见 references/pattern.md,模式页面为 https://uxpatterns.dev/patterns/authentication/signup。
限制:本资料未提供具体收费、价格、平台或效果数据。