大屏設(shè)計(jì)的視覺統(tǒng)一

視覺設(shè)計(jì)的統(tǒng)一性是什么？ (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.

視覺設(shè)計(jì)中的統(tǒng)一概念意味著一組元素協(xié)同工作以創(chuàng)建更大的整體。 正如陳詞濫調(diào)所說，它??的意思是： 大于其各部分之和的整體。

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

為了說明這個(gè)概念，讓我們考慮網(wǎng)頁(yè)的一些組件：

• brand logo
  品牌標(biāo)志
• navigation menu
  導(dǎo)航菜單
• main content
  主要內(nèi)容
• sidebar
  側(cè)邊欄
• footer
  頁(yè)腳
• images
  圖片
• search box
  搜索框

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

這些組件在組合在一起形成網(wǎng)頁(yè)之前，就像拼圖游戲一樣。

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.
  當(dāng)所有部件都整齊地連接在一起時(shí)，圖片就出現(xiàn)了。
• Unity is achieved.
  實(shí)現(xiàn)團(tuán)結(jié)。

A web page works the same way.

網(wǎng)頁(yè)的工作方式相同。

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

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

以下是有關(guān)視覺設(shè)計(jì)中的統(tǒng)一性的更多注意事項(xiàng)：

• 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.

  團(tuán)結(jié)可以是視覺上的和概念上的。 當(dāng)所有設(shè)計(jì)元素都支持相同的視覺主題時(shí)，將實(shí)現(xiàn)視覺統(tǒng)一 。 當(dāng)所有內(nèi)容元素都支持相同主題時(shí)，可以實(shí)現(xiàn)概念上的統(tǒng)一 。

• 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).

  所有元素都可以發(fā)揮作用。 統(tǒng)一設(shè)計(jì)中沒有多余的要素。 刪除對(duì)整體沒有幫助的元素會(huì)增強(qiáng)統(tǒng)一性。 刪除整體上必不可少的元素會(huì)削弱整體性(破壞設(shè)計(jì))。

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

  沒有任意放置元素。 所有元素都在統(tǒng)一設(shè)計(jì)中進(jìn)行了周到和戰(zhàn)略性的考慮。

在視覺設(shè)計(jì)中實(shí)現(xiàn)統(tǒng)一的方法 (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.

在視覺設(shè)計(jì)中實(shí)現(xiàn)統(tǒng)一的最常見，最有效的方法是格式塔的視覺感知原理 。 這些原則最初是由德國(guó)心理學(xué)家在1920年代記錄的，其依據(jù)是人類傾向于以群體和形式看待事物。

Here are some of the more powerful Gestalt grouping principles:

以下是一些更強(qiáng)大的格式塔分組原則：

• Proximity

  接近

• Similarity

  相似

• Uniform Connectedness

  統(tǒng)一的聯(lián)系

• Good Continuation

  良好的延續(xù)性

• Common Fate

  共同的命運(yùn)

Below is a general introduction to each one.

以下是每個(gè)內(nèi)容的一般介紹。

接近 (Proximity)

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

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

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個(gè)圓圈的集合，但它們并沒有作為一個(gè)整體出現(xiàn)。 相反，通過使用接近性，它們以四個(gè)組出現(xiàn)。

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.

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

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

在現(xiàn)實(shí)世界中，無處不在的使用無處不在，以統(tǒng)一各種對(duì)象。

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.

例如，查看此段。 之所以可以閱讀它，是因?yàn)槟?顯然)知道該語言，而且 因?yàn)樽帜?#xff0c;單詞和句子緊密地組合在一起。 沒有距離，一切都會(huì)混亂。 接近在書面交流中至關(guān)重要。

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.

在網(wǎng)頁(yè)設(shè)計(jì)中，請(qǐng)考慮導(dǎo)航菜單。 為了使站點(diǎn)用戶知道所有鏈接都是菜單組的一部分，只需要將它們緊密放置在一起即可。

相似 (Similarity)

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

相似性是指通過重復(fù)分組。 看起來相似的元素相互之間看起來更相關(guān)。

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

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

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.

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

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

讓我們看一下實(shí)際的用例。 在網(wǎng)站上：

• Why are all h2 elements styled to look the same throughout the site?
  為什么所有h2元素的樣式在整個(gè)網(wǎng)站上看起來都一樣？
• Why does the navigation menu look the same throughout the site?
  為什么整個(gè)站點(diǎn)的導(dǎo)航菜單看起來都一樣？
• Why is the design template the same throughout the site?
  為什么整個(gè)站點(diǎn)的設(shè)計(jì)模板都一樣？

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:

對(duì)所有這些問題的簡(jiǎn)短回答是： 因?yàn)橹貜?fù)和一致(即，在這種情況下，相似性)可以增進(jìn)溝通和理解。 這里是更詳細(xì)的說明：

• 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元素的樣式在整個(gè)網(wǎng)站上看起來都一樣？ 因?yàn)檫@向用戶指示內(nèi)容的那些部分在內(nèi)容層次結(jié)構(gòu)中處于同一級(jí)別。

• 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.

  為什么整個(gè)站點(diǎn)的導(dǎo)航菜單看起來都一樣？ 因?yàn)檫@向用戶指示鏈接是相同的，并且在瀏覽會(huì)話期間無需再次查看它們以獲取新信息。

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

  為什么整個(gè)站點(diǎn)的設(shè)計(jì)模板都一樣？ 因?yàn)槟窍蛴脩舯砻魉麄內(nèi)匀辉谕粋€(gè)網(wǎng)站上。

統(tǒng)一的聯(lián)系 (Uniform Connectedness)

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

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

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.

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

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

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

There are two general methods for applying uniform connectedness:

應(yīng)用統(tǒng)一連接有兩種通用方法：

