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í)，掌握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)重在屏幕上的排列順序。視覺層次結(jié)構(gòu)說明了我們?nèi)绾斡行У亟M織內(nèi)容和設(shè)計(jì)元素。視覺上更具分量的元素很容易引起用戶的注意。因此，在進(jìn)行產(chǎn)品設(shè)計(jì)時(shí)，衡量設(shè)計(jì)布局成為了重要的步驟：

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

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

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

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

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

a）大小

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

b）顏色

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

c）對比

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

d）留白

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

2.對比Contrast

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

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

• 尺寸

• 顏色

• 重量

• 樣式

• 襯線字體和無襯線字體

• 填充

3.相似性Proximity

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

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

4.平衡Balance

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

a）尺寸

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

b）顏色

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

c）對比

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

d）密度

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

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