設計 101：為什麼設計中的視覺層次很重要

我們每天看到的內容數量是驚人的。 所以我們依靠它的組織方式來理解它。 這就是為什麼書籍有章節，電影有場景，播客有劇集以及設計中有視覺層次的原因。

視覺層次結構是關於你的內容的組織。 你可以用它來明確什麼是最重要的，什麼是最不重要的，以及介於兩者之間的一切。 您的每個受眾成員都可能以稍微不同的方式解讀您的廣告素材。 但是通過設計中的視覺層次，你可以給他們一些提示來引導他們。

是什麼讓這如此重要？ 那麼觀眾的眼睛首先被吸引的內容將被認為是最重要的。 之後引起他們注意的元素將進行相應的排名。

在設計中定義視覺層次

根據 Nielsen Norman Group 的說法， “視覺層次控制著體驗的傳遞。 如果您很難確定在頁面上的哪個位置查看，則其佈局很可能缺少清晰的視覺層次結構。”

換句話說，視覺層次涉及安排設計元素，以顯示它們中的每一個相對於彼此的重要性。 設計師構建他們的設計，以便人們能夠輕鬆閱讀和理解正在傳達的信息。

當元素以一種有凝聚力和邏輯性的方式佈置時，設計師能夠影響觀眾的看法。 既然我們已經向您介紹了設計中的視覺層次結構，讓我們來看看如何實現它。

視覺層次的重要性

在最基本的層面上，視覺層次有助於引導讀者瀏覽他們所看到的內容。 它告訴他們所提供的信息中最重要的部分。 它還向他們展示瞭如何將信息分解為部分和類別。 他們應該首先檢查內容的哪些部分。

此規則同樣適用於文本、視頻、圖像或任何其他形式的設計。 使信息易於理解，以您想要的方式呈現，是設計中視覺層次結構的最終目標。 它在您要呈現的各種內容之間建立關係。 並幫助您給觀眾留下特定的印像或信息。

當您提高可讀性並在視覺上引導觀眾時，您試圖傳達的信息將得到加強。 如果不使用視覺層次結構，您在開發營銷活動中的所有辛勤工作都可能付諸東流。 那麼讓我們來看看它是如何實現的。

在設計中創建視覺層次結構的方法

在您的每一項營銷資產中，堅持設計原則至關重要。 它創造了出色的用戶體驗。 當涉及到設計中的視覺層次結構時，您需要牢記以下幾點：

記住閱讀模式

大多數人從上到下，從左到右閱讀一頁。 或者他們至少熟悉這個約定，即使他們也以其他方式消費內容。 這可能會使規劃設計聽起來像一個簡單的過程。 但這裡的設計師手頭的任務實際上要復雜得多。

最近的研究表明，人們通常會瀏覽一個頁面，然後決定它是否足夠有趣以供他們閱讀。 掃描模式與我們所知道的閱讀模式不同。 它們通常採用以下兩種形狀之一：F 或 Z。因此，當您試圖吸引觀眾的注意力時，重點關注這些區域非常重要。 讓我們看看每種模式的全部內容：

F模式

有大量文字頁面（想想博客和電子書）？ 那麼 F 模式將是佈置它們的最佳方式。 這是因為讀者會快速向下瀏覽頁面左側，然後尋找他們感興趣的關鍵字。 他們會在左對齊的標題或前幾個主題句中查找這些內容。

如果他們發現有什麼吸引他們的眼球，他們就會停下來繼續往右邊走。 生成的掃描模式看起來像 F（甚至是 E）。 想知道如何將其納入您的設計中？ 只需要求最重要的信息保持一致。 使用短而粗的標題、項目符號和其他吸引眼球的標準也將有助於分解原本沉重的段落。

Z 模式

如果沒有像上面這樣的文本塊，則 Z 模式將適用。 一個很好的例子是登陸頁面設計和/或廣告創意。 在這裡，讀者的眼睛自然會首先越過頁面頂部。 他們知道這是最有可能獲得重要信息的地方。

然後他們直奔對角線的對角。 他們在頁面的最底部重複掃描。 大多數設計師都利用這一點。 他們通過將所有最重要的信息放在頁面的最頂部和最底部來做到這一點。 然後他們將所有其他需要閱讀的信息放在對角線的頂部和底部。