• common regions, and
  共同區(qū)域，以及
• 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.

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

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

連接線通過將單個(gè)元素與線或形成線的對(duì)象序列(例如，點(diǎn)，箭頭和氣泡) 連接來創(chuàng)建組。

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

在上面的矩陣中，已經(jīng)通過鄰近度和相似度與其他圓相關(guān)的三個(gè)圓通過連接線形成了自己的組。

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

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

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.

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

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.

當(dāng)處理有限的空間時(shí)，此功能特別有用。 例如，考慮一個(gè)駕駛艙儀表板。 放置所有指標(biāo)和控件的空間很小。

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.

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

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

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

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

請(qǐng)注意，菜單同時(shí)具有連接線和公共區(qū)域。

良好的延續(xù)性 (Good Continuation)

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

良好的連續(xù)性是指通過對(duì)齊進(jìn)行分組，無論是筆直還是彎曲。

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

與不在直線或曲線上的元素相比，在直線或曲線上對(duì)齊的元素看起來更相關(guān)。

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

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

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.

在上圖中，轉(zhuǎn)速表，燃油表，溫度表和里程表都具有良好的延續(xù)性。 每個(gè)指示器的標(biāo)記在圓形路徑上對(duì)齊，因此易于理解。

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.

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

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

在上面的圖像中，一系列其他不相關(guān)的符號(hào)以良好的連續(xù)性組合在一起。

共同的命運(yùn) (Common Fate)

Common fate refers to grouping by similar motion and direction.

共同的命運(yùn)是指按照相似的運(yùn)動(dòng)和方向分組。

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

朝相同方向移動(dòng)或指向相同方向的元素看起來彼此之間的關(guān)聯(lián)性更高。

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.

在上圖中，在相同方向上移動(dòng)的點(diǎn)看上去與在相反方向上移動(dòng)的點(diǎn)之間的相關(guān)性更高。

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.

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

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.

在上圖中，美國(guó)海軍的藍(lán)色天使中隊(duì)在三角洲編隊(duì)飛行。 因?yàn)槊考茱w機(jī)都以相同的方向和速度飛行，所以它們被視為一組，由共同的命運(yùn)聚集在一起。

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

但是，如前所述，共同的命運(yùn)并不需要運(yùn)動(dòng)。 簡(jiǎn)單地給人以運(yùn)動(dòng)印象的元素也會(huì)創(chuàng)建組。

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.

上面的圓圈中沒有移動(dòng)，但是箭頭創(chuàng)建了兩個(gè)不同的組。 之所以發(fā)生這種情況，是因?yàn)楣餐\(yùn)的核心在于，與運(yùn)動(dòng)無關(guān)，而與共同目標(biāo)有關(guān)。

Common fate thrives on conflict.

共同的命運(yùn)因沖突而繁榮。

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.

當(dāng)它的正常功能被破壞時(shí)，它會(huì)產(chǎn)生的效果是共同命運(yùn)的強(qiáng)大而獨(dú)特的特征，這使其不同于其他格式塔原理。

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.

我們知道，共同的命運(yùn)涉及多個(gè)物體和諧共處。 這是日常生活中常見的現(xiàn)象，我們大多數(shù)人甚至都沒有注意到。 我們只是認(rèn)為這是理所當(dāng)然的。

But a disruption to that flow captures our attention instantly.

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

Here are two examples:

這是兩個(gè)示例：

• A herd of zebras running. A lion coming in from an angle.
  一群斑馬奔跑。 一只獅子從一個(gè)角度進(jìn)來。
• 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.

對(duì)比。 這就是共同命運(yùn)的真正力量。 格式塔的其他原理無法產(chǎn)生如此強(qiáng)大的視覺提示。

In Web Design

在網(wǎng)頁(yè)設(shè)計(jì)中

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.

在網(wǎng)頁(yè)設(shè)計(jì)中，共同命運(yùn)是對(duì)以相同方向，相同速度和時(shí)間移動(dòng)的元素的有用分組策略。

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.

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

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).

網(wǎng)頁(yè)設(shè)計(jì)中常見命運(yùn)的其他示例包括滑動(dòng)動(dòng)作(例如在約會(huì)應(yīng)用程序中)和工具提示(懸停動(dòng)作會(huì)導(dǎo)致彈出通知)。

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

當(dāng)然，中斷此流程也可能是強(qiáng)大的視覺提示。

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.

在本文的第一部分中，我們討論了視覺設(shè)計(jì)中統(tǒng)一性的重要性。 我們談?wù)摰氖钦w大于部分之和。

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.

在第二部分中，我們討論了實(shí)現(xiàn)整體的方法。 特別是，我們涵蓋了鄰近，相似，統(tǒng)一連接，良好延續(xù)和共同命運(yùn)的格式塔原則。 這些原則代表了經(jīng)過時(shí)間考驗(yàn)的方法，可以在視覺設(shè)計(jì)中實(shí)現(xiàn)統(tǒng)一。

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.

但是本文只是對(duì)格式塔的介紹。 還有很多要知道的。 我鼓勵(lì)您深入研究，以更好地了解它們的功能和多功能性。 在執(zhí)行此操作時(shí)，您不可避免地會(huì)遇到其他一系列格式塔原理，例如閉合，圖形/背景，過去經(jīng)驗(yàn)和聯(lián)絡(luò)點(diǎn)。

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)，這是一個(gè)巴西組織，致力于通過采取行動(dòng)，賦權(quán)和知識(shí)共享的舉措來促進(jìn)科技行業(yè)中的黑人女性平等。 對(duì)系統(tǒng)性種族主義保持沉默是不可行的。 建立您相信的設(shè)計(jì)社區(qū)。

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

大屏設(shè)計(jì)的視覺統(tǒng)一

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。