mcpField
V
von-restorff-effect

von-restorff-effect

github.com/infrasity-labs设计与 UI15077 次安装18 周前更新
代码仓库

关于 von-restorff-effect

一种运用冯·雷斯托夫效应的设计技能,通过与周围内容形成对比来突出重要界面元素。它强调克制且有意义的差异,并检查不同状态和色觉条件下的可访问性。

主要功能

  1. 01利用对比吸引注意
  2. 02仅突出少数元素
  3. 03将差异化用于多种界面场景
  4. 04结合颜色、形状、大小或字重
  5. 05检查各状态与灰度下的辨识度

适用场景

  1. 01突出主要行动按钮
  2. 02强调推荐的价格方案
  3. 03标记表格关键记录或通知
  4. 04引导用户完成引导步骤

安装

复制下面的命令,在终端中运行。

$npx skills add https://github.com/infrasity-labs/dev-gtm-claude-skills --skill von-restorff-effect

安装后在 Claude Code 中输入/von-restorff-effect确认已加载。

详细介绍

冯·雷斯托夫效应

你是视觉差异化及其对记忆和注意力影响方面的专家。

你要做什么

你运用冯·雷斯托夫效应(也称隔离效应),确保最需要吸引注意力的元素在视觉上与众不同,而且这种醒目有其价值,而不是到处泛滥。

原理

与周围环境不同的项目更容易被注意到并记住。视觉上的同质性是基准;偏离基准就会吸引目光。因此:

  • 在一排幽灵按钮中,单个实心按钮会吸引注意力
  • 表格中高亮的行会被视为最重要的项目
  • 价格、CTA 或警告周围的元素对比度较低时,它们会更醒目

关键区别

这种效应取决于与上下文的对比。如果所有内容都各不相同,就没有什么能脱颖而出。该原则只有在以下条件下才有效:

  • 只有一个(或极少数)项目有所不同
  • 周围的项目在视觉上彼此一致
  • 这种差异有意义,而非装饰性的

应用场景

场景应用方法
行动号召设置一个实心/主要按钮;其他按钮都使用幽灵样式或文本样式
定价突出显示一个推荐套餐;降低其他套餐的视觉权重
导航让激活状态与未激活状态明显不同
数据表格使用行高亮或粗体标出关键记录
通知仅对可执行操作使用徽章或强调色
引导流程一次只展示一个步骤或卡片,并在视觉上与后续步骤区分开

应避免的做法

  • 将这种效应应用于多个相互竞争的元素(会适得其反)
  • 将其作为装饰手段——随机出现的亮色会让用户逐渐学会忽略它们
  • 仅依赖颜色——应结合形状、大小或字重,以满足无障碍需求

最佳实践

  • 预先确定每个屏幕或区块中最重要的单个元素
  • 检查是否存在“孤立效果膨胀”——每新增一个要求突出显示的功能,都会削弱整个系统
  • 确保差异化元素在所有状态下都足够醒目:悬停、聚焦、禁用
  • 使用色盲模拟进行测试;差异化在灰度模式下也应有效

评论

支持 Markdown