蓝眼睛和红眼睛的数学问题_在设计眼睛数学时

蓝眼睛和红眼睛的数学问题

重点 (Top highlight)

I ventured into the world of design 6 years ago as a freelance graphic designer and made the transition into product design about a year later. Throughout my career, I have encountered hundreds of scenarios where the computer-generated output of a design intention differs from the expected outcome even when the maths was done right.

我涉足设计领域，6年前作为一个自由平面设计师和制作大约一年后，过渡到产品设计中。 在我的整个职业生涯中，我遇到了数百种情况，即使数学正确完成，设计意图的计算机生成的输出也不同于预期的结果。

Let’s take a look at a few cases:

让我们看一些情况：

并非所有徽标都相同。 (All logos are not created equal.)

While working on a customer section page for a client, my initial direction was to create a grid that contains 256px * 200px boxes housing the customers’ logos and names.

在处理客户的客户部分页面时，我的最初方向是创建一个网格，其中包含256px * 200px的框，用于容纳客户的徽标和名称。

While my computer says they are all 24px in height, my eyes say this does not look visually appealing.

虽然我的电脑说它们的高度均为24px，但我的眼睛说这看起来并不吸引人。

Sketch enables me to convert my first box into a symbol for reuse, leveraging mathematics and modularity as a foundation to construct the layout. But I had to trust my eye to deviate from this repeatable module to achieve a more balanced and beautiful grid.

Sketch使我能够将第一个框转换为符号以供重用，并利用数学和模块化作为构建布局的基础。 但是我不得不相信我的眼睛会偏离这个可重复的模块，以实现更加平衡和美观的网格。

边界框是真实的 (The bounding box is real)

In the case below, my eyes tell me that the left and right side of this success page does not feel vertically aligned to the center but Figma tells me otherwise.

在下面的情况下，我的眼睛告诉我此成功页面的左侧和右侧没有垂直居中对齐，但是Figma告诉我相反。

Well, the problem here is that the computer sees images differently than humans. We see the mass of the object, in this case, the football, but the computer sees something called a bounding box (which is an invisible box that encompasses every possible pixel in the image). In the example below, the bounding box is the blue rectangle.

好吧，这里的问题是计算机看到的图像与人类看到的图像不同。 我们看到了物体的质量，在这种情况下是足球，但是计算机看到了称为边界框的东西(边界框是一个不可见的框，它包含了图像中的每个可能像素) 。 在下面的示例中，边界框是蓝色矩形。

Since the computer recognizes the tiniest or lightest coloured pixels that may be invisible to the human eye, mathematical equality and optical equality will remain unequal. Engineered geometry has failed us here again, so we need to move beyond the mathematical measurements to compensate for the optical distortion.

由于计算机识别出人眼可能看不到的最细或最浅的彩色像素，因此数学等式和光学等式将仍然不相等。 工程几何在这里再次使我们失败，因此我们需要超越数学测量范围来补偿光学失真。

Here’s how to do that: Find the visual mass of the object, that’s where most of its presence is. We ignore the little shatters that have very little weight and that way we end up with this:

这样做的方法是： 找到对象的视觉质量，这就是对象大部分存在的地方。 我们忽略了重量很小的微小碎片，因此最终得到以下结果：

Even better, we can edit the bitmap by cleaning up some splatters at the bottom, so that the updated bounding box will now naturally be the visual mass of the image.

更好的是，我们可以通过清理底部的一些散点图来编辑位图，以便更新后的边界框现在自然成为图像的视觉质量。

相同类型的不同字母可能会不同意：用眼睛紧贴 (Different letters of the same type may disagree: Kern with your eyes)

Here is a quick example of an experimental logo for an interior design firm. The entire type is set in Helvetica Neue 64points, kerning is set to auto and tracking is set to 60 points. The type baseline is set to the middle.

