掌握視覺層級原則，最佳化使用者體驗

全面解析UX中視覺層級的關鍵原則，探討如何使用視覺層級來改進產品並最佳化使用者體驗。

自設計之初，我們根據視覺層級來傳達重要資訊。設計中的每個元素都應有助於改善使用者體驗，並清楚傳達資訊。

01 視覺層級的重要性

視覺層級也是傳達資訊。如何組織、排序內容，讓接受者能夠儘可能輕易地理解資訊。設計師可以利用視覺元素去區別資訊的重要性，引導觀看者閱讀的順序或焦點。

視覺層級結構用於按設計者希望使用者檢視它們的順序對設計元素進行排序。透過使用對比，比例，平衡等原則，幫助在正確的位置排布每個設計元素，並讓最重要的元素脫穎而出。

為什麼視覺層級結構在UX設計中如此重要？

視覺層級結構可以在資訊架構中發揮關鍵作用，幫助使用者更輕鬆地瀏覽產品，大大減少與產品互動所需的時間和精力。

UX設計的目的是消除使用時的摩擦並提高產品的易用性

，而關注視覺層級結構是實現這一目標的關鍵方法。

讓我們來分析其中的一些原則，看看它們如何影響內容的排布。

02 視覺層級的類別

1. 透視原則

大多數介面（例如網站和應用程式）的設計都是二維平面的。透過運用透視，我們可以在元素中產生距離和分隔的錯覺，以幫助將焦點集中到設計中重要的區域。

可以通過幾種方法增加透視的錯覺，即增加與周圍物體有關的元素大小，這會使這些元素看起來更接近使用者。例如向元素新增視差運動效果，使其移動速度比周圍的元素慢或快，新增陰影或在背景或前景層上新增模糊效果也可以產生戲劇性的效果。

要想讓使用者產生透視的錯覺，首先可以增加元素相對於周圍元素的大小；這將使這些元素看起來更接近使用者。將視差運動效果新增到元素中使它比周圍元素移動得快或慢，或在背景層或前景層上新增模糊也可以產生顯著的效果。

從上面左側的圖中，能看出來所有元素看起來都是平坦的，沒有深度。由於文字和背景粘連在一起，造成文字的可讀性變差。

而在右面的圖中，將模糊新增到背景影象中，併為文字新增適當的陰影。這有助於為設計元素間增加一些距離，使資訊更容易可視可讀。

在看火人的遊戲首頁中，多個影象層被設定成以不同的速度滾動，來提供視差效果，從而使觀看者更好地理解遊戲的深度內容。

2. 恰當的瀏覽模式

其實每個人在觀看內容的時候，都會有一個潛意識的觀看模式。這種模式可能會因為使用者正在檢視的內容型別的不同而有所差異，但是可以說最受使用者歡迎的兩種瀏覽模式是Z型模式和F型模式。

兩種瀏覽模式都可以根據要設計的內容型別來達到獨特的目的。這些瀏覽模式將頁面的資訊流動起來，幫助觀者獲得更好的體驗。讓我們更詳細地看一下這兩種模式。

Z型視覺動線

Z型視覺動線的設計最適合於文字資訊不繁重的頁面中。將內容設計成以這種模式的排布將幫助讀者快速瀏覽每個元素，並清晰地知道每個元素的重要性。

在Apple的網站中，頁面頂部有多個Mac的選項，所以我們首先會進行水平瀏覽，然後沿對角線方向看到標語，最後以目標產品的詳細介紹作為結束。所有資訊的佈局都非常清晰明瞭，同時大多數人已經下意識地被這種瀏覽模式吸引。

F型視覺動線

F型視覺動線更多地使用在諸如文章和部落格之類的文字比較密集的頁面上。對於文章和資訊內容繁雜的網站，簡單的F型佈局可以有效地幫助讀者掃描影象和標題。

以這種瀏覽模式進行設計佈局時，儘管讀者可能會掃描前幾行的資訊，但隨著他們快速向下移動視線時，他們通常只會瀏覽最吸引其注意力的地方。

3. 佈局規則

透過使用參考線和網格來佈局設計，可以使所有元素保持整潔和對齊，從而不會破壞觀者的瀏覽體驗。他們的注意力知道要跟蹤的位置，並且這些資訊都是整齊的對齊和分組，所以每組元素都可以緊密關聯。

諸如黃金分割率之類的公式試圖做到這一點；但是可以將重要元素從這些既定規則中分離出來，以增加其視覺層次。這也可以幫讓設計更具動感和樂趣。

