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

界面設(shè)計(jì)中經(jīng)常遇到的問題是過多地使用了分散在屏幕上的元素或組件，如果未按正確的層次放置這些元素或組件，則會(huì)導(dǎo)致混亂并增加導(dǎo)航的工作量。對(duì)這些元素進(jìn)行優(yōu)先級(jí)排序?qū)τ诒苊獯藛栴}很重要。

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

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

這種優(yōu)先次序不僅應(yīng)被視為美學(xué)問題，而且應(yīng)被視為用戶體驗(yàn)的重要組成部分。其中包括的許多元素（尤其是在移動(dòng)設(shè)備中）將與站點(diǎn)導(dǎo)航相關(guān)。盡管圖形設(shè)計(jì)中的層次結(jié)構(gòu)已經(jīng)存在多年，但恒定的交互因素已添加到UI設(shè)計(jì)中。用戶與元素交互的事實(shí)使設(shè)計(jì)直觀的界面更加相關(guān)。

創(chuàng)建正確的層次結(jié)構(gòu)必須考慮七種資源：

尺寸

元素越大，越會(huì)引起注意。人們首先看到較大的物體是事實(shí)，其中包括文本和圖像。使用大小層次結(jié)構(gòu)背后的想法是為開始視覺之旅提供一個(gè)焦點(diǎn)。

在Google Arts and Culture應(yīng)用程序的此快照中，標(biāo)題“ Pawtraits：我們的不斷變化的……”的大小比副標(biāo)題“我們的真實(shí)感受……”大得多。通過將這些分?jǐn)?shù)分開，閱讀順序可以避免任何混亂。

如果從一個(gè)文本到另一個(gè)文本的跳躍較小，例如從32pt到24pt，則當(dāng)同時(shí)發(fā)送兩條消息時(shí)，閱讀順序?qū)⒆兊酶永щy。這可能不是一個(gè)大問題，但是您應(yīng)該記住，這可能會(huì)創(chuàng)建效率較低的層次結(jié)構(gòu)。

同樣重要的元素太大也沒有必要。造成不必要的失衡可能最終使其他設(shè)計(jì)黯然失色，并使其他信息在閱讀中丟失。像設(shè)計(jì)中的所有其他內(nèi)容一樣，平衡是關(guān)鍵。

顏色

明亮的色彩比柔和的色調(diào)更為突出。顏色是一種強(qiáng)大的視覺資源，它的正確使用可以有效地將屏幕中的元素分開，以對(duì)它們進(jìn)行優(yōu)先排序或降低優(yōu)先級(jí)。在界面設(shè)計(jì)中，通常最強(qiáng)的顏色是用于交互，因?yàn)橛脩粜枰扇〈胧┗驈南到y(tǒng)接收反饋。

在此Cabify應(yīng)用截圖中，紫色的使用是主要顏色。行程路線和“繼續(xù)”按鈕均為第一層級(jí)，其次是地圖和汽車。色調(diào)和飽和度的諧波使用將這些元素與較不飽和且重要性較低的背景分開。

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

色相

某些顏色優(yōu)于其他顏色。色調(diào)會(huì)為人的視力造成幾種沖突，紅色與綠色，藍(lán)色與黃色或綠松石與棕色會(huì)產(chǎn)生沖突。

飽和度

飽和色比灰色更突出?；疑捌錁?biāo)度總是傾向于飽和度高的顏色，這甚至給用戶帶來更親近的感覺。例如，在灰色背景上使用紅色。

亮度

明亮的顏色比深色的顏色突出，反之亦然。在深色背景上使用明亮的元素會(huì)立即建立層次結(jié)構(gòu)，當(dāng)我們擁有白色背景和一些深色元素時(shí)，這也適用。

重要的是要知道，濫用顏色會(huì)最終使用戶感到困惑，因?yàn)檫@會(huì)產(chǎn)生一種幻覺，即一切對(duì)構(gòu)圖都很重要。另一方面，等級(jí)制度的思想始于將自己定位于最相關(guān)的事物而不是最不相關(guān)的事物。

接近

彼此靠近的元素比遠(yuǎn)處的元素吸引更多的注意力。創(chuàng)建閱讀順序時(shí)，使用距離進(jìn)行分組是非?？尚械馁Y源。人的視覺傾向于對(duì)元素進(jìn)行分類，因此，使這種粘合基本上有助于用戶的腦力勞動(dòng)。

在Netflix主頁上，第一組包含電影的標(biāo)題和簡(jiǎn)介。第二組在最下面列出了六部電影。這些組之間的距離使視圖更容易從一組傳遞到另一組而沒有視覺噪音。同樣，它們各自組中的每個(gè)元素都有其自己的填充和邊距。

因此，鄰近度是設(shè)計(jì)中對(duì)象的分組，以創(chuàng)建連接和關(guān)聯(lián)。當(dāng)事情接近時(shí)，通常意味著它們必須相關(guān)。如果事情離得更遠(yuǎn)，則意味著它們可能不相關(guān)。簡(jiǎn)而言之，接近會(huì)創(chuàng)建這些關(guān)系，并將組織和層次結(jié)構(gòu)帶入信息。

對(duì)準(zhǔn)

