R4.02.2state layer and ripple设计

组件状态与涟漪反馈体系

别名: 状态层 · 涟漪 · ink reaction · pressed state

概念解释

Material 组件的可交互性不是靠换一张「按下图」来表达,而是靠两套叠在表面上的反馈:状态层(state layer)和涟漪(ripple,早期也叫 ink)。状态层是一层半透明色,盖在启用、悬停、焦点、按下、拖动、选中等状态上,表面的主题色保持不动。涟漪从接触点扩开,标明「这次按下发生在这里」。禁用则是涟漪消失、对比降低,不是换成另一种控件。

它处理的是「手指或指针正在对这个表面做什么」,不是表面在 z 轴上有多高。没有涟漪的按下、或把整颗按钮换成另一个填充色,都会让状态和主题色抢同一条通道:主题一变,按下态就可能看不清,或看起来像另一个组件。

机制

状态层能和主题共存,是因为它是叠色而不是换色。表面色来自主题角色(主色、表面、错误色);状态只改变叠在上面的那一层的不透明度。于是同一颗按钮在动态取色之后仍然用同一套状态不透明度,不必为每套主题重画八张状态图。涟漪从指针坐标起源,是为了把「命中点」做成可见事件——用户能核对系统是不是点到了自己以为的那一块。涟漪画在状态层之下、内容之上,所以文字不会被墨水冲掉,表面角色也不会被墨水改写。

按下是短时状态,选中是持续状态:前者靠涟漪的一次扩散,后者靠状态层保持。把选中做成「一直在涟漪」会让瞬时反馈和持久状态无法分辨。禁用切断涟漪,是因为禁用的含义是「这里没有可完成的动作」;若仍播放涟漪,等于在宣布一次不会发生的命中。

边界

没有悬停的纯触摸设备上,悬停态不该成为唯一能看清可点性的线索,否则键鼠用户和手指用户看到的可交互范围会不一致。电视和远距离界面上看不清细涟漪,需要更明确的焦点框。自定义绘制的表面如果自己用颜色切换来做按下,又叠一套系统涟漪,会出现双重墨水。拖动、滚动中的列表项不应在每次微小位移上触发涟漪,否则整列都会闪。对时间极其敏感的控件(音游打击、相机快门)涟漪会显得滞后,应改用即时的状态层变化,而不是等扩散结束才承认命中。

怎么落地

  • 交互态用状态层叠在主题表面上,不要为按下、悬停、选中各做一套填充色;涟漪从真实接触点发起,并画在内容之下。
  • 把按下(瞬时)和选中(持续)分成两条:选中靠状态层保持,不要靠涟漪循环。
  • 禁用态取消涟漪并降低对比,仍保持可被辅助技术聚焦到的名称与角色;不要仅靠变灰且仍播放墨水。
  • 验证:在同一组件上分别做悬停、键盘焦点、按下、选中、禁用,确认表面角色没被换成另一种颜色、涟漪都从接触点扩开、禁用时无涟漪。换一套动态取色后再走同一组状态,任何一套要靠重绘才能看清的状态,都说明状态被写进了填充色而不是叠层。

延伸

  • 同组R4.02.1 以高度与表面表达层级 · R4.02.3 主题与动态取色机制
  • 相邻R4.09 质感设计的核心约定 · D1.01 操作即时反馈 · D1.06 按压态
  • 站内检索state layer · ripple · ink reaction · pressed state

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/R4.02.2