F3.01.3relative visual weight设计研究

权重是相对量,脱离上下文无意义

别名: 相对权重 · local contrast coding · 上下文权重

概念解释

同一句 18 像素中黑体「账户与安全」,放进几乎空白的设置页,它是整页最重的字;嵌进资讯首页的头图旁边,它连副标题都排不上。组件库里给这个标题写死的字号、字重、颜色都没变,变的是邻居。视觉权重是相对量:它描述的是这个对象相对当场其余对象的反差,不是对象身上可贴走的标签。把组件从一页拷到另一页却期望排序不变,就是把相对量当成了绝对量。

机制

编码亮度、尺寸和孤立程度的细胞做的是局部归一化:输出大约是「比周围亮多少 / 大多少 / 空多少」,不是坎德拉或像素的绝对值。周围一空,中等刺激也能出峰;周围已经有更大、更亮、更孤立的对象,同样的刺激被压成背景。组件规范只能冻结绝对值(18px / Medium / #1A1A1A),冻不住归一化之后的名次。这就是为什么「这个标题在设计系统里是 Title 2,所以它在任何页面都是第二级」在知觉上不成立——Title 2 是生产标签,不是当场的峰值排序。

怎么研究

把同一组件嵌进至少两种宿主:稀疏页(设置、空状态)和拥挤页(信息流、工作台)。保持组件规格不变,只换邻居,记录首次命名或第一注视。自变量是宿主的密度与最强邻居的权重,因变量是该组件的名次。名次随宿主移动,相对性就被测到了。只在组件画板的白底上评审标题,测到的是绝对规格,不是使用中的权重。

边界

相对性不是「怎么排都可以」。当差异被推到显示范围的两端——几乎全黑底上的近白大字,或反过来——名次会在很宽的宿主范围里保持稳定,因为已经没有邻居能在物理上超过它。全屏模态暂时清空邻居,里面的中等标题会突然变「最重」,一旦模态关掉,名次立刻交还底层页面。阅读障碍或使用放大字号的用户改变的是整页的绝对尺寸,相对排序通常还在,除非放大把若干对象推出视口,邻居集合本身变了。

怎么落地

  • 组件评审不要只看白底画板。至少贴进「最空的一页」和「最挤的一页」各看一次名次。
  • 可复用模块(卡片头、列表标题、角标)不要承诺跨页面的固定等级,只承诺在指定宿主里的相对位置。
  • 把模块迁到新宿主时,先找新页上现有的最强对象,再决定这个模块是该减重还是该加重,而不是原样粘贴。
  • 验证:截两张图,组件像素级相同,宿主分别是空设置页和密信息流。各请五人写出第一眼对象。若设置页里它是第一、信息流里它掉出前三,就按相对量处理:在拥挤宿主里给它加通道,或接受它在那里不当第一,不要抱怨「组件坏了」。

延伸

  • 同组F3.01.1 尺寸、明度、色彩、位置、留白共同决定权重 · F3.01.2 单一维度的差异容易被其他维度抵消
  • 相邻F3.02.2 层级数量增加会压缩每级的差异 · F3.07.1 视觉层级必须对应内容优先级 · F2.07 信息密度
  • 站内检索relative visual weight · local contrast · centre of interest · context

同组卡片

快捷操作

分享

分享当前页面

ios_share

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