登录页
Login Page
别名:登录页面登陆页登录界面登录表单登录框输密码进系统的页面账号登录页
这是什么
用最小干扰让已有账号用户进入系统的门面页：核心只有身份识别表单（邮箱/密码）与一个主按钮， 辅以第三方登录、忘记密码和注册入口。页面刻意保持极简——少一个字段，转化就高一分； 所有装饰都让位于"快点进去"这一目标。
交互实验室
试一试，再决定怎么用正在加载实验室…
✓ 适用场景
- 已有账号体系的产品的入口
- 回访用户需要快速恢复会话
- 需要对接 SSO 或第三方身份提供方
✕ 不适用场景
- 新用户首次创建账号（用注册页承接）
- 一次性工具、无需身份识别
- 内嵌到弹窗的轻量验证（用模态登录更轻）
常见形式
居中卡片
Centered Card
单卡片居中，最通用的默认形态
分屏品牌
Split Screen
左品牌图 + 右表单，SaaS 常用
多步登录
Multi-step
先认邮箱再要密码，支持无密码流
社交优先
Social-first
第三方登录按钮置顶，表单退居其次
页面结构
- 01
品牌区
Logo 或品牌插画；分屏布局时占一侧，移动端隐藏。
- 02
登录表单
邮箱 / 用户名 + 密码，字段最少化，主按钮唯一。
- 03
第三方登录
OAuth 按钮置于分隔线下，与主按钮区分主次。
- 04
辅助链接
忘记密码、记住我等次要操作，弱化处理。
- 05
注册入口
「没有账号？注册」放页尾，形成账号闭环。
实现要点
flexgridmin-height: 100vhplace-items: center居中卡片用 min-h-screen grid place-items-center；分屏变体 md 断点下 grid-cols-2， 左侧品牌区在移动端隐藏。表单字段用 autocomplete（username / current-password）， 密码框配可见性切换；错误信息内联展示并 aria-describedby 关联； 提交中按钮禁用防止重复提交。
横向对比
查看完整对比 →相关概念
用一条带边框的水平输入区收集单行文本，是表单的基本单元。 占位符提示期望格式，聚焦时高亮边框引导视线，校验失败时切换错误色 并附提示文案；可内嵌前后缀图标与清除按钮，受控管理输入值。
组件包含组件用可点击的色块触发一个明确的动作，是界面中最基础的操作入口。 通过填充、描边、幽灵等视觉层级区分主次操作，按压时有即时的下沉反馈， 繁忙时进入加载态并禁用点击，防止重复提交。
组件包含组件在用户填写表单的过程中或提交时检查输入合法性，并把错误就地显示在对应字段旁边。 目标是让用户在离错误最近的位置、以最小的打断成本知道"哪里错了、怎么改"，而不是提交后被一整个错误页打回。
交互模式使用模式把陌生访客变成账号的转化页：表单只保留起步必需的字段（邮箱 + 密码），其余信息 延后到产品内补齐；辅以第三方注册、密码强度提示和服务条款勾选。与登录页共用 布局骨架，但每一处设计都在回答"注册这件事值不值得、麻不麻烦"。
页面替代方案