產品經理要了解的9個關於視覺層次設計的建議

本文轉譯自TubikStudio，全文有刪減

清晰的視覺層次是成功產品的基礎。它以有效的方式呈現UI元素，使內容易於理解並使用戶很好接受。 視覺元素的呈現對用戶體驗有很大的影響。 如果UI組件能夠有效地組織起來，用戶就很享受地使用你的產品。不同類型的產品需要不同的視覺層次構建方法，但仍然有一些常見的解決方案對UI內容組織有幫助。這些內容對於專業的UI設計師來說很淺顯，但是對於產品經理來說是有必要了解的。

1、謹記產品目標

產品背後往往有公司的商業目標。為了實現這些目標，產品團隊需要確定哪些UI元素更重要，並根據其對於總體目標的重要性來優先考慮。以電商為例，產品主圖通常是主要吸引用戶注意的元素。產品標題在主圖下面解釋它是什麼產品，下一個重要的是CTA按鈕，叫人們完成購買。通過分析為產品設置的商業和營銷目標，產品團隊可以有效地優化視覺內容。

2、留意用戶視線移動路徑

在瀏覽越慢之前，人們會掃描它以了解他們是否感興趣。不同的研究已經揭示了幾種流行的用戶視線掃描路徑，其中有「F」和「Z」形。F圖案主要出現在有大量內容的頁面上，例如博客，新聞等。用戶的眼睛以F形移動。Z形圖案出現在不太複雜的頁面上，或者不需要向下滾動的簡單頁面上。你需要將所有核心界面元素放在用戶停留最多的點上，以引起用戶的注意。

3、功能第一

視覺層次不僅只針對審美。首先，通過組織視覺元素，設計師需要確保產品使用簡單，導航準確。在美學上不合格的視覺層次結構不能有效地發揮作用。過度結構化內容的用戶界面會導致糟糕的用戶體驗。因此，在構建視覺層次結構時，設計師需要考慮UI元素的功能以及他們在導航過程中扮演的角色。

4、留白

留白不僅僅是設計元素之間的區域，它實際上是每個視覺設計的核心組成部分。它是一種能夠讓所有用戶界面元素都能夠引起用戶注意的工具。 設計師可以對UI組件進行分組或一定程度的隔離，通過留白來創建好的布局。 此外，留白有助於引導用戶更多的關注特定元素。留白是創建視覺層次結構的有效工具，因此設計師需要合理使用。

5、黃金比例

它是不同尺寸元素的數學比例，早年被認為是肉眼看來最和諧的比例。大致等於1：1.618，並且通常可以在很多地方看到這個比例的應用。產品團隊通常在線框圖階段就要開始應用黃金比例。它有助於規劃布局和調整用戶界面元素的大小，這對於用戶來說是合適的比例。

6、使用網格

網格是在設計過程的不同階段應用的重要工具之一，網格有助於組織所有組件，並將它們以適當的大小和比例布局在頁面中。更重要的是，設計師可以有效地利用空間，因為網格顯示元素是按比例均勻放置的。

7、添加一些顏色

顏色選擇和顏色組合對視覺層次結構至關重要，因為它們可幫助用戶區分核心元素。對於用戶的認知結構來說，顏色有自己的層次結構。比如明顯的顏色，如紅色和橙色，以及像白色和奶油般柔軟的顏色。明顯的顏色很容易被注意到，所以設計師經常使用它們作為突出顯示或設置元素間對比度的手段。此外，將一種顏色應用於多個元素，可以讓用戶察覺到他們之間是相互關聯的。例如，可以為購買按鈕配置紅色，以便用戶可以在需要時直觀地找到它們。

8、注意字體

視覺層次結構包括一個稱為印刷層次結構的核心子部分，旨在定義和組合字體，以在最需要引起用戶注意的突出元素和普通文本信息之間建立對比。字體可以通過調整大小，顏色和字形以及對齊來進行設置。不同的字體可以將頁面中的內容分成不同的等級，以便用戶可以跟隨我們的設計來感知信息層級。但是，建議設計師將字體數量保持在三個以內，因為太多的字體看起來很亂，並且使設計不一致。

9、PC頁面設置3個層級，移動頁面2個即可

正如我們上面提到的，不同的字體形成不同的內容級別，包括標題，副標題，正文副本，引用元素等元素。有三種常用的文本級別：H1，H2和正文。第一個是等級最高的類型，旨在吸引用戶關注頁面上的核心信息。下一級提供次級元素，可以輕鬆閱讀並幫助用戶瀏覽內容。最後一級通常應用於正文和一些額外數據。在許多情況下，大部分產品需要所有的三個級別，因為這樣的話你就可以很好的組織大量內容。另一方面，建議產品團隊在為移動端產品設計時將層次保持在兩個以內。小屏幕不能提供足夠的空間用於三個級別內容的展示，因此輔助級別的元素（如子標題）必須放在一邊，以使移動UI看起來乾淨整潔。

有效的視覺等級不僅僅關乎美學。它旨在提供高效的導航和交互系統以及友好的用戶體驗。為了創建有效的視覺層次結構，設產品團隊需要考慮功能和產品目標來有效組織所有UI元素。

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！