为每个选项卡的内容命名
选项卡匹配具有相同上下文的区域；不同级别的页面应该使用导航。
选项卡 设计体系
在同一级别的内容区域之间切换。
清单内容
检查进度
01
结构及意义
在使用环境中比较信息和演示。
02
交互性和可用性
尝试操作，更改状态并继续工作。
03
完成体验
检查设计投入使用时容易忽略的细节。
进度会自动保存在此浏览器中。
指南
检查方法
示例
应用示例
为每个选项卡的内容命名
项目详情包括“概述”、“成员”和“活动”。
变体与使用场景
目的地和当前选择的选项卡
通过标记或位置指示选定的选项卡,在未着色时保持标签清晰。
更改主题并尝试使用长标签的选项卡;复选标记仍然附加正确的内容。
示例 显示发票面板时,在“发票”选项卡下划线。
你的项目
有新的更新
更改已保存
你的项目
有新的更新
更改已保存
选项卡中的内容加载
将选项卡的加载和错误状态分开,避免用旧选项卡的响应替换内容。
当初始请求很慢时快速更改选项卡;仅显示当前选项卡的响应。
示例 查看历史记录时,概览的延迟响应不会更改面板。
你的项目
有新的更新
更改已保存
聚焦、选择不可用
区分焦点与选定选项卡;无法使用的选项卡需要一个易于查找的原因。
Tab 和箭头键操作;屏幕阅读器正确读取所选选项卡。
示例 当选择概览时,焦点边框可以位于报告上。
你的项目
有新的更新
更改已保存