这是室内设计公司的实验性徽标的快速示例。 整个类型设置为Helvetica Neue 64点，字距调整设置为自动，跟踪设置为60点。 类型基线设置为中间。

But my eye tells me that that there is more space between the I and + than there is between + and T. My eye also tells me that the + is not set to the middle.

但是我的眼睛告诉我， I和+之间的空间比+和T之间的空间大。 我的眼睛还告诉我+并未设置为中间。

So let’s fix this:

因此，让我们解决此问题：

First the baseline. I would stroke the entire word and then vertically re-align the letters to the center.

首先是基线。 我会抚摸整个单词，然后垂直将字母重新对齐到中心。

Next, we trust our eye to adjust the kerning between + and T to match that of I and +. The default spacing has the + too far to the left. The I has a straight vertical stroke and the T has a crossbar. What we need to do is ignore most of the crossbar since it has very little presence relative to the verticals.

接下来，我们相信我们的眼睛可以在+和T之间调整字距，以匹配I和+的字距。 默认间距的+太左了。 我有 笔直的垂直笔触， T带有横杆。 我们需要做的是忽略大多数横线，因为相对于垂直线，横线几乎没有。

To make the difference more pronounced, this is what the final execution looks like side by side. I’m sure you can easily pick which one was done entirely by maths.

为了使差异更加明显，这是最终执行看起来并排的样子。 我相信您可以轻松地选择完全由数学完成的哪一项。

类型比例：您不必坚持小数 (Type scale: You don’t have to stick with decimals)

When starting a design project, I usually visit a site like type-scale.com to come up with my base type scale. But for most scales, you will usually end up with messy decimals in your font sizes.

在开始设计项目时，我通常会访问诸如type-scale.com之类的网站来提出我的基本类型比例。 但是对于大多数比例而言，字体大小通常会以混乱的小数结尾。

What you need to do is build out a few core pages with this type scale, and then manually adjust with your eye before deciding if to round down or round up. This is totally subjective and depends on the type of project you’re working on. Certain type scales are better suited to different site archetypes. Landing pages generally have more contrast between type sizes than blogs or product sites.

您需要做的是用这种比例尺构建一些核心页面，然后在决定是向下舍入还是向上舍入之前用眼睛手动进行调整。 这完全是主观的，取决于您正在处理的项目类型。 某些类型的比例尺更适合于不同的站点原型 。 登陆页面通常比博客或产品站点具有更大的字体大小对比。

Note: There is nothing wrong with keeping the type scale in decimals (personally I do not like it, especially when I’m doing the CSS), the caveat here is to emphasize how your eye can help you move beyond measured conventions in achieving visual balance.

注意：将类型比例尺保留为小数位数并没有错(个人不喜欢，特别是当我使用CSS时) ，这里的警告是强调您的眼睛如何帮助您超越可衡量的惯例来实现视觉效果平衡。

In the book “4 Hour Body”, Tim Ferris explains that your weight scale is not the single source of truth when it comes to weight loss. You may be 72kg last month and 72kg this month, but your fat may be more properly redistributed that you’re generally more fit than you were and your tight clothes now fit you perfectly.

在《 4小时的身体 》一书中，蒂姆·费里斯(Tim Ferris)解释说，体重减轻并不是减肥的唯一真理。 您上个月的体重可能是72公斤，本月的体重是72公斤，但是您的脂肪可能会更适当地重新分配，从而通常比以前更健康，并且紧身衣服现在非常适合您。

The automated tools of our software help us save time as designers. But these tools are created with programming languages and are therefore very mathematical in their approach to interpreting design intent. Your eye is a great tool. Use it.

我们软件的自动化工具可帮助我们节省设计人员的时间。 但是这些工具是用编程语言创建的，因此它们在解释设计意图时非常数学化。 您的眼睛是一个很棒的工具。 用它。

翻译自: https://uxdesign.cc/when-it-comes-to-design-your-eyes-maths-aae720fb8222

蓝眼睛和红眼睛的数学问题