做好UI界面視覺層級(jí)的的6大設(shè)計(jì)原則

本質(zhì)上，設(shè)計(jì)的真正目即傳達(dá)重要的想法和信息，也就是我們一直所強(qiáng)調(diào)的視覺層次和結(jié)構(gòu)的概念，本文將介紹給各位如何做好視覺層級(jí)的6大設(shè)計(jì)原則。

什么是視覺層級(jí)？
我們?cè)O(shè)計(jì)師每天都在使用的術(shù)語(yǔ)，也是解釋如何在設(shè)計(jì)中安排元素的設(shè)計(jì)原則之一。它對(duì)設(shè)計(jì)人員和開發(fā)人員特別有用，因?yàn)樗鼮槊總€(gè)元素制定了合乎邏輯的習(xí)慣。這使您的設(shè)計(jì)易于理解。視覺層次結(jié)構(gòu)之所以重要，是因?yàn)樗切畔⒓軜?gòu)的關(guān)鍵，這是您不應(yīng)該害怕的另一個(gè)設(shè)計(jì)師術(shù)語(yǔ)。它通過(guò)從最重要到最不重要的元素組織元素，為用戶的注意力設(shè)置了一條清晰的路徑。通過(guò)良好的視覺層次結(jié)構(gòu)，用戶的眼睛會(huì)自動(dòng)定向到查看設(shè)計(jì)中元素的順序。他們不必尋找有關(guān)如何使用設(shè)計(jì)的地圖或指南。

視覺層次原則
視覺設(shè)計(jì)的每個(gè)元素都有一個(gè)特征，定義了它的重要性和與之相關(guān)的視覺重量。視覺層次的一般規(guī)則是視覺權(quán)重最大的元素吸引了最多的用戶注意力。讓我們看看做好UI界面視覺層級(jí)設(shè)計(jì)的的6大設(shè)計(jì)原則。

1、尺寸
人們首先注意到最大的物體，即使我們也這樣做。這就是為什么在網(wǎng)頁(yè)結(jié)構(gòu)中H1最大，H2小于H2，H3，H4最小。根據(jù)菲特定律，大型交互更容易消化，因?yàn)橛脩舨槐貜淖⒁饬?jīng)濟(jì)中花費(fèi)大量時(shí)間和精力。

2、色彩
設(shè)計(jì)師最好的技巧是他們?cè)谠O(shè)計(jì)元素中使用的調(diào)色板。大膽和對(duì)比鮮明的顏色引起人們的注意并強(qiáng)調(diào)一個(gè)觀點(diǎn)。如果您選擇正確的顏色，CTA 按鈕、錯(cuò)誤消息、提示和彈出窗口會(huì)脫穎而出。然而，如果你最終使用太多，它可能會(huì)使你的工作顯得雜亂無(wú)章，并導(dǎo)致認(rèn)知超負(fù)荷。

3、排版
對(duì)齊是網(wǎng)頁(yè)設(shè)計(jì)的基礎(chǔ)，因?yàn)樗鼤?huì)創(chuàng)建順序并提示您應(yīng)該在哪里。良好的對(duì)齊可以幫助元素感覺彼此關(guān)聯(lián)，并且相似的內(nèi)容也可以從對(duì)齊中受益。

4、接近
根據(jù)接近原則，如果將元素彼此靠近放置，則可以迫使讀者認(rèn)為它們是相關(guān)的。在這樣做的過(guò)程中，許多設(shè)計(jì)師利用了一個(gè)好的標(biāo)題，并在上面附加了其他文字。這導(dǎo)致對(duì)后面附加元素也收到相對(duì)更多的關(guān)注。

5、留白
空間更大的房間感覺更好，對(duì)吧？這就是留白對(duì)設(shè)計(jì)中的視覺層次結(jié)構(gòu)所做的。更多的呼吸空間或元素周圍的更多空間將使其脫穎而出，從而對(duì)元素產(chǎn)生更大的吸引力。這可能就是為什么人們經(jīng)常說(shuō)在你的 CTA 周圍使用好的空白。

6、紋理
紋理設(shè)計(jì)側(cè)重于設(shè)計(jì)的裝飾性，無(wú)論紋理通常與美學(xué)相關(guān)聯(lián)，它們都會(huì)影響您設(shè)計(jì)的視覺層次結(jié)構(gòu)。他們可以制造或破壞它。如果以正確的方式添加紋理，則可以有效的將用戶的注意力吸引過(guò)來(lái)。