Shit产品设计之UI对比度

npub1zef95zwy99jgq54nhctdyk49nd8u90qne2fkcmcujcnxxjtr9pzs3whurl
hex
176a7c610394c236d2ca30bee1ba91e2599d65956b9d063079ec88e218db0ebenevent
nevent1qqspw6nuvypefs3k6t9rp0hph2g7ykvavk2kh8gxxpu7ez8zrrdsa0sprpmhxue69uhhyetvv9ujuem4d36kwatvw5hx6mm9qgspv5j6p8zzjeyq22emu9kjt2jekn7zhsfu4ymvduwfvfnrf93js3gfwt0zeKind-1 (TextNote)
Shit产品设计之UI对比度
现在是2026年,我发现一个问题,现在一些浏览器(例如Helium)设计,正在激活使用的标签页正常来说应该亮色显示,但偏偏很多是暗色显示,反着来,当然不仅限于浏览器,很多多标签页的UI设计也这么来。
人类最基础的视觉直觉——“高亮代表焦点”,但很多浏览器(尤其是近年来更新后)偏偏要把活跃标签页做成暗色,或者让活跃与非活跃标签的颜色对比度变得极低。这可能是一种趋势,近年来,UI 设计界极度推崇“极简”和“扁平化”。为了让界面看起来更干净、不刺眼,UIer刻意弱化了边框和阴影,导致活跃与非活跃标签的颜色差异被大幅缩小。
这种为了好看而牺牲好用的设计,对一些用户来说,就是一场视觉视觉灾难:
当颜色对比度不够时,用户很难一眼分辨哪个是当前标签,导致想关的没关掉,不想关的反而被关了,增加了误操做概率;
用户每次切换标签都需要停下来仔细阅读标签上的文字,而不是靠视觉余光就能精准定位,增加认知负担;
对于视力不佳、环境光线干扰强,或者色彩不敏感的用户而言,增加了识别困难。
这种激活标签页使用暗色的设计,在浅色模式下大大增加了识别的心智负担,但是也有一种破解方法,就是切换到暗色模式,这是原本的暗色变成了亮色,变相解决了问题。这也是UIer偷懒的一种表现。对浏览器而言,还有一种更简单的方法,就是更换主题(如果支持的话)。 这也是从头到尾我都不愿意称呼这些人为设计师,而是UIer的原因。
众所周知的垃圾设计制造者→苹果,就犯过类似的错误。
2025年07月,在 macOS 26 Tahoe Beta 3 测试版中,苹果对 Safari浏览器和终端应用的标签页界面进行了调整,解决了用户反馈的低对比度问题,使当前活跃标签更易于识别。原因就是此前在 Beta 1和Beta 2版本中,Safari 和终端应用引入了新的标签页设计,其中一项变化是在非活跃标签底部添加了黑色条。然而这一改动引发了用户的普遍不满,认为新设计影响了辨识效率,特别是在活跃标签与非活跃标签之间的视觉区分不够明显的情况下,容易造成混淆。一些用户甚至误将带有下划线的非活跃标签当作当前正在使用的标签。
Shit!
Raw JSON
{
"kind": 1,
"id": "176a7c610394c236d2ca30bee1ba91e2599d65956b9d063079ec88e218db0ebe",
"pubkey": "16525a09c429648052b3be16d25aa59b4fc2bc13ca936c6f1c96266349632845",
"created_at": 1780969906,
"tags": [
[
"client",
"Primal Android"
]
],
"content": "Shit产品设计之UI对比度\n\n现在是2026年,我发现一个问题,现在一些浏览器(例如Helium)设计,正在激活使用的标签页正常来说应该亮色显示,但偏偏很多是暗色显示,反着来,当然不仅限于浏览器,很多多标签页的UI设计也这么来。\n\n人类最基础的视觉直觉——“高亮代表焦点”,但很多浏览器(尤其是近年来更新后)偏偏要把活跃标签页做成暗色,或者让活跃与非活跃标签的颜色对比度变得极低。这可能是一种趋势,近年来,UI 设计界极度推崇“极简”和“扁平化”。为了让界面看起来更干净、不刺眼,UIer刻意弱化了边框和阴影,导致活跃与非活跃标签的颜色差异被大幅缩小。\n\n这种为了好看而牺牲好用的设计,对一些用户来说,就是一场视觉视觉灾难:\n\n当颜色对比度不够时,用户很难一眼分辨哪个是当前标签,导致想关的没关掉,不想关的反而被关了,增加了误操做概率;\n\n用户每次切换标签都需要停下来仔细阅读标签上的文字,而不是靠视觉余光就能精准定位,增加认知负担;\n\n对于视力不佳、环境光线干扰强,或者色彩不敏感的用户而言,增加了识别困难。\n\n这种激活标签页使用暗色的设计,在浅色模式下大大增加了识别的心智负担,但是也有一种破解方法,就是切换到暗色模式,这是原本的暗色变成了亮色,变相解决了问题。这也是UIer偷懒的一种表现。对浏览器而言,还有一种更简单的方法,就是更换主题(如果支持的话)。\n这也是从头到尾我都不愿意称呼这些人为设计师,而是UIer的原因。\n\n众所周知的垃圾设计制造者→苹果,就犯过类似的错误。\n\n2025年07月,在 macOS 26 Tahoe Beta 3 测试版中,苹果对 Safari浏览器和终端应用的标签页界面进行了调整,解决了用户反馈的低对比度问题,使当前活跃标签更易于识别。原因就是此前在 Beta 1和Beta 2版本中,Safari 和终端应用引入了新的标签页设计,其中一项变化是在非活跃标签底部添加了黑色条。然而这一改动引发了用户的普遍不满,认为新设计影响了辨识效率,特别是在活跃标签与非活跃标签之间的视觉区分不够明显的情况下,容易造成混淆。一些用户甚至误将带有下划线的非活跃标签当作当前正在使用的标签。\n\nShit! \n\n",
"sig": "108e1ce9a11bb1864ffbb585553a279009f5720c4dd27fef205eb37ef6f4a3931445eacfa139a64495d42fdd381057e3f7f03773b11d5a55829178509f4fefcb"
}