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

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

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

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

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

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

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

一、顏色和對(duì)比度

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

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

設(shè)計(jì)師通常還使用類(lèi)型對(duì)比來(lái)指示層次結(jié)構(gòu)，并通過(guò)特殊的字體處理來(lái)表示重要性。粗體字體會(huì)比細(xì)體或常規(guī)字體更引人注目。與周?chē)谋緲邮讲煌膯卧~（例如，斜體或下劃線）也會(huì)引起注意。

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

TheNounProject.com：眼睛首先被吸引到搜索領(lǐng)域，不僅是因?yàn)樗某叽绾艽螅€因?yàn)樗陌咨c黑色背景形成對(duì)比。該字段提示用戶開(kāi)始搜索。然后，將視線對(duì)準(zhǔn)搜索字段下方的白色圖標(biāo)，以預(yù)見(jiàn)可能的結(jié)果。使用顏色和對(duì)比度的最佳做法：

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

二、比例

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

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

Hipcamp：視覺(jué)層次結(jié)構(gòu)通過(guò)字體大?。ê蛯?duì)比度）進(jìn)行傳達(dá)。映入眼簾的是主口號(hào)，因?yàn)樗銐虼螅哟值淖煮w。使用比例的最佳做法：

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

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

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

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

Shopify結(jié)帳表單字段：在良好的表單設(shè)計(jì)中，接近性原則顯而易見(jiàn)。節(jié)標(biāo)題和相關(guān)表單字段之間的最小空白使關(guān)系變得清晰—它們屬于同一類(lèi)。每個(gè)字段塊之間的空間也增加了，這進(jìn)一步幫助了眼睛看到這種分層的空間模式。還要注意兩個(gè)“快速結(jié)帳”按鈕周?chē)倪吔纾ü矃^(qū)域原理的一個(gè)示例），這使它們與下面的結(jié)帳表格分開(kāi)。

分組的最佳做法：

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

四、斜視測(cè)試

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

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

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

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

五、結(jié)論

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

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

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

譯者：Fyin印跡；公眾號(hào)：印跡拾光

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

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