SaaS 产品注册页
使用场景: 设计自助注册流程的产品经理
顶部：创建账户标题 + 简短价值主张
OAuth：使用 Google 继续、使用 GitHub 继续
分隔：或使用邮箱
字段：姓名、工作邮箱、密码
主 CTA：创建账户
底部：已有账户？去登录
这样组织的原因: 把 OAuth 放在邮箱表单上方可以降低已有身份提供商用户的注册阻力，同时保留邮箱方式作为无法使用 OAuth 用户的兜底路径。
真实案例
开发者工具登录页
使用场景: 为开发者构建工具的创始人或工程师
主要 OAuth：GitHub 优先，然后是 Google
分隔线下方保留邮箱密码兜底
忘记密码链接放在密码字段下方右侧
安全提示：付费版支持 SSO 和双因素认证
这样组织的原因: 开发者产品通常优先展示 GitHub，因为它比普通社交登录更贴近工作流意图。图能在视觉细节确定前先表达这个层级。
企业 SSO 登录页
使用场景: 规划企业登录流程的 B2B 产品团队
单字段：工作邮箱
继续按钮根据组织域名识别身份
受管域名跳转到 SAML/SSO
未受管用户回退到密码登录
帮助链接：联系你的工作区管理员
这样组织的原因: 企业认证往往从邮箱域名发现开始，而不是先输入密码。用流程图表达这一点，可以避免把消费级登录模式误套到企业场景。
移动应用新手引导认证
使用场景: 规划移动端首次使用体验的 UX 设计师
欢迎页：价值主张 + 开始使用
注册页：Apple/Google 优先，邮箱方式在下方
创建账户后再进入可选资料设置
非关键字段推迟到用户激活之后
这样组织的原因: 把创建账户和资料设置拆开，可以让第一步聚焦在完成注册。线框图让团队更容易判断哪些字段必须在用户看到价值前填写。
使用技巧
- 不要过早索取不需要的信息；每多一个字段都会增加注册阻力。
- 主操作和次要操作要有明显层级，用户才知道下一步该做什么。
- 登录/注册切换链接放在卡片底部，符合用户预期。
- 在同一张图里展示 OAuth 和邮箱路径，方便工程侧一起规划后端流程。
在线开始编辑
回到模板页，直接替换成你的课程主题、章节和复习重点，就可以继续使用这套结构。
使用这个模板： /editor/new?template=auth-page
使用这个登录注册页模板