When to Use Optical Alignment — You’re the Designer. You Know What’s Best.

何時使用光學對準—您是設計師。 你知道什么是最好的。

Let’s talk about the tools the vast majority of us use on a day to day basis… These tools are Incredibly powerful, and offer so many things to make our workflow faster and simpler. However, I think it’s important that we take a step back sometimes and realize that from time to time, we know better than what our design tools are suggesting we do.

讓我們談談我們大多數人每天使用的工具……這些工具功能強大，并且提供了許多功能，可以使我們的工作流程更快，更簡單。 但是，我認為重要的是，有時候我們要退后一步，意識到不時地了解設計工具所建議的內容。

I’m going to make a case for why you don’t always want to rely on tools like Sketch or Adobe’s Creative Suite programs when it comes to alignment. Alignment is obviously a foundational and crucial element in our day-to-day design work. Without proper alignment, the things we design would look sloppy, and likely would be unintuitive to interact with.

我將說明為什么在對齊時您不總是希望依賴諸如Sketch或Adobe的Creative Suite程序之類的工具。 對齊顯然是我們日常設計工作中的基礎和關鍵要素。 如果沒有適當的對齊，我們設計的內容將顯得草率，并且可能無法直觀地進行交互。

但是我們可以做得更好嗎？ (But Can We Do Better?)

The tools we are all familiar with can easily get us to a state in our designs where things are aligned. There are features that make objects snap to each other without us even having to put in much thought at all. But what if we did put more thought into it from time to time? Could we make our designs even better? I think so.

我們都熟悉的工具可以輕松地使我們的設計保持一致。 有些功能可以使對象彼此捕捉，而無需我們進行任何深思。 但是，如果我們不時投入更多的思考會怎樣？ 我們可以使設計更好嗎？ 我認同。

There are occasions when our tools give us suggested alignment or spacing, but those can be improved upon. That’s where the concept of optical or visual alignment comes into play. In the right situations, a little finessing can elevate your designs.

在某些情況下，我們的工具會為我們提供建議的對齊方式或間距，但可以對其進行改進。 這就是光學或視覺對準概念發揮作用的地方。 在正確的情況下，稍加修改就可以提高您的設計水平。

This is definitely subjective in many cases, so don’t take this as something that must be applied to anything and everything. When executed appropriately, your designs will not only look great, but they will also feel great as well.

在許多情況下，這絕對是主觀的，因此不要將其視為必須應用于任何事物的事物。 如果執行得當，您的設計不僅會看起來很棒，而且也會感覺很好。

Let’s take a step back before we dig too much into this technique. We need to first clarify what optical alignment is, and when it’s most effective.

在深入研究這項技術之前，讓我們退后一步。 我們首先需要弄清楚什么是光學對準，以及什么時候最有效。

看一些例子 (Looking At Some Examples)

So what is optical alignment? It’s all in the art of “eyeballing it.” You’d be surprised how often, in your everyday life, you come in contact with optically aligned things. The reason it’s probably not immediately apparent when you see it is for the same reason you should implement the principle into your design work. It feels natural. It looks right.

那么什么是光學對準？ 這全都是“盯著它”的藝術。 您會驚訝于日常生活中經常接觸光學對準的物體。 當您看到它時可能無法立即看到它的原因，是出于與在設計工作中實施原理相同的原因。 感覺很自然。 看起來不錯。

The physical shape of the rounded letterforms (like the lowercase E shown here) in typefaces like Helvetica extend slightly outside the bounds of the x-height and baseline. Logically, this might sound strange, but visually, it makes the rounded letters feel more appropriately sized, and increases readability. This form of optical alignment is great to keep in mind when placing circular objects next to square/rectangular ones. This is one of the ways our design tools can mislead us. Just because the tool snaps the height and width of a circle to be the exact same height as the square next to it doesn’t mean it will visually appear the right size.

像Helvetica這樣的字體中，圓形字母的物理形狀(如此處所示的小寫字母E)略微超出x高度和基線的范圍。 從邏輯上講，這聽起來可能很奇怪，但是在視覺上，它使四舍五入的字母感覺更合適，并提高了可讀性。 將圓形物體放置在正方形/矩形物體旁邊時，要牢記這種光學對齊方式。 這是我們的設計工具可能誤導我們的方式之一。 僅僅因為該工具將一個圓的高度和寬度與旁邊的正方形完全一樣，并不意味著它會在視覺上顯示正確的大小。

