Good design is making something intelligible and memorable. Great design is making something memorable and meaningful.

– Dieter Rams

隨著交互專業(yè)的發(fā)展，我們希望不斷發(fā)現(xiàn)和學(xué)習(xí)新的技巧和趨勢(shì)，與此同時(shí)，掌握UI設(shè)計(jì)的基礎(chǔ)原則也同樣重要。本文將帶您了解一些UI設(shè)計(jì)的基本原則，這些原則可驅(qū)使您設(shè)計(jì)出用戶體驗(yàn)極佳的數(shù)字產(chǎn)品。

1.Hierarchy層次結(jié)構(gòu)

層次結(jié)構(gòu)，就像其傳統(tǒng)含義一樣，是按項(xiàng)目的重要性或權(quán)重在屏幕上的排列順序。視覺(jué)層次結(jié)構(gòu)說(shuō)明了我們?nèi)绾斡行У亟M織內(nèi)容和設(shè)計(jì)元素。視覺(jué)上更具分量的元素很容易引起用戶的注意。因此，在進(jìn)行產(chǎn)品設(shè)計(jì)時(shí)，衡量設(shè)計(jì)布局成為了重要的步驟：

• 在設(shè)計(jì)內(nèi)容與元素之間建立視覺(jué)上的聯(lián)系

• 為每個(gè)設(shè)計(jì)元素添加不同的視覺(jué)權(quán)重

• 最終創(chuàng)造出平衡的視覺(jué)層次，引導(dǎo)用戶的視線

例如，博客標(biāo)題比正文需要更多關(guān)注。同樣，在界面設(shè)計(jì)中，號(hào)召性用語(yǔ)（Call To Action）可能比其他方面更加重要。每當(dāng)我們嘗試以視覺(jué)方式理解信息時(shí)，我們首先會(huì)觀察到所見(jiàn)事物的異同，這些關(guān)系使我們能夠區(qū)分對(duì)象的優(yōu)先級(jí)。

以下是構(gòu)建視覺(jué)層次結(jié)構(gòu)中至關(guān)重要的4個(gè)基本元素：

a）大小

大小是重要的工具，尤其是在文本的情況下。人們傾向于認(rèn)為更大的文字意味著更重要的內(nèi)容。另外，較大的元素更引人注目，這就是為什么我們的眼睛會(huì)自動(dòng)捕捉較大的文本，圖像或插圖。因此，設(shè)計(jì)人員應(yīng)了解屏幕上每個(gè)元素的優(yōu)先級(jí)，并據(jù)此調(diào)整大小。

b）顏色

顏色在層次結(jié)構(gòu)創(chuàng)建中起著有效的作用，就連最基本的黑色也會(huì)對(duì)用戶的瀏覽模式產(chǎn)生巨大影響。用戶在情感上與色彩聯(lián)系在一起，因此可以巧妙地使用不同的組合來(lái)指導(dǎo)用戶對(duì)整個(gè)數(shù)字產(chǎn)品采取預(yù)期的操作?？梢允褂貌煌纳{(diào)，例如柔和，大膽，明亮的色調(diào)，對(duì)視覺(jué)層次進(jìn)行區(qū)分。除此之外，設(shè)計(jì)師應(yīng)該對(duì)色輪進(jìn)行詳細(xì)研究，以便更熟練地選擇顏色。

c）對(duì)比

對(duì)比是建立視覺(jué)層次結(jié)構(gòu)的重要一環(huán)：我們使用顏色，字體重量，字體大小等來(lái)創(chuàng)建對(duì)比度。

d）留白

留白是視覺(jué)設(shè)計(jì)元素中的一種，如果使用得當(dāng)，它將有助于創(chuàng)建出色的界面。它可幫助用戶理解各個(gè)設(shè)計(jì)元素之間的關(guān)系，給予適當(dāng)?shù)呢?fù)空間來(lái)傳達(dá)正確的信息。

2.對(duì)比Contrast

對(duì)比是另一個(gè)重要原則，可幫助我們?cè)O(shè)計(jì)更好的界面。這不僅只涉及到淺色和深色的對(duì)立，也涉及到大小和尺寸的對(duì)比。對(duì)比可以幫助我們更好地組織設(shè)計(jì)內(nèi)容，也可以幫助用戶視線專注于某些元素。但是，不平衡的對(duì)比可能會(huì)使用戶感到困惑，因?yàn)樗赡軙?huì)創(chuàng)建許多焦點(diǎn)，導(dǎo)致用戶很難采取預(yù)期的行動(dòng)。

對(duì)比涉及到的內(nèi)容包括以下方面

• 尺寸

• 顏色

• 重量

• 樣式

• 襯線字體和無(wú)襯線字體

• 填充

3.相似性Proximity

該原理描述了如果視覺(jué)相似，視覺(jué)元素就被認(rèn)為是相關(guān)的。這樣，視覺(jué)上相似的元素主要被視為一個(gè)組，而不是單個(gè)元素。因此，我們可以使用UI設(shè)計(jì)中的相似原理將彼此相關(guān)的相似信息進(jìn)行分組。

字體在界面設(shè)計(jì)中起著重要作用的領(lǐng)域之一。用戶不喜歡閱讀較長(zhǎng)的文本。因此，設(shè)計(jì)人員應(yīng)該將大型正文副本分解成較小的部分，以便用戶可以輕松地掌握和消化信息。相反，屬于不同組的項(xiàng)目必須分開得足夠遠(yuǎn)，以防止產(chǎn)生任何負(fù)面影響。

4.平衡Balance

平衡的構(gòu)圖給人以穩(wěn)定和愉悅的感覺(jué)，而不平衡的設(shè)計(jì)則會(huì)造成不穩(wěn)定的效果，分散用戶的注意力。視覺(jué)平衡是指在設(shè)計(jì)中將負(fù)元素和正元素融合成合理的比例。均衡的構(gòu)圖可能會(huì)吸引用戶的注意，但不應(yīng)與其他元素的可見(jiàn)性沖突。許多因素都會(huì)影響元素的視覺(jué)重量，例如大小，顏色，對(duì)比度和密度。

a）尺寸

人腦傾向于認(rèn)為更大的物體具有更大的重量。 

b）顏色

就顏色而言，它的工作原理有所不同，即無(wú)論大小如何，鮮明的顏色都具有更大的分量。即使一個(gè)元素可能很小，但它的顏色還是鮮明或粗體的，例如紅色，深藍(lán)色等，都會(huì)從中脫穎而出。

c）對(duì)比

亮元素和暗元素之間的差異稱為對(duì)比度。在界面設(shè)計(jì)中，如果我們要引起用戶的注意或要突出顯示某些內(nèi)容，則可以運(yùn)用對(duì)比度的差異性。

d）密度

顯而易見(jiàn)的是，無(wú)論顏色，尺寸如何，密度更高的內(nèi)容將具有更大的重量。

用戶界面設(shè)計(jì)的目標(biāo)在于與用戶建立聯(lián)系，使用戶行為旅程更加便捷，并解決他們的問(wèn)題。用戶界面設(shè)計(jì)不僅僅是設(shè)計(jì)美觀的圖形，更在于良好的視覺(jué)和交互體驗(yàn)。希望我們今天討論的原理能幫助您在今后的設(shè)計(jì)中創(chuàng)造更好的用戶體驗(yàn)。