我们的眼睛很奇怪，因为它经常对我们说谎。但如果您了解人类视觉感知的这一特征，您可以设计出更加用户友好的界面。如果您是字体设计师，可以通过利用人眼的视觉特性来设计更和谐的字体。如果您是设计用户和机器通信方式的界面设计师，那么理解这个可视化功能对您的工作非常有用。这个视觉特征究竟是什么？请继续往下看。

1.几何视角和人类视角

您认为下图中的哪个方块和圆圈更高？

是否觉得左边的方块比右边的圆圈大得多。但是，如果我告诉你，从几何角度来看，它们的宽度和高度是相同的。我知道你必须认为我会再次骗你，然后我只能标记比例。

我们来看看图片吧。你看到这张照片中正方形和圆形的高度和直径是否相同？

对我来说，正方形的高度和圆的直径看起来是一样的。换句话说，我不能告诉你哪一个更大。我不知道你是否有同感？

实际上，这是因为我将圆的直径增加了50个像素。

为了说明这个问题，我有上面两个例子（一个是：一个400像素的正方形和一个圆;另一个是：一个400像素的正方形和一个450像素的圆）。数字。

如上图所示，左侧的正方形具有比圆形更多的区域a的部分，并且右侧的圆形具有比正方形更多的区域b的部分。左图中的正方形完全包围圆，而右图中的正方形和圆相对平衡。他们两个都没有完全包围另一边。相反，他们都有四个区域而不是另一个。此外，右图中的正方形和圆形局部区域是重合的，尽管正方形的宽度和圆的直径是不同的。

我们可以在正方形和钻石的比较中找到相同的现象。为了使它们看起来相同，正方形略宽并略高。基于尺寸的处理在各种简单形状中完全有效。

你认为上面的图片是1到2,3到4吗？

那么在设计界面时我们如何应用这个原理呢？

例如，当您设计一组图标时，重要的是使图标集看起来相同，这样一些图标不会太突出，而某些图标看起来不会太小。 。如果我们将图标直接放入方形区域，那么这些比较的图标看起来会更大一些。如下所示。

你认为2比1更大，4比3更大吗？

因此，我建议在设计图标时稍微调整不同形状图标的大小。让那些看起来更小的图标稍微大一点，那些看起来更大的图标稍微小些。如下所示。

事实上，许多图标现在确实有这样的微调。

现在我们应该知道为什么图标区域总是比图标本身大一点。 ——只是因为你想要不是方形的图标看起来像方形图标一样大。

实际上，测试用户可视区域大小的最简单方法是模糊图标。如果模糊生成的图标相似，则图标看起来相同。

但在实践中，我们经常使用现有的图标。例如，经常用于分享和喜欢的社交代购源码网站徽标。 Facebook和Instagram图标是正方形，而Twitter徽标是鸟的轮廓，Pinterest徽标被圆圈“P&rdquo”包围。这就是为什么Twitter和Pinterest的图标比Facebook和Instagram略大，因为它们的四个图标看起来同样大。

当在文本框后面放置一个圆形按钮时，另一个视觉平衡示例如下所示。如果圆形按钮的直径等于文本框的高度，则圆形按钮看起来比文本框小。但如果你将圆形按钮的直径放大一点，整个设计看起来会更平衡。

但是如果调整圆形按钮的样式，则无需调整按钮的直径，如下所示。圆形按钮和文本框都是80像素高，但由于圆形按钮填充了黑色背景颜色，因此两者无法看到哪一个很小。

摘要（敲黑板）：

视觉大小是人眼知道的对象的大小和含义，其不一定等于对象的实际像素大小。

其他非方形图标（例如圆形，菱形，三角形等）需要稍微大一些，以使它们看起来像其他方形图标一样大。

图标应该有一些空间用于视觉平衡。这对于看起来大小相同的一组图标非常重要。

2不同形状的一致性

视觉一致性是视觉平衡和视觉权重主题的逻辑延伸。以图片中的条纹为例。你看看他们的长度吗？

从像素的角度来看，它们的长度是相同的。然而，很多人会觉得下面的条纹乍一看是短的。

再看一下这张照片，你认为它们的长度是一样的吗？

我借用视觉补偿的原理将底层条纹的长度增加20个像素，以补偿两个条纹之间的视觉差异，使两条纹的长度看起来相同。

