決定UI界面設(shè)計(jì)中元素層次結(jié)構(gòu)的7大設(shè)計(jì)要點(diǎn)

在UI界面設(shè)計(jì)中的層次結(jié)構(gòu)是按照用戶處理信息的順序來決定的。就像在任何其他形式的設(shè)計(jì)中一樣，這個(gè)概念是必要的。通過正確規(guī)劃信息的層次結(jié)構(gòu)，大腦可以對元素進(jìn)行分組和優(yōu)先排序，給予一個(gè)特定的、有邏輯性的順序?qū)蛹墸兄谟脩衾斫饽阆胍獋鬟_(dá)的產(chǎn)品內(nèi)容。在UI界面設(shè)計(jì)中的一個(gè)常見問題是將各類元素分散在屏幕上，如果沒有通過正確的層次結(jié)構(gòu)作為引導(dǎo)，很容易導(dǎo)致產(chǎn)品界面的混亂，今天一起來看一下決定UI界面設(shè)計(jì)中的元素層次及結(jié)構(gòu)的五大要點(diǎn)。

元素的尺寸
元素的尺寸越大，就越會(huì)吸引人們的注意力，人們首先看到更大的物體，其中包括文本和圖像，使用尺寸層次背后的想法是為開始視覺之旅提供一個(gè)焦點(diǎn)。但是2組不同大小的文字之間的大小差異也不要過大，這反而會(huì)影響視覺過渡性。

色彩設(shè)定
顏色明亮的色彩比柔和的色調(diào)更突出。顏色是一種強(qiáng)大的視覺引導(dǎo)點(diǎn)，正確使用可以有效地分離屏幕中的元素以優(yōu)先或降低它們的優(yōu)先級。在UI界面設(shè)計(jì)中，通常最強(qiáng)烈的顏色是用于可交互的地方，比如按鈕設(shè)計(jì)，因?yàn)橛脩粜枰扇⌒袆?dòng)或接收來自系統(tǒng)的反饋。

元素的位置
彼此靠近的元素比遠(yuǎn)處的元素更能吸引注意力。在創(chuàng)建閱讀順序時(shí)，使用距離進(jìn)行分組是一種非常可行的資源。人類的視覺傾向于對元素進(jìn)行分類，因此，進(jìn)行這種聚合基本上有利于用戶的腦力勞動(dòng)。

對齊和整潔

對齊任何與其他元素對齊的元素都會(huì)引起注意。這是因?yàn)閷R在元素之間創(chuàng)造了秩序，這條規(guī)則的任何變化都會(huì)引起人類視覺的興趣，因此會(huì)非常突出。

重復(fù)樣式
重復(fù)的樣式給人的印象是元素是相關(guān)的。這種類型的層次結(jié)構(gòu)包括在界面中重用相同或相似的元素。基于視覺模式，重復(fù)也提供了一些優(yōu)勢。如果某件事被重復(fù)，那是因?yàn)樗苤匾?br/>
負(fù)空間
元素周圍的空間越大，產(chǎn)生的注意力就越多。負(fù)空間的意思就是顯示更多空白區(qū)域，給予界面更多呼吸感，不僅可以在同一元素周圍找到，還可以在同一元素之間和內(nèi)部找到。不適合單一的顏色，而是采用背景的顏色來給人以空間的錯(cuò)覺。

更多細(xì)節(jié)
更多的細(xì)節(jié)和復(fù)雜度比平面更受關(guān)注，墻壁的平坦表面將比人行道的表面更突出。這是因?yàn)閺?fù)雜性總是比極簡主義更能吸引用戶的注意力。細(xì)節(jié)的使用還融入了其他重要的設(shè)計(jì)元素，如風(fēng)格和氛圍。

總結(jié)，當(dāng)你的UI設(shè)計(jì)沒有清晰的視覺層次結(jié)構(gòu)時(shí)，用戶會(huì)無規(guī)則的進(jìn)入混亂閱讀模式，可能視覺視線流是F型或Z型模式，也可能是其他，但是作為設(shè)計(jì)師，我們需要強(qiáng)化這些模式或打破她們以找到更多的閱讀模式，以此去引導(dǎo)用戶的視線流，從而提升產(chǎn)品的用戶體驗(yàn)度。