小小的「置灰」功能背后，有这么多的细节知识！

王M争：我最在梳产报错场景的过程中，发「置灰」状态使用可以有效提升报场景用户体验。本篇文章大家简单分析下如何合理使用「灰」。

一、置灰

「灰」是相于「常态」而言，代表着前不可用。这里「不可用」在不场景下有着不意思：在用户等级体系，灰勋章意味着这个等级你没有解锁；在卡券心，灰卡券代表着这张卡券已经过期或者已使用。

为了让大家更好理解，我将「灰」分为两。是「视觉灰」，这灰仅限于视觉层，不影响用户正常操作，像上卡券样，虽然已经过期，是依然可以击查看详情；另是「功能灰」，接禁用该功能，用户不可击。

二、视觉置灰

于任何个设计元素或者组件，我们想要系统掌握它，首先要从功能入手，弄楚它能够做什么。视觉灰在界设计主要起到是个筛选作用。以瓣和虎扑为例，如这个帖子你已经浏览过了，那么会灰，这样可以筛选出用户未读帖子，提高新帖阅读量。

在电商类品买页，灰意味着前颜色跟尺码没有。灰微信红说明该红你已经击过了。

在网易云音乐，灰代表着前歌曲没有版权，法播放。这里筛选维度是该歌曲是否有版权。样是版权原，b站如该视频没有取下载权限，采用是我下所说功能灰，接禁用下载 icon，用户法击。这处理法有待商榷，我觉像网易云样提供个弹框安抚下用户会更好。

上提到了歌曲版权问题，这里可以根据歌曲下载场景做个延伸。目前来说，歌曲付费下载已经是常态了。在酷狗音乐，用户击下载 icon，弹出个话框，告知下载该歌曲必须要开音乐或者选择单曲买，用户击进入相应开和买页。

其余竞品都是用户击下载 icon，接进入开会员/买单曲页，在顶部以告栏形告知用户下载该歌曲必须要开音乐或者选择单曲买，跳过了话框。这样处理相较于酷狗音乐，缩短了用户操作路径，减少了操作步骤。我们都知个操作步骤都意味着又流失了部分用户，这样做法可以提升转化率。

三、功能置灰

功能置灰（或者说禁用）是这篇文章的重点。在继续阅读之前，大家可以先思考一个问题：如果一个功能无法使用，其入假是一个按钮，那该按钮是应该置灰还是置以常用户点击之后以弹框报错呢？

以支付的提现景为例，如果一个用户算把钱转出的银行卡。账户余额只有5万，但是输入了55万，输入框立刻校验出错误，并且在下方给予文字提示。可是底部的转出按钮依然是可点击状，用户点击之后，弹出一个对话框提示用户「转出金额超限」（跟底部提示文字一）。其实这对话框的存在义并不大，因为错误息已经通过输入框底部的文字完成了传达。

同的景，金融采用的方法对按钮进行置灰，用户不可点击。在这个人比较推崇金融的方式，那这来说上面的问题来有答案了，应该对按钮进行禁用。这的说法显欠妥，应该考虑更多的景，上面提的是行输入框，如果用户需要在一个表中输入多条息，按钮还需要置灰吗？的回答是：「不应该」。首先多行输入框味校验难度的提高，因为每个输入项的格式是不一的。而且移动端碍于屏幕尺寸，难像 pc端表一进行逐行报错。

此外报错的因也可能是用户遗忘了某个栏目没有填，如果按钮置灰，就会给用户造成一个困：不知道哪个步骤做错了，为什按钮还是置灰？如果按钮是可点击的，那就会跳出提示告诉用户你当前还有某某项目未填写。在多行输入框表式中，个人最偏爱金融的理方式。一旦某个输入框出现报错，该行文字会变红，这可以帮助用户快速的定位问题所在，然后再以 toast 形式告知用户错误因。

功能置灰（禁用）味着用户无法该功能进行交互，也无法获得任何反馈。所以如果要禁用一个功能，必须保证用户可以禁用的因。当然这并不味着，只有用户禁用的因，就可以禁用。功能置灰在产品计中并不常见，因为直禁用了该功能相当于封死了一条操作路径，会响用户体验的流畅性。

总结

以上就是对置灰状的简析和总结，有不同的观点和想法欢迎留言或者加群讨论。

欢迎关注作者微信公众号：「王M争」

图片素材作者：Paul Olek