可視層次結(jié)構(gòu)是用戶按重要性處理信息的順序。在界面設(shè)計中，就像在任何其他形式的設(shè)計中一樣，這個概念是必要的。通過正確使用層次結(jié)構(gòu)，大腦可以對元素進(jìn)行分組和優(yōu)先級排序，從而給它們一個特定的順序，這有助于理解你想要交流的內(nèi)容和用戶的成就感。

在界面設(shè)計中，一個常見的問題是過多地使用分散在屏幕上的元素或組件，如果沒有按照正確的層次結(jié)構(gòu)放置這些元素或組件，就會產(chǎn)生混亂和導(dǎo)航方面的更大努力。對這些要素進(jìn)行優(yōu)先排序?qū)Ρ苊膺@個問題很重要。

在本例中，大小、形狀和顏色資源用于將視圖定向到特定的元素。

一般用戶傾向于“掃描”整個屏幕的內(nèi)容。因此，重點(diǎn)應(yīng)該清楚地說明網(wǎng)站或應(yīng)用程序的內(nèi)容。

這種優(yōu)先排序不僅應(yīng)該被視為美學(xué)問題，而且應(yīng)該被視為用戶體驗的重要組成部分。其中包括的許多元素，特別是在移動設(shè)備中，將與站點(diǎn)導(dǎo)航相關(guān)。雖然平面設(shè)計中的層次結(jié)構(gòu)已經(jīng)存在多年，但在UI設(shè)計中加入了不斷的交互因素。用戶與元素交互的事實使得設(shè)計一個直觀的界面變得更加重要。

要創(chuàng)建一個正確的層次結(jié)構(gòu)，必須考慮以下七個資源:

01尺寸

元素越大，就越容易引起注意。事實上，人們首先看到的是更大的物體，包括文本和圖像。使用尺寸層次結(jié)構(gòu)背后的想法是為了給視覺旅程提供一個焦點(diǎn)。

在這張谷歌藝術(shù)與文化應(yīng)用的快照中，標(biāo)題“Pawtraits:我們不斷變化的關(guān)系……”比副標(biāo)題“我們到底感覺如何……”要大得多。通過將這些分?jǐn)?shù)分開，閱讀順序可以避免混淆。

如果從一個文本到另一個文本的跳轉(zhuǎn)更小，比如從32pt到24pt，那么在同時發(fā)送兩條消息時，閱讀順序就會變得更困難。這可能不是一個大問題，但你應(yīng)該記住，這可能會創(chuàng)建一個效率較低的層次結(jié)構(gòu)。

同樣不必要的是，重要的元素太大了。造成不必要的不平衡最終會掩蓋設(shè)計的其他部分，并導(dǎo)致其他信息在閱讀中丟失。和其他設(shè)計一樣，平衡是關(guān)鍵。

02顏色

明亮的顏色比柔和的色調(diào)更突出。色彩是一種強(qiáng)大的視覺資源，它的正確使用可以有效地分離屏幕上的元素來優(yōu)先或優(yōu)先考慮它們。在界面設(shè)計中，通常最強(qiáng)烈的色彩是交互，因為用戶需要采取行動或從系統(tǒng)接收反饋。

在這個Cabify app截圖中，使用紫色作為主色。旅行路線和“繼續(xù)”按鈕都是第一個層次結(jié)構(gòu)，其次是地圖和第二層次結(jié)構(gòu)中的汽車。色調(diào)和飽和度的調(diào)和使用將這些元素與更加不飽和和不那么重要的背景分離開來。

有三種方法來創(chuàng)建層次使用顏色:

色調(diào):有些顏色比其他顏色更突出。這種色調(diào)可以為人類的視力造成幾種類型的沖突，紅色和綠色，藍(lán)色和黃色，或藍(lán)綠色和棕色。

飽和:飽和的顏色比灰色更突出?；疑退麄兊某叨瓤偸莾A向于降級的顏色極大的飽和，這甚至給用戶更多的親密感。在灰色背景上使用紅色就是一個例子。

亮度:明亮的顏色比黑暗的顏色更突出，反之亦然。在黑暗的背景上使用明亮的元素創(chuàng)造了一個直接的層次，這也適用于我們有白色背景和一些黑暗的元素。

重要的是要知道，濫用顏色會讓用戶感到困惑，因為它會讓用戶產(chǎn)生一種錯覺，認(rèn)為所有的東西在構(gòu)圖中都是重要的。另一方面，等級制度的思想，是從把自己定位在最相關(guān)的事物上，而不是不相關(guān)的事物上開始的。

03接近

靠近的元素比遙遠(yuǎn)的元素更能吸引人的注意力。在創(chuàng)建閱讀順序時，讓組使用距離是一個非?？尚械馁Y源。人類的視覺傾向于對元素進(jìn)行分類，因此，使這種分類基本上有利于使用者的腦力工作。

在Netflix的主頁上，第一組包含電影的標(biāo)題和概要;第二組在底部有六部電影。這些組之間的距離使視圖更容易從一個組傳遞到另一個組，而沒有視覺干擾。同樣，它們各自組中的每個元素都有自己的劃片和邊距。

因此，接近性是設(shè)計中創(chuàng)建連接和關(guān)聯(lián)的對象分組。當(dāng)事物比較接近時，通常意味著它們一定是相關(guān)的。如果事情發(fā)生在更遠(yuǎn)的地方，這應(yīng)該意味著它們可能沒有聯(lián)系。簡而言之，鄰近性創(chuàng)造了這些關(guān)系，并為信息帶來組織和層次。

