2022-5-5 博博
公平等級是用戶按重要性處理信息的順序。在界面設計中，就像任何其他形式的設計一樣，此概念對于在視覺上起作用是必要的。通過正確使用層次結構，頭腦可以對元素進行分組和優先級排序，以賦予它們特定的順序，從而有助于您理解要交流的內容和用戶的成就感。
界面設計中經常遇到的問題是過多地使用了分散在屏幕上的元素或組件，如果未按正確的層次放置這些元素或組件，則會導致混亂并增加導航的工作量。對這些元素進行優先級排序對于避免此問題很重要。
在此示例中，大小，形狀和顏色資源用于將視圖定向到特定元素
一般用戶傾向于“掃描”屏幕的整個內容。因此，重點應該清楚地說明網站或應用程序的內容。
這種優先次序不僅應被視為美學問題，而且應被視為用戶體驗的重要組成部分。其中包括的許多元素（尤其是在移動設備中）將與站點導航相關。盡管圖形設計中的層次結構已經存在多年，但恒定的交互因素已添加到UI設計中。用戶與元素交互的事實使設計直觀的界面更加相關。
創建正確的層次結構必須考慮七種資源：
元素越大，越會引起注意。人們首先看到較大的物體是事實，其中包括文本和圖像。使用大小層次結構背后的想法是為開始視覺之旅提供一個焦點。
在Google Arts and Culture應用程序的此快照中，標題“ Pawtraits：我們的不斷變化的……”的大小比副標題“我們的真實感受……”大得多。通過將這些分數分開，閱讀順序可以避免任何混亂。
如果從一個文本到另一個文本的跳躍較小，例如從32pt到24pt，則當同時發送兩條消息時，閱讀順序將變得更加困難。這可能不是一個大問題，但是您應該記住，這可能會創建效率較低的層次結構。
同樣重要的元素太大也沒有必要。造成不必要的失衡可能最終使其他設計黯然失色，并使其他信息在閱讀中丟失。像設計中的所有其他內容一樣，平衡是關鍵。
明亮的色彩比柔和的色調更為突出。顏色是一種強大的視覺資源，它的正確使用可以有效地將屏幕中的元素分開，以對它們進行優先排序或降低優先級。在界面設計中，通常最強的顏色是用于交互，因為用戶需要采取措施或從系統接收反饋。
在此Cabify應用截圖中，紫色的使用是主要顏色。行程路線和“繼續”按鈕均為第一層級，其次是地圖和汽車。色調和飽和度的諧波使用將這些元素與較不飽和且重要性較低的背景分開。
飽和色比灰色更突出。灰色及其標度總是傾向于飽和度高的顏色，這甚至給用戶帶來更親近的感覺。例如，在灰色背景上使用紅色。
明亮的顏色比深色的顏色突出，反之亦然。在深色背景上使用明亮的元素會立即建立層次結構，當我們擁有白色背景和一些深色元素時，這也適用。
重要的是要知道，濫用顏色會最終使用戶感到困惑，因為這會產生一種幻覺，即一切對構圖都很重要。另一方面，等級制度的思想始于將自己定位于最相關的事物而不是最不相關的事物。
彼此靠近的元素比遠處的元素吸引更多的注意力。創建閱讀順序時，使用距離進行分組是非常可行的資源。人的視覺傾向于對元素進行分類，因此，使這種粘合基本上有助于用戶的腦力勞動。
在Netflix主頁上，第一組包含電影的標題和簡介。第二組在最下面列出了六部電影。這些組之間的距離使視圖更容易從一組傳遞到另一組而沒有視覺噪音。同樣，它們各自組中的每個元素都有其自己的填充和邊距。
因此，鄰近度是設計中對象的分組，以創建連接和關聯。當事情接近時，通常意味著它們必須相關。如果事情離得更遠，則意味著它們可能不相關。簡而言之，接近會創建這些關系，并將組織和層次結構帶入信息。
在Airbnb住宿頁面上，標題，位置和名稱主人屬于一種排列，而對公寓的描述以及肖像則屬于另一種排列。一條看不見的直線的破裂在兩個層次上創建了層次結構。
元素的對齊對于在界面設計中創建視覺連貫性非常重要，因為它可以分配與屏幕上元素的相關性，還可以確定交互式或信息性特定元素的開頭和結尾。
人類的大腦喜歡模式，這就是為什么許多最好的網站都是對稱的。這使我們有機會打破該規則，從策略上將用戶的注意力吸引到特定點。用戶將能夠根據它們的對齊或未對齊來關聯這些元素。
重復的樣式給人以元素相關的印象。這種層次結構包括在接口中重用相同或相似的元素。重復還基于視覺模式提供了一些優勢。如果重復某件事，那是因為很重要。
在Uber網站的白色菜單中，圖標和標簽的類別分別放置了8次。它以較小的尺寸平衡，將菜單放在層次結構的第二位，緊隨主標題“進入駕駛員座位……”。重要的是要知道重復對于創建第二級或第三級信息非常有用。
在界面設計中，重復會在整個體驗過程中產生統一感和一致性。例如，在此“中型”文章中，字幕（h2）用重復的樣式標記，粗體的使用和較大的字體大小為用戶提供了基于重復的方向感和層次感。我們必須知道，人性會在熟悉中找到安慰。
元素周圍的空間越多，它產生的注意力就越多。負空間是顯示空白畫布的區域，不僅可以在同一元素的周圍而且可以在同一元素之間和內部找到。它不適用于單色，而是采用背景色來營造出空間感。
在“更好的網站設計”的此示例中，數字“ 01”和標題“運動的目的”都明顯被負空間包圍。盡管插圖由于其紋理的多樣性而具有更大的層次權重，但應用良好的負空間可以實現平衡，防止其他元素貶值。
盡管有些設計師可能認為更好是更好，但視覺感受卻大不相同。具有大量封閉元素的設計會導致界面飽和，并且沒有層次結構指示哪個元素更重要，從而給用戶帶來混亂和不知所措的感覺。
這個想法是，元素越重要，周圍的負空間就越大。將一個元素與另一個元素隔離不僅是創建層次結構的一種優雅資源，而且還可以為設計提供支持結構。也就是說，它創建了必要的空間，以便視圖可以以流暢的方式從一個元素傳遞到另一個元素，而沒有視覺噪音。
多樣而復雜的紋理比平坦的紋理更引人注目。墻壁的平坦表面將比人行道表面突出。這是因為復雜性總是比簡約性吸引更多的用戶注意。紋理的使用還結合了其他重要的設計元素，例如風格和氛圍。
UI設計中的照片可能是存在的按紋理分層的最佳示例。它們的形狀，顏色和漸變總是比平面元素傳達更多的感覺。在Masterclass應用程序的情況下，毫無疑問，講師的照片是第一級的，然后是白色的名稱，菜單中的紅色表示用戶的位置。
該資源應按一定劑量使用，因為紋理的濫用最終會分散注意力，而不是告知或可能導致不必要的壓縮。紋理往往會與其他分層資源（包括大小）重疊，因此在合并紋理化元素之前，您必須考慮整個合成以及用戶在設備屏幕上看到的所有內容。同樣，平衡是關鍵。
當設計沒有清晰的視覺層次時，用戶的導航將被迫進入其他形式的閱讀，例如F和Z模式。作為設計師，我們可以加強這些模式或破壞它們，以找到更多動態的交流形式。在UI設計中，沒有什么僅僅是美感，而視覺層次結構無疑是我們擁有的指導用戶體驗，重新設計標準并提供直接接口目標的最佳武器。