跳到主要内容
界面图谱Interface Atlas
☰
EN
页面Page / Auth

注册页

Signup Page

别名:注册页面注册账号创建账号页面新用户注册立即注册页开户页注册表单

这是什么

把陌生访客变成账号的转化页:表单只保留起步必需的字段(邮箱 + 密码),其余信息 延后到产品内补齐;辅以第三方注册、密码强度提示和服务条款勾选。与登录页共用 布局骨架,但每一处设计都在回答"注册这件事值不值得、麻不麻烦"。

交互实验室

试一试,再决定怎么用

正在加载实验室…

✓ 适用场景

  • 需要创建新账号的转化入口
  • 产品承诺注册后即可开始使用(先试后买)
  • 需要引导式补全资料的多步 onboarding 前置

✕ 不适用场景

  • 已有账号用户的登录(勿让回访用户误入)
  • 邀请制/企业 SSO 自动开户(无需自助注册)
  • 匿名试用优先的产品(试用后再索要账号)

常见形式

居中卡片

Centered Card

与登录页一致的居中卡片,认知成本最低

分屏价值

Split Value Prop

左侧讲注册能得到什么,右侧表单

社交优先

Social-first

第三方注册置顶,一键开通

多步引导

Guided Steps

分步收集信息,边注册边 onboarding

页面结构

  1. 01

    品牌与价值主张

    说明注册能得到什么,降低注册心理门槛。

  2. 02

    注册表单

    只留邮箱与密码,其余延后到产品内补全。

  3. 03

    第三方注册

    一键注册入口,与表单按钮区分主次。

  4. 04

    服务条款

    条款勾选驱动提交按钮可用态。

  5. 05

    登录入口

    「已有账号?登录」与登录页共用布局。

实现要点

flexgridmin-height: 100vhplace-items: center

与登录页共用布局骨架,仅切换文案与字段。字段做即时校验(邮箱格式、密码强度条), autocomplete 用 new-password;服务条款复选框未勾选时提交按钮禁用。 第三方注册按钮与表单提交在视觉上区分主次;提交后进入引导式补全流程。

注册页Signup Page登录页Login Page
用户状态尚无账号的新用户已有账号的回访用户
核心目标降低门槛、完成转化快速进入系统
安全要求高——验证与防滥用中——会话与暴力破解防护

相关概念

输入框Input

用一条带边框的水平输入区收集单行文本,是表单的基本单元。 占位符提示期望格式,聚焦时高亮边框引导视线,校验失败时切换错误色 并附提示文案;可内嵌前后缀图标与清除按钮,受控管理输入值。

组件包含组件
按钮Button

用可点击的色块触发一个明确的动作,是界面中最基础的操作入口。 通过填充、描边、幽灵等视觉层级区分主次操作,按压时有即时的下沉反馈, 繁忙时进入加载态并禁用点击,防止重复提交。

组件包含组件
表单校验Form Validation

在用户填写表单的过程中或提交时检查输入合法性,并把错误就地显示在对应字段旁边。 目标是让用户在离错误最近的位置、以最小的打断成本知道"哪里错了、怎么改",而不是提交后被一整个错误页打回。

交互模式使用模式
登录页Login Page

用最小干扰让已有账号用户进入系统的门面页:核心只有身份识别表单(邮箱/密码)与一个主按钮, 辅以第三方登录、忘记密码和注册入口。页面刻意保持极简——少一个字段,转化就高一分; 所有装饰都让位于"快点进去"这一目标。

页面替代方案

参考来源

Markdown 版(给 Agent) · JSON