在這個的示例中，網站為了保持整體介面的工整，使用網格的方式來排布資訊，但是為了更加關注Mercedez的形象，圖片忽略了網格佈局，從而建立了一種彈出效果。

4. 合理使用字型

正確的字型可以讓網站擁有自己的個性，並引起使用者對某些領域的關注。具有不同大小和粗細的字型也可以用於增加層級結構，並使更重要的文字資訊脫穎而出。

大多數網站旨在利用不同大小的標題來強調與它們相關的內容。優良作法是將主標題用作頁面的最大和最重要的標題，並使用副標題、小標題等來標註不太重要的內容。這也有助於讀者瀏覽文字頁面，準確定位感興趣的區域。

Slack的網站就是一個很好的例子，該網站使用恰當的標題為內容賦予重要性。在標題部分，它們具有最大的主標題，其中包含介紹資訊和號召性用語。橫幅下方有許多帶有較小標題的版塊，以介紹更多功能。

5. 平衡與對稱

在頁面上對稱出現的元素可以幫助平衡設計，使資訊保持簡單，有條理並且易於遵循。

如下圖所示，Avioc利用其主頁上的對稱性將重點放在其主要優勢上，同時在影象的兩邊提供更豐富的文字摘要。焦點直接位於中心，可以輕鬆瀏覽頁面查詢更多資訊，而不會感到迷茫。

有時候除了標準的平衡，我們還可以在設計中打破乏平衡和對稱性來傳達某些資訊的重要性，讓我們的設計佈局顯得更加流暢和活潑。

6. 使用大小和比例吸引焦點

調整大小是一項非常基本但至關重要的原則，這樣可以使重點元素比其他元素更突出，有助於將觀眾的視線吸引到特定區域。

透過增達重點元素的比例，可以立即吸引觀看者的注意力。但是在設計過程中，需要注意的是不要放大太多的元素，以免降低螢幕上其他元素的重要性。

Simply Chocolate就是一個很好的示例，用來說明如何使用比例的變化來強調視覺層級。在這個頁面中，最先吸引我們視線的是放大的標題文字而不是底部的圖片，這些文字解釋了產品的全部含義。同時這樣的方式不會影響螢幕上其他的元素。

7. 使用顏色和對比使物件脫穎而出

顏色可以與元素大小的調整一起使用，以提高設計中關鍵資訊的重要性。通常，明亮的顏色比無色的或者不飽和的顏色更能吸引觀眾的注意力。

同樣，具有較高對比度的顏色將顯得更重，更接近觀看者，從而賦予它們更多的重要性。在上面的示例中可以看到，較亮的顏色在較暗的背景下看起來更近，而在較亮的背景上則較遠。

無論資訊在介面中怎樣排布，使用一種明亮的顏色作為焦點都可以幫助吸引注意力。在上面的網頁以及大多數網站的導航中，我們都會注意到按鈕上高對比度的顏色，這是最關鍵的操作暗示。透過為使用者帶來良好的操作導航提示，為他們提供更愉快的體驗並增加所需流量的轉化。

8. 運用動效

還記得網際網路還很新的時代，每個彈出視窗或標註都必須眨眨眼才能引起使用者的注意？這種做法確實引起了我們的注意，但是在此過程中，它犧牲了令人愉悅的體驗，並給觀者帶來了煩躁的感覺，這對參與度沒有幫助。

如今，我們可以更細微的方式使用這些相同的動效原理來引起注意或重視某些領域。同樣頁可以簡單地以巧克力為例，說明它們如何結合微妙的動作來吸引注意力並提供提示，促使使用者參與設計。

在滾動口味選擇中時，顏色會更改以匹配產品。當把滑鼠懸停在包裝紙上時，它會開啟一條條條，露出內部的巧克力，給使用者的印象是可以將其開啟以瞭解更多資訊。

總結

這裡我們討論了許多不同的UX設計原則和視覺層級結構的示例。它們現在可能都有意義，但是當需要將它們付諸實踐並找出一種在所有設計中平衡所有這些原理的方法時，有時候頁會更加令人困惑。

視覺層級結構用於幫助將重點放在設計的某些元素上，但是認為“最重要”的元素越多，完善設計的難度就越大。從簡單開始，專注於最重要的一件事，它可以幫助設計走向成功。

原文連結：

https：//

xd。adobe。com/ideas/proc

ess/information-architecture/visual-hierarchy-principles-examples/

譯文僅作學習用途，轉載請註明：本文來自『Clip設計夾』原創翻譯，如有其它用途請聯絡原作者。