当然，还有一些更成熟的不同形状条纹的例子，如下图所示。

因此，如果您要为海报折叠效果设计条纹效果，或者如果您要在电子商店中打折产品上的条纹，请确保条纹看起来平衡。尖锐的条纹边缘应该略微超出其他形状，尤其是矩形条纹。

如何将纯文本和段落放置背景颜色？它取决于段落背景的视觉密度。如果背景颜色更亮，则可以以纯文本突出显示该段落。

由于背景颜色更亮，用户读取的文本流通常不会中断。

但如果背景颜色稍暗，此方法将不再起作用。如下所示，黑色背景与文本的其余部分对齐，而白色文本则缩进几个字符。

你为什么要这样做？与明亮的背景颜色不同，黑色背景颜色具有很多视觉重量。如果你把它放在段落的中间，它与其他段落没有区别。最好的方法是Align，而不是突出显示部分。

相同的原理适用于按钮和输入框的位置，如下所示。这不是标准，只考虑界面的视觉效果。

在左侧图像中，输入框的明亮背景颜色可能略微超过输入框和用户输入的部分。发送右侧的“rdquo;按钮不需要与输入框的右侧完全对齐，因为发送按钮的背景颜色较暗，人眼看起来有点重。

在右侧图像中，输入框有黑色边框。我将输入框与文本标签对齐，并将用户输入缩进到输入框中。 “发送”按钮在一侧有一个三角形，所以我把它放在右边一点，使它看起来更方便与方形输入框。

在上图中，我们提到了文本和图标按钮的对齐方式。现在我们来谈谈这部分。如下图所示，看一下，文本相对按钮是否居中？

你能发现我把右边的文字略微向左移动了吗？因为右键的右边是三角形，而不是正方形。此外，右按钮比左按钮宽40像素，使它们看起来大小相同。如下所示。

文本按钮不仅具有水平对齐方式，还具有文本和背景的垂直对齐方式。我想告诉你的第一种方法经常用于各种操作系统，代购源码网站和应用程序界面设计。它根据字体的大写字母的高度（所谓的大写字母的高度）对齐，其高度等于大写字母“H”或“&”的高度

基本上，在按钮中，大写字母与按钮的顶部和底部等距离。这是合理的，因为按钮的名称写在标题中，英文字母中的上部字母（上升，上升字母，例如：l，t，d，b，k，h）大于降序字母（下降，字母向下，如：y，j，g，p）。

另一种方法是对齐文本按钮中的小写字母的高度（所谓的X高度）。在sans和sans serif字体中，这个高度等于字母的高度< ;; x”，不要惊讶〜

这种方法也是合理的，因为文本的主要光学权重集中在小写字母所在的区域。

那么这两种方法有什么区别呢？

虽然两种方法之间存在差异，但差异不是很大，如下所示。

我们来看几个例子。

下图中的左侧表示较大字母的对齐方式，这也是“取消”和“确定”按钮的最常见形式。因为“取消”没有降序字母，“好””是大写字母。

下图的右侧表示基于x高度的对齐。这是“同步”的最佳形式。按钮，因为它恰好有一个向上的字母和一个向下的字母。相对而言，“取消”和“确定”的格式似乎要高一些。

图标按钮也有一些差异。让我们把共同的“发送”圆形按钮中的图标，如下所示。你能看出哪种放置方法看起来更和谐吗？

也许您已经注意到上图左侧的按钮看起来不正确。这是由于不同的比对。第一个按钮将三角形的图标视为矩形。在某种程度上它是正确的，因为当您将SVG或PNG格式的图标发送到研发时，研发将其放在方形区域中。第二个按钮可确保在放置图标时图标的每个角都与圆形按钮的边缘匹配。如下所示。

当您为研发准备一个图标时，您需要预留一些区域以确保R&D将图标放在方形背景中并且可以居中并且看起来很和谐。

这与“玩”中的相同。按钮。如果您将三角形的图标直接置于方形背景中，如下图左侧所示，则看起来很奇怪。

但是如果你想让三角形看起来很和谐，你可以把它想象成一个圆圈，然后用它来居中这个方块的背景。

摘要（敲黑板）：

角形形状略大于角形形状，与方形物体一样大。

在具有背景的按钮上放置按钮名称时，广泛使用大写对齐。

