SPECS / 01
06个核心模块
按模块查看登录界面规范
登录页不是一张孤立的高保真图。这里按用户从进入页面到登录完成的顺序，把规范内容拆成六个设计模块。
PRINCIPLES / 02
把判断标准固定下来
统一登录界面视觉的关键，不是复制同一个模板，而是让页面在新增角色、新增验证方式和调整品牌色时，仍然能保持同一种使用逻辑。
01
可复用不等于复制
抽取登录按钮、输入框、错误提示和验证码容器为公共元素，在差异页面中引用同一套尺寸与颜色 token。
02
状态先于视觉出现
先确认用户可能遇到的空值、校验中、成功和失败状态，再为这些状态设计视觉表现，而不是先做一张干净界面再补提示。
03
异常与正常同等重要
密码错误、验证码过期、账号被锁定等异常路径占用用户更多注意，需要更清楚的措辞和位置指引。
04
多端对位不错位
桌面宽屏可以左右分栏，平板与手机应收回为垂直流。输入框、辅助链和主按钮的间距要随断点同步收缩。
WORKFLOW / 03
从设计稿到代码组件的工作流
把登录界面设计规范放进实际项目时，可以按下面的顺序逐步推进，避免一个页面一个样。
01
盘点已有登录入口
收集当前门户、后台与内嵌页使用的登录页面，记录各自账号字段和第三方验证方式。
02
搭建布局与字段模板
根据页面类型确定左右分栏或居中布局，标明品牌区、输入区、辅助链与操作按钮的位置关系。
03
补齐状态与反馈
为聚焦、错误、成功、禁用和校验中等状态制作示例，让异常提示的措辞与图标保持一致。
04
走查并完成组件交接
配合前端检查触控热区、键盘可达与多端断点，将样式变量交给组件库统一维护。
SCENARIOS / 04
适合使用这套规范的登录页
开云网页登录界面提供的规范模块可以灵活套用，也可以只截取其中一段用于当前项目评审。
01
企业门户登录页
面向员工与合作伙伴，统一账号入口的品牌表达与主操作按钮。
02
内部管理系统
让 OA、办公后台和运维中心使用同一套登录状态反馈。
03
云端控制台
处理多账号切换、角色选择和双因素验证等复杂登录路径。
04
应用内嵌页面
在移动端窄屏中保持布局层级，让输入与验证过程不被键盘遮挡。
CHECKLIST / 05
上线前可对照的规范清单
每一项都可以作为设计走查或前端验收条目，减少登录页在正式环境中出现的遗漏。
登录按钮与次操作按钮是否主次分明、间距固定
错误状态是否提供可理解的原因说明与修复建议
键盘 Tab 顺序是否经过账号、密码、验证码、登录按钮
输入框文本与背景是否满足无障碍对比度要求
移动端点击区域高度是否能够达到 44 像素以上
会话过期返回登录页时是否保留用户已经输入的账号
FAQ / 07
登录界面设计规范常见问题
这里选择团队整理规范时常问的几个问题，供设计评审与开发沟通参考。
包括页面布局与品牌区位置、输入字段的默认与错误状态、验证码和对话框交互、异常提示、第三方登录按钮以及移动端断点。它不止是一张高保真图，还给出状态、间距和前后端协作需要遵守的说明。
只要有账号入口，登录页就会遇到失效、验证、权限拦截等状态。哪怕只有一两个页面，统一关键状态也能少返工。规范可以精简成一页检查表，不需要等到界面数量变多才整理。
先在规范中定好布局、尺寸、颜色 token 和各状态示例，再把公用的登录按钮、输入框、提示条做成组件。开发一侧引用组件，后续样式调整只要更新变量，不需要逐页修改。
登录界面通常沿用品牌主色，但要保证输入区域的识别度优先。开云网页登录界面在配色上减少大面积高饱和背景，使用浅色底座与强调色来标注验证步骤，让品牌展示不影响输入。
页面通常把主账号密码作为第一层级，第三方登录作为辅助入口。在布局上可放在登录按钮下方或分割线之后，按钮宽度和视觉重量要弱于主操作，避免用户犹豫选择。
不需要彻底独立设计，而是跟随断点调整布局。窄屏下减少左右分栏，把辅助内容折叠或下移，输入框和按钮保持足够热区，并确保键盘弹出时登录区域不被遮挡。