視覺設計(作為一門學科)在過去20年裡的發展超過了其他任何學科。曾幾何時，設計師只被視為執行者，而今天設計師使用最便利的工具(比如Sketch, Figma, Invision)，並擁有最好的線上資源(比如Dribbble, Muzli)來協助他們完成日常工作。

今天我們越來越多地使用數字產品，朝著一個完全數字的生態系統發展，UI設計是介面呈現的推動者，我們每天與之互動。設計師在享有更大權威的同時，也肩負著更大的責任。

隨著專業的發展，技巧和趨勢也許在不斷地變化，但重要的是需要堅持的UI設計本質概念和原則是永恆。今天UXD給大家介紹四種非常基本但十分關鍵的原則。這些原則可以確保你每次設計UI數字產品時，都能獲得令人難忘的產出。

01

Hierarchy

Hierarchy層級就像它的傳統意義一樣，是按照專案在螢幕上的重要性或重量進行排列。視覺層次解釋了我們如何有效地組織內容和設計元素。擁有更多視覺權重的元素更容易吸引使用者的注意，這是很自然的，在設計佈局時應該考慮這種行為。

•建立佈局元素之間的視覺關係

•然後給每個元素新增不同的視覺權重

•最後建立眼動模式

例如，部落格的標題比正文需要更多的關注。類似地，在介面設計中，一個行動召喚(CTA)可能比其他的更需要特殊的重要性。每當我們試圖用視覺來理解資訊時，我們首先會觀察我們所看到的東西的相似性和差異性，這些關係使我們能夠區分物體。

1.大小

大小是一個重要的工具，特別是在文字的情況下。人類傾向於認為大文字更重要。此外，較大的元素更容易被注意到，這就是為什麼我們的眼睛會自動捕捉到較大的文字、影象或插圖。所以設計師應該理解螢幕上每個元素的優先順序，並相應地調整它們的大小。

2.顏色

顏色在等級創造中扮演了一個有效的角色，即使是最基本的顏色黑色或白色也會對使用者的瀏覽模式產生巨大的影響。使用者會與顏色產生情感上的聯絡，所以可以巧妙地使用不同的組合來引導使用者對你的數字產品採取預期的行動。有不同的色調可供選擇，例如，柔和、大膽、明亮。設計師應該對色輪做詳細的研究，以掌握顏色的選擇。

3.對比

4.空白

留白是一種視覺設計元素，而不僅僅是一塊畫布，如果使用得當，它可以幫助你創造出很棒的介面。它基本上是多個設計元素之間的區域，幫助使用者理解元素之間的關係，所以適當的負空間對於傳達正確的資訊是必要的。

02

Contrast

Contrast對比是幫助我們設計更好的介面的另一個重要原則。這不僅僅是關於顏色的明暗對比或大小的對比。對比可以幫助我們更好地組織內容，也可以幫助使用者關注某些元素。除了強調元素之外，它還創造了視覺平衡和設計興趣。然而，過多的對比會讓使用者感到困惑，因為對比可以建立許多焦點，使用者可能會發現難以採取預期的行動。設計師可以透過如下方法創造合適的對比:大小/顏色/重量/風格/有無襯線字型/填充

03

Proximity

Proximity鄰近性這個原則描述的是：如果視覺元素在視覺上相似，那麼它們就被認為是相關的。這樣視覺上相似的元素主要被看作是一個組，而不是單個的元素。

因此，我們可以在UI設計中，使用鄰近原則來對彼此相關的相似資訊進行分組。例如我們在標題下面寫潛臺詞來支援它。接近的原則使介面更容易被使用者掃描和掌握。事實證明，鄰近性比顏色、形狀或樣式等其他工具更重要。

在介面設計中，鄰近性扮演重要角色的一個領域是排版。使用者不喜歡閱讀冗長的文字，他們很難識別重要的資訊。因此設計師應該將大的主體複製塊分解成更小的塊，以便使用者能夠輕鬆地掌握和消化資訊。相反屬於不同類別的物品必須放置在足夠遠的地方，以防止任何負面影響。

04

Balance

一個平衡的構圖感覺穩定和賞心悅目，而一個不平衡的設計會產生不穩定和分心。視覺平衡是關於在設計中擁有相同比例的消極和積極元素。

一個平衡的構圖可能會有一些區域吸引使用者的注意，但它不應該與其他元素的可見性衝突。記住，視覺平衡應該模仿現實生活中產品的物理平衡，以保持使用者對設計的關注，設計師可以透過元素的視覺重量來平衡構圖。視覺權重可以由元素的突出程度決定，有多個引數會影響元素的視覺權重，例如大小、顏色、對比度和密度。

1.大小

人類的大腦傾向於把越大的東西解釋為越重。同樣的心理也適用於數字介面。

2.顏色

在顏色的情況下，它的工作原理是不同的，即，尖銳和大膽的顏色有更多的重量。一個元素即使尺寸很小，但顏色很醒目，如紅色、深藍色等，也會引人注目。

3.對比

明暗元素之間的差別叫做反差。在介面設計中，如果我們想要吸引使用者的注意或者想要突出一些東西，我們就會使用對比。但自然地，深色元素會更加突出。

4.密度

這一點很明顯，密度越大的東西，無論顏色和大小，重量就越大。