大屏設計的視覺統一

視覺設計的統一性是什么？ (What is unity in visual design?)

The concept of unity in visual design means a group of elements working together to create a greater whole. It means, as the cliché goes: A whole that is greater than the sum of its parts.

視覺設計中的統一概念意味著一組元素協同工作以創建更大的整體。 正如陳詞濫調所說，它??的意思是： 大于其各部分之和的整體。

To illustrate this concept, let’s consider some components of a web page:

為了說明這個概念，讓我們考慮網頁的一些組件：

• brand logo
  品牌標志
• navigation menu
  導航菜單
• main content
  主要內容
• sidebar
  側邊欄
• footer
  頁腳
• images
  圖片
• search box
  搜索框

These components, before they’re brought together to form a web page, are like pieces of a jigsaw puzzle.

這些組件在組合在一起形成網頁之前，就像拼圖游戲一樣。

nsplashnsplash

• Each piece represents one part of a picture.
  每一張代表一張圖片的一部分。
• We need to get these pieces to interlock.
  我們需要使這些零件互鎖。
• When all pieces are neatly connected, the picture emerges.
  當所有部件都整齊地連接在一起時，圖片就出現了。
• Unity is achieved.
  實現團結。

A web page works the same way.

網頁的工作方式相同。

• Each element represents one part of a page.
  每個元素代表頁面的一部分。
• We need to get these pieces to work together.
  我們需要使這些部分協同工作。
• When all elements are working together, the page is complete.
  當所有元素都一起工作時，頁面就完成了。
• Unity is achieved.
  實現團結。

Here are a few more ideas to note about unity in visual design:

以下是有關視覺設計中的統一性的更多注意事項：

• Unity can be visual and conceptual. Visual unity is achieved when all design elements are supporting the same visual theme. Conceptual unity is achieved when all content elements support the same subject matter.

  團結可以是視覺上的和概念上的。 當所有設計元素都支持相同的視覺主題時，將實現視覺統一 。 當所有內容元素都支持相同主題時，可以實現概念上的統一 。

• All elements have a role to play. There are no gratuitous elements in unified design. Removing elements that don’t contribute to the whole strengthens unity. Removing elements that are essential to the whole weakens unity (breaking the design).

  所有元素都可以發揮作用。 統一設計中沒有多余的要素。 刪除對整體沒有幫助的元素會增強統一性。 刪除整體上必不可少的元素會削弱整體性(破壞設計)。

• No elements are placed arbitrarily. All elements are placed thoughtfully and strategically in unified design.

  沒有任意放置元素。 所有元素都在統一設計中進行了周到和戰略性的考慮。

在視覺設計中實現統一的方法 (Methods for Achieving Unity in Visual Design)

The most common and effective methods for achieving unity in visual design are the Gestalt principles of visual perception. These principles, originally documented in the 1920s by German psychologists, are based on the human tendency to see things in groups and patterns.

在視覺設計中實現統一的最常見，最有效的方法是格式塔的視覺感知原理 。 這些原則最初是由德國心理學家在1920年代記錄的，其依據是人類傾向于以群體和形式看待事物。

Here are some of the more powerful Gestalt grouping principles:

以下是一些更強大的格式塔分組原則：

• Proximity

  接近

• Similarity

  相似

• Uniform Connectedness

  統一的聯系

• Good Continuation

  良好的延續性

• Common Fate

  共同的命運

Below is a general introduction to each one.

以下是每個內容的一般介紹。

接近 (Proximity)

Proximity refers to grouping by closeness. Elements that are closer to each other appear more related to each other.

接近是指按親密關系分組。 彼此更接近的元素看起來彼此之間更相關。

Wikipedia維基百科

The image above is a collection of 72 circles, but they don’t appear as a single group. Instead, through the use of proximity, they appear in four groups.

上圖是72個圓圈的集合，但它們并沒有作為一個整體出現。 相反，通過使用接近性，它們以四個組出現。

Proximity also works with elements that don’t look alike. Any assortment of objects — having different shapes, sizes, colors, dimensions, orientations, textures or other visual characteristics — can be made to appear related when grouped closely together.

鄰近也可以處理看起來不太相似的元素。 緊密組合在一起時，可以使具有各種形狀，大小，顏色，尺寸，方向，紋理或其他視覺特征的各種對象看起來相互關聯。

In the real world, the use of proximity can be seen everywhere, working to unify all sorts of objects.

在現實世界中，無處不在的使用無處不在，以統一各種對象。

For example, look at this paragraph. It can be read because you know the language (obviously), but also because the letters, words and sentences are grouped closely together. Without proximity everything would be in disarray. Proximity is essential in written communication.

