按钮、链接与操作应该怎样区分?
按点击后的结果区分链接与按钮,再安排操作主次和危险提醒。
按钮通常执行操作,链接通常带用户到另一个位置。设计时先确定点击结果,再决定样式和网页角色,能让行为更容易预测。
先记住这几件事
- 跳转到服务详情通常用链接;保存资料、展开内容或提交表单通常用按钮。
- 外观可以相近,但实际网页仍要采用符合用途的结构和行为。见 USWDS 按钮指南 与 链接指南 。
- 主要操作 是当前任务最需要的下一步,次要操作是辅助选择。主次应清楚,不把所有按钮都做成最醒目。
- 删除等难以恢复的操作要说明对象与后果;图标按钮也需要能被理解的名称。
选择操作部件的流程
操作分类的示意
以下为教学场景。
| 入口 | 点击结果 | 通常采用 |
|---|---|---|
| 查看套餐 | 打开套餐详情 | 链接 |
| 保存资料 | 提交当前修改 | 按钮 |
| 删除成员 | 执行删除动作 | 有清楚后果说明的按钮 |
用一个例子走一遍
套餐页里,“查看详情”打开另一页,“开始试用”若打开注册页也属于链接;注册表单里的“创建账户”提交信息,属于按钮。团队分别检查目的地和提交结果,让相同样式不会掩盖不同的操作性质。
边界与常见误解
不能靠“长得像按钮”判断它的作用。危险操作不一定都要增加同样的确认窗口,要根据后果与恢复能力选择。仅用颜色强调危险也不够,需要说明动作和对象。