核心结论：完整的登录页面不是“两个输入框加一个按钮”，而是一条身份认证状态机：识别账号、基础校验、选择密码或验证码、判断设备与行为风险、处理失败、找回凭证，最后把用户送回登录前的目标页面。设计时应同时控制安全、完成率和恢复成本。
本文面向产品经理、交互与UI设计师，以Web和App常见登录为例。需要先参考成熟视觉版式时，可以查看登录页面原型设计案例；本文重点补充模板往往没有讲清的流程、风控与失败状态。
先画登录状态机，再画单个页面
开始画界面前，先列出用户可能进入的状态：未输入、格式错误、账号不存在、密码错误、验证码发送中、验证码失效、风险挑战、账号锁定、找回密码和登录成功。每个状态都要明确进入条件、可执行动作和退出条件。
注册、登录和找回密码虽然共享手机号或邮箱，但用户目标不同。不要用一个不断变化的表单承载全部任务而没有标题与状态提示；用户必须随时知道自己是在登录、创建账号还是验证身份。
账号输入：先识别，再选择验证方式
手机号和邮箱可以合并为一个账号输入框，但格式规则、区号和隐私提示要清楚。只有输入可识别后再启用下一步，错误反馈靠近字段。若账号不存在，不要在涉及隐私或安全的场景中直接泄露注册状态，可以使用统一文案并引导下一步。
密码登录和验证码登录如何切换
两种方式应共享账号信息，切换时不清空已输入内容。密码登录提供显示/隐藏、大小写提示和找回入口；验证码登录说明发送目标、有效期、倒计时和重发条件。切换文案应描述动作，如“使用验证码登录”，不要只写“其他方式”。
表单布局、标签和错误提示的基础规范可参考表单原型设计方法；登录场景还要额外处理安全、尝试次数和会话状态。
验证码：发送、等待、失效和重发都要设计
点击发送后立即显示倒计时，防止重复请求；说明验证码发往哪个脱敏账号。输入完成可以自动提交，但要保留手动确认的可访问方式。错误时区分格式不完整、验证码错误、已失效和尝试次数过多，因为对应动作分别是继续输入、重新核对、重新发送和稍后再试。
| 验证码状态 | 用户反馈 | 可执行动作 | 需要保留 |
|---|---|---|---|
| 发送中 | 正在发送 | 等待或取消 | 账号 |
| 已发送 | 脱敏目标与倒计时 | 输入验证码 | 账号、入口 |
| 错误 | 剩余尝试次数 | 修改输入 | 已输入位数 |
| 失效 | 说明时效已过 | 重新发送 | 账号、返回路径 |
风控：按风险分级，不要一刀切增加步骤
常用设备和常用地点可以走基础验证；新设备、异地登录或敏感操作后进入二次验证；多次失败和异常行为可能需要暂停尝试或人工申诉。风控页面应说明触发了额外验证，但不要暴露可以被绕过的具体检测规则。
高风险不等于直接把用户锁在死路。应提供备用验证方式、等待时间、申诉或客服入口，并保留用户登录前的目标。涉及后台系统时，还要区分登录身份验证与进入系统后的角色权限。
失败状态：既要安全，也要帮助用户恢复
密码错误可以提示“账号或密码不正确”，同时提供找回入口；验证码错误说明是否可以继续尝试；网络失败保留输入并允许重试；账号锁定说明持续时间和解决方式。错误文案避免指责用户，也不要在一次失败后清空全部字段。
失败提示不能只靠红色。使用文字、图标和焦点位置共同表达，读屏顺序与键盘操作也要可用。统一输入框、按钮和反馈状态时，可结合UI设计规范与组件状态清单建立可复用规则。
找回密码：完成后必须回到原任务
找回流程包括确认账号、选择验证方式、完成身份校验、设置新密码和安全返回。展示脱敏联系方式，允许用户切换备用方式；新密码规则在输入时实时提示；重置成功后说明旧会话是否失效，并给出“返回登录”或直接继续原任务的明确入口。
登录成功：回到用户原本要去的地方
从分享链接、邀请邮件或受保护页面进入登录的用户，成功后应返回原目标，而不是统一跳到首页。首次登录可能需要接受协议、补资料或选择团队，但每增加一步都要说明原因，并允许在不影响安全时稍后完成。
如何制作登录流程原型
先用状态机确定页面和弹层，再为关键状态建立组件变体；给每个按钮连上成功、失败和返回路径。你可以用AI生成登录页可编辑原型快速得到页面初稿，提示词中要写明验证方式、风险分级、错误状态和成功返回，不要只描述视觉风格。
登录原型提示词：生成Web端登录流程，支持邮箱密码和验证码切换。覆盖格式错误、密码错误、验证码发送中、验证码失效、新设备二次验证、网络失败、找回密码和登录成功返回原目标页。切换方式时保留账号，失败时不清空有效输入。
登录页面评审清单
- 用户是否始终知道当前任务和验证方式？
- 密码与验证码切换是否保留账号和返回路径？
- 发送、倒计时、错误、失效和重发状态是否完整？
- 风险验证强度是否与触发信号匹配？
- 失败后是否保留有效输入，并提供可执行恢复动作？
- 找回密码成功后是否回到登录或原任务？
- 错误反馈是否兼顾安全、隐私和可理解性？
- 键盘、读屏、焦点和颜色对比是否可用？
如果重点是移动端视觉与常见结构，还可以参考APP登录页设计模板；但上线前仍需按真实认证与风控规则逐项校验。
常见问题
验证码登录比密码登录更安全吗？
不能一概而论。安全性取决于验证码通道、有效期、尝试次数、设备风险和账号保护。产品设计应根据风险级别组合验证方式，而不是只比较步骤多少。
登录失败应该提示“账号不存在”吗？
涉及隐私和防枚举时，通常使用统一错误文案更稳妥。具体策略应由安全与业务负责人确认，原型中要明确记录规则来源。
登录页可以默认勾选用户协议吗？
需要依据适用法律、业务地区和公司合规要求确认，不能只按视觉便利决定。原型应展示协议链接、同意方式和未同意时反馈。
登录页面设计要在安全和完成任务之间建立清晰路径。把验证方式、风险、失败、找回和成功返回连成状态机，再用真实账号场景走查，才能得到既可用又可评审的登录流程。