按钮不可点击状态该用灰色还是降低色彩？

我们先来看看同行内是怎么做的，本次调研主要针对于五大行以及金融业内各主流app，主要以产品层面和用户层面两个方向进行统计，按钮不可点击主要分为置灰与降低色彩两种类型，在因产品层面原因不可点击时多用置灰按钮，因用户层面不可点击则多用降低色彩来表示

中国银行

中国银行常规基金与私人银行内基金页面相同，但不可点击按钮分为两种样式；在理财详情界面置灰状态出现第三种设计样式

在购买、签约和登录页中，即使必要信息无填写或选择导致不可进行下一步，按钮没有不可点击状态，使用户对当前页面是否可进行下一步不可知；另一方面按钮有多种颜色和大小，包括前面的多种置灰样式，无统一性，品牌识别度不高

工商银行

基金在不可购买时无提示不可购买原因，理财在不可购买时会有提示原因，按钮置灰样式分多种样式，理财页与购买页置灰按钮类似但不相同

交通银行

基金、理财和购买操作按钮不可使用状态均使用置灰样式，并且在按钮文字上做了提示，但灰色中融入了部分蓝色，属于置灰（较多）和降低色彩的结合

建设银行

基金不可点击按钮使用降低色彩样式，理财内则使用置灰样式，两者均有不可购买原因提示；购买页降低色彩按钮可以看到按钮下层内容，导致用户看不清按钮文字和底部文字，基金页使用白色地板遮挡下层内容，在用户操作时更加清晰明确

农业银行

私人银行产品界面按钮不可点击状态不够明确，一般在不可点击状态下，文案会变成不可点击的原因，如“已售完”“暂停交易”等提示内容，可参考理财详情样式

招商银行

基金、理财和购买操作按钮不可使用状态均使用降低色彩样式，基金在按钮上方做了提示，理财在按钮文字及上方做了提示并加了推荐其他产品的入口

平安银行

基金、理财和购买操作按钮不可使用状态均使用降低色彩样式，产品不可购买时进入后会有弹窗提示并推荐其他产品

支付宝

基金操作按钮不可使用状态为置灰样式并在按钮文字上做了提示，购买产品则使用降低色彩样式

天天基金

与支付宝相同，基金操作按钮不可使用状态为置灰样式并在按钮文字上做了提示，用户购买产品时则使用降低色彩样式

总结

置灰按钮比降低色彩按钮不可操作性更强，置灰按钮经更适合用于因产品原因不可操作，如缺货、未在时间内等不可购买情况，结果不受用户操作的情况下，遇到置灰按钮用户一般不会去进行操作；当页面中使用降低色彩时按钮时，用户看到它们会感觉是未完成页面内关键信息填写，只需完成必要项就可进行交互操作的，这意味着用户会更有可能通过点击禁用按钮寻找未完成关键项。

在网上搜集到的案例中，实际项目上线做ABtest，置灰的按钮不利于引导用户，在登录或注册中使用置灰按钮会阻碍用户转化，降低色彩按钮可以得到很好的引导和转化。

其它app中，置灰按钮也可能是一组按钮中优先级低的按钮，例如取消按钮，用户很容易将灰色的按钮认为是次级操作按钮

在以上调研中降低色彩按钮中，不透明度范围在30-60%之间（农行金融/招行30%、支付宝35%、建行/平安40%、天天基金50%、农行私人银行60%），最好把透明度设置到足够低，否则部分用户仍然会觉得这是一个可点击按钮，最好保持在40%或者更低，并且要把按钮下方内容区分开来，如前面建行的案例中，按钮下方加一个白色底块会让用户操作更加明确

在出现按钮不可点击状态时，必须用清晰明确的文字来提示用户不可点击的原因，减少用户操作成本

根据前述调研结果，可以总结出以下四个优化方向，以提升当前不可点击按钮的辨识度。

根据优化点复杂度从高至低出几版优化方案，当然从所有优化点进行修改在用户体验上是最好的，但同时也要考虑修改影响，涉及各产品页面较多，不仅设计规范要变动，还有涉及到前端代码部门以及业务部门提供各种不可点击按钮状态文案等等，结合其他部门工作量及排期多方面选择最合适的方案进行落地。