R4.10.2light as interactivity cue设计

光照、材质与深度用于表达可交互性

别名: Fluent 光照 · reveal highlight · 可交互材质

概念解释

Fluent 用光、材质和深度回答一个问题:这里能不能动手。指针靠近时表面接住高光,可点的区域和桌面背景在材质上分开,命令层略微浮起——这些不是把界面装得更「高级」,而是在标出可交互对象。这个用法叫以光为可交互线索(light as interactivity cue)。惰性内容不接光、不换材质、不抬层;可作用对象才接。

它和 Material 用物理隐喻讲「谁压着谁」不是同一件事。那边的深度首先是层级;这边的光与材质首先是示能。一块处处同样发亮的界面,等于关掉了这套线索。

机制

鼠标和笔在接触之前先经过表面,人需要一份「还没点下去」的预告。光斑、边缘亮和材质差承担这份预告:焦点或指针所在的对象从背景里被拣出来。触摸缺少悬停,深度和材质差就改在静止状态下工作——可点的块与只读的块不能共用同一张平坦表皮。

线索一旦变成纯装饰,信噪比塌掉。所有卡片都铺一层磨砂、所有列表行都发光,用户无法用眼睛预筛选。机制要求可变:光跟随焦点与指针,材质差跟随「这是命令还是内容」,深度跟随「这是临时层还是底稿」。三者都在回答可交互性,而不是在回答品牌气质。

边界

高对比、减少透明、关闭动画的系统设置会关掉光与材质的一部分;此时可交互性必须退回到形状、间距和焦点环,不能把示能只押在亚克力上。触摸优先、没有指针的会话里,悬停高光本来就不会发生,静止态的材质差和命中面积要先就位。数据可视化用光编码数值时,不要再拿同一套光去标按钮。印刷和静态演示没有指针,这套线索用不上。

怎么落地

  • 给可点击、可拖、可聚焦的表面规定一种「接光 / 换材质 / 微抬」的响应;只读文本和插画明确不接。
  • 命令表面(工具条、弹出层)与内容表面用材质或深度分开,避免整窗同一层磨砂。
  • 系统打开「减少透明效果」时,用实底加焦点环替换光与材质,不要让可点对象消失。
  • 验证:截一张静帧,涂掉全部文字,让人标出「哪些还能点」。标错或漏标的,就是光与材质没有在说话。再开减少透明,重复一次;只在亚克力开启时才能被认出的控件,记为示能绑死在装饰上。

延伸

  • 同组R4.10.1 同一应用需在鼠标、触摸、笔与手柄之间通用 · R4.10.3 窗口尺寸自由决定布局不能假设固定画布
  • 相邻R4.03 视窗平台约定 · R4.09 质感设计的核心约定
  • 站内检索light as interactivity cue · Fluent · affordance lighting

同组卡片

快捷操作

分享

分享当前页面

ios_share

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