ux-login-signup

登录与注册屏幕技能

此技能的行为方式（请先阅读）

这是一项生成式技能，因此不会盲目套用每一条最佳实践——登录/注册有一系列取决于具体情境的选项（社交登录、“保持登录”、用户名还是邮箱、2FA），对某些产品来说，全部采用是错误的；对另一些产品来说则是正确的。自动采用所有选项会导致界面臃肿、不安全，或侵犯隐私。

因此，此技能分三个步骤：

1. 确定情境（如果尚不清楚，就快速提问一次）。
2. 采用始终适用的核心原则——对几乎所有身份验证界面都正确的模式。
3. 列出取决于具体情境的决策，说明各自的权衡并给出建议，让用户选择——不要悄悄替用户做决定。

然后，技能会将结果交给审查技能进行验证：对生成的界面调用启发式审查（ux-heuristics-audit）和无障碍审查（ux-accessibility-audit）。此技能刻意不重复推导对比度、键盘和屏幕阅读器规则——这些属于无障碍技能的职责。

---

步骤 0 — 设计前确定情境

身份验证设计会因以下因素而显著变化。如果尚不清楚，请询问：

• 平台——移动端（水平空间有限 → 顶部对齐/浮动标签、上下文键盘、≥38px 触控目标）与桌面端。
• 安全敏感度——普通消费者应用与银行/医疗/企业应用。这是下文各项条件决策中影响最大的因素。
• 受众——主流消费者（倾向于社交登录、减少操作阻力）与注重安全或受监管的用户。

如果在未获得答案的情况下继续，请说明假设（例如：“假设这是一个面向普通消费者的 Web SaaS”）。

---

几乎适用于所有身份验证页面的核心原则

结构

• 将登录和注册拆分为不同的页面或视图。 不要合并——用户可能会选错，然后感到沮丧。
• 让切换方式一目了然：用清晰的标题说明当前页面，并在用户会注意到的输入框上方放置“没有账户？注册”（反之亦然）链接。两个页面都应显示社交登录按钮。
• 将注册流程控制在一个简短页面内。 只询问必要信息（标识信息 + 密码）。其他信息留到之后，在用户体验到价值后再视情况收集。

行动号召

• 使用明显不同的标签。 避免“登录”和“注册”看起来太相似——建议使用 “Log in” 和 “Sign up”，或 “Register”。
• 按钮层级：主操作使用品牌色或主色，并突出显示；次要操作使用较低调的样式或文本按钮。每个页面只突出一个主要操作。
• 无需滚动即可看到行动号召；在较长的移动端表单中，将其固定在底部。

密码字段

• 提供显示／隐藏切换按钮（眼睛图标），并确保两种状态都能正常切换，以防输错，尤其是在移动设备上。这样也可以省去“确认密码”字段。
• 在用户输入时显示密码要求（实时清单），不要等到出错时才显示。

密码恢复（最容易被放弃的流程——应设计完整流程，而不只是添加一个链接）

1. 在密码字段下方放置重置链接，这是用户预期的位置，并清楚标注（它是“紧急出口”——符合 Nielsen 的用户控制与自由原则）。
2. 只要求填写 1–2 个字段（电子邮件或电话号码）以验证身份。
3. 确认页面告知用户接下来会发生什么（“请检查收件箱”）。
4. 在电子邮件／短信中提供清晰的下一步说明——突出显示链接或验证码，并尽量减少文字。
5. 重置页面提供新密码输入框，并显示密码要求。
6. 成功确认后，重定向至登录页面（或用户原本要访问的页面）。

验证与提交状态

• 用户离开每个字段时进行内联验证——不要等到点击“提交”后才显示所有错误。在字段旁显示结果；成功时显示绿色勾号，失败时显示红色标记。
• 点击提交后显示加载状态，然后显示成功消息或明确的错误信息。
• 错误信息的安全注意事项：使用通用提示“用户名或密码无效”，而不是指出具体哪项有误。
• 错误文案应通俗、礼貌且具体——说明哪里出了问题，以及如何修正。不要使用术语、全大写文字，也不要责怪用户。

表单机制（需考虑移动设备）

• 使用顶部对齐标签或浮动标签——不要只用占位符（聚焦时占位符会消失，用户不得不凭记忆填写）。
• 对需要说明的字段，在下方提供辅助说明（例如，说明为何需要电话号码）。
• 使用情境匹配的键盘（电话号码／验证码使用数字键盘）和输入掩码处理格式化数据。
• 触控目标 ≥ 约 38px；输入框高度为 32–40px；主按钮宽度与输入框一致，以保持协调。

---

依赖上下文的决策（呈现选项，不要自动应用）

