為了觀眾的目的，重要的是內容的組織。 書有章節，電影有場景，影片劇集 。

同樣的組織也需要應用於數字和紙上的頁面佈局。這可以透過將層次結構應用於您的設計元素來完成。堅持視覺層次結構只是說 資訊從最重要到最不重要的組織 方式的一種奇特方式 。

觀眾定義什麼對他們最重要；設計師只是給了他們一些提示。

觀眾首先看到的任何資訊都被確定為最重要的，因此位於層次結構的頂部。接下來引起觀眾注意的元素是在視覺層次結構中排名較低的元素。

理解視覺層次

視覺層次結構在UI 設計中扮演著重要角色。想想一個好的登陸頁面是什麼樣的：頂部的公司標誌，頂部或左側的選單，底部不太重要的元素。這些元素是有目的的。

什麼是視覺層次？

視覺層次結構是設計中元素按每個元素中的重要性順序排列。每個元素所具有的視覺權重或視覺對比決定了其相對於設計中其他元素的重要性。

使用桌面排版軟體可以幫助平面設計師在指南、模板和其他工具的幫助下將所有材料整齊地佈置在一頁上，以幫助最佳化佈局。

即使是非設計師也可以利用這一點。在為會議設計簡報時，視覺層次會發揮作用，以便參加者可以輕鬆理解您要提出的要點（而不會聽到您說的一個字）。

大小和規模

你更有可能聽到聲音越大的東西。視覺層次中沒有聽覺體積，但元素的大小和比例有類似的效果。

其中一個顯然比另一個更重要。

元素越大，我們就越有可能看到它，將它移向層次結構的頂部。

可以縮小不那麼重要的元素以降低可見性和重點。這會將這些元素移向視覺層次結構的底部。

這並不一定意味著最重要的元素必須是巨大的。適度使用大小並保持品味；太大的元素可能會壓倒設計的其餘部分，而太小的元素可能會在翻譯中丟失。

顏色和對比度

另一種使重要元素在觀眾中脫穎而出的方法是使用顏色和對比度。在一個充滿黑白的世界（或網站）中，一點點顏色就會產生很大的不同。

用明亮的顏色裝飾最重要的資訊或元素，使它們在較淡的色調下流行。想想在教科書中突出顯示的效果；如果單個單詞或句子的顏色更亮，它們會在任何其他單詞出現之前引起讀者的注意。如果您的設計中已經有彩色背景，您可以使用對比色方案來做到這一點。

高對比度將拉出您想要傳達的任何主要觀點。

對比色在視覺層次結構中還有另一個影響：它會改變元素的感知距離。暖色會在深色背景中脫穎而出，使它們在深色背景上看起來比冷色更接近。相反，冷色在淺色背景上突出，使它們在淺色背景上看起來比暖色更接近。

適度使用顏色和對比度——過度使用會使觀眾感到困惑，因為突然間， 一切 看起來都很重要，而且不可能知道該轉向哪裡。請記住，視覺層次結構應該作為指導。

字型

我們不是在談論將 Times New Roman 和 Curlz 放在一起並讓它們競爭重要性。一 字型 像Times New Roman字型是由多達 字型;  Times New Roman 的不同重量、大小和樣式。例如，16 pt 的 Times New Roman 斜體與 36 pt 的 Times New Roman Bold 是不同的字型。

利用這些權重、大小和樣式可以將資訊在視覺層次結構中上移（或下移）。這些可以單獨使用或一起使用，以使某些詞比其他詞更明顯和更有力。

可以在整個設計中使用單一字型，但該字型中的各種字型仍然可以根據重要性排列文字元素。

更大更粗意味著更重要，而更小更細的文字則是次要的。不要混淆這條規則——如果應用不當，它可能會使文件看起來有點奇怪。

排版層次結構

您不必猜測將這些字型放在哪裡。想想報紙或雜誌的佈局是什麼樣的：標題、副標題、文案。這是最基本的方法，它可以應用於多種設計，包括名片、小冊子和文章。

1.級排版將是頁面上最重要的內容。這些通常是標題，應該是讀者看到的第一件事。

2.級排版也應該脫穎而出，但不如你的一級。這些應該有助於將您的設計組織成具有相關資訊的組或部分。它應該分解文字並向讀者暗示一些方向。

3.當頁面主要由文字組成時，使用3 級排版。此級別通常是內容的主體，通常是最小尺寸的字型，但仍應清晰易讀。

使用這些不同的級別是另一種向讀者表明什麼是重要的，而不必將其置於霓虹燈下。

負空間

如果您想引起對特定內容的注意，請嘗試給它一些喘息的空間。表單、按鈕或重要文字週圍留下的負空間使它看起來像個奇怪的人。以一種好的方式。

雖然您可能認為向頁面新增更多元素會使其看起來更好，但事實恰恰相反；您的頁面變得雜亂無章，充滿了難以按重要性區分的資訊。

留白不是浪費。相反，它讓觀眾和讀者在進入下一個元素之前有一點時間喘口氣，並且可以幫助將重要元素變成焦點，而不僅僅是看起來像機器中的另一個齒輪。

閱讀模式

在所有文化中，人類都是從上到下閱讀的。這是我們眼睛閱讀的最可預測的方式，但如果我們只有時間掃描呢？無論是插圖、網站還是印刷品，人眼在快速吸收資訊時可能會遵循兩種模式。

F型

F 模式通常適用於我們閱讀大量文字頁面的方式，例如您現在所在的頁面。讀者將以“F”（或“E”）的形狀掃描頁面：首先，穿過頁面頂部閱讀標題，然後向下瀏覽頁面左側以查詢數字或專案符號，最後在整個頁面上查詢帶下劃線或加粗的術語。

Z型

具有更多影像和更少文字塊的設計通常以 Z 模式組合在一起。

在這種模式中，讀者將從左到右掃描頁面頂部。這是在網站上找到最重要資訊的地方。

讀者的眼睛然後向下並斜向對角移動，並以與掃描頂部相同的方式掃描頁面的下部，從而形成“Z”形。

式設計的；網頁設計師非常聰明。最重要的資訊幾乎總是在頂部欄上：徽標、搜尋工具、導航選項卡。底部欄由“Z”的對角線連線，包括其他重要資訊，例如聊天機器人、聯絡資訊或指向網站其他頁面的連結。

視覺層次結構是有效的、強大的，並且在設計時不容忽視，尤其是當您有重要資訊要共享時。沒有什麼原則比另一個原則更重要，因為它們都涉及使您需要脫穎而出的資訊真正跳出頁面的方法。