例如，查看此段。 之所以可以閱讀它，是因為您(顯然)知道該語言，而且 因為字母，單詞和句子緊密地組合在一起。 沒有距離，一切都會混亂。 接近在書面交流中至關重要。

In web design, think of a navigation menu. For the site user to know that all links are part of the menu group, they only need to be placed close together.

在網頁設計中，請考慮導航菜單。 為了使站點用戶知道所有鏈接都是菜單組的一部分，只需要將它們緊密放置在一起即可。

相似 (Similarity)

Similarity refers to grouping by repetition. Elements that look alike appear more related to each other.

相似性是指通過重復分組。 看起來相似的元素相互之間看起來更相關。

Similarity can be achieved by repeating any visual characteristic, such as shape, size and color.

可以通過重復任何視覺特征(例如形狀，大小和顏色)來實現相似性。

Wikipedia維基百科

In the image above, proximity is in play, unifying all circles in one group. But similarity is also in play, dividing the group in two sets of circles — dark and light. Also, we see a matrix composed of rows and columns, but the rows get the most attention because of similarity.

在上圖中，鄰近性正在發揮作用，將一組中的所有圈子統一在一起。 但是相似性也在發揮作用，將小組分為兩組，即黑暗和明亮。 另外，我們看到由行和列組成的矩陣，但是由于相似性，行得到了最多的關注。

Let’s look at actual use cases. On a website:

讓我們看一下實際的用例。 在網站上：

• Why are all h2 elements styled to look the same throughout the site?
  為什么所有h2元素的樣式在整個網站上看起來都一樣？
• Why does the navigation menu look the same throughout the site?
  為什么整個站點的導航菜單看起來都一樣？
• Why is the design template the same throughout the site?
  為什么整個站點的設計模板都一樣？

The short answer to all these questions is: Because repetition and consistency (i.e., similarity, in this context) enhance communication and understanding. Here are more detailed explanations:

對所有這些問題的簡短回答是： 因為重復和一致(即，在這種情況下，相似性)可以增進溝通和理解。 這里是更詳細的說明：

• Why are all h2 elements styled to look the same throughout the site? Because that indicates to the user that those sections of content are on the same level in the content hierarchy.

  為什么所有h2元素的樣式在整個網站上看起來都一樣？ 因為這向用戶指示內容的那些部分在內容層次結構中處于同一級別。

• Why does the navigation menu look the same throughout the site? Because that indicates to the user that the links are identical, and that there’s no need to review them again for new information during a browsing session.

  為什么整個站點的導航菜單看起來都一樣？ 因為這向用戶指示鏈接是相同的，并且在瀏覽會話期間無需再次查看它們以獲取新信息。

• Why is the design template the same throughout the site? Because that indicates to the user that they’re still on the same website.

  為什么整個站點的設計模板都一樣？ 因為那向用戶表明他們仍然在同一個網站上。

統一的聯系 (Uniform Connectedness)

Uniform connectedness refers to grouping elements with common areas or connecting lines.

均勻連接是指將具有公共區域或連接線的元素分組。

Elements assembled over a common background color or pattern, or enclosed in a frame, or connected by lines, appear more related than elements not connected in the same manner.

與沒有以相同方式連接的元素相比，在常見的背景顏色或圖案上組裝的元素或封閉在框架中或通過線條連接的元素顯得更加相關。

In the image above, uniform connectedness — by wrapping circles in a box — creates a group (within the larger group unified by proximity and similarity).

在上圖中，統一的連通性(通過將圓括在一個盒子中)創建了一個組(在較大的組中，通過接近度和相似度統一)。

There are two general methods for applying uniform connectedness:

應用統一連接有兩種通用方法：

• common regions, and
  共同區域，以及
• connecting lines.
  連接線。

Common regions create groups by enclosing visual areas. For example, if you draw a box around a group of elements (like in the image above), you’re indicating that those elements are related. Background colors and patterns can also form a common area.

公用區域通過封閉視覺區域來創建組。 例如，如果您圍繞一組元素繪制一個框(如上圖所示)，則表示這些元素是相關的。 背景顏色和圖案也可以形成公共區域。

Connecting lines create groups by connecting individual elements with lines or a sequence of objects that form lines (e.g., dots, arrows and bubbles).

連接線通過將單個元素與線或形成線的對象序列(例如，點，箭頭和氣泡) 連接來創建組。

In the matrix above, three circles, already related to the other circles by proximity and similarity, form their own group with connecting lines.