对于每项决策，说明其中的权衡，并结合 Step 0 的上下文给出建议，然后让用户决定。默认应用所有这些选项是错误的做法。

决策	适用情形	避免 / 调整的情形	默认建议
社交登录（Google/Apple 等）	大众消费类应用——约 80% 的用户更喜欢这种方式；可减少操作阻碍，并替你验证邮箱	注重隐私的用户群体、企业 SSO 场景，或需要掌控数据的情况	消费类应用应提供此选项，并搭配邮箱选项。添加前先征求用户同意。
标识符：邮箱/手机号还是用户名	只有当社交身份 / 用户名对产品很重要时，才使用用户名	将用户名设为必填项——更难记，登录失败也更多	默认使用邮箱或手机号；仅将用户名作为可选项
“保持登录” / “记住我”	重新登录很麻烦的低风险应用	银行 / 医疗 / 企业场景——闲置后自动退出；只记住用户名，不要记住会话	根据敏感程度决定——这就是 Step 0 重要的原因
双重身份验证 / 生物识别	涉及高风险或受监管的数据；生物识别适用于快速、安全的移动端登录	添加后会造成不必要阻碍的低风险休闲应用	涉及敏感数据时建议启用；其他情况下可选
单屏填写还是渐进式信息收集	几乎总是应该从最精简的流程开始	—	现在只收集必要信息，之后再根据情境询问更多信息

当产品安全要求很高（如银行、医疗）时，便利性选项（保持登录、社交登录）应转向更安全的选择，而双重身份验证 / 生物识别则应从可选变为推荐。

---

验证结果（编排）

交接时，请使用各项审查技能可安装的 name。只有在已安装相应技能时才调用；如果未安装，此技能本身已涵盖这些规则，无需因此停下，直接继续即可。

生成或修改结果后，应将其交给审查技能检查，而不是直接宣布完成。这些是候选审查技能——具体策略由 docs/orchestration-policy.md 设定，也可以将整个流程交给 ux-design-review。在此处，heuristics 和 dark-patterns 属于 Tier A（自动运行）；accessibility 和 aesthetics 属于 Tier B（提供选项）——使用现有设计系统时，aesthetics 不适用，accessibility 则缩小到使用层面。如果用户调用此技能是为了处理某个具体事项，请遵守该范围。

• ux-heuristics-audit （Tier A）——检查提交时的反馈 / 状态、错误恢复、一致性和识别性（例如，显示密码要求）。
• ux-accessibility-audit （Tier B——提供选项；使用设计系统时缩小范围）——检查标签 / 对比度 / 键盘 / 焦点等具体事项，此技能有意将这些内容留待后续处理。
• ux-aesthetics-audit （Tier B——提供选项；使用设计系统时不适用）——检查视觉层级和过度设计：受限制的选项（社交登录按钮、双重身份验证、密码规则）是否让界面变得杂乱，或埋没了主要操作？
• ux-dark-patterns-audit （Tier A）——如果注册流程添加了营销订阅选项、强制社交账号关联或过于宽泛的权限请求，则检查是否存在预先勾选、强迫操作和确认羞辱。

如果审查发现了冲突（例如，你添加了社交登录、“记住我”、双重身份验证提示，还增加了冗长的密码规则，导致界面不再简洁），则应回归主要任务：让用户顺利登录。

常见的应做与不应做模式

❌ 不要	✅ 应该
将登录和注册合并为一个含义模糊的表单	使用独立页面，并设置清晰的标题和位于表单上方的切换链接
将“登录”放在“注册”旁边	使用“登录”与“注册”/“创建账号”，并在视觉上加以区分
注册时要求填写很多字段	只要求填写标识信息和密码；之后再根据具体情境收集其他信息
只使用占位符的字段	使用顶部对齐或浮动标签，并让标签始终显示
点击“提交”后才显示所有错误	在用户离开每个字段时进行行内验证
使用“错误：输入无效”或全大写文本	在字段旁显示简单、礼貌且具体的提示
暴露用户名或密码哪一项有误	使用笼统的“用户名或密码无效”提示
隐藏密码且不提供显示选项	使用眼睛图标显示/隐藏密码；去掉“确认密码”字段
只提供“忘记密码？”链接，不提供恢复流程	设计完整的密码恢复流程，直至成功并重定向
在所有场景中自动应用社交账号登录和保持登录	根据具体情境提供这些选项，并说明其利弊
让用户无限期保持银行应用登录状态	用户闲置时自动登出；只记住用户名
未经检查就发布	按照启发式评估和无障碍审查流程进行检查

---

来源课程（Uxcel）

• 设计登录与注册流程的最佳实践
• 设计移动端登录、注册及其他表单
• 重置密码
• 设计表单的最佳实践
• 提交表单