Y3.12.4Decorative depth cues in control displays设计

三维效果与阴影等装饰会干扰状态判读

别名: 三维装饰 · skeuomorphic control graphic

概念解释

三维透视、按钮倒角、投影阴影这类装饰如果不对应真实的控制状态或空间关系,会干扰操作者对状态的判读:这些效果会在图形上制造额外的边缘和明暗变化,而这些边缘和明暗本身很容易被误读成状态信息,导致同一个按钮放在不同背景色上时,看起来像是处于不同的状态。

机制

阴影、高光和立体透视会占用和状态颜色同一条视觉通路——面积大小、边界清晰度、明暗层次,这些原本可以专门用来表示某个对象是否被按下、是否可用、是否被其他对象遮挡,一旦装饰性的深度效果也在用同样的视觉线索,操作者就很难只凭视觉判断哪部分明暗是真状态、哪部分只是美术处理。比较典型的冲突是阴影本身经常被视觉系统读成"这个对象比周围高出来一截"或者"这个对象被压下去了",如果这层阴影只是界面的默认样式而不对应真实的按下/抬起状态,操作者会把默认的装饰性阴影错当成状态变化。做成完全平面不是这里的目的,真正要保证的是每一处视觉差异都对应唯一确定的含义,不能有一种视觉效果同时被用来表示"好看"和"这是个真实状态"两件事。

边界

在确实存在真实空间关系的场景里,比如需要表示设备之间的机械装配位置、操作者能不能实际够到某个物理层——这类深度线索是任务本身需要的信息,不属于纯装饰,不应该一并去掉。去除装饰性阴影时也要小心不要连带擦掉控件本来该有的边界线和键盘焦点提示,这些同样依赖轮廓和对比度,如果为了追求"扁平"把所有边界都简化掉,反而会让操作者分不清哪块区域是可以点击的控件。判断一处深度效果该不该保留,标准是它有没有对应的任务含义,不是它看起来是不是够新够炫。

怎么落地

逐个列出界面里现有的三维、阴影、渐变效果,标注它每一处到底想表示什么状态或空间关系;找不出对应含义的,或者和其他状态编码(颜色、闪烁)互相冲突的,直接去掉,改用轮廓线、文字标注或明确的开/关图标来表示相应状态。替换后,把同一个控件分别放到浅色和深色两种背景下、以及在亮度不足或对比度下降的旧显示器上分别测试,确认操作者依然能可靠读出它当前的状态,不会因为背景变化而误判。

延伸

  • 同组Y3.12.1 低饱和灰阶背景使异常色彩更容易被识别 · Y3.12.2 高对比色彩应保留给需要立即关注的状态 · Y3.12.3 全屏高饱和配色会让一切都显得同等重要
  • 相邻Y3.03 颜色与编码规范 · Y3.04 界面的信息密度
  • 站内检索skeuomorphism · flat design · state coding · visual clutter

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/Y3.12.4