有效处理按钮上三角形图标的位置的方法是将三角形视为圆形，然后与背景对齐。

3个光学圆角

有什么比圆形更圆？我一直认为这种事情不存在。但正如我在文章开头所说，我们的眼睛很奇怪，有时它所感知的东西并不是我们所期望的。

你能看到下图中哪一个圆圈最圆？

我向很多人询问了这个问题，他们会在图3和图4中选择。图1和图2显然不够圆，而图5看起来太平。如果我们将图3的几何圆与图4的变量圆重叠，我们会发现图4看起来比图3略圆，如下图所示，左图是上图的图3，右图是上图中的图4，中间是两者的重叠圆。

为了更好地说明这个问题，我采用了字母< o&r;的三种常见几何字体。例如：Futura，Circle和Geometria。由于高质量字体基于人类视觉感知系统并使用先进的视觉构造系统构建，我认为它们看起来比几何圆更圆。你有这种感觉吗？

我们将几何圆与上面的三个重叠以得到下面的图像。即使是最接近Futura的字体也会突出显示四个部分，而字体Circle和字体Geometric几何比几何圆宽。当然，这种比较是在相同的高度和宽度下完成的。

因此，从视觉角度来看，根据相关规则调整的圆将看起来比几何圆更圆。如下所示。

左侧是几何圆。

那么我们如何在设计中使用这种现象呢？

是的，你没猜错，我们可以在设计圆角时利用这一现象。如果使用当前的图像编辑软件（如Photoshop，Illustrator或Sketch）绘制图片，则绘制的图片是几何图形，而不是更和谐的图片。如下所示。

你认为这个圆角是一条突然变成曲线的直线吗？换句话说，这个圆角看起来并不自然。

我根据视觉感知对这个圆角进行微调，如下所示。

我在我自己的圆角上添加了另一个区域，使得线到曲线的渐变看起来更加平和。如下所示。

您可以从下图中看到两个圆角之间的差异。

我们也可以在圆角按钮上使用此方法，如下所示。

我猜您已经发现上图中右侧按钮的圆角看起来更平滑，看起来更舒服。

同样，我们也可以将其应用于app图标的设计。不易使用圆角的标准可以获得完美的效果。但既然我们已经讨论过这个话题，我们不妨尝试比较两个圆角。

如上图所示，左侧的图像是我用Sketch绘制的标准圆。右边的图片是superllipse，也被称为Lamé曲线。林é曲线由法国数据公司Gabriel Lamé发现;

林克爱德华兹指出Lamé曲线公式可以产生更平滑，更完美的形状。 iOS 7之后的图标也在使用它。

之后，根据黄金比例和引导新图标设计的网格调整此形状，如下所示，但这是另一回事。

使用超级椭圆形状的最大优点是它们看起来更圆润，更光滑。然而，这种非标准形状难以在真实界面中使用。他们应该能够组合多个特殊配方SVG，或者使用一些脚本，或者像Apple在他们的应用程序图标上那样使用PNG蒙版。

那么，如果你在设计过程中调整圆角呢？

您需要将默认圆角转换为轮廓，然后打开形状编辑模式并手动调整曲线的位置，如下所示。

调整后的圆角看起来比圆角的确切数目更直观，这对于视觉上校正图像很重要。

左：调整前

摘要（敲黑板）：

几何圆角看起来有点假，因为你可以清楚地看到一条直线突然变成一条曲线。

视觉上校正的圆角需要特殊的配方或手动调整形状。

蛋

有时候，你认为你画的方块看起来不对吗？

你可能会想，这不是废话吗？那么，看看下图中的两个方块，哪一个看起来更方正？

哪个更像是一个广场？

如果您的选择在左侧，那么您可能已经从无偏见的光学感知中聆听了内在的声音。

事实上，右侧更加方正。

就个人而言，当我知道我们的眼睛对物体的高度比宽度更敏感时，我感到很惊讶。这也解释了为什么几何字体“&”的宽度比几何尺寸大的字母“H”宽，为什么垂直部分总是比水平部分宽。

&MDASH;结束—

谢谢你的阅读！

原文：用户界面中的光学效果（对于真正的书呆子）

来源：中等

原作者：Slava Shestopalov

« 如何在网页中实现游戏化设计？研究这7个案例 | 谈论SEO优化的两个核心！ 3,000家服务提供商选择他们选择的SEO平台 »