组件状态与涟漪反馈体系
别名: 状态层 · 涟漪 · ink reaction · pressed state
概念解释
Material 组件的可交互性不是靠换一张「按下图」来表达,而是靠两套叠在表面上的反馈:状态层(state layer)和涟漪(ripple,早期也叫 ink)。状态层是一层半透明色,盖在启用、悬停、焦点、按下、拖动、选中等状态上,表面的主题色保持不动。涟漪从接触点扩开,标明「这次按下发生在这里」。禁用则是涟漪消失、对比降低,不是换成另一种控件。
它处理的是「手指或指针正在对这个表面做什么」,不是表面在 z 轴上有多高。没有涟漪的按下、或把整颗按钮换成另一个填充色,都会让状态和主题色抢同一条通道:主题一变,按下态就可能看不清,或看起来像另一个组件。
机制
状态层能和主题共存,是因为它是叠色而不是换色。表面色来自主题角色(主色、表面、错误色);状态只改变叠在上面的那一层的不透明度。于是同一颗按钮在动态取色之后仍然用同一套状态不透明度,不必为每套主题重画八张状态图。涟漪从指针坐标起源,是为了把「命中点」做成可见事件——用户能核对系统是不是点到了自己以为的那一块。涟漪画在状态层之下、内容之上,所以文字不会被墨水冲掉,表面角色也不会被墨水改写。
按下是短时状态,选中是持续状态:前者靠涟漪的一次扩散,后者靠状态层保持。把选中做成「一直在涟漪」会让瞬时反馈和持久状态无法分辨。禁用切断涟漪,是因为禁用的含义是「这里没有可完成的动作」;若仍播放涟漪,等于在宣布一次不会发生的命中。
边界
没有悬停的纯触摸设备上,悬停态不该成为唯一能看清可点性的线索,否则键鼠用户和手指用户看到的可交互范围会不一致。电视和远距离界面上看不清细涟漪,需要更明确的焦点框。自定义绘制的表面如果自己用颜色切换来做按下,又叠一套系统涟漪,会出现双重墨水。拖动、滚动中的列表项不应在每次微小位移上触发涟漪,否则整列都会闪。对时间极其敏感的控件(音游打击、相机快门)涟漪会显得滞后,应改用即时的状态层变化,而不是等扩散结束才承认命中。
怎么落地
- 交互态用状态层叠在主题表面上,不要为按下、悬停、选中各做一套填充色;涟漪从真实接触点发起,并画在内容之下。
- 把按下(瞬时)和选中(持续)分成两条:选中靠状态层保持,不要靠涟漪循环。
- 禁用态取消涟漪并降低对比,仍保持可被辅助技术聚焦到的名称与角色;不要仅靠变灰且仍播放墨水。
- 验证:在同一组件上分别做悬停、键盘焦点、按下、选中、禁用,确认表面角色没被换成另一种颜色、涟漪都从接触点扩开、禁用时无涟漪。换一套动态取色后再走同一组状态,任何一套要靠重绘才能看清的状态,都说明状态被写进了填充色而不是叠层。