用户界面
如何制作光学平衡的图标，正确的形状对齐以及完美的圆角修整
[
](https://shestopalov.medium.com/?source=post_page——-9fca82b4cd9a————————————————)
我们的眼睛很奇怪，经常误导我们。但是，如果您知道人类视觉的特殊性，则可以创建更好的设计。字体设计者不仅利用视觉技巧来创建可读且平衡良好的字体，而且对于进行人机交互的设计者也很有帮助。
在 1920 年代，格式塔的视觉感知理论出现了。它解释了我们的眼睛如何处理不同的图像以及我们的大脑如何解释它们。您可能已经听说过 “接近原则” 或“共同命运规则”之类的内容。本文重点介绍了格式塔理论的各个方面，设计师可以在他们的工作中使用它们。
更大的是：400 像素的正方形或 400 像素的圆圈？从几何学上讲，它们的宽度和高度相等。但是请看下面的图片。我们的眼睛立即发现正方形大于圆圈。
让我们再看一张带有正方形和圆形的图片。就视觉重量而言，它们等于您吗？
至少很难立即分辨出哪个比另一个重要。不足为奇，因为我增加了圆的直径。
我将第一个和第二个示例中的形状进行了重叠。在左侧，400 像素正方形的面积大于 400 像素圆圈的面积。这就是为什么我们在视觉上看到它更大的原因。在右边，圆和正方形是平衡的。它们的面积相似，而宽度和高度却不同。
我们可以看到菱形或三角形具有相同的效果。为了在视觉上与正方形保持平衡，它们应该更宽和更高，以使它们的面积相似。基于区域的方法与最简单的形状完美配合。
如何在界面中使用此功能？例如，当您创建一组图标时，使它们都具有良好的平衡非常重要，这样，图标就不会显得太突出或太小。如果我们直接在方形区域中刻入图标，则更多类似方形的图标将显得更大。
我建议通过允许视觉上较小的图标悬挂在图标区域之外并在视觉上较重的图标和图标区域之间留一些空间来补偿形状不同的图标的重量。
现在很清楚为什么图标区域总是大于图标主体—只是允许非正方形图标适合它并且看起来不小于正方形图标。
检查视觉平衡的最简单测试是模糊项目。如果您的图标变成或多或少相似的斑点，则它们具有相同的光学权重。
但是有时我们会使用已经存在的图形，例如用作共享按钮的社交网络徽标。Facebook 和 Instagram 图标是正方形的，而 Twitter 用鸟的轮廓表示，Pinterest 用带圆圈的 “P” 表示。这就是为什么 Twitter 和 Pinterest 图标更大，以便它们与 Facebook 和 Instagram 图标保持平衡的原因。
光学平衡问题的另一个示例是将文本框与圆形按钮放置在一起。如果按钮的直径等于文本框的高度，则在我们看来，该按钮看起来会更小。当您稍微扩大它时，整个结构将变得更好地平衡。
但是，如果您更改按钮的样式，则不需要放大。在下面的图片中，按钮和文本框的高度为 80 像素，但是由于黑色填充强烈，因此右侧的按钮看起来没有 “丢失”。
要记住的事情
- 光学重量是人眼感知物体尺寸和重要性的方式，不一定等于其像素尺寸或面积。
- 圆形，菱形，三角形和其他非正方形形状需要更高和更宽才能与方形形状在光学上保持平衡。
- 图标区域应保留一些空间以进行光学平衡。这对于看起来一致的图标集至关重要。
光学对准是视觉平衡主题的逻辑延续。看看下面的条纹。它们看起来好像长度一样吗？
以像素为单位，答案是肯定的 “是”。但是，乍一看，下部条纹看起来比上部条纹短。
我对下部条纹应用了光学补偿。允许尖峰超出上条纹的长度 20 个像素是补偿尖峰之间的间隙并使两个形状在光学上相等的方法。
因此，如果要创建带有折叠条纹和文字的海报，或者要在在线商店的产品卡上贴上明亮的 “折扣” 条纹，请注意使它们在视觉上保持平衡。锋利的边缘应该超出形状的其余部分，特别是在矩形的情况下。
对齐具有背景的纯文本和段落又如何呢？这取决于背景的视觉密度。如果不亮，则可以将突出显示的段落与文本的其余部分对齐。
可以将不同的方法用于密集的背景。在图片中，黑色背景与文本的其余部分对齐，而其内部的白色文本则带有缩进位置。
与背景较浅的情况不同，黑色背景具有较大的光学重量，如果目标是无缝插入段落，则最好按照以下所示的方式对齐。
相同的原理适用于按钮和输入字段。当然，这不是教条，只是基于人类视觉感知的推荐。
左侧输入字段的浅色背景可以超出输入标签和用户输入的范围。“发送” 按钮的右边缘未与输入背景的右侧完全对齐，因为该按钮较暗且从视觉角度看较重。
右边的输入有实线边框，当用户的输入在框内有凹痕时，我将它们与标签对齐。“发送” 按钮的侧面为三角形。该按钮向右移动一点，看起来与上面的矩形输入字段保持平衡。
在这里，我们将探讨对齐的另一个方面 - 文本和图标按钮的对齐。查看下面的按钮。文字看起来居中，不是吗？
诀窍在于，在右侧按钮上，由于右边缘为三角形，因此我将单词向左移动了一点。此外，箭头形按钮的宽度为 40 像素，看起来在光学上与矩形按钮相等。
Not only do text buttons have horizontal alignment, but also they have the vertical alignment of a word and a background. The first approach I’d like to tell about is used in the interfaces of various operating systems, sites, and applications. It’s the alignment based on the height of an uppercase letter of a font (so-called cap height). It equals the height of either “H” or “I.”
Basically, the space above and below an uppercase letter and the edge of a button is equal. It makes sense because command names usually are written in title case, and English letters have more ascenders, upper sticking out parts (l, t, d, b, k, h) than descenders, lower hanging parts (y, j, g, p).
Another approach is to align a name and a background using the height of a lowercase letter of a font (so-called x-height). In sans and sans serif interface fonts, it equals the height of — not surprisingly — the letter “x.”
This approach also makes sense because the main optical weight of a text is concentrated in the area where lowercase letters are placed.
Is there any difference between these approaches? Yep, there is a difference. And it’s not that big.
More examples for comparison below. The cap-height approach represented by the left column is definitely better for “Cancel” and “OK” — so widely used buttons — because “Cancel” has no descenders and “OK” is all capitals. The x-height approach shown in the right column is better only for the “Sync” button, the name of which has both an upper and a lower sticking out elements; “Cancel” and “OK” words seem to be placed too high.
The situation with icon buttons is slightly different from text buttons. Let’s put a popular “Send” icon on a round button background. Which variant looks more visually balanced?
I hope you’ve noticed that something is wrong with the left one. It happens because of different alignment methods. The first option would treat the icon if it were a rectangle. To a certain extent, that’s right because when you send an SVG or PNG file to a developer, it’s a rectangular sheet with a paper plane art on it. The right variant shows the icon placed the way all its sharp edges have equal distance to the circular button background.
If you prepare a file for a developer, you need to reserve some area, so that they can center the icon on the background optically right.
The same story with “Play” buttons. If you directly align these shapes — a rounded rectangle and a triangle — they’ll look odd.
If you want to position the triangle optically better, encircle it and align this circle with the button background.
Things to remember
- Shapes with sharp edges should be larger or longer to look balanced with the neighboring rectangular objects.
- Cap-height alignment is an effective method of positioning button names on button backgrounds.
- One of the effective ways to correctly position a triangular icon on a button is to encircle it and align the circle with the background.
What can be more circular than a circle? I used to think that nothing, but as I said at the beginning of this article, our eyes are weird and sometimes perceive things not as we expect. So, which circle on the picture below looks the most smoothly circular?
People who I asked before were choosing between numbers 3 and 4. Numbers 1 and 2 are too skinny, 5 is too plump. If we overlap the third and the fourth variants — a geometric circle and a modified circle — we’ll find out that the latter is a trifle heavier than the first one and, consequently, more smooth to our eyes.
To show what I mean, I took letters “o” from three famous geometric fonts — Futura, Circe, and Geometria. Given that high-quality fonts are built based on human visual perception and use a sophisticated system of optical construction, I suppose their circular shapes look more circular than geometric ones. Aren’t these letters pleasant to your eyes?
Let’s overlap them with geometric circles. Even the most geometric Futura’s “o” has four sticking out parts. Circe’s and Geometria’s letters are, in addition, wider than circles, but even if they had equal height and width, we could see these four “bellies” as if they were hungry and overate.
So, optically speaking, a modified circle (on the right) can look even more “circular” than a geometric one (on the left).
How can we use this phenomenon? For corner rounding, of course! If you utilize the embedded rounding feature in popular graphics editors, the result will not be optically good.
Human eyes immediately detect the point where a straight line suddenly turns into a curve. And this rounding doesn’t look natural.
I fixed this issue, taking into account our visual perception.
This kind of rounding has an extra area beyond the geometric circle, making the point where a line meets a curve unnoticeable.
Just try to feel the difference between these rounding methods.
Now we can apply this approach to rounded buttons.
You might have noticed that the buttons on the right have more smooth corner rounding, and it is more pleasant to your eyes.
The same story with app icons. One doesn’t merely use standard corner rounding to reach a perfect result. But before we dive into this topic, let’s take a look at two differently rounded shapes.
The first one is a rounded rectangle, which I created in Sketch. The second shape is a superellipse, also known as the Lamé curve. It was discovered by a French mathematician Gabriel Lamé and depending on the formula can vary from something like a four-pointed star to the shape looking practically as a rounded square.
Marc Edwards proposed the formula of the Lamé curve that resulted in smooth and optically perfect shape. Icons starting from iOS 7 are based on it.
Later this shape was modified by adding golden ratio proportions and a grid for guiding the designers of new icons, but that’s a different story.
The main benefit of using shapes like superellipse is their smooth appearance. On the other hand, these non-standard shapes are difficult to insert into a real interface. One should either combine multiple SVGs, include special formulas or scripts into the code, or use PNG masks as Apple does for its app icons.
As for the design process itself, there is a simple fix for rounded corners. You need to convert revertible rounding effects into an outline, enter the shape editing mode, and manually move curve handles closer to each other.
The difference is even more vivid with acute angle rounding, which is important for drawing road or metro schemes.
Things to remember
- Geometrically rounded corners look artificial because you can easily see the points where a straight line suddenly turns into a curve.
- Optically correct corner rounding needs special formulas or manual adjustment of a shape.
Sometimes a not ideally geometrical square looks more squarish. You might think, “What a ridiculous nonsense?” So, what do you think about the squares below? Which shape looks more squarish?
If you’ve chosen the left shape, you’ve managed to hear the voice of your unbiased visual perception.
I was surprised when I learned that our eyes are more sensitive to the height of an object than to its width. It explains why even in geometric fonts, letters “o” are always wider than geometric circles, and the vertical stems of letters “H” are always thicker than the horizontal ones.
[
This essay provides a limited understanding of the topic, so I encourage you to keep on exploring it. Here is a list of articles and books about the origins of Gestalt psychology and its initial ideas.
- Barry Smith, “Gestalt Theory: an Essay in Philosophy,” 1988. A profound study on the Gestalt theory origin and the philosophical aspects.
- Steven Lehar, “The World in Your Head: A Gestalt View of the Mechanism of Conscious Experience,” 2002. This book explains that we see not the real world but its reflection in the brain.
- James J. Gibson, “The Perception of the Visual World,” 1950 (a scanned copy, some images are low-quality). The book shows how the physical processes in our brain affect the way we see the world.
- James J. Gibson, “The Ecological Approach to Visual Perception,” 1979. (an article with key ideas available online.)
- George Boeree, “Gestalt Psychology.” A brief history of Gestalt ideas.
- Biographies of the founders of Gestalt psychology: Max Wertheimer, Kurt Koffka, and Wolfgang Köhler.
[
](https://muz.li/)
https://medium.muz.li/optical-effects-9fca82b4cd9a
若有收获，就点个赞吧
0 人点赞
