視覺層次對有效的組織UI設計元素是至關重要。讓我們看一些技巧，幫助設計人員在Web和移動佈局上構建和組織UI元素,歡迎加入UI設計群587751709
好的視覺層次結構是成功數字產品的基本前提。它可以幫助我們有效的組織UI元素，以便內容易於理解和讓用戶在瀏覽時提高愉悅度。視覺元素的呈現對用戶體驗有很大影響。如果各元素組件有效的組織排版，用戶可以毫不費力地瀏覽頁面與頁面交互並享受這中間的交互過程。
那麼，怎麼才能夠使視覺層次結構明晰，內容有效組織？當然，不同類型的產品需要不同的構建方法。但是存在一些有助於UI內容組織的通用解決方案。今天的這篇文章提供了有關為Web和移動產品創建引人注目的可視化層次結構的設計要點。
1、 明確產品商業業務目標
設計背後通常有商業目標。為了實現這些目標，創意團隊需要確定哪些UI元素更重要，並根據他們的角色確定優先級。例如，電子商務網站上的所有元素都執行各種級別的任務。圖像的使用通常是主要的吸引眼球，因為它們必須鼓勵客戶注意到它、留意它，併產生相應的操作。標題在圖像之後解釋它是什麼，下一個重要的階段是CTA(call to action)按鈕，呼叫人們購買物品(或參與相關操作)。通過考慮為網站或應用設定的業務和營銷目標，創意團隊可以有效地優先考慮視覺內容，並使產品脫穎而出。
2、考慮用戶瀏覽模式
用戶在閱讀網頁之前，會對其進行掃描，以瞭解他們是否感興趣。不同的研究，包括 尼爾森諾曼集團的研究
，已經揭示了幾種流行的掃描模式，其中“F”和“Z”形模式。
F模式主要出現在具有大量內容的數字頁面或屏幕上，例如博客，新聞平臺等。用戶的眼睛以F形移動：首先，他們掃描屏幕頂部的水平線，然後向下移動頁面稍微在較短的水平線上讀取，在副本左側的垂直線處完成，人們在段落的初始句子中查找關鍵字。
Z形圖案發生在不太集中於複製的頁面上或不需要向下滾動的頁面上。模式如下：人們首先從左上角開始掃描頁面的頭部，搜索核心信息，然後向下到對角線，最後用頁面底部的水平線從左到右。
設計師應該瞭解這些模式然後有效的組織內容，將所有核心UI元素放在最掃描的點上，以吸引用戶的注意力。
3、功能第一
視覺層次結構不能只考慮美學方面。首先，通過構建和組織視覺元素，設計師需要確保產品使用清晰，導航正常。在美學上異常建立的視覺層次結構不僅不能有效地發揮作用，而且具有錯誤結構化的內容的用戶界面導致不良用戶體驗。因此，在構建可視化層次結構時，設計人員需要考慮UI元素的功能以及它們在導航過程中扮演的角色。
4、留白是設計中不可或缺的設計元素
留白或負空間不僅僅是設計元素之間的區域，它實際上是每個視覺構圖的核心組成部分。它是一種能夠使用戶注意到所有用戶界面元素的襯托。設計師可以對UI組件進行分組或分離，以便他們可以創建有效的佈局。此外，負空間有助於強調需要用戶深度關注的特定元素。空白空間是創建視覺層次結構的有效工具之一，因此設計師需要努力實現負空間與內容之間的平衡。
5、應用黃金比例
黃金比例是不同尺寸元素的數學比例，被認為是人眼能發現的最美觀的元素之一。比例等於1：1.618，並且通常用鸚鵡螺旋來說明。
設計師經常在線框圖階段應用黃金比例。有助於規劃佈局的結構，並以正確的比例調整用戶界面元素的大小，這對用戶來說在閱讀時是非常愉悅的體驗。
6、使用網格
網格是在創作過程的不同階段應用的關鍵工具之一，視覺層次結構也不例外。網格有助於構建所有組件並將它們放入適當的大小和比例。更重要的是，設計師可以有效地處理負空間，因為網格顯示元素是按比例放置還是均勻放置的參考線。
7、注意顏色的使用
顏色的選擇和組合對於視覺層次結構至關重要，因為它們可以幫助用戶區分核心元素。問題是顏色有自己的層次結構，這是由對用戶心靈的影響力所決定的。有大膽的顏色，如紅色和橙色，以及弱點的白色和奶油色。大膽的顏色很容易被注意到，因此設計師經常將它們用作突出顯示或設置對比度的手段。
此外，將一種顏色應用於多個元素，您可以顯示它們以某種方式連接。例如，您可以為購買按鈕選擇紅色，以便人們可以在需要時直觀地找到它們。
8、注意字體的使用
視覺層次結構包括一個稱為排版層次結構的核心子部分，旨在修改和組合字體，以構建應注意到的最有意義和最突出的元素與普通文本信息之間的對比。可以通過調整字體大小，顏色和字體以及它們的對齊來轉換字體。不同的字體可以將相同的內容劃分為不同的級別，以便用戶可以逐漸感知信息。但是，建議設計師將字體類型數量保持在3種字體以內，因為太多字體看起來很亂，並使設計不一致。
9、字體大小，web三種，移動建議保持在兩種
如上所述，web設計的字體大小，包括標題，子標題，正文，號召性用語元素和字幕等元素。 有三種級別：初級， 二級和三級。第一個包括最大類型，在吸引人們關注屏幕上的核心信息。下一級提供易於瀏覽的元素，並幫助用戶瀏覽內容。高等級通常應用正文和一些通過相對較小的類型呈現的附加數據。
在許多情況下，web設計包括所有三個級別，因為它們更有可能提供大量內容。另一方面，建議設計師在為移動設備創建排版時將字體層級數保持在兩個之內。小屏幕不能為三個級別提供足夠的空間，因此輔助級別的元素（例如子標題）必須放在一邊以使移動UI看起來乾淨整潔。
有效的視覺層次不僅僅與美學有關。還提供解決問題的導航和交互系統以及友好的用戶體驗。為了創建足夠的可視化層次結構，設計師需要考慮功能和業務目標來組織所有UI元素。