As I’m sure many designers out there are aware, asymmetrical objects can sometimes be a nightmare to work with. Especially when we are talking about centering them within a container like the circle in this example. These situations are when our ability to eyeball it really come in to play. The bounding box that tools like Sketch use to determine the size of an object can often leave a lot to be desired. In cases like a triangle, this invisible bounding box can’t be trusted to give you an accurate center alignment.

我確信許多設計人員都知道，非對稱對象有時會成為工作的噩夢。 尤其是在此示例中，當我們談論將它們居中放置在像圓形這樣的容器中時。 這些情況是我們真正發揮作用的能力之時。 諸如Sketch之類的工具用來確定對象大小的邊界框通常可能有很多不足之處。 在三角形的情況下，不能相信這個不可見的邊界框會為您提供準確的中心對齊。

Depending on the content you are working with, there could very likely be opportunities for optical alignment. In this example, the faint gray containers in the bottom section are far less visually prominent (and important) than what they contain. Aligning the form fields to the content within those containers adds a far better visual structure to the page than if you were to align the faint gray containers to those form fields above.

根據您使用的內容，很可能會有光學對準的機會。 在此示例中，底部的淡灰色容器在視覺上遠不及容器中所包含的容器重要。 將表單字段與這些容器中的內容對齊會比將微弱的灰色容器與上面的那些表單字段對齊使頁面的視覺結構好得多。

應用這些原則 (Applying These Principles)

There are a few basic rules that will go a long way when using optical alignment within your workflow.

在工作流程中使用光學校準時，有一些基本規則會大有幫助。

? It’s more of an art than a science.? Don’t let your tools dictate everything about your designs.? Take a step back and look at the bigger picture.? Get out of your own head.

?它不僅僅是一門藝術，而不僅僅是一門科學。?不要讓您的工具支配設計的一切。?退后一步，放眼大局。?振作起來。

它更多是一門藝術，而不是科學。 (It’s more of an art than the science.)

Design is a fusion between art and engineering. We are creative problem solvers. It’s about metrics, grids, and proportions. Sometimes however, it’s much more organic than it is technical. Optically aligning things is one of the best examples of this. Sometimes you need to eyeball it.

設計是藝術與工程的融合。 我們是有創造力的問題解決者。 它與指標，網格和比例有關。 但是，有時它比技術要有機得多。 光學對準物體是最好的例子之一。 有時您需要注意。

不要讓您的工具支配有關您設計的一切。 (Don’t let your tools dictate everything about your designs.)

Although our various design tools are very powerful, and can help in numerous ways, sometimes you have to ignore the tool’s recommendation. Don’t just go with whatever Sketch (or whatever program you are using) automatically does. Sketch’s snap to center functionality can be super helpful, but it can actually cause problems sometimes. Particularly with asymmetric icons, and text. Text boxes in Sketch are very rarely the optimal thing to base your spacing on. You’re the designer. You know best.

盡管我們的各種設計工具非常強大，并且可以以多種方式提供幫助，但有時您不得不忽略該工具的建議。 不要隨便自動使用任何Sketch(或您正在使用的程序)。 Sketch的對齊中心功能非常有用，但有時有時會引起問題。 特別是帶有不對稱的圖標和文本。 Sketch中的文本框很少是最佳的間距基礎。 你是設計師 你最了解。

退后一步，看大圖。 (Take a step back and look at the bigger picture.)

When in doubt, sometimes all you need to do is take a step back, and take a look at the layout/screen from a distance. Alternatively, squint at your design. Make sure you really just see fuzzy shapes, and not the actual content. That can really help give you an idea of the visual weights of objects in the design, and if they are optically balanced/aligned.

如有疑問，有時您所要做的只是退后一步，并從遠處看一下布局/屏幕。 或者，斜視您的設計。 確保您只看到模糊的形狀，而不是實際的內容。 這確實可以幫助您了解設計中對象的視覺重量，以及它們是否在視覺上保持平衡/對齊。

振作起來。 (Get out of your own head.)

I promise, it’s okay to bend the rules from time to time. A good design is more than just a bunch of measurements. It’s an art form. Don’t be afraid to be an artist in your day-to-day work.

我保證，不時改變規則是可以的。 一個好的設計不僅僅只是一堆測量。 這是一種藝術形式。 不要害怕成為您日常工作中的藝術家。