在上面的矩陣中，已經通過鄰近度和相似度與其他圓相關的三個圓通過連接線形成了自己的組。

In the example below, uniform connectedness is the visual concept linking the people to their thought and speech bubbles.

在下面的示例中，統一的連通性是將人們與他們的思想和言語泡沫聯系在一起的視覺概念。

Without the linear connection, the illustration above wouldn’t be as clear.

如果沒有線性連接，上面的插圖將不太清楚。

An important feature of uniform connectedness is its ability to complement other Gestalt principles, such as proximity and similarity.

統一連接的一個重要特征是它能夠完善格式塔其他原則，例如鄰近性和相似性。

This feature is particularly useful when dealing with limited spaces. Consider, for example, a cockpit dashboard. There’s only so much space to put all the indicators and controls.

當處理有限的空間時，此功能特別有用。 例如，考慮一個駕駛艙儀表板。 放置所有指標和控件的空間很小。

Wikipedia維基百科

In the image above, proximity and similarity bring everything together. But those methods alone don’t deliver optimal usability. To make the dash more clear — eliminating more risk of error and confusion — there need to be stronger associations between more related items (i.e., clusters). That’s where uniform connectedness can help.

在上圖中，接近度和相似度將所有事物融合在一起。 但是，僅靠這些方法并不能提供最佳的可用性。 為了使破折號更清晰-消除更多的錯誤和混亂風險-需要在更多相關項目(即群集)之間建立更強的關聯。 這就是統一連接可以提供幫助的地方。

Common areas and connecting lines can also be seen on remote controls, computer keyboards, software UIs, and even menus and maps.

公用區域和連接線也可以在遙控器，計算機鍵盤，軟件UI甚至菜單和地圖上看到。

Note that the menu features both connecting lines and a common area.

請注意，菜單同時具有連接線和公共區域。

良好的延續性 (Good Continuation)

Good continuation refers to grouping by alignment, whether straight or curved.

良好的連續性是指通過對齊進行分組，無論是筆直還是彎曲。

Elements aligned on a line or curve appear more related than elements not on the line or curve.

與不在直線或曲線上的元素相比，在直線或曲線上對齊的元素看起來更相關。

Good continuation can be seen on a car’s instrument cluster.

在汽車的儀表盤上可以看到良好的延續性。

In the image above, the tachometer, fuel gauge, temperature gauge and odometer all use good continuation. The markings for each indicator are aligned on a circular path, making them easy to understand.

在上圖中，轉速表，燃油表，溫度表和里程表都具有良好的延續性。 每個指示器的標記在圓形路徑上對齊，因此易于理解。

Another example of good continuation, which is very common in web design, is the grid. By placing elements in grid tracks (the space between grid lines), they are grouped by alignment.

良好延續性的另一個例子是網格，這在Web設計中非常常見。 通過將元素放置在網格軌道(網格線之間的空間)中，可以按對齊方式對它們進行分組。

In the image above a series of otherwise unrelated symbols are group together with good continuation.

在上面的圖像中，一系列其他不相關的符號以良好的連續性組合在一起。

共同的命運 (Common Fate)

Common fate refers to grouping by similar motion and direction.

共同的命運是指按照相似的運動和方向分組。

Elements that move in the same direction, or just point in the same direction, appear more related to each other.

朝相同方向移動或指向相同方向的元素看起來彼此之間的關聯性更高。

In the image above, the dots moving in the same direction appear more related to each other than to the dots moving in the opposite direction.

在上圖中，在相同方向上移動的點看上去與在相反方向上移動的點之間的相關性更高。

For real world examples of common fate, think of a school of fish, a flock of birds, highway traffic, or a marching band. Because the individual units all share a common direction and speed, they appear as a group.

對于現實世界中常見命運的例子，想像一下魚群，一群鳥，公路交通或游行樂隊。 由于各個單元都具有相同的方向和速度，因此它們作為一個組出現。

Wikipedia維基百科

In the image above, a Blue Angels squadron of the United States Navy flies in Delta Formation. Because each plane is flying in the same direction and at the same speed, they are seen as one group, brought together by common fate.

在上圖中，美國海軍的藍色天使中隊在三角洲編隊飛行。 因為每架飛機都以相同的方向和速度飛行，所以它們被視為一組，由共同的命運聚集在一起。

As mentioned earlier, however, common fate doesn’t require movement. Elements that simply give the impression of motion also create groups.

但是，如前所述，共同的命運并不需要運動。 簡單地給人以運動印象的元素也會創建組。

There’s no movement in the circles above, but the arrows create two distinct groups. This happens because common fate is, at its core, less about movement and more about a common destination.