04對齊

任何與其他元素相分離的元素都會引起注意。這是因為對齊在元素之間創(chuàng)造了秩序，這條規(guī)則的任何改變都會引起人類的興趣，并因此而引人注目。

在Airbnb的住宿頁面上，房屋的名稱、位置和房東的名字屬于一個對齊，而對公寓的描述和附圖則屬于另一個對齊。這條看不見的直線的斷裂在兩個層次上創(chuàng)造了等級制度。

在界面設(shè)計中，元素的對齊對于創(chuàng)建視覺一致性非常重要，因為它允許為屏幕上的元素分配相關(guān)性，并建立特定元素的開頭和結(jié)尾，無論是交互的還是信息性的。

人類的大腦喜歡模式，這就是為什么許多最好的網(wǎng)站是對稱的。這讓我們有機(jī)會打破這個規(guī)則，策略性地將用戶的注意力吸引到一個特定的點(diǎn)上。用戶將能夠根據(jù)這些元素的對齊或不對齊來關(guān)聯(lián)它們。

05重復(fù)

重復(fù)的樣式給人的印象是這些元素是相關(guān)的。這種層次結(jié)構(gòu)包括重用接口中相同或類似的元素。重復(fù)也提供了一些優(yōu)勢，基于視覺模式。如果某事被重復(fù)，那是因為它很重要。

在優(yōu)步網(wǎng)站的白菜單中，一個圖標(biāo)和一個標(biāo)簽被放置了8次。這與一個較小的尺寸相平衡，將菜單放在層次結(jié)構(gòu)的第二位，在主標(biāo)題“進(jìn)入駕駛座……”之后。重要的是要知道重復(fù)對于創(chuàng)建第二或第三層次的相關(guān)性是非常好的。

在界面設(shè)計中，重復(fù)創(chuàng)造了一種統(tǒng)一性和一致性的感覺。例如，在這篇媒體文章中，字幕(h2)被標(biāo)記為重復(fù)的樣式，粗體的使用和較大的字體大小給用戶一種基于重復(fù)的方向感和層次感。我們必須知道，人的本性在熟悉中得到安慰。

06負(fù)空間

元素周圍的空間越大，它產(chǎn)生的關(guān)注就越多。負(fù)空間是顯示空白畫布的區(qū)域，不僅可以在周圍找到，而且可以在同一元素之間和內(nèi)部找到。它不適合單一的顏色，而是采用了背景的顏色，給人一種空間的錯覺。

在這個網(wǎng)頁設(shè)計的例子中，數(shù)字“01”和標(biāo)題“運(yùn)動的目的”都被負(fù)空間包圍著。盡管由于其紋理的多樣性，渲染圖具有更大的層次權(quán)重，但良好應(yīng)用的負(fù)空間可以保持平衡，防止其他元素被降級。

雖然有些設(shè)計師可能認(rèn)為越多越好，但視覺感受是非常不同的。帶有大量封閉元素的設(shè)計會導(dǎo)致界面飽和，并且沒有層次結(jié)構(gòu)來指示哪個元素更重要，從而導(dǎo)致用戶的困惑和不知所措。

其思想是，元素越重要，它周圍的負(fù)空間就越多。將一個元素與其他元素隔離不僅是創(chuàng)建層次結(jié)構(gòu)的良好資源，而且還可以為設(shè)計提供支持結(jié)構(gòu)。也就是說，它創(chuàng)建了必要的空間，使得視圖可以以一種流暢的方式從一個元素傳遞到另一個元素，而沒有視覺干擾。

07紋理

多變和復(fù)雜的紋理比平面紋理更能吸引人的注意。墻的平面比人行道的平面更突出。這是因為復(fù)雜性總是比極簡主義更能吸引用戶的注意力。紋理的使用也融入了其他重要的設(shè)計元素，如風(fēng)格和氛圍。

UI設(shè)計中的照片可能是紋理層次結(jié)構(gòu)的最好例子。它們的形狀、顏色和漸變總是比平面元素傳達(dá)更多的感覺。在Masterclass應(yīng)用程序中，指導(dǎo)員的照片毫無疑問是第一個層次結(jié)構(gòu)，后面是白色的他們的名字，菜單中的紅色表示用戶的位置。

這個資源應(yīng)該以一種適當(dāng)?shù)姆绞绞褂茫驗闉E用紋理最終會分散而不是通知，或者可能導(dǎo)致不必要的壓縮。紋理往往會與其他層次資源(包括大小)重疊，因此在合并紋理化元素之前，必須考慮到整個組合和用戶在設(shè)備屏幕上看到的所有內(nèi)容。再次強(qiáng)調(diào)，平衡是關(guān)鍵。

當(dāng)一個設(shè)計沒有清晰的視覺層次結(jié)構(gòu)時，用戶的導(dǎo)航就會被強(qiáng)制轉(zhuǎn)換成其他形式的閱讀，比如F和Z模式。作為設(shè)計師，我們可以強(qiáng)化這些模式，也可以打破它們，找到更動態(tài)的交流形式。在UI設(shè)計中，沒有什么是美學(xué)的，而視覺層次無疑是我們擁有的指導(dǎo)用戶體驗、重新推動設(shè)計標(biāo)準(zhǔn)和提供通向界面目標(biāo)的直接路徑的最佳武器之一。