禁用按钮的展示逻辑

近期在C端理财资产购买流程和B端系统操作工具项目中，均涉及按钮禁用状态的相关问题，本篇权当漫谈，讨论下。

Web开发中常用的CSS按钮状态，包含6种，分别是正常态、悬浮态、焦点态、激活态、加载态和禁用态。因移动端的手指与Web中鼠标的物理操作的差异，移动端中按钮更多时候去除了悬浮态和焦点态「注：原因可自行检索」。其中禁用态因为使用状态的不稳定及交互变化中的不确定性，在设计中讨论的最多。

先说观点：如果禁用按钮无法被激活，则应该消失。如果暂时无法被激活，最好能把禁用态替换成用户能够积极操作的其他动作，实在要保留禁用态的话，至少也要告知按钮禁用的原因或激活按钮的条件。

禁用状态如无法被激活，按钮该消失

禁用态与正常态作为按钮的两种常规状态，一体两面，禁用按钮的存在本身就预示着一旦符合条件，按钮能恢复正常，可以被激活。如果禁用状态无法被激活，也就变成了无效状态，无效状态就不应该存在。

看个例子，左图是在职员工的内部IM联系卡片，右图是离职员工的，员工离职后内部沟通权限已然无法使用，也就不能再进行「电话/消息」沟通，所以对应按钮删除。

这样可以减少无效信息的干扰，还可以避免操作带来的无效反馈，比如点击电话，显示「无法拨打内部电话」。或者显示禁用，也会影响其他人的操作判断。

从这个案例中我们可以看出，当一个按钮在某种情况下始终无法被触发时，就会选择让它直接消失，而不是呈现禁用状态。

禁用态暂时不能激活，选择积极的正向替换

按钮的禁用状态是有它存在的意义的，这种在电商或金融产品中表现尤其明显。常因为库存的原因，商品某一时段会出现售罄或某一门类缺货的暂时情况。对用户而言，除了不能即时购买，浏览、评论等都不会受到影响，用户同样可以收藏商品为下次加购做准备，所以这是一种介于下架和正常销售的中间状态。

举个项目的例子，用户可以在理财的资产详情页购买理财，点击底部“购买”按钮即可发起购买流程，但如果产品紧俏，卖完了，该展示什么呢？

右边两个方案，右A像bug，右B说卖完了，看似符合现实状况但用户很懵，用户不知道怎么就卖完了，以后这个商品还会有吗？满满的负面疑问。重新思考这个问题，调转方向，从更为积极的角度，是不是以下方案用户感受更好些：针对补充货源时间不能确定的情况【到货提醒我】、对于后台已设定准确的发售时间【准时提醒我】、对于重新上架可能要等很长一段时间，【相似推荐】则极有可能挽回用户流失带来的部分损失。正向的引导远比常规的描述，更有积极暗示和实践意义。

类似的例子有很多，比如在「淘宝」选购商品时，如果所选的产品和型号处于完全缺货的状态，加入购物车的按钮会变成「缺货中，提醒掌柜补货」。相较于老版本的置灰分类选项，新版促进了卖家与商家的良性互动，登记缺货之后卖家补货会第一时间发消息通知买家，为缺货给买家带来的不良购物体验提供了补偿方案，也利于商家争取潜在用户的下次购买行为。