考慮規模和規模

如果某件事響亮而清晰，您會更容易聽到它，對嗎？ 在設計中視覺層次的情況下沒有聽覺體積。 但是所使用的設計元素的大小和規模肯定有類似的效果。 元素越大，人們就越有可能看到它並關注它。 這就是為什麼層次結構頂部的元素需要更大的原因。

不那麼重要的元素可以縮放以顯得更小，從而減少可見性和強調。 這將把它們推到重要性等級的較低水平。 這並不意味著佈局中最重要的東西就必須是巨大的。 這就是為什麼縮放很重要。 尺寸需要適度使用，相互關聯。 而且還很有品位，因此它們不會帶走設計的視覺吸引力。 看起來太大的元素會使設計的其餘部分黯然失色。 太小的元素將完全丟失給讀者。

使用顏色和對比度

在設計中實現視覺層次的另一種方法是使用顏色和對比度。 假設您的設計或網站頁面都是黑白的。 如果你給一個特定的區域帶來一點顏色，那將成為主要的焦點。 理想情況下，設計師應該用一些明亮的色彩流行來裝飾設計中最重要的元素，以使它們與較淺的元素相比脫穎而出。

這就是為什麼學生在教科書中強調的原因。 它可以幫助他們專注於關鍵點，而不是閱讀大量文本。 同樣，設計中較亮的顏色元素會在其他元素之前引起讀者的注意。

如果你看到你的設計中有很多鮮豔的顏色，爭奪注意力，一定要和你的設計師聯繫。 如果他們不清楚哪些信息需要在層次結構中更高，他們可能沒有以最有效的方式使用對比來實現您的目標。

在設計中具有高對比度會將焦點集中在觀眾必須看到的特定元素上。 視覺層次中的對比色也會影響元素之間的感知距離。 暖色在深色背景上更加突出。 與相同背景上的冷色相比，它們看起來更接近讀者。

相比之下，與暖色相比，冷色在較淺的背景上會顯得更亮、更近。 然而，設計師應該只使用適量的顏色對比。 如果過度使用，設計中的所有內容都會顯得很重要，讀者將不知道該去哪裡找。 他們甚至可能感到不知所措。 你知道這會導致什麼——完全失去他們的注意力。 永遠記住，視覺層次需要成為觀眾的指南。

玩弄空間和紋理

在設計中創建視覺層次結構的一種巧妙方法是在其中的元素之間留出足夠的呼吸空間。 例如，如果 CTA 按鈕周圍留有足夠的負空間，則會引起注意。

繼續討論紋理，當人們談論設計中的紋理和視覺層次時，它具有非常具體的含義。 它是指設計中空間、細節甚至文字的整體安排或格局。

與尺寸和比例類似，紋理是一種有用的工具，可以將觀眾的注意力引導到設計的特定部分。 通過紋理深度和形狀可以創建，使您的設計更具視覺吸引力。 但是你可以擁有太多的好東西。 紋理過多的設計最終會讓人感到困惑、分散注意力，而且整體上難以理解。

使用不同的字體和排版層次結構

您使用的字體不應相互競爭以獲得視覺或印刷層次結構。 重要的是要考慮不同字體的配對方式，以及任何給定字體的可用變體。

例如，Times New Roman 等字體由不同的字體組成，這些字體具有不同的粗細、樣式和大小。 您的設計師在決定使用哪些選項時需要考慮設計中的視覺層次結構。

在一個好的設計中，相同字體的不同大小、樣式和粗細可以組合使用，以使某些單詞比其他單詞更突出。 將太多不同的字體或字體組合在一起會使設計沒有吸引力和忙碌，所以避免這樣做。

通常更大更粗體意味著信息被解釋為更重要。 與此同時，更小更薄的文本被認為不那麼重要。 如果你只看雜誌或報紙，很明顯標題如何以粗體大字出現在頂部，而副標題緊隨其後，最後是最小字體的副本。 這是一種基礎級別的方法，可以包含在許多不同類型的設計中，無論設計的目的是什麼。

