F3.03.1luminance hierarchy设计研究

明度差比色相差更可靠地表达层级

别名: 明度层级 · greyscale ranking · 色相对层级不可靠

概念解释

设置页把「当前套餐」做成藏青标题,「到期日」做成同明度的青绿。全彩上看「有点不一样」,一转灰度,两行糊成一条。用色相差排的层级,在明度差不够时站不住;反过来,哪怕两行都是灰,只要明暗拉开,等级还在。层级要靠色彩成立,先问灰度图里还能否排序,再问色相有没有加分。这条讲的是「谁先被当成更重要」,不是色板怎么分阶、语义色怎么映射。

机制

空间结构主要走对明暗敏感的通路:对比度、边缘、谁压过谁,都先在亮度通道里成形。色相通路更擅长告诉你「这是不是同一类东西」,不擅长给出稳定的强弱序。同明度的藏青与青绿在色相上分开了,亮度通道里却是平的,排序任务只好去赌色相通路那点微弱的「更鲜 / 更冷」印象,而这点印象随显示器、环境光和观察者色觉大幅摇摆。灰度测试等于把色相通路关掉,只留亮度通道——能排出来的,才是靠得住的层级;排不出来的,本来就没写进亮度通道。

怎么研究

把目标页做成保持相对明度的灰度版,再做成保持色相、拉平明度的等亮版。两版都做首次命名或第一注视。自变量是被保留的通道(仅明度 / 仅色相 / 全彩),因变量是与意图排序的一致率。等亮版上排序崩溃、灰度版上仍在,就是明度在扛层级。测的时候要报告显示器是否校过,因为未校准屏会把「同明度」做成偷偷带亮差。

边界

警告红、链接蓝这类已经学会的色相语义,会在明度接近时仍被读出「这是可点的 / 这是危险的」,那是语义,不是强弱序。色觉异常观察者几乎只剩明度通道,等亮的色相层级对他们直接消失。高饱和小色块即使明度接近,也可能靠弹出被先看见——那是捕获,会打乱你排好的明度序,需要另一条来管。深色模式里「更深 = 更重要」会翻面,明度差仍然有效,只是哪一头算高要重画。

怎么落地

  • 层级稿先出一张灰度。主标题、正文、辅助说明在灰度里分不开,就还没有层级,不要用「加上品牌绿就有了」过关。
  • 需要用颜色区分状态(在线、过期、错误)时,同时给明度差或字重,不要只换色相。
  • 图表里的系列色如果承担「哪条更重要」,先检查灰度图里重要系列是否仍更跳;若只靠色相认系列,那是编码图例,不是层级。
  • 验证:系统取色或截图转灰度,遮住文字内容只看块面。请人按「看起来更重要」排序。若灰度序与意图序不一致,先改各元素相对背景的明度差,色相放到最后再加。

延伸

  • 同组F3.03.2 高饱和色会越级夺取注意 · F3.03.3 深色模式下明度层级需要反向重建
  • 相邻F5.01 色彩模型与色彩空间 · F5.09 色板的感知要求 · F4.04 字重与强调
  • 站内检索luminance · greyscale test · visual hierarchy · hue versus lightness

同组卡片

快捷操作

分享

分享当前页面

ios_share

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