（翻译）赫曼方格如何影响用户视觉

  试想一下，浏览一组网格状分布的图片时，屏幕中会出现幽灵般的灰色斑点。这不是幻觉，而是用户在赫曼方格生效时的所见内容。当网格状分布的图片之间间隔超过2个像素时，用户会在网格的交叉点处看到幽灵般的灰色斑点，但将注意力集中到交叉点处时，却又什么都看不到。

  在交叉点处，白光充斥了视网膜中的大部分接受区，这会造成强烈的侧抑制，导致出现看似灰色的区域。直视交叉点会激活视网膜中央窝，由于它有最小的接受区和最多的感光细胞，很少引起横向抑制，因此直视时看不到灰色斑点。[1]

网格状分布的图片的最佳排列方式

  网站中排列网格状分布的图片时通常使用10个像素或更大的间距，但这样会出现赫曼方格错觉，影响用户浏览图片。灰色斑点毫无美观可言，以下几种方式可以消除它们。

2个像素的间距

  将图片之间的间距设置为2个像素可以消除灰色斑点。由于边距变小，这样还能节省页面空间。

不规则的间距

  另外一种方法是使用大小不同的图片，这样能产品不规则的间距，从而消除灰色斑点。

增大行间距

  增大行间距，使其大于列间距，这样也能消除灰色斑点，同时也让用户按行浏览图片。

添加彩色背景色

  除了改变图片间距，还可以修改网格的背景色。任意的彩色背景色都能消除灰色斑点。

结语

  人眼欺骗人的方式很有趣。赫曼方格欺骗了人的视觉，分散了注意力。但通过适当地排列图片，可以降低视觉干扰。网格状图片是网站的常用布局方式，下次要使用它时，请记住用户可以看到什么[2]。

原文地址：https://uxmovement.com/content/how-the-hermann-grid-illusion-affects-what-users-see/

[1]http://sharpbrains.com/blog/2006/12/24/the-hermann-grid-visual-illusion/
[2]原文：Image grids are a common layout choice for websites. Next time you decide to use one, remember what use[]rs could see.