編輯導(dǎo)讀：有的時候，一個頁面上堆滿了設(shè)計元素，用戶看的眼花繚亂，甚至不知道重點在哪里。如果你難以在頁面上找到焦點，則布局可能缺少清晰的視覺層次。 應(yīng)該如何體現(xiàn)視覺層次呢？本文作者將從四個方面展開分析，希望對你有幫助。

你是否看到過一個頁面，堆砌各種設(shè)計元素，甚至不知道從哪里開始看？如果你難以在頁面上找到焦點，則布局可能缺少清晰的視覺層次。

頁面的可視層次結(jié)構(gòu)控制著信息從系統(tǒng)到最終用戶的傳遞-它使用戶知道應(yīng)將注意力集中在哪里。

Williams-Sonoma.com的移動版本：我們從哪里開始尋找？?除了栗色的“網(wǎng)絡(luò)星期一”街區(qū)之外，此頁面上的元素在大小和顏色上都相對相等，并且沒有呼吸空間。因為大多數(shù)文本都大寫，所以很少有突出的。很少有用戶愿意花時間通過這種視覺混亂進行解析。

定義：2D顯示器（網(wǎng)頁，圖形，印刷品等）的視覺層次結(jié)構(gòu)是指頁面上設(shè)計元素的組織，以便引導(dǎo)眼睛以預(yù)期的重要性順序瀏覽每個設(shè)計元素。

可以使用以下3種方法創(chuàng)建視覺層次結(jié)構(gòu)：

1. 顏色和對比度
2. 比例
3. 分組（鄰近區(qū)域和公共區(qū)域）

一、顏色和對比度

好的視覺設(shè)計使用顏色或?qū)Ρ榷龋ɑ騼烧撸┰陧撁嫔蟿?chuàng)建視覺層次。?在設(shè)計中應(yīng)用顏色會使某些元素看起來更靠前，而另一些元素則退后，從而確定了吸引我們注意力的內(nèi)容以及我們賦予各種設(shè)計元素的重要性。

不是創(chuàng)建層次結(jié)構(gòu)的元素的實際顏色，而是元素和它所出現(xiàn)的上下文（包括背景和其他附近元素）之間的值和飽和度的對比。

設(shè)計師通常還使用類型對比來指示層次結(jié)構(gòu)，并通過特殊的字體處理來表示重要性。粗體字體會比細體或常規(guī)字體更引人注目。與周圍文本樣式不同的單詞（例如，斜體或下劃線）也會引起注意。

MoMA.org使用顏色來傳達層次結(jié)構(gòu)-右上角的綠色鏈接與徽標下方的黑色鏈接形成鮮明對比。

TheNounProject.com：眼睛首先被吸引到搜索領(lǐng)域，不僅是因為它的尺寸很大，還因為它的白色與黑色背景形成對比。該字段提示用戶開始搜索。然后，將視線對準搜索字段下方的白色圖標，以預(yù)見可能的結(jié)果。使用顏色和對比度的最佳做法：

• 考慮高飽和度的色彩。鮮艷的色彩自然會脫穎而出，因此可用于重要物品。低飽和的顏色可用于重要性較低的項目。保留溫暖的明亮顏色（例如紅色）以警告或錯誤。
• 不要使用太多顏色。盡管有些復(fù)雜的配色方案看起來很漂亮，但它們可能會讓你感到不知所措。當使用太多具有相似值或飽和度的顏色時，人們對元素之間層次結(jié)構(gòu)的感知通常會降低。在一般設(shè)計中，將顏色使用限制為2種主要色和2種輔助色即可。
• 不要使用太多的對比變化。對于復(fù)雜的設(shè)計，請使用不超過3個對比度變化。如果一切都有對比，那么什么都不會脫穎而出。有效的設(shè)計通常對標題，子標題和正文使用不同的處理方式。
• 不要僅僅依靠顏色來傳達視覺層次。色盲人士可能無法感知某些顏色組合之間的差異。

二、比例

較大的元素會更加突出并吸引用戶的注意，因此大小可以用作重要性的標記。

澤西牛奶公司：此牛奶紙箱的印刷處理通過比例變化創(chuàng)建了有影響力的視覺層次。立即注意到產(chǎn)品最重要的方面–它是牛奶及其脂肪含量。

Hipcamp：視覺層次結(jié)構(gòu)通過字體大?。ê蛯Ρ榷龋┻M行傳達。映入眼簾的是主口號，因為它足夠大，加粗的字體。使用比例的最佳做法：

