跳到主要内容
Termlib

布局模式 · 特定页面

登录注册页

Login / Sign-up Page

也叫：登录页、注册页、登录框、Sign In、Sign Up

用户登录或注册账号的页面，中间一张窄小的表单卡片，只保留账号、密码和提交按钮等必要元素，常配品牌插图。

点「标注」看每个部分叫什么，点「反例」看最常见的错误用法。

怎么跟 AI 说

改成你的业务内容再发

做一个登录页：左右分屏，左侧是灰色品牌插图和一句宣传语，右侧居中放宽 360px 的表单，从上到下是 Logo、标题「欢迎回来」、手机号输入框、带显示/隐藏切换的密码框、「忘记密码」链接、全宽「登录」按钮、第三方登录图标和「去注册」入口。支持回车提交，错误提示显示在输入框下方，手机上隐藏插图。

发给

01判断

你的内容是这样吗？

对照两列，确认登录注册页是不是你要找的。

符合这些情况，用登录注册页

  • 用户需要输入账号密码或验证码进入产品时
  • 注册只需要少量必填信息、一屏就能完成时
  • 希望用户专注完成登录、不被其他内容干扰时

是这些情况，换成别的

  • 注册需要填写大量资料、分几个阶段完成时

    改用分步向导

  • 已登录用户修改密码、换绑手机等账号安全操作

    改用设置页

  • 页面目标是介绍产品、说服陌生访客时

    改用落地页

拿不准？上传页面截图，页面分析会逐块判断该用什么布局。

02避坑

常见坏用法

看起来能用，其实会给用户添麻烦。

  1. 01

    注册页一上来就要求填写十几项资料

    下面的线框画的就是这种情况，红色虚线框是出问题的地方。

  2. 02

    登录失败只提示「操作失败」，不说明是账号不存在还是密码错误

  3. 03

    登录按钮点击后没有加载状态，用户连点几次造成重复提交

  4. 04

    保留全站导航和各种推荐，表单被挤在角落里

反例示意，对应第 01 条

03识别

怎么认出它

先看整体结构，再对照几个一眼能认出的特征。

结构

页面中央（或右半边）一张窄表单卡片，从上到下是 Logo 和标题、账号密码输入框、主按钮、第三方登录和注册入口；左半边可放品牌插图。

组成部分点一下，在上面的线框里标出来

识别特征

  1. 1页面正中或右半边有一张窄小的表单卡片
  2. 2只有两三个输入框和一个全宽主按钮
  3. 3旁边或背景是大面积品牌插图，页面没有其他导航

04解释

详细解释

登录注册页是用户进入产品的第一道门，常见两种排法：一种是整页浅色背景，正中间一张宽约 360~400px 的卡片；另一种是左右分屏，左边是品牌插图或宣传语，右边是表单。表单从上到下是 Logo 和标题、账号输入框、密码输入框、「忘记密码」链接、主按钮「登录」，下面是第三方登录图标和「还没有账号？去注册」。

它的原则是少打扰：不放全站导航，不放无关推荐，让用户专心完成登录。注册页字段也要尽量少，头像、昵称这类信息可以登录后再补。

细节上要注意：密码框提供显示和隐藏切换；错误提示写清原因（「密码错误」而不是「操作失败」）；登录按钮提交时显示加载状态，防止重复点击；支持按回车提交。

开发者信息
术语 ID
layout-auth
DOM 选择器

插件在本地识别时匹配这些 CSS 选择器（标签、ARIA role、常见组件库 class）。

  • form:has(input[type="password"])
  • :is(main, div, section):has(> form input[type="password"]):not(:has(nav, table))
类名关键词

类名、id、data-testid 拆成单词后连续匹配，例如 page-header、PageHeader_root__x7a、pageHeader 都拆成 page、header。

  • auth
  • login
  • signin
  • sign-in
  • signup
  • sign-up
  • register
  • auth-page
  • login-page
  • auth-layout
  • login-container
  • auth-card
  • login-box
组件名

React / Vue 开发模式下读到的组件名，不区分大小写，会去掉 El、Ant、Mui 这类组件库前缀。

  • Login
  • LoginPage
  • SignIn
  • SignUp
  • AuthLayout
  • Register
  • AuthPage
结构特征

根据元素的排列和样式算出来的特征，只用来加分，单独不判定。

  • 含输入控件
优先级
1 · 同一层有多条命中时，优先级高的胜出
版本
v2 · 更新于 2026/09/30