全部模板

登录注册页模板

包含 OAuth 和邮箱密码登录的完整认证页面设计

使用此模板

模板亮点

  • OAuth 登录(Google、GitHub)
  • 邮箱和密码表单
  • 登录页 + 注册页分页设计

这个模板适合做什么

登录注册页模板帮助产品和开发团队先画出用户进入产品前最关键的页面:登录、注册和创建账户。这个模板包含独立的登录页和注册页、Google/GitHub OAuth 按钮、邮箱密码字段、主操作按钮、辅助链接和条款提示。适合在真正开发 UI 或交给设计师之前,先把认证流程结构对齐。

适用场景

  • 在开发开始前规划 SaaS 产品的登录和注册体验。
  • 和产品团队比较 OAuth 优先与邮箱注册优先的不同方案。
  • 为设计评审或干系人演示快速画出低保真认证页面。
  • 记录生产环境认证表单需要的字段、辅助链接和法律文本。
  • 围绕注册阻力和新用户流失点做早期用户测试。

使用步骤

  1. 1从登录页开始,确认主要登录方式:OAuth、邮箱,或两者都支持。
  2. 2只添加当前步骤真正需要的信息字段。
  3. 3把主操作按钮放在表单附近,辅助链接视觉上保持次要。
  4. 4补充注册页或创建账户状态,让完整认证闭环可见。
  5. 5在用户预期的位置加入忘记密码、服务条款和隐私政策链接。
  6. 6检查流程阻力:每个字段都应该有明确存在理由。

简单示例

SaaS 登录注册流程

登录页:Google OAuth + GitHub OAuth + 邮箱/密码
密码字段下方放忘记密码链接
注册页:姓名、邮箱、密码、创建账户
主按钮下方放服务条款和隐私政策提示
底部链接在登录和注册之间切换

在线开始编辑

在 CodePic 中打开模板后,替换示例节点,就能很快整理成自己的学习导图。

查看示例: /templates/auth-page/examples

更多推荐模板