用一篇超全面的文章，详解「按钮」的禁用状态

@Daidai丶呆 ：篇文章我从「召唤类按钮」与「工具类按钮」两个角度详细拆其内在逻辑，希望帮到各位更理按钮设计逻辑。

禁用，通常的理是当前不点击或禁止使用，在界面上也是一种占位标识。相对的，当按钮除禁用，就变得点击。仅此一种简单的变化能演化出各类不同的禁用按钮的处理方式。是，我把「禁用按钮」的设计思路概括为两种类型：「召唤类」与「工具类」按钮。

召唤类按钮的禁用状态

在召唤类按钮里，我们以拆分出两种类型对其进行讲。

1. 不该出现禁用按钮的情况

召唤，意为引导用户进行操的按钮。就不应该出现「禁用状态」。

我通常会一些产品里面体验到这样的况：入 App，看到活动，点击入后，发中秋节活动可领取月饼，累到一数，即可获得奖励。但这时候的领取按钮不可点击的。

仔细看的话，能看到活动页确实写活动始时间 20:00，然我点击的时间 18:00，所以也就能理解任何反应的原因了。

但这是一个理的方案？这本身是一个「召唤类按钮」，图是让用户聚焦于按钮，但此刻的按钮无法点击，会给用户造成聚焦障碍，似乎在告诉用户：按钮做这大不是给你按的，先把规则给了。

按钮做这么大是给户按的？这是么逻辑？类似于里的电灯开是摆设的，是按的。

于是有了下这个优化版：

这个优化版论从设计度是开发度来说，都是最平衡能满足体验案。设计不需要再思考其他情况，用条 toast 可以满足多数逆情况。开发不需要满足按钮动态情况，要在不时分获取两情况可以了（活动开放与未开放）。

但当也不是最的方案，毕竟上面有提到，「召唤类按钮」是引导用户点击的，而「点击提示不用」仅比「无法点击」在逻辑上显得正确而已，但质上也是不合理的。

合理的方案应该：按钮即可点击，不可点击即无按钮。

或者倒时，到点后自动呈式活动页面。很多比较型的活动或厂推出的节日活动里，常会看到这样的形式。

面这截图指得「入中文直播」后的倒时页面，但我之截图，所以就用这张图替了。

当然还有一类情况是，活动持续间为一周，但每只开启 2 。

即便如此，活动开启再呈现按钮也比按钮一直呈现会更好。因为用户会反复通过点击按钮来确认是否可点击，是否可参活动，即使未活动开启间。所以无法点击的召唤类按钮，就不该出现在界面上。

产界面通会引导户思考。

然如为了图便话，上第类案，即「按钮可击并提示活动暂未开启」也是可取。是大家要知这里逻辑关系。

2. 样造成认知觉

其实上述内容有处，我没有深入去聊，即按钮处于「禁用状态」情况下，颜色为浅灰色是否为最佳案？

灰的禁用状态给用户一种错，即个按钮从始至终将不用。

但会人反驳：那的「登录/注册」功能，按钮不可点击，且灰色的。这怎么解释？

这被简化的流程里两逻辑，我们需拆看，分别：按钮样式，以及违背了述的「无法点击的召唤类按钮，就不该出界面」的结论。

先式。通过下图的对比可以发现，都是不可点击，后者比前者起来更像是同类型的操作按钮，且暗示用户该按钮足条件即可被点击。而纯灰色按钮更像是禁止且不可用的状。

使用品牌色，降低不透度，可加用户对该产品按钮的认知。所以在这层关系上，第二种方案会更理。

类似的例子有很多，这里简单放两个，就一一举例了。

重点来聊聊逻辑关系。

先说结论：这里的按钮操作优先级在此流程里低于输入框，可被暂时禁。

所以上述这个案是可，从本质上来说，多级操作流程召唤类按钮被禁用，看起来是意思。

时就有人问：否根据上面提到的一样，给按钮加一个点击提示呢？

单个按钮的单个逻辑提示，相比两个按钮的重判断提示，简单很，者不仅让用户混乱，甚至让设计师混乱。

比如图的可直接点击按钮，那么点击「获取验证码」需判断手机确与否，以及否输入了手机。或者直接点击「登录」，除了需判断手机的两逻辑，还判断验证码否确与数否 6 。

