F3.08.2flat design hierarchy loss设计

扁平化削弱层级线索需要其他手段补偿

别名: 扁平化失层 · 去阴影失级 · missing depth cues

概念解释

改版把卡片投影、分区底和按钮的立体沿去掉,只留同色平面和细线。旧版里「这是可点的一层、那是背景」靠高度和填充就能分;新版上工具条、内容和废止按钮站在同一张纸上,有人把说明文字当成按钮点。扁平掉的是一批曾经承载层级的线索,不是自动获得更干净的层级。若不在字号、明度、间距、形状上补回差分,扁平就是把层级拆掉。补偿是显式的加回,不是「习惯了就会分」。

机制

传统控件层级大量写在深度线索和材质线索里:凸起表示可按,凹陷表示输入,投影表示浮层。去掉它们等于关掉两条特征图。剩下来还能排强弱的,是尺寸、明暗、位置、文字语义。若改版时这些也一起「收干净」(字号拉齐、灰阶收窄、间距均分),特征图几乎被清空,分类只好靠猜。失败常被归咎于「扁平审美」,真正缺的是关掉旧线索之后没有指定替代通道。线条边框可以补偿「这是一块」,补偿不了「这块比那块高、这块能按」。

边界

工具型界面如果字号阶梯和明度阶梯本来就陡,去投影之后层级还在,补偿已经存在,不必为扁平本身焦虑。拟物时期靠高光区分的细微状态(按下 / 未按)在扁平里本来就要改成颜色或标签,那是状态编码换通道,不是整页层级。完全无障碍的高对比模式会再切掉残存的灰阶,扁平界面若只靠浅灰分级别,在那一模式里会二次失效。

怎么落地

  • 去投影、去渐变之前列一张「旧线索 → 新线索」:浮层改靠遮罩加尺寸,主操作改靠实心与更大的点击面,分区改靠间距而不是浅底。
  • 禁止「去掉高度的同时把字号也收成两档」。扁平化每次只关一类线索,确认替代通道已经能单独完成分类。
  • 可点与不可点至少在形状或明度上仍可分,不能只靠指针变手型。
  • 验证:把新旧版做成去文字的色块图(字换成横条),请人标「哪些能点、哪块是浮在上面」。新版若标不出而旧版能,补偿失败。补哪一条通道,就只打开那一条再测:加回字号差而不加回影子,若分类恢复,补偿成立;若仍失败,缺的不是审美,是还没选出能工作的替代。

延伸

  • 同组F3.08.1 全部强调等于没有强调 · F3.08.3 层级失效表现为用户不知道先看哪里
  • 相邻F3.06.1 阴影表达元素的层叠关系 · F5.12.3 依赖阴影或渐变表达的层级在高对比模式下需要替代方案 · E1.02 按钮状态
  • 站内检索flat design · elevation · affordance · hierarchy cue

同组卡片

快捷操作

分享

分享当前页面

ios_share

https://hci.top/zh/handbook/F3.08.2