這是一個快速細分：

• 01 級排版將是頁面上最重要的。 此內容通常由標題組成，並且必須是客戶首先看到的內容。
• 02 級排版也需要突出顯示，但沒有 01 級那麼多。 這些將有助於將設計組織成具有相關正確信息的組。 它還有助於分解文本並為閱讀它的人提供某種方向的提示。
• 03 級排版是正文的組成部分。 它應該仍然清晰易讀，但也將是使用的字體中最小和最輕的。

當你在設計中有這些不同的層次時，向讀者展示什麼是重要的就變得更容易了，而不必如此“當面”。

注意平衡和對齊

設計中的任何對像都帶有一定的重量，就像它們在物理世界中一樣。 這在設計中稱為視覺重量。 一個元素相對於設計中其他元素的對齊可以顯著改變其視覺重量。

例如，如果對象向左對齊，那將首先引起用戶的注意。 設計中的其餘元素（乍一看）將融合在一起。 設計中的這種視覺重量也需要有適當的平衡。

大小、形狀和對比的巧妙運用可以暗示平衡。 它可以通過對稱、平等甚至不對稱來實現。 把不對稱想像成鏡像的鮮明對比。 您不會看到反射，而是會看到均勻分佈元素的東西。

考慮您的設計風格

您設計的風格或美學將幫助您強化主題並吸引用戶。 樣式實際上可以包括從排版到顏色甚至間距的所有內容。 如今，一些最流行的設計風格是有機的、扁平的、極簡的、擬物化的、插圖的或複古的。

使您的內容更加突出的另一個好方法是將設計風格與內容風格相匹配。 如果需要融入的內容很少，那麼接下來的設計也可以按照極簡主義的主題來做。

打破網格

登陸頁面佈局是根據網格模式設計的，網格模式是在設計上放置垂直和水平線時創建的。 在一個如此成熟和結構化的系統中，只有一種方法可以建立層次結構——打破網格。 現在我們的意思不是完全摧毀它。 但是以曲線或對角線排列的文本肯定會在放置在網格中的所有其他文本中脫穎而出。 因此，尤其要將此策略用於頭條新聞。

玩作曲

當有結構來創建視覺層次結構時，設計會更好。 這就是所謂的設計中的組合。 幾個世紀以來，藝術家們依賴於許多不同的構圖技術，其中許多至今仍在使用。

• 三分法是創建動態構圖的好方法，其中焦點不必總是放在中心。 Instad，這條規則說你可以將網格佈局分成三個等距的部分，並將四個焦點放在線條相交的地方。

• 賠率規則表明，奇數個元素比偶數個元素對人眼來說更有趣。 想想兩側被另外兩個物品包圍的焦點。 請看下面使用 3 個主題的示例。

確保設計中視覺層次結構的最佳實踐

最後，這裡是一些你應該記住的東西的快速瀏覽，作為設計中視覺層次的最佳實踐。 使用這些技術將有助於為您的觀眾創造更好的體驗：

• 在移動 UX 設計的情況下，小屏幕上的用戶需要能夠立即看到元素，並且他們應該能夠輕鬆地瀏覽內容。
• 選擇字體和字樣時要小心。 精細的草書字體可能適用於某些行業，例如婚禮策劃。 但是帶有某些效果的裝飾性文字可能會分散注意力，還會降低可讀性。
• 知道用戶的優先級是什麼。 您希望能夠使用按重要性排序的信息來指導用戶。 如果強調設計中的所有內容，則會適得其反。 您還需要知道需要分配相同重要性級別的元素。
• 永遠記住您希望通過每個設計實現的最終目標，並確保您清楚地向您的設計師闡明這一點。

視覺層次是給設計帶來秩序的方式

如您所見，您可以通過多種方式將視覺層次結構整合到設計中。 通過這樣做，您可以清楚地傳達您的信息。 如果做得好，這將使設計保持平衡，並顯得專業。 它將獲得對最重要的內容的適當關注。 這可能需要一些試驗，尤其是使用一些非常規的方法來實現這一點。 但請堅持下去，因為總有一種方法可以使用視覺層次來使設計更具影響力和技巧。