h5-login-presentation.md 2.1 KB
H5 登录页展示规范
本规范依据用户于 2026-09-28 提出的 H5 登录页优化要求，维护 H02 的信息层级、输入体验和反馈形式。账户、密码、当前商家服务确认、返回与消息入口，以及真实认证和原页面返回规则继续适用。
- 顶部标题为“账户登录”。正文以“欢迎回来”和登录用途说明引导，白色卡片集中展示真实店铺名称、输入字段、确认选项及提交按钮。店铺名称来自现有商品目录接口，读取失败提供“重新读取店铺”。
- 页面采用已确认的浅灰蓝背景、蓝色主操作、16px 卡片圆角和 18px 标题。电脑端最大宽度 414px；手机端使用可用宽度。登录页不展示装饰性的时间、电量和网络文字。
- 账户和密码具有可见标签、占位提示及浏览器自动填充属性。账户最长 128 个字符，密码最长 256 个字符，与身份接口一致。账户关闭自动大写和拼写检查。
- 密码默认隐藏，可通过具有明确名称的按钮显示或隐藏。按钮可操作区域为 44×44px；字段至少高 48px。离开登录页或一次提交结束时清空密码并恢复隐藏状态。
- 当前商家服务确认默认关闭；字段和确认由 Vant 表单校验。确认区域至少高 44px，支持空格切换，并向辅助技术提供明确名称与禁用状态。未满足条件时显示对应提示并停止提交。
- 主按钮为“登录并继续”，占据表单可用宽度，至少高 48px。提交期间显示“正在登录”，字段只读、确认和按钮禁用，阻止重复请求。
- 认证失败在表单内使用有文字与图标的错误提示，保留账户和当前商家确认。客户重新输入密码后再次提交；网络和限流反馈沿用接口提示，不自动连续重试。
- 正文使用单个纵向滚动区域，短屏和横屏可滚动到每个字段及提交按钮。登录页末尾保留安全区空间。
验证使用真实身份、店铺和订单接口，检查字段校验、密码显隐、认证失败、原页面返回、不同尺寸下的操作区域及浏览器错误。通过 DOM 和交互检查完成验证。