R1.03.1interactive state set设计
每个组件都需定义全部交互状态
别名: 交互状态集 · hover focus disabled · 控件状态目录
概念解释
凡是能被指针、键盘或辅助技术碰到的组件,都要给出一套闭合的交互状态集(interactive state set):默认、悬停、焦点、按下、禁用、选中——按控件类型取适用的子集,但适用的那些一处都不能空。状态集是和输入通道签的合同,不是视觉润色清单。
它管的是「用户正在操作这个控件时它长什么样、能不能动」,不是数据还没来、列表为空、请求失败那一类内容状态。
机制
每一种输入通道都会向组件索要一个状态。鼠标进入索要悬停,Tab 停在上面索要焦点,点击瞬间索要按下,平台或业务关掉它索要禁用。设计侧不提供时,通道仍会要:浏览器画出自己的焦点环,操作系统把禁用画成一层灰,移动端把按下做成未知的高亮。这些回退彼此不一致,也和产品其余控件对不上。
闭合的意思是:适用通道的每一种索要都有产品自己的回答。链接没有「选中」、复选框没有「按下保持」,子集可以比按钮短,但不能把焦点从子集里删掉——键盘用户还在。漏掉的那一格不是「以后再画」,而是把决定权交给了用户代理。
边界
纯展示、不可聚焦、也没有点击热区的装饰(分割线、静态徽章)没有交互状态集,硬造悬停会谎报可操作性。只存在于触控、没有指针悬停的表面,悬停可以从子集里拿掉,但焦点和按下仍在——外接键盘和开关控制仍会聚焦。只读字段不是禁用:只读仍可聚焦、可选中文本,套用禁用态会把内容锁死。自定义控件若用通用容器模拟,状态集还要能被辅助技术读到,不能只改外观。
怎么落地
- 按控件类型列出适用的交互状态,写成该组件的状态表,缺一格就标缺口,不允许用「同默认」糊弄焦点和禁用。
- 在设计文件和代码示例里为每一格各放一帧,焦点帧必须看得见焦环或等效指示,不能只在悬停里带过。
- 用键盘和屏幕阅读器各走一遍:每个可交互组件都能聚焦,禁用的不能激活,选中的能被读成选中。
- 验证:关掉鼠标,只靠 Tab 和空格把组件的适用状态全部点亮;任何一格看起来像浏览器默认或完全无反馈,状态集就还没闭合。