簡介： 比例尺，視覺層次結構，平衡，對比度和格式塔的原理不僅可以創建精美的設計，而且在正確應用時還可以提高可用性。
在觀看視覺效果時，我們通常可以立即說出它是吸引人的還是錯的。但是，很少有人能夠說明為什麼布局在視覺上很吸引人。利用良好視覺設計原理的圖形可以促進互動並增加可用性。
視覺設計原則告訴我們，線條，形狀，顏色，網格或空間之類的設計元素如何共同構成全面而周到的視覺效果。
本文定義了影響用戶體驗的5條視覺設計原則：
- 規模
- 視覺層次
- 平衡
- 對比
- 格式塔
遵循以下5條視覺設計原則可以推動互動並增加可用性。
1.規模
通常使用此原理：幾乎所有好的視覺設計都可以利用它。
定義：規模原則是指使用相對大小來表示構圖的重要性和等級。
換句話說，正確使用此原理時，設計中最重要的元素要比不重要的元素大。這項原則背後的原因很簡單：當一件大事變大時，它更有可能被注意到。
視覺上令人滿意的設計通常使用不超過3種不同的尺寸。擁有一系列大小不同的元素，不僅會在您的版式中創造出多樣性，而且還將在頁面上建立視覺層次結構（請參閱下一個原理）。確保最大程度地強調設計中最重要的方面。
正確使用比例尺原理並強調正確的元素時，用戶將輕鬆解析視覺並知道如何使用它。
iPhone的媒介：熱門文章在視覺上比其他文章大。量表將用戶引導至可能更有趣的文章。
在克拉科夫的這個停車場中，最重要的信息（H區，即您當前所在的停車場）的信息量最大。（圖片來源： www.behance.com）
2.視覺層次
用戶可以輕鬆理解具有良好視覺層次的布局。
定義：視覺層次結構的原理是指引導頁面上的眼睛，以便其按照重要性的順序排列在不同的設計元素上。
視覺層次可以通過比例，值，顏色，間距，位置和各種其他信號的變化來實現。
視覺層次結構控制體驗的交付。如果您很難確定頁面的顯示位置，則很可能是其布局缺少清晰的視覺層次。
要創建清晰的視覺層次結構，請使用2–3個字體大小來向用戶指示頁面的迷你信息體系結構中最重要或最高級別的內容。或者，考慮對重要項目使用明亮的顏色，對次要項目使用柔和的顏色。
比例尺還可以幫助定義視覺層次，因此可以針對您的不同設計元素合併各種比例尺。一般的經驗法則是在設計中包括小型，中型和大型組件。
中型移動應用程式：標題，字幕和正文文本清晰可見。文章的每個組件的字體大小均與其重要性相同。
Uber移動應用程式：Uber移動應用程式中的視覺層次結構清晰。螢幕在地圖和輸入表單之間分為兩半（螢幕的下半部分），這使人們認為這些組件對用戶同樣重要。眼睛立刻被吸引到哪裡去了？欄位，因為其背景為灰色，然後到其下方的最近位置，這些位置的字體尺寸略小。
3.平衡
平衡就像蹺蹺板：平衡重量而不是重量，而是平衡設計元素。
定義：平衡原理是指滿意的布置或比例的設計元素。當通過螢幕中間的虛軸的兩側均存在相等分布（但不一定對稱）的視覺信號時，就會發生平衡。該軸通常是垂直的，但也可以是水平的。
就像在平衡重量時一樣，如果在軸的兩側具有一個小設計元素和一個大設計元素，則設計會有些不平衡。設計元素占用的面積在創建平衡時很重要，而不僅僅是元素數量。
您在視覺上建立的虛軸將成為如何組織布局的參考點，並將幫助您了解視覺上當前的平衡狀態。在平衡的設計中，沒有一個區域能吸引您的視線，以至於您看不到其他區域（即使某些元素可能具有更大的視覺重量並成為焦點）。餘額可以是：
- 對稱：元素相對於中心假想軸對稱分布
- 不對稱：元素相對於中心軸不對稱分布
- 徑向：元素從中心的公共點沿圓形方向輻射出去。
您在視覺中使用的平衡類型取決於您要傳達的內容。不對稱是動態的且引人入勝。它創造了一種活力和運動感。對稱是安靜且靜態的。徑向平衡始終將眼睛引向構圖的中心。
集線器風格探索：構圖感覺穩定，這在您尋找自己喜歡的工作時尤其合適。這裡的平衡是對稱的。如果要沿網站的中心繪製一個假想的垂直軸，則元素在軸的兩側均勻分布。（圖片來源： dribbble.com）
耐克（Nike）：此頁面不對稱平衡，給人以適應耐克品牌的能量和運動感。如果要在此視覺效果的中心向下繪製一條垂直軸，則該軸兩側的元素數大約相同。但是，不同之處在於它們並不相同且位於相同的精確位置。即使從技術上講，鞋子的左側會有更多的文字，但它與右側的較大文字是平衡的，後者占用更多空間和視覺重量，因此使它們看起來非常相似。
Brathwait手錶：這款經典手錶在徑向上保持平衡。眼睛立即被吸引到錶盤的中心，並且所有視覺權重均等地分配，而不管虛軸在何處繪製。
這種社論傳播不平衡。如果沿頁面向下繪製垂直軸，則元素在軸的兩側分布不均。（圖片來源： www.behance.net）
4.對比
這是另一種常用的原則，它使設計的某些部分對用戶脫穎而出。
定義：對比原理是指視覺上相異元素的並置，以傳達這些元素不同（例如，屬於不同類別，具有不同功能，表現不同）的事實。
換句話說，對比度為眼睛提供了兩個對象之間（或兩組對象之間）的明顯差異（例如大小或顏色），以強調它們是不同的。
對比原理通常通過顏色來應用。例如，紅色常用於UI設計（尤其是在iOS中）以表示刪除。明亮的顏色表示紅色元素與其餘元素不同。
iOS上的提醒應用程式：紅色與周圍的環境形成強烈對比，保留用於刪除。
通常，在UX中，「對比」一詞使我想到了文本與其背景之間的對比。有時設計人員會故意降低文本的對比度，以便不強調不太重要的文本。但是這種方法很危險- 降低文本對比度也會降低可讀性，並可能使您的內容無法訪問。使用顏色對比檢查器以確保所有目標用戶仍可以閱讀您的內容。
Greenhouse Juice Co：瓶子上文字的可讀性取決於果汁的顏色。儘管這種對比度在某些果汁中效果很好，但幾乎無法讀取帶有淺色果汁的瓶子的標籤。（圖片來源： www.instagram.com）
5.格式塔原理
這些是格式塔心理學家在20世紀初確立的一組原則。他們捕捉人類如何理解圖像。
定義：格式塔原理通過下意識地將各個部分安排到一個創建整體的有組織系統中，而不是將它們解釋為一系列不同的元素，從而解釋了人類如何簡化和組織由許多元素組成的複雜圖像。換句話說，格式塔原則捕捉了我們傾向於感知整體而不是個體元素的趨勢。
有幾種格式塔原理，包括相似性，連續性，閉合性，接近性，圖形/背景以及對稱性和順序。接近度對於UX尤其重要-它指的是以下事實：視覺上更靠近的項目被視為同一組的一部分。
格式塔閉合原理使我們能夠看到兩個人物接吻，而不是畢卡索的繪畫中的任意形狀。我們的大腦填補了缺失的部分，創造出兩個數字。
我們還經常看到格式塔理論在徽標中的應用。在NBC徽標中，空白處沒有孔雀，但我們的大腦知道有孔雀。
Uber註冊表單使用格式塔鄰近性原則： 欄位標籤靠近其相應的文本框，使您很容易理解在哪些欄位中鍵入哪些信息。如果欄位和後續標籤（用於下一個欄位）之間的空間較小，則用戶將難以理解到底是什麼。
2017年美國稅表：欄位之間的空間不足使得填寫該表很麻煩。您很容易錯過第二個「姓氏」欄位所指的內容。使用格式塔鄰近性原理來區分涉及自己和配偶的欄位，會使UX受益。
為什麼視覺設計原則很重要
我們為什麼要關心和理解視覺設計原理？除了使某些東西看起來「漂亮」之外，理解和利用它們還有助於：
- 增加可用性。遵循這些視覺設計原則通常會導致易於使用的布局。例如，經常用於創作精美藝術品的黃金比例也用於排版，以在字體大小，線條高度和線條寬度之間創建視覺上令人愉悅的關係。結果通常會縮短行長，從而在網頁上產生平衡（通過空白），並使文本更易於閱讀。與強大的互動設計配合使用時，視覺設計將提高任務成功率和用戶參與度。
- 激發情感和喜悅。美麗的事物引起積極的情緒。（實際上，美學－可用性效應表明，當人們發現外觀上具有視覺吸引力的設計時，他們可能會更願意忍受輕微的可用性事故。）通過遵循良好的視覺設計原則，設計人員可以創建外觀良好的UI，從而使用戶感覺不錯。
- 加強品牌認知度。強大的視覺系統可以建立用戶對產品的信任和興趣，並適當地代表和加強品牌。