置灰

视觉置灰

视觉置灰在界面设计中主要起到的是一个筛选的作用。以豆瓣和虎扑为例，帖子如果浏览过就会置灰。

在电商类的产品购买页中，置灰意味着当前的颜色跟尺码没有。置灰的微信红包说明该红包你已经点击过了。

功能置灰

如果一个功能无法使用，其入口我们假设是一个按钮，那么该按钮是应该置灰还是置以常态用户点击之后以弹框报错呢？

如果要禁用一个功能，必须保证用户可以明白禁用的原因。

功能置灰在产品设计中并不常见，因为直接禁用了该功能相当于封死了一条操作路径，会影响用户体验的流畅性。

以支付宝的提现场景为例，如果一个用户打算把钱转出到自己的银行卡里。账户余额只有5万，但是他输入了55万，输入框立刻校验出错误，并且在下方给予文字提示。可是底部的转出按钮依然是可点击状态，用户点击之后，弹出一个对话框提示用户“转出金额超限”。其实这里对话框的存在意义并不大，因为错误信息已经通过输入框底部的文字完成了传达。

同样的场景，京东金融采用的方法对按钮进行置灰，用户不可点击，方案更佳。

如果用户需要在一个表单中输入多条信息，按钮还需要置灰吗？回答是：“不应该”。首先多行输入框意味校验难度的提高，而且移动端碍于屏幕尺寸，很难像pc端表单一样进行逐行报错。

在多行输入框表单样式中，一旦某个输入框出现报错，该行文字变红，这样可以帮助用户快速的定位问题所在，然后再以toast形式告知用户错误原因。