上面的圓圈中沒有移動，但是箭頭創建了兩個不同的組。 之所以發生這種情況，是因為共同命運的核心在于，與運動無關，而與共同目標有關。

Common fate thrives on conflict.

共同的命運因沖突而繁榮。

A powerful and unique characteristic of common fate, which sets it apart from other Gestalt principles, is the effect it generates when its normal function is disrupted.

當它的正常功能被破壞時，它會產生的效果是共同命運的強大而獨特的特征，這使其不同于其他格式塔原理。

We know that common fate involves multiple objects moving together in harmony. This is a common phenomenon in daily life that most of us never even notice. We just take it for granted.

我們知道，共同的命運涉及多個物體和諧共處。 這是日常生活中常見的現象，我們大多數人甚至都沒有注意到。 我們只是認為這是理所當然的。

But a disruption to that flow captures our attention instantly.

但是中斷流程會立即吸引我們的注意力。

Here are two examples:

這是兩個示例：

• A herd of zebras running. A lion coming in from an angle.
  一群斑馬奔跑。 一只獅子從一個角度進來。
• Cars moving on a highway. A car changing lanes, or merging in, or especially, going in the opposite direction.
  在高速公路上行駛的汽車。 汽車改變車道，或合并，或特別是朝相反的方向行駛。

Contrast. That’s the true power of common fate. No other Gestalt principle can generate such a powerful visual cue.

對比。 這就是共同命運的真正力量。 格式塔的其他原理無法產生如此強大的視覺提示。

In Web Design

在網頁設計中

In web design, common fate is a useful grouping strategy for elements that move in the same direction, at the same speed, and at the same time.

在網頁設計中，共同命運是對以相同方向，相同速度和時間移動的元素的有用分組策略。

A good example is the drop down menu. On hovering a menu link, a series of sub-menu links slide into view at the same speed and in the same direction. Common fate (along with proximity and possibly other Gestalt principles) tells the user that these links are related.

下拉菜單就是一個很好的例子。 懸停菜單鏈接時，一系列子菜單鏈接以相同的速度和相同的方向滑入視圖。 共同的命運(以及鄰近性和其他格式塔原理)告訴用戶這些鏈接是相關的。

Other examples of common fate in web design include swiping actions (like in dating apps) and tooltips (where a hovering motion leads to a pop-up notice).

網頁設計中常見命運的其他示例包括滑動動作(例如在約會應用程序中)和工具提示(懸停動作會導致彈出通知)。

Of course, disruptions to this flow can also be powerful visual cues.

當然，中斷此流程也可能是強大的視覺提示。

In the first part of this article we discussed the importance of unity in visual design. We talked about the whole being greater than the sum of its parts.

在本文的第一部分中，我們討論了視覺設計中統一性的重要性。 我們談論的是整體大于部分之和。

In the second part we discussed methods for achieving this whole. In particular, we covered the Gestalt principles of Proximity, Similarity, Uniform Connectedness, Good Continuation and Common Fate. These principles represent time-tested methods for achieving unity in visual design.

在第二部分中，我們討論了實現整體的方法。 特別是，我們涵蓋了鄰近，相似，統一連接，良好延續和共同命運的格式塔原則。 這些原則代表了經過時間考驗的方法，可以在視覺設計中實現統一。

But this article is just an introduction to Gestalt. There’s a lot more to know. I encourage you to delve deeper for a better understanding of their power and versatility. While you’re doing that, you’ll inevitably run into a whole series of other Gestalt principles, such as Closure, Figure/Ground, Past Experience, and Focal Point.

但是本文只是對格式塔的介紹。 還有很多要知道的。 我鼓勵您深入研究，以更好地了解它們的功能和多功能性。 在執行此操作時，您不可避免地會遇到其他一系列格式塔原理，例如閉合，圖形/背景，過去經驗和聯絡點。

UX Para Minas Pretas (UX For Black Women), a Brazilian organization focused on promoting equity of Black women in the tech industry through initiatives of action, empowerment, and knowledge sharing. Silence against systemic racism is not an option. Build the design community you believe in.UX Para Minas Pretas (UX For Black Women)，這是一個巴西組織，致力于通過采取行動，賦權和知識共享的舉措來促進科技行業中的黑人女性平等。 對系統性種族主義保持沉默是不可行的。 建立您相信的設計社區。

翻譯自: https://uxdesign.cc/unity-in-visual-design-cba546d1fb2b

大屏設計的視覺統一

總結

以上是生活随笔為你收集整理的大屏设计的视觉统一_视觉设计中的统一的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。