不可用状态设计：如何合理的使用“置灰”？

置灰

“置灰”是相对于“常态”而言的，代表着当前不可用。这里的“不可用”在不同的场景下有着不同的意思：在用户等级体系中，置灰的勋章意味着这个等级你还没有解锁；在卡券中心，置灰的卡券代表着这张卡券已经过期或者已使用。

为了让大家更好的理解，我将“置灰”分为两种。一种是“视觉置灰”，这种置灰仅限于视觉层面，不影响用户正常操作,就像上面的卡券一样，虽然已经过期，但是依然可以点击查看详情；另一种是“功能置灰”，直接禁用该功能，用户不可点击。

视觉置灰

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

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

在网易云音乐中，置灰代表着当前歌曲没有版权，无法播放。这里筛选的维度是该歌曲是否有版权。同样是版权原因，b站中如果该视频没有取得下载权限，采用的就是我下面所说的功能置灰，直接禁用下载icon，用户无法点击。这种处理方法有待商榷，我觉得像网易云一样提供一个弹框安抚一下用户会更好点。

上面提到了歌曲版权的问题，这里可以根据歌曲下载的场景做一个延伸。目前来说，歌曲付费下载已经是常态了。在酷狗音乐中，用户点击下载icon，弹出一个对话框，告知下载该歌曲必须要开通音乐包或者选择单曲购买，用户点击进入相应的开通和购买页。

其余的竞品都是用户点击下载icon，直接进入开通会员/购买单曲的页面，在顶部以通告栏的形式，告知用户下载该歌曲必须要开通音乐包或者选择单曲购买，跳过了对话框。