Like many UXers, I got into the industry from a non-visual background (in my case it was Business and later on Human Cognition). Even though I found great benefits coming from those backgrounds, it also meant I had no UI/Visual skills to put in practice at first. If you’re also from a non-visual background, I feel your pain :)

像許多UXer一樣，我是從非視覺背景進入這個行業的(在我的情況下是商業，后來是人類認知)。 即使我發現從這些背??景中受益匪淺，這也意味著我一開始沒有實踐UI / Visual技能。 如果您也是非視覺背景的人，我會感到很痛苦:)

In this article, I join a set of core principles that I’ve learned throughout my journey that helped me become a better visual thinker and execute better UIs.

在本文中，我加入了我在整個旅程中學到的一組核心原則，這些原則幫助我成為了更好的視覺思想家和執行了更好的UI。

Note: all the principles below refer to “elements”. By elements, I mean all the components that you may be trying to balance in a UI (like text, shapes, images, call to actions, etc)

注意：以下所有原則均指“要素”。 所謂元素，是指您可能試圖在UI中平衡的所有組件(例如文本，形狀，圖像，號召性用語等)

＃1對比和意義(給出層次) (#1 Contrast and Meaning (to give hierarchy))

When designing interfaces, what we’re trying to essentially do is to convey meaning (helping users making sense of the interface) so that they can achieve their goals (i.e complete an order online, share an image with a friend, etc). In order to help users disseminate information, the elements in an interface should have a hierarchy that helps users find what they need first.

在設計界面時，我們實際上要做的是傳達含義(幫助用戶理解界面)，以便他們可以實現自己的目標(即，在線完成訂單，與朋友共享圖像等)。 為了幫助用戶傳播信息，界面中的元素應具有幫助用戶首先找到他們所需要的層次結構。

How to apply Contrast and Meaning when designing?

設計時如何應用對比度和含義？

Hierarchy is conveyed through contrast (between elements). Contrast can be created by using visual cues such as colour, position, size, shape, orientation, etc. Knowing how to make use of these forms of contrast is key to design interfaces that support user goals.

層次結構通過對比(元素之間)傳達。 可以通過使用視覺提示(例如顏色，位置，大小，形狀，方向等)來創建對比度。了解如何利用這些對比形式是設計支持用戶目標的界面的關鍵。

Take the example of Airbnb. It makes use of a big and bold font for headers when compared to body text which is small and thin (so that users can easily scan which policy information they’re looking for). It also makes use of colour and shape to highlight the main call to action ‘see dates’ when compared to the other call to actions ‘show’ (to visually guide users to their next step of the user flow).

以愛彼迎為例。 與較小的正文相比，它在標題中使用了大膽的字體(以便用戶可以輕松地掃描他們要查找的策略信息)。 與其他呼吁“展示”的呼吁相比，它還利用顏色和形狀突出了主要呼吁號召“查看日期”(以視覺方式指導用戶進行用戶流程的下一步)。

Key takeaway: Design is largely an application of visual contrasts, which are used to define hierarchy. “Each element on the page has to be positioned, styled, sized, or otherwise distinguished in accordance with its specific importance.”

關鍵要點： 設計在很大程度上是視覺對比的應用，用于定義層次結構。 “頁面上的每個元素都必須根據其特定重要性進行定位，設置樣式，設置大小或以其他方式區分。”

＃2格式塔原理(組合元素) (#2 Gestalt principles (to combine elements))

Gestalt principles are a set of ‘laws’ that describe how people tend to see objects by grouping similar elements and finding patterns. It refers to the human tendency to ‘perceive the sum of all parts as opposed to the individual elements’. It is the reason why we can identify the square shape on the top image even though they are just a set of lines detached from each other.

格式塔原理是一組“法律”，描述了人們如何通過對相似元素進行分組和尋找模式來看待物體的方式。 它指的是人的傾向“感知所有部分的總和 ，而不是單個元素”。 這就是為什么我們可以在頂部圖像上識別正方形的原因，即使它們只是彼此分離的一組線。

How to apply Gestalt principles when designing? Make use of visual elements like shape, colour or size to infer a visual relation on elements that are logically connected. For example, if two elements are closely related, reducing negative space between them, giving them the same shape or placing them under the same background leads the human brain to think they are indeed closely tied. On the other hand, visually ‘grouping’ elements that are not logically connected can confuse users. Some of these visual elements communicate relations more strongly than others (e.i colour > size > shape). See how Spotify makes use of different shapes and sizes to create a visual distinction between the different types of content they present (Daily mixes are big and square-shaped while ‘Good morning’ contents are small and rectangular-shaped).

設計時如何應用格式塔原理？ 利用形狀，顏色或大小等視覺元素來推斷邏輯上相連的元素的視覺關系。 例如，如果兩個元素緊密相關，則減少它們之間的負空間，賦予它們相同的形狀或將它們置于相同的背景下會使人腦認為它們確實緊密地聯系在一起。 另一方面，視覺上未邏輯連接的“分組”元素會使用戶感到困惑。 這些視覺元素中的一些比其他元素更能傳達關系(例如，顏色>大小>形狀)。 了解Spotify如何利用不同的形狀和大小在它們所呈現的不同類型的內容之間建立視覺上的區別(每日混合大而方形，而“早安”內容則小而矩形)。

Key takeaway: Infer a visual relation to elements that have a logical relation. And the other way around.

關鍵要點：推斷具有邏輯關系的元素的視覺關系。 反之亦然。

For more on Gestalt principles, check this article and this one.

欲了解更多關于格式塔原則，檢查此文章和這一個 。

＃3黃金分割率(與大小和平衡元素有關) (#3 Golden Ratio (to size and balance elements))

The Golden Ratio (A/B =1.618 = PHI) is a ratio based on the Fibonacci sequence where A is the longest length and B the shortest. It is interesting because it’s highly prevalent in the physical world, from proportions of plants and animals to the ratio used to balance the ovals of the Toyota logo. I know, it’s weird to think that most things in the world have the same mathematical ratio! Even though we don’t consciously notice this ratio when looking at things around us, it’s so prevalent that science has found the human brain identifies and processes images based on the golden ratio more quickly than it does images with a different ratio.

黃金比率( A / B = 1.618 = PHI )是基于斐波納契數列的比率，其中A是最長的長度，B是最短的長度。 有趣的是，它在物理世界中非常普遍，從動植物的比例到用來平衡豐田徽標橢圓形的比例。 我知道，奇怪的是，世界上大多數事物都具有相同的數學比率！ 即使我們在觀察周圍的事物時并沒有自覺地注意到該比例，但它是如此普遍，以至于科學發現人腦比黃金比例的圖像更能更快地識別和處理基于黃金比例的圖像。

How to apply the Golden ratio when designing? It helps us create shapes that are aesthetically pleasing (take a rectangle per example) by multiplying the length of the short side (A) by the golden ratio of 1.618. So, the long side (B) should have a length of 1.618.

設計時如何應用黃金分割率？ 通過將短邊(A)的長度乘以1.618的黃金比例，可以幫助我們創建美觀的形狀(以每個示例為一個矩形)。 因此，長邊(B)的長度應為1.618。

Key takeaways: Using the 1.618 ratio helps us, designers, to create layers that are appealing and easier to process to the eye and brain. Also, making use of the Golden ratio to create or use guides helps us to place elements in a balanced way.

關鍵要點：使用1.618比率有助于我們(設計師)創建吸引人的層，并易于處理，使眼睛和大腦感到滿意。 此外，利用黃金比例創建或使用指南有助于我們平衡地放置元素。

For more on the Golden Ratio, check this article.

有關黃金分割的更多信息，請查看本文 。

＃4三分法則(放置元素) (#4 Rule of Thirds (to place elements))

The Rule of Thirds is a simple way to position elements where the eyes of our users tend to fall in the screen. These sweet spots are four and their appeal to the eye differ from each other (see image above). This can be explained by the way the eye usually screens information like an “F”, starting from the top left, then down, then up but to the right and finally to the bottom right.

三分法則是將元素定位在用戶的眼睛傾向于落在屏幕上的簡單方法。 這些最佳點是四個，它們對眼睛的吸引力彼此不同(請參見上圖)。 這可以用眼睛通常從“左”開始，從下到下，然后從上到右，最后到右下的方式篩選信息的方式來解釋。

How to apply this rule when designing? When placing elements in a background consider the sweet spots of the screen. This can be done by dividing the screen equally into thirds, both horizontally and vertically resulting in 9 boxes that are equally-shaped.

設計時如何應用此規則？ 將元素放置在背景中時，請考慮屏幕的最佳位置。 可以通過將屏幕在水平和垂直方向上均等分成三等分，從而得到9個形狀相同的盒子。

Key takeaway: Making use of the sweet spots by placing key elements (like a call to action) where the eye will automatically fall towards can help your product and your users achieve its goals.

關鍵要點：通過將關鍵元素(例如號召性用語)放置在眼睛會自動落在其中的關鍵點，可以幫助您的產品和用戶實現其目標。

For more on the Rule of Thirds, check this article.

有關三分法則的更多信息，請查看本文 。

👋 Let’s be friends! Connect with me on LinkedIn and follow me on Medium for more Design-related articles!

be 讓我們成為朋友！ 在LinkedIn上與我聯系，并在Medium上關注我，以獲取更多與設計有關的文章！