三条线和三个点按钮怎么选？
一句话做出判断
三条线按钮会打开网站导航。三个点按钮会显示旁边项目的更多操作。
小屏幕需要收起导航时，用三条线。项目旁放不下其他操作时，用三个点，并把按钮命名为“更多操作”。
看看每个界面模式会做什么
先试试每个例子，再看它适合处理什么工作。
Hamburger Menu
↗ 汉堡菜单
一个有三条线的菜单按钮。空间不够显示主导航时，可以用它打开导航。
商店页面变窄时，带“菜单”标签的按钮会打开抽屉，里面放分类、账户和帮助。焦点会留在抽屉内。
- 什么时候用
- 先保留最重要的导航项。小屏幕放不下其他项目时，再使用汉堡菜单。
- 什么时候不要用
- 宽屏幕不要把所有导航都藏起来。图标也要有无障碍名称，并说明菜单是否展开。
- 代码里的名称
button aria-controls aria-expanded + nav
Overflow Menu Button
↗ 更多操作菜单按钮
一个常用三个点显示的小按钮。它会打开页面放不下的次要操作。
每个项目行都直接显示“打开”。创建副本、归档和删除则放在更多操作菜单里。
- 什么时候用
- 单个项目有多个次要操作，而且全部显示会让页面太挤时使用。
- 什么时候不要用
- 不要把主要操作、破坏性后果，或常用功能的唯一入口藏在没有文字的图标后面。
- 代码里的名称
button[aria-haspopup=menu] + role=menu
快速比较
| 界面模式 | 最适合 | 不适合 | 代码里的名称 |
|---|---|---|---|
| 汉堡菜单Hamburger Menu | 先保留最重要的导航项。小屏幕放不下其他项目时，再使用汉堡菜单。 | 宽屏幕不要把所有导航都藏起来。图标也要有无障碍名称，并说明菜单是否展开。 | button aria-controls aria-expanded + nav |
| 更多操作菜单按钮Overflow Menu Button | 单个项目有多个次要操作，而且全部显示会让页面太挤时使用。 | 不要把主要操作、破坏性后果，或常用功能的唯一入口藏在没有文字的图标后面。 | button[aria-haspopup=menu] + role=menu |
上线前检查
- 01
先写下用户要完成什么事。
- 02
测试键盘、焦点、触控、缩放、加载、空白与错误状态。
- 03
不用鼠标悬停或动画，也要能取得相同信息。
- 04
放入真实内容，并在小屏幕和大屏幕上测试。
04
可以直接复制的比较需求
团队还不知道该选哪一种界面模式时，可以复制这段需求。
请在 汉堡菜单（Hamburger Menu）、更多操作菜单按钮（Overflow Menu Button） 中，为真实用户流程选出最合适的界面模式。判断规则：三条线按钮会打开网站导航。三个点按钮会显示旁边项目的更多操作。。请写下任务、内容量和打断流程的代价，并检查键盘、触控、加载、错误与减少动态效果。说明选择理由，再沿用项目的设计系统，做出最小且无障碍的版本。