成功的產(chǎn)品設計都有清晰的視覺層級。清晰的層級設計使每一個UI元素清晰的呈現(xiàn)出來，讓用戶易于理解。視覺元素的呈現(xiàn)效果對于用戶體驗非常重要。設計合理的UI組件，可以讓用戶輕松的使用這個產(chǎn)品，與產(chǎn)品進行良好的互動，并感到愉悅。

因此，什么是視覺層級？雖然不同類型的產(chǎn)品有不同的構(gòu)建方法，但是仍然有一些通用的解決方案。今天這篇文章為設計師創(chuàng)建清晰的視覺層級提供了幾點有用的設計技巧。

1.牢記業(yè)務目標

每一個產(chǎn)品都有商業(yè)目標。要實現(xiàn)這些目標，創(chuàng)意團隊需要確定哪些UI元素更重要，并根據(jù)角色優(yōu)先考慮。比如，電子商務網(wǎng)站上的所有元素都執(zhí)行各種不同的任務。項目圖片是第一層級，因為它必須讓客戶去認知它。標題是解釋產(chǎn)品是什么，其次是按鈕鼓勵人們?nèi)ベ徺I。根據(jù)產(chǎn)品的業(yè)務目標和營銷目標，設計團隊可以有效的優(yōu)化視覺元素突出產(chǎn)品，讓人印象深刻。

設計機構(gòu)登陸頁面

2.考慮瀏覽模式

人們會大致的瀏覽頁面以確定是否對產(chǎn)品感興趣。許多研究都表明，流行的瀏覽模式有“F”和“Z”形。

F形瀏覽主要是用戶瀏覽大量的內(nèi)容的時候，例如博客、新聞平臺等。用戶的眼睛以F形移動：人們首先掃描屏幕頂部的水平線，然后向下移動頁面閱讀一遍水平線，人們會在段落的開始階段查找關鍵字，然后在副本左側(cè)的垂直線向下結(jié)束。

Z形圖案出現(xiàn)在不太復雜的頁面上，或者不需要向下滾動的頁面上。人們首先從左上角開始掃描頁面頭部，搜索核心內(nèi)容，然后沿著對角線向下到對角，在最底部從左到右結(jié)束。

了解這些模式的設計師會有效的組織內(nèi)容，將所有核心的界面元素放在最多的掃描點上，引起用戶注意。

3.功能第一

視覺層級似乎和審美有關，但不僅于此。首先，通過構(gòu)建和組織視覺元素，設計師需要確保產(chǎn)品使用清晰，導航正確。在美學上，異常的視覺元素的視覺層次不能有效的發(fā)揮作用。嚴重結(jié)構(gòu)化的用戶界面會導致糟糕的用戶體驗。因此，在構(gòu)建視覺層次時，設計師考慮UI元素的功能以及他們在導航中的角色。

海鮮食譜登陸頁

4.留白也是視覺元素

留白或負空間不僅僅是設計元素之間的區(qū)域，實際上是每個視覺構(gòu)圖的核心部分。是一種能讓所有界面元素都能讓用戶引起注意。設計師可以對UI組件進行分組或分離，以便創(chuàng)建有效的布局。此外，負空間有助于強調(diào)需要用戶高度關注的特定元素。留白是創(chuàng)建視覺層次結(jié)構(gòu)的有效工具，因此設計師需要平衡使用留白。

登陸頁面

5.應用黃金比例

黃金比例是被認為人眼最美觀的元素。是不同尺寸元素的數(shù)學比例。這個比例等于1:1.618，可以用許多人看過的貝殼形螺旋來說明。

設計師通常在線框圖階段應用黃金比例。它有助于規(guī)劃布局和調(diào)整用戶界面元素大小，這對于用戶來說是合適的比例。

小工具

6.使用網(wǎng)格

網(wǎng)格是創(chuàng)作過程中的不同階段的關鍵工具之一，視覺層次結(jié)構(gòu)也不例外。網(wǎng)格有助于構(gòu)建所有組件，并將它們放到合適的大小和比例中。更重要的是，設計師可以有效的利用負空間，因為網(wǎng)格顯示的元素是否按比例均勻放置。

7.添加一些顏色

顏色選擇和組合對視覺層次至關重要，它們可以幫助用戶區(qū)分核心元素。顏色有自己的層次結(jié)構(gòu)，這是由影響用戶心智的模型來決定的。大膽的顏色，如紅色和橙色，很容易被注意到，所以設計師經(jīng)常使用它們作為突出顯示或設置對比度的手段。

此外，將一種顏色應用與多種元素。來顯示某種關聯(lián)。例如，您可以為購買按鈕選擇紅色，以便用戶在需要時可以直觀的找到它。

金融服務網(wǎng)站

8.關注字體

視覺層次結(jié)構(gòu)包括一個稱為印刷層次結(jié)構(gòu)的核心部分。它的主旨是通過修改和組合字體，將需要突出的部分建立對比，這些元素應該最先被注意到，并與普通文字形成對比。字體可以通過調(diào)整大小、顏色和對齊的方式。不同的字體可以將內(nèi)容分成不同的級別，以便用戶可以感知信息。但是，建議設計師將字體保持在三種以內(nèi)，因為太多的字體看起來很亂，并且使設計不一致。

9.網(wǎng)頁三種信息層級，移動端兩種信息層級

如上所述，不同字體形成不同的級別，包括標題、副標題、正文副本，號召性用語元素和標題等。有三種級別，第一個是最高層級，旨在吸引用戶關注屏幕上的核心信息。第二級提供副元素，可以讓用戶輕松的了解所瀏覽的內(nèi)容。第三級通常應用正文和一些嬌小的類型的元素呈現(xiàn)數(shù)據(jù)。

許多情況下，數(shù)字產(chǎn)品都包含三個級別，因為它們能提供大量內(nèi)容。另一方面，建議設計師為移動設備設計時將層級保持在兩個以內(nèi)。小屏幕不能提供足夠的空間用于三個級別，因此輔助元素（如子標題）必須放在一邊，使UI看起來干凈整潔。

WineYard應用程序

有效的視覺層級不僅關乎美學。它旨在提供解決問題的導航和交互系統(tǒng)以及友好的用戶體驗。為了創(chuàng)建足夠的視覺層級，設計師需要考慮功能和業(yè)務的目標來組織所有UI元素。

總結(jié)

本文針對如何加強視覺層級的設計介紹了九個設計要點，我們可以應用以上原則進行UI設計，希望可以通過閱讀本文對你的設計有所幫助。

原文鏈接：https://uxplanet.org/9-effective-tips-on-visual-hierarchy-c3b30a7fd0ef

原文作者：Tubik Studio