禁用Disabled
视觉效果与操作状态显示控件暂时不能操作
禁用状态会阻止按钮、输入框等控件响应操作。除了降低视觉强调，还要在附近说明不能使用的原因和恢复条件；用户完全不需要知道的入口才考虑隐藏。
先填邮箱才能提交
经典场景：表单没填完，提交保持禁用并说明原因
什么时候用
- 提交提交
- 表单未完成时若禁用提交，就近显示缺什么，别让用户猜lin@example.com密码（必填）注册还有必填没填，提交保持禁用
- 原因直接写在旁边：让键盘和触屏用户也能看到请先填写密码注册
- 提交中防重复点击：请求没回来前禁用，避免重复下单提交中…
什么时候不用
- 禁用了不说为什么：用户对着灰按钮干瞪眼，最伤体验立即购买
- 永久无权限的入口一律隐藏：用户可能不知道功能存在或怎样申请普通成员永远没权限的入口，干脆别渲染出来
- 灰得不够：看着能点其实禁用了，点了没反应以为出 bug删除项目
- 该禁用不禁用：点了毫无反应，比禁用更让人迷惑提交
组成结构 · Anatomy
提交🚫 点击无效提示：先填邮箱
1置灰外观Greyed降透明度、去饱和度，一眼看出不能点
2禁止交互Blocked点了没反应，键盘也聚焦不上
3原因说明Reason为什么禁用、怎样才能点，必须交代
常见变体 · Variants
置灰Greyed
提交
透明度降到 0.4 左右
禁用 + 提示With Reason
注册先填密码
告诉用户怎样才能点
直接隐藏Hidden
（不渲染）
永远用不到就别显示
典型使用场景
表单未填完禁用提交
注册账号
还有必填项没填，提交按钮保持禁用
无权限操作置灰
提交中防重复点击
机械键盘 ×1¥ 199.00
配送至：深圳市南山区 · 林小hu 收
请求返回前禁用，防止重复下单
售罄商品不可购买
已售罄
限量猫咪摆件
¥ 89 · 补货时间待定