• 使用不超過3種尺寸-小，中和大。三種大小提供了足夠的多樣性以供使用-考慮標題，子標題和主體副本的類型大小-但仍保持層次結(jié)構(gòu)關(guān)系的良好定義和清晰性。在網(wǎng)頁設(shè)計上，主體副本的大小范圍為14px至16px，副標題的大小范圍為18px至22px，標題的大小范圍為32px。
• 使最重要的元素最大化。通過最大程度地強調(diào)設(shè)計中最重要的方面。同樣，將不太重要的元素縮小。將元素的最大數(shù)量限制為最多2個，這樣它們才能脫穎而出并加強層次結(jié)構(gòu)。

三、分組：鄰近區(qū)域和公共區(qū)域

隱式的和顯式分組有助于我們查看頁面的骨骼或結(jié)構(gòu)，并促使我們將注意力轉(zhuǎn)移到屏幕上與目標有關(guān)的區(qū)域。如果沒有分組，將很難理解標準區(qū)域（例如導(dǎo)航，內(nèi)容，廣告）在哪里，因此，將很難弄清楚將注意力集中在哪里以及可以安全地忽略哪些區(qū)域。例如，一旦用戶識別出一個右欄編組，由于它與廣告的關(guān)聯(lián)，他們可能會忽略它。

Spotify：眼睛立即在此屏幕上看到3個不同的分組。組之間有意增加的間距使每個組分離并個性化。同樣重要的是，標題和相關(guān)內(nèi)容之間的有意減少的空白。這種減小的間距在標題和內(nèi)容之間創(chuàng)建了層次關(guān)系。

Shopify結(jié)帳表單字段：在良好的表單設(shè)計中，接近性原則顯而易見。節(jié)標題和相關(guān)表單字段之間的最小空白使關(guān)系變得清晰—它們屬于同一類。每個字段塊之間的空間也增加了，這進一步幫助了眼睛看到這種分層的空間模式。還要注意兩個“快速結(jié)帳”按鈕周圍的邊界（公共區(qū)域原理的一個示例），這使它們與下面的結(jié)帳表格分開。

分組的最佳做法：

• 留白。周圍有更多空間的元素將被視為一個組，因此將受到更多關(guān)注。（如果組中包含許多元素，則注意力可能會分散在其中。）考慮通過提供更多留白來強調(diào)設(shè)計中最重要的方面。
• 使用容器（卡片）。如果僅憑空白不足以創(chuàng)建層次結(jié)構(gòu)的視覺提示，請?zhí)砑舆吙蚧虮尘爸惖念~外元素。這些其他元素會造成視覺混亂，因此請謹慎使用。

四、斜視測試

在設(shè)計中我們有時通過斜視或?qū)υO(shè)計稍加模糊，以了解所傳達的分組和層次結(jié)構(gòu)。該技巧突出了設(shè)計中強調(diào)的內(nèi)容，并揭示了底層層次結(jié)構(gòu)。

在上面的Spotify示例中，使用5或10像素的半徑模糊設(shè)計表明分組按預(yù)期瀏覽，并且即使你看不懂文字，“最近?播放”部分也最為突出。20像素的模糊顯示了意外的層次結(jié)構(gòu)，最近播放的一項內(nèi)容由于其強烈的色彩而成為頁面上最突出的元素-在原始屏幕截圖中也可以看出這種效果。

Spotify：原圖（左上），半徑為5（右上），10（左下）和20像素（右下）的半徑模糊。

此示例表明僅設(shè)計模板是不夠的-你還必須考慮將填充模板的內(nèi)容。例如，具有鮮明色彩的新聞?wù)掌赡軙紦?jù)新聞首頁，即使它旨在說明次要故事。編輯者需要考慮其內(nèi)容選擇對用戶體驗的影響。

五、結(jié)論

在開始設(shè)計之前，請先從視覺上退后一步，然后定義內(nèi)容的層次結(jié)構(gòu)和要用戶注意的關(guān)鍵點。建立層次結(jié)構(gòu)后，請集中精力應(yīng)用顏色和對比度，比例或分組的變化。在考慮了視覺層次結(jié)構(gòu)的設(shè)計之后，請退一步，并通過與目標用戶進行測試來查看設(shè)計是否按預(yù)期閱讀。

當頁面的視覺層次結(jié)構(gòu)準確反映不同設(shè)計元素的重要性時，用戶可以輕松理解它并成功完成任務(wù)，從而贏得對設(shè)計和品牌的信任。

原文地址：https://www.nngroup.com/articles/visual-hierarchy-ux-definition/

譯者：Fyin印跡；公眾號：印跡拾光

本文由 @Fyin印跡 翻譯發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載。

題圖來自Unsplash，基于CC0協(xié)議