所以在这个方案，「召唤按钮」虽然还「召唤按钮」，但它的优先级相比于输入框低，且输入框也操作控件，因此也需引导用户聚焦（比如直接弹出输入框）。

即需要多次判断，需要用户多重聚焦，以至于上面个方案无法成为最佳方案。

于是，后来就演了如方案。

先聚焦输入框，再唤起按钮，之后输入验证码自验。仅一次判断，且按钮逻辑被拆分至同页面，户更好解。

所以到这里，可以理解为什么说很多「登录/注册」功能会拆分步骤了么？原有很多，我这里提到两块内容「判断逻辑」与「按钮状态」是关键素。

3. 小结

根据前分析，出了这三个结论：

• 无法点击的召唤类按钮，就该现在界面上；
• 召唤类按钮不是最高操作优先级时，要引导用户使其可用（如上图请输入手号）；
• 禁用按钮的样式，应该选择低透明度的常规按钮值。

如单看结论，会生矛盾。经过上述分析，相信各位可以充分理解其含义了。

工具类按钮的禁用状态

设计师平时用最多设计工具应该是 Photoshop 或 Sketch 了，我们经常会在这类「工具类按钮」里发现些功能不可操作。

如根据「召唤类按钮」逻辑来说，是否「工具类按钮」禁用状态也不应该出现或能浅色显示呢？

从正常逻辑来说：是的。

但因「具类按钮」其特殊性，所以我们还从分析一遍好给出结论。

1. 历史遗留问题

什么这历史遗留问题呢？回答这问题，我们得先「具类按钮」的禁用状态什么特殊。

在使用的大部计类产品，它的计模式统一为固定工栏，有哪些工一目了然，同哪些禁用，哪些可用，也是展现得一清二楚。

原因是操作频繁，户需要反复使，对界面与工具位置摆放的熟悉是这类产的可性保障。

包括他很多设计类产，都可对工具进行自定义摆放，目的与我上述说的是相吻合。

Word、Excel 等品也是类似，虽然不能自定义摆放，是设计宗旨基本类似。

大家是否发现个问题？即我们大多数时候在设计类品里使用功能也那么几个。即使下载了很多插件，用最频繁估计也是切图跟标注了。

即使到现在，很工具也依样被设计出来，不是因为设计者思固化，有时用户的使用习惯反而决定个结果。但从某个角度来说，工具栏被固定，各类按钮被设计者钉在它们被安排的位置上，确也是高效率的一种方案。但肯定不是最的方案。

2. 颠覆以往的按钮设计

样做一定是的么？把所有类产品的工具放出来，合理摆放让用户自己熟悉、适应，就肯定没问题？

真不。

好的工类按钮，一定是根据景来呈现的。也就是随着用户功能的互动而出现相应的内容。

比如网盘品，用户勾选某个文件或文件夹前后操作逻辑也是随着场景改变。

我们来看 figma：

从上图以看到此时的顶部内容除固定操的工具外，没有其他任何操内容。

这时候选取界面中的图形，顶部具栏发了变化：

其按钮会出针对于此图形可操作的具，且还会根据图形的数行具的变化。这就一种，一种具类产品的革新。

其多产品目前也已经逐渐景化。比如滴滴车，从选址、叫车、评价，都是景引导按钮出现，而不是一窝蜂地出现在界面上，告诉你还没下车，所以不能评价。

而随着「工具类按钮」的演，我相信最终的结果会到本篇章第一分讲的那样：该现的东西，就隐藏掉。

总结

按钮的禁状态一直来都是界存在的争论点，从样式到逻辑，从案到可见性。本篇章我从「召唤类按钮」与「工具类按钮」两个角详细拆解了在逻辑，告诉各位按钮的禁状态应该随着场景、功属性的变而变。保证户易于解，设计师通于属性。

• 无法点击的召唤类按钮，就不该出现在界面上；
• 当召唤类按钮是最操作优先级时，要引导户使可（如上图的请输入手机号）；
• 禁用按钮样，应该选择低透明度常规按钮色；
• 工具类按钮也随之场化。

欢迎关注作者微信公众号：「呆呆U理」