按钮的禁用状态 | 设计详解

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

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

召唤，顾名思义，意为引导用户进行操作的按钮。引导用户操作？那就不应该出现「禁用状态」。

我通常会在一些产品里面体验到这样的情况：进入 App，看到有活动，点击进入后，发现中秋节活动可领取月饼，累计到一定数值，即可获得奖励。但这时候的领取按钮是不可点击的。

仔细看的话，能看到活动页确实写着活动开始时间是 20:00，然而我点击的时间是 18:00。所以也就能理解没有任何反应的原因了。

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

按钮做这么大不是给用户按的？这是什么逻辑？类似于家里的电灯开关是摆设的，是按不下去的。

于是有了下面这个优化版。

FEVTE编注：更多平面设计理论学习请访问飞特网平面设计理论知识栏目，地址：https://www.fevte.com/plan/shejililun/

这个优化版无论从设计角度还是开发角度来说，都是最平衡且能满足体验的方案。设计不需要再思考其他情况，用一条 toast 就可以满足多数的逆向情况；开发不需要满足按钮的动态情况，只要在不同时间点分别获取两种情况就可以了（活动开放与未开放）。

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

最合理的方案应该是：有按钮即可点击，不可点击即无按钮。

或者倒计时，到点后自动呈现正式活动页面。在很多比较大型的活动或大厂推出的节日活动里，经常会看到这样的形式。

上面这个截图指得是「进入中文直播」后的倒计时页面，但是我之前没截图，所以就用这张图代替了。

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

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

产品界面通常会引导用户思考。

当然如果为了图方便的话，上面的第二类方案，即「按钮可点击并提示活动暂未开启」也是可取的。只是大家要知道这里面的逻辑关系。

b.样式造成的认知错觉

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

灰色的禁用状态会给用户一种错觉，即这个按钮从始至终都将不可用。

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

在这个被简化的流程里有两个逻辑，我们需要拆开看，分别是：按钮样式，以及违背了上述的「无法点击的召唤类按钮，就不该出现在界面上」的结论。