人們總是希望能夠通過規(guī)則使事情更容易理解。這適用于圖形設(shè)計(jì)以及數(shù)字UI界面。在仔細(xì)組織和完成UI界面后，用戶可以更好地理解，使用和吸收APP和網(wǎng)站，這是真正滿足用戶產(chǎn)品的唯一方式。
為了更好地組織UI中的內(nèi)容，設(shè)計(jì)師需要具有將可視內(nèi)容分層的設(shè)計(jì)技能。今天的文章，我們將全面探討如何有效地組織視覺內(nèi)容。
視覺層次是什么?
構(gòu)建可視化層次結(jié)構(gòu)是設(shè)計(jì)人員在設(shè)計(jì)過程中的核心設(shè)計(jì)技術(shù)之一。最初，心理學(xué)??家使用格式塔原則來檢測(cè)元素之間關(guān)系的視覺感知，并發(fā)現(xiàn)人們傾向于將與視覺關(guān)系接近的元素組視為一組關(guān)系。
通過根據(jù)特定視覺水平構(gòu)建內(nèi)容，用戶可以容易地理解元素之間的關(guān)系，并在他們看到APP和網(wǎng)站的內(nèi)容時(shí)理解其重要性的差異。通過控制不同視覺元素本身的視覺差異（大小，顏色，對(duì)比度，風(fēng)格等），它們可以相互區(qū)分。
UI元素的可視化呈現(xiàn)對(duì)用戶體驗(yàn)產(chǎn)生巨大影響。如果UI中的元素組織不當(dāng)，可能看起來很混亂，最終用戶將無法有效獲取導(dǎo)航指南，也無法正確交互。此外，非結(jié)構(gòu)化內(nèi)容的可讀性較差，用戶無法一目了然地獲取信息，并且需要花費(fèi)大量精力來區(qū)分內(nèi)容并找到他們想要的信息。這很容易導(dǎo)致用戶不滿意甚至導(dǎo)致產(chǎn)品故障。
排版層次
文本內(nèi)容是大多數(shù)UI設(shè)計(jì)需要解決的主要組成部分。這也是為什么視覺層次結(jié)構(gòu)的構(gòu)建在很大程度上依賴于排版。因此，視覺設(shè)計(jì)專家將從可視層次結(jié)構(gòu)中單獨(dú)提取布局層次結(jié)構(gòu)作為獨(dú)立分支。
設(shè)計(jì)者以最適合用戶通過排版系統(tǒng)感知的方式組織文本內(nèi)容。通過合理地選擇字體的樣式和布局的布局，設(shè)計(jì)者突出顯示用戶需要注意的最重要和最緊急的內(nèi)容。字體大小，顏色和字體系列都在樣式調(diào)整的范圍內(nèi)。
布局層次結(jié)構(gòu)包含不同的印刷元素，包括標(biāo)題，副標(biāo)題，正文內(nèi)容，CTA元素，描述等。為了創(chuàng)建層次感，這些內(nèi)容和元素分為不同的層次。通常，為了確保層次結(jié)構(gòu)清晰并且信息的呈現(xiàn)不太復(fù)雜，層次結(jié)構(gòu)分為三個(gè)級(jí)別。
第一級(jí)。如標(biāo)題標(biāo)題，這些元素旨在為用戶提供核心信息并立即提醒用戶。
第二級(jí)。如常規(guī)標(biāo)題和字幕，它們應(yīng)該允許用戶盡快快速掃描和閱讀主要內(nèi)容。
第三級(jí)。正文和一些其他信息（如參考文獻(xiàn)）構(gòu)成了第三級(jí)。本節(jié)中的設(shè)計(jì)人員通常需要使用較小的字體并確保內(nèi)容的可讀性。
由于正文內(nèi)容通常是UI中內(nèi)容信息的主要載體，并且需要逐步呈現(xiàn)大量的信息和內(nèi)容，設(shè)計(jì)者和編輯者會(huì)將內(nèi)容剪切成不同的段落，以便用戶可以輕松地，順序地感知和吸收信息。
還有一件事值得一提。在設(shè)計(jì)移動(dòng)設(shè)備時(shí)，設(shè)計(jì)人員應(yīng)嘗試將控制級(jí)別控制在兩個(gè)級(jí)別。移動(dòng)設(shè)備具有有限的屏幕尺寸并且不能攜帶三級(jí)信息，因此需要移除諸如字幕的第二級(jí)內(nèi)容以防止太多級(jí)別。
視覺層級(jí)構(gòu)建的基礎(chǔ)
一旦設(shè)計(jì)師確定了基本內(nèi)容和組件，他們就需要為他們開發(fā)演示的級(jí)別和順序。幫助設(shè)計(jì)人員對(duì)這些UI組件和元素進(jìn)行排序和調(diào)整，主要是以下屬性：
尺寸大小
區(qū)分水平的最有效手段是通過規(guī)模差異。更重要的是比小的更重要，這種看法根深蒂固。用戶自然會(huì)專注于更大的文本和更大的尺寸。設(shè)計(jì)師可以對(duì)元素的大小進(jìn)行大驚小怪。
色彩
顏色對(duì)用戶的感知產(chǎn)生巨大影響。因此，在構(gòu)建視覺層次結(jié)構(gòu)時(shí)，合理使用顏色會(huì)產(chǎn)生更明顯的效果。
不同的顏色可以很容易地形成層次結(jié)構(gòu)，并且諸如紅色，橙色和黑色的強(qiáng)烈顏色很容易被注意到。例如，白色和淺灰色可用作大背景顏色以與其他顏色形成對(duì)比。
不同的顏色祝福可以在UI元素上形成微妙的層次結(jié)構(gòu)。在設(shè)計(jì)CTA按鈕時(shí)，設(shè)計(jì)師經(jīng)常使用與背景顏色明顯不同的醒目醒目顏色。
對(duì)比
創(chuàng)建層次結(jié)構(gòu)的核心是制造比較。一個(gè)元素與另一個(gè)元素形成對(duì)比，允許用戶看到不同內(nèi)容和元素之間的差異。對(duì)比度由視覺差異（大小，顏色，樣式）創(chuàng)建，但為了確保比較期間的整體平衡，盡量不要讓用戶忽略某些元素進(jìn)行比較。
留白
用戶界面中有許多元素和組件，您希望它們被用戶注意到，因此設(shè)計(jì)人員需要在它們周圍留出足夠的空白區(qū)域。空白通常也稱為負(fù)空間，元素和元素之間的空白區(qū)域?yàn)榭瞻?。許多設(shè)計(jì)師經(jīng)常忽略白色空間，但消隱應(yīng)該被視為結(jié)構(gòu)設(shè)計(jì)的重要部分。正是由于白色空間的構(gòu)成與元素本身之間的密集對(duì)比，用戶注意到由白色空間圍繞的內(nèi)容。
靠近
正如我之前所說，視覺層次結(jié)構(gòu)的建立主要基于格式塔原則，因此設(shè)計(jì)師密切關(guān)注UI元素之間的接近程度。人們傾向于將視覺上緊密的元素視為一個(gè)群體，設(shè)計(jì)師基于這種認(rèn)知，將不同的元素分成不同的群體。使相關(guān)的相似元素更加緊密，使不同的和不相關(guān)的元素更加分開。不同的親密度使得元素稱為不同的類別和分組。
重復(fù)
同樣，即使在不同的地方，用戶也會(huì)輕易注意到相同的元素。這是重復(fù)元素的工作方式。用戶注意到重復(fù)的元素，樣式，顏色和文本，并且它們被識(shí)別為固定模式或常規(guī)模式，這構(gòu)成統(tǒng)一推送。例如，設(shè)計(jì)師將引用文章中的重要句子。這些句子將以不同的樣式和顏色突出顯示。當(dāng)您在另一篇文章中看到類似的顏色和文字時(shí)，您將很快看到您所看到的內(nèi)容。是報(bào)價(jià)。
可視化層次結(jié)構(gòu)是構(gòu)建有效信息架構(gòu)的基礎(chǔ)。當(dāng)用戶界面的元素需要結(jié)構(gòu)化和組織化時(shí)，可視化層次結(jié)構(gòu)的構(gòu)建可以有效地幫助您實(shí)現(xiàn)這一目標(biāo)。清晰的視覺層次結(jié)構(gòu)是整個(gè)導(dǎo)航系統(tǒng)不可或缺的一部分，使用戶能夠更快地了解產(chǎn)品的功能。