初學者的視覺層次結構

視覺層次結構是按特定順序組織對像以引起對預期區域的注意。

通常用於 UX 設計，視覺層次結構為讀者提供了更輕鬆的導航時間，並有助於將他們的注意力引導到您想要的位置。

使用不當或缺乏視覺層次可能會使網站訪問者感到困惑和迷失。

視覺層次在海報和廣告中很普遍，以幫助將注意力集中在預期的元素上。

該博客將為初學者提供視覺層次結構的基礎知識。

視覺層次分解

將視覺層次分解成更簡單的塊有助於解釋設計師如何處理設計概念。

三是視覺層次結構中的三個主要角色，其中兩個密切相關。

尺寸

更改對象的大小可以幫助吸引對它們的注意或遠離它們。

為您希望表達的最重要的信息保留最大的尺寸是很重要的。 使用太多類似大小的元素會消除這種效果，因為沒有什麼比這更突出了。

縮放大小對於顯示它與其他對象的比較至關重要。 創建平衡感有助於縮放以強調最大對象與較小對象的比較。

如果您有不重要的信息，則將其保存在較小的尺寸將使其不礙事，並將其留在用戶最後看到的地方。

顏色和對比度

較亮的顏色比其他顏色更能吸引註意力。 當您將明亮的顏色與較暗的背景相結合時，這種效果會增加。 結果使您的信息更多地彈出並輕鬆吸引註意力。

顏色和對比度是視覺層次的兩部分，但它們完美地結合在一起以吸引註意力。

使用此方法的一種方法是通過使用華麗的顏色突出顯示文本來更改文本的顏色； 它會在任何其他沉悶的彩色文本之前引起注意。

對比度越大，注意力越強。 添加劇烈的顏色差異（例如帶有亮紅色字體的深色背景）會吸引用戶的注意力，並使其成為他們在任何圖像或網頁上註意到的第一件事。

在創建引人注目的對比色時，最好將它們保持在最低限度。 太多對比鮮明的物體會讓讀者感到困惑，並產生不受歡迎和令人反感的效果。

另一種使用顏色的方法是選擇相似的調色板來創建特定對象之間的關聯。

最好只為頁面上最必要的元素保留此策略，因為這是您希望首先引導所有註意力的地方。

好的用戶體驗設計包括大量的對比，大多數美學使用強烈的對比來創造令人驚嘆的作品。

F & Z 模式

當主要通過文本提供信息時，有兩種主要模式最能充分利用我們處理視覺信息的方式。

這些模式適用於大多數語言，但適用於英語，因為單詞是從左到右和從上到下閱讀的。

F模式

F 圖案是包含大量文本的設計的完美選擇。 該設計遵循以它命名的字母，從左上角開始向右移動。

之後，查看者會向下掃描書脊以查找副標題或標題。

該圖案交替命名為 E 圖案，儘管 F 圖案更具標誌性。

要使用 F 模式，您需要將所有重要信息放在左側的小標題中以吸引註意力。

這種設計非常適合消除與閱讀大段段落文本相關的無聊感。

用戶可以掃描標題以發現任何引人注目的標題或要點，因為它們有助於吸引註意力。

Z 模式

雖然 F 模式適用於文本較多的網站，但 Z 模式是不同的。

Z 模式非常適合沒有多段文字的網站或廣告。

該設計首先將最高優先級的信息放在左上角，然後將重要性級聯到右上角、左下角和右下角。

用戶將輕鬆導航 Z 模式，因為它是一種易於理解的常用設計。

左上角通常是為標誌保留的，因為它將是人們首先註意到的。 右上角是用戶看到公司徽標後的號召性用語。 在這種情況下，號召性用語通常是註冊提示。

設計的中間通常包括一個圖像來填充空白部分。

左下角和右下角包括您要向訪問者展示的所有預期文本或信息。

了解排版

排版層次結構易於理解，適用於任何涉及大量文本的設計，這是絕大多數。 它可以分為三個部分，順序是標題、副標題，最後是您的文本。

您的標題包含基本信息，在您的設計中處於最高位置，並且是最明顯的內容。

您的副標題可以對所有文本進行排序，並為混亂的段落提供順序。 始終保持小標題小於標題，因為它們不應該優先競爭。

副標題為用戶提供了直接導航以查找特定信息。

你的最後一塊是你的文本，通常涉及段落。 字體大小應該很小但保持可讀性。 前兩節旨在為用戶提供更輕鬆的時間來瀏覽密集的文本。

間距的重要性

對於包含最少信息的網站，在重要信息周圍留出大量空間會引起人們對所有空間所在的中心的關注。

這個概念也應該適用於你所有的其他設計，添加太多信息會給你帶來不愉快的用戶體驗。

用空間包圍內容提供了簡單易懂的用戶體驗設計。

塞滿太多信息並在區域周圍留下很小的空間會讓你的設計感到不知所措，讓人們感到困惑。 當用戶感到困惑時，他們總是有機會離開您的網站，一定要只描繪重要信息。

使用對齊

對齊您的設計很重要，因為隨機放置文本會創建一個忙碌的圖像來查看。

F-pattern 和 Z-pattern 設計都體現了對齊的使用。 F-pattern 設計使用左對齊，而 Z-pattern 設計使用左右對齊以及中心對齊。

以文字為焦點進行視覺設計時，最好向左對齊。

對於具有簡單化焦點的嚴格視覺設計，將所有元素對齊到中心往往會創造出有吸引力的設計。

使用網格

在構建設計時，網格是幫助創建過程的常用方法。 三分法則的使用能夠為您的設計增加平衡。

要使用三分法則，請在您的設計中添加一個網格，並讓它位於兩條水平和垂直線上。 結果提供了一種賞心悅目的設計。

靠近中心的物體會引起注意，而遠離中心的物體會最後引起注意。

接近和關係

當元素更接近時，您的讀者會認為它們是相關的。

這可以幫助您組織大量信息，並使您的觀眾更容易理解。

將圖像與文本分組意味著它們都是相關的，讀者會將兩者聯繫在一起。 讓圖像和文本相距很遠會讓讀者認為這兩個元素不相關並且彼此無關。

字體和視覺層次

使用為重要信息保留的較大字體更改字體大小將有助於將注意力集中在它們上。

對於海報，名稱應該是較大的字體之一，而地址等項目應該用小字體書寫。

從字體大小開始，使用不同類型的字體將有助於引導用戶注意力。 為標題、副標題和信息文本使用不同的字體。 這種設計方法將有助於使您的作品具有吸引和保持讀者註意力所需的流行感。

視覺層次提示

在開始創建設計之前，記下一些筆記可以幫助組織您的設計，甚至可以幫助您創建更美觀的設計。

記下您需要優先考慮的最重要信息，以及您將使用哪些方法來做到這一點。

此外，嘗試想像讀者的旅程並嘗試改進用戶體驗設計，並刪除任何雜亂的細節。

一個好的用戶體驗設計的投資回報率總是值得額外的工作，所以不要低估它的重要性。

包起來

視覺層次是關於規定你希望讀者註意的順序； 您希望首先看到重要信息，然後是其他所有信息。

對比的使用可以創造出流行的顏色，並成為讀者在設計中首先註意到的。

了解您希望讀者首先看到哪些信息將使您能夠使用視覺層次結構的所有元素為他人提供良好的用戶體驗設計。