按钮、链接与操作层级

先理解这个概念

链接用于导航到资源，按钮用于执行动作。主要按钮表达当前任务的首选操作，次要按钮提供替代路径，危险操作需要描述后果。视觉层级由任务决定，不由按钮在页面上的位置决定。

按钮和链接的区别取决于行为，而不是外观。去某个资源用链接，改变当前状态或提交用按钮；一个链接可以长得像主按钮。操作层级还要区分主要、次要和危险：危险不必总是最显眼，主要也不等于页面上所有能点击的东西。

记住这三个原则

1. 01

   一个局部任务通常只突出一个主要操作。

2. 02

   按钮状态包含 hover、focus、active、disabled 和 pending。

3. 03

   提交期间避免重复触发，并保留状态说明。

实际设计时，分三步做

1. STEP 01

   为每个入口写出点击后发生的事，先决定语义元素，再选择视觉变体。不要用空 href 模拟动作。

2. STEP 02

   在同一决策区域内确定主要动作，次要动作降低视觉竞争；确认窗口应让动作对象与后果可见。

3. STEP 03

   补齐焦点、禁用、处理中和重复点击规则，说明何时能再次操作，不能只画正常与悬停两态。

一个容易理解的例子

可预测的操作语义减少误触，并支持浏览器的默认能力。

适用边界与取舍

低频危险操作可以放进更多菜单，但不能故意隐瞒。按钮越大越鲜艳也不等于越好，操作层级应与任务频率、风险和当前状态共同决定。