任何與其他對(duì)齊方式分開的元素都將引起關(guān)注。這是因?yàn)閷?duì)齊會(huì)在元素之間建立順序，因此此規(guī)則的任何更改對(duì)于人類來說都是很有趣的，因此會(huì)非常突出。

在Airbnb住宿頁面上，標(biāo)題，位置和名稱主人屬于一種排列，而對(duì)公寓的描述以及肖像則屬于另一種排列。一條看不見的直線的破裂在兩個(gè)層次上創(chuàng)建了層次結(jié)構(gòu)。

元素的對(duì)齊對(duì)于在界面設(shè)計(jì)中創(chuàng)建視覺連貫性非常重要，因?yàn)樗梢苑峙渑c屏幕上元素的相關(guān)性，還可以確定交互式或信息性特定元素的開頭和結(jié)尾。

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

重復(fù)

重復(fù)的樣式給人以元素相關(guān)的印象。這種層次結(jié)構(gòu)包括在接口中重用相同或相似的元素。重復(fù)還基于視覺模式提供了一些優(yōu)勢(shì)。如果重復(fù)某件事，那是因?yàn)楹苤匾?

在Uber網(wǎng)站的白色菜單中，圖標(biāo)和標(biāo)簽的類別分別放置了8次。它以較小的尺寸平衡，將菜單放在層次結(jié)構(gòu)的第二位，緊隨主標(biāo)題“進(jìn)入駕駛員座位……”。重要的是要知道重復(fù)對(duì)于創(chuàng)建第二級(jí)或第三級(jí)信息非常有用。

在界面設(shè)計(jì)中，重復(fù)會(huì)在整個(gè)體驗(yàn)過程中產(chǎn)生統(tǒng)一感和一致性。例如，在此“中型”文章中，字幕（h2）用重復(fù)的樣式標(biāo)記，粗體的使用和較大的字體大小為用戶提供了基于重復(fù)的方向感和層次感。我們必須知道，人性會(huì)在熟悉中找到安慰。

負(fù)空間

元素周圍的空間越多，它產(chǎn)生的注意力就越多。負(fù)空間是顯示空白畫布的區(qū)域，不僅可以在同一元素的周圍而且可以在同一元素之間和內(nèi)部找到。它不適用于單色，而是采用背景色來營造出空間感。

在“更好的網(wǎng)站設(shè)計(jì)”的此示例中，數(shù)字“ 01”和標(biāo)題“運(yùn)動(dòng)的目的”都明顯被負(fù)空間包圍。盡管插圖由于其紋理的多樣性而具有更大的層次權(quán)重，但應(yīng)用良好的負(fù)空間可以實(shí)現(xiàn)平衡，防止其他元素貶值。

盡管有些設(shè)計(jì)師可能認(rèn)為更好是更好，但視覺感受卻大不相同。具有大量封閉元素的設(shè)計(jì)會(huì)導(dǎo)致界面飽和，并且沒有層次結(jié)構(gòu)指示哪個(gè)元素更重要，從而給用戶帶來混亂和不知所措的感覺。

這個(gè)想法是，元素越重要，周圍的負(fù)空間就越大。將一個(gè)元素與另一個(gè)元素隔離不僅是創(chuàng)建層次結(jié)構(gòu)的一種優(yōu)雅資源，而且還可以為設(shè)計(jì)提供支持結(jié)構(gòu)。也就是說，它創(chuàng)建了必要的空間，以便視圖可以以流暢的方式從一個(gè)元素傳遞到另一個(gè)元素，而沒有視覺噪音。

質(zhì)地

多樣而復(fù)雜的紋理比平坦的紋理更引人注目。墻壁的平坦表面將比人行道表面突出。這是因?yàn)閺?fù)雜性總是比簡(jiǎn)約性吸引更多的用戶注意。紋理的使用還結(jié)合了其他重要的設(shè)計(jì)元素，例如風(fēng)格和氛圍。

UI設(shè)計(jì)中的照片可能是存在的按紋理分層的最佳示例。它們的形狀，顏色和漸變總是比平面元素傳達(dá)更多的感覺。在Masterclass應(yīng)用程序的情況下，毫無疑問，講師的照片是第一級(jí)的，然后是白色的名稱，菜單中的紅色表示用戶的位置。

該資源應(yīng)按一定劑量使用，因?yàn)榧y理的濫用最終會(huì)分散注意力，而不是告知或可能導(dǎo)致不必要的壓縮。紋理往往會(huì)與其他分層資源（包括大?。┲丿B，因此在合并紋理化元素之前，您必須考慮整個(gè)合成以及用戶在設(shè)備屏幕上看到的所有內(nèi)容。同樣，平衡是關(guān)鍵。

當(dāng)設(shè)計(jì)沒有清晰的視覺層次時(shí)，用戶的導(dǎo)航將被迫進(jìn)入其他形式的閱讀，例如F和Z模式。作為設(shè)計(jì)師，我們可以加強(qiáng)這些模式或破壞它們，以找到更多動(dòng)態(tài)的交流形式。在UI設(shè)計(jì)中，沒有什么僅僅是美感，而視覺層次結(jié)構(gòu)無疑是我們擁有的指導(dǎo)用戶體驗(yàn)，重新設(shè)計(jì)標(biāo)準(zhǔn)并提供直接接口目標(biāo)的最佳武器。