Skip to content

导航、表单与数据

全局导航仅放置跨页面的常驻入口,页面内部的操作按钮不应混入全局导航。当前所处页面位置需通过标题、导航菜单高亮、面包屑这三种方式中的至少两种协同表达。在移动端展开导航菜单后,焦点应自动移入菜单内部,并支持通过常规操作关闭菜单并返回原页面。

单一操作区域通常仅提供一个核心主按钮。按钮文本需采用“动词+受事”格式(如“保存设置”、“下载 SVG”),避免使用含义模糊的单一“确定”词汇。涉及高风险或不可逆的操作必须搭配危险色提示,且在执行前弹出二次确认。

链接用于导航,按钮用于改变状态。不要仅根据希望的外观交换两者语义。

  • 表单标签建议置于输入控件上方,相应的帮助引导及错误提示应就近呈现。
  • 必填状态需在表单提交前可清晰识别,避免在校验失败后才予以提示。
  • 格式校验应当保留用户的历史输入,并在校验不通过时自动将焦点引至错误摘要或首个出错的输入框。
  • 避免仅使用色彩来传达操作成功或校验错误的状态。
  • 凡涉及密码、访问令牌或个人敏感信息,表单必须明确告知其收集用途、存储范围及销毁方式。

表头须清晰描述数据维度,并正确使用 th 标签。数据列表格中,数值列建议右对齐,文本列建议左对齐;时间戳需标明具体时区,或在提供相对时间的同时附带完整绝对时间的悬浮提示。在窄屏模式下优先展示核心列,并支持容器横向滚动。

仅在当前流程必须被阻断中断时,才可使用模态对话框。对话框弹出后,焦点应自动移入其标题或首个可操作元素;关闭后焦点需退回至原触发按钮。避免将包含大量输入项的表单或常规的详情展示页强行塞入对话框中。