你是否曾經(jīng)觀察過(guò)天空，注意到一團(tuán)不同尋常的云，像一個(gè)熟悉的動(dòng)物或物體?你有沒(méi)有想過(guò)，為什么或者如何通過(guò)觀察一團(tuán)蓬松的氣體來(lái)建立這種聯(lián)系?這都是因?yàn)槟愕拇竽X運(yùn)作方式！ 你的大腦總是試圖通過(guò)比較以前的經(jīng)驗(yàn)或視覺(jué)模式來(lái)理解這個(gè)世界，并把這些點(diǎn)連接起來(lái)。它有自己的“怪異”方式來(lái)感知形狀和形式，分組信息，填補(bǔ)空白，繪制大圖。 

了解你的大腦如何工作將有助于你成為一個(gè)更聰明的設(shè)計(jì)師，掌握視覺(jué)溝通的操縱者。它可以幫助你確定在任何特定情況下哪些視覺(jué)元素是最有效的，因此你可以利用它們來(lái)影響用戶的感知、引導(dǎo)他們的注意力，并最終引起行為的改變。這個(gè)方法對(duì)于以完成目標(biāo)為導(dǎo)向、解決問(wèn)題、無(wú)意識(shí)設(shè)計(jì)、用戶界面的設(shè)計(jì)上都格外有用。

“偉大的設(shè)計(jì)師理解心理學(xué)在視覺(jué)感知中的強(qiáng)大作用。當(dāng)別人的目光與你的設(shè)計(jì)創(chuàng)作相遇時(shí)，會(huì)發(fā)生什么？他們對(duì)你所分享的信息有什么反應(yīng)？”

—Autodesk品牌內(nèi)容策劃師Laura Busche

‍‍現(xiàn)在很清楚，視覺(jué)設(shè)計(jì)和心理是相互聯(lián)系的，并且可以相互影響。格式塔原則可以幫助我們理解和控制這些聯(lián)系。

‍‍

什么是格式塔？

‍‍‍‍格式塔（德式造型）是20世紀(jì)20年代由德國(guó)心理學(xué)家提出的一組視覺(jué)知覺(jué)原理。它建立在“一個(gè)有組織的整體，被認(rèn)為大于其各部分之和”的理論基礎(chǔ)上。

‍‍

‍‍

  “整體不是各部分之和�！�

   – 庫(kù)爾托夫卡

格式塔原則試圖描述當(dāng)某些條件適用時(shí)，人們是如何看待視覺(jué)元素的。它們是建立在四個(gè)關(guān)鍵思想的基礎(chǔ)上的：

出現(xiàn)

人們傾向于通過(guò)物體的粗略輪廓來(lái)識(shí)別它們。相較于一個(gè)細(xì)節(jié)豐富的物體，我們的大腦能更快的識(shí)別一個(gè)簡(jiǎn)明清晰的物體。

物化

人們可以識(shí)別物體，即使它們有部分缺失。我們的大腦將我們所看到的東西與記憶中的熟悉模式相匹配，并填補(bǔ)空白。

多穩(wěn)定性

人們常常會(huì)用不止一種方式來(lái)解釋模棱兩可的事物。我們的大腦會(huì)在尋找確定性的選擇之間來(lái)回穿梭。因此，一種視角將變得更加主導(dǎo)，而另一種視角將變得更難看到。

不變性

人們?cè)谧R(shí)別簡(jiǎn)單物體時(shí)，不會(huì)受到它被旋轉(zhuǎn)、縮放、變形的干擾。我們的大腦可以從不同的角度感知物體，盡管它們的外觀不同。

‍‍以下是格式塔原則，它可以為今天的UI設(shè)計(jì)提供參考。

鄰近

排列在彼此之間的鄰近元素被認(rèn)為比那些放置得更遠(yuǎn)的元素更相關(guān)。這樣，不同的元素主要被看作是一個(gè)組，而不是單個(gè)的元素。

鄰近原則如何適用于UI設(shè)計(jì)？

我們可以在UI設(shè)計(jì)中使用鄰近原則來(lái)分組相似的信息，組織內(nèi)容和整理布局。它的正確使用將對(duì)視覺(jué)交流和用戶體驗(yàn)產(chǎn)生積極的影響。

如原則所述，相關(guān)的項(xiàng)目應(yīng)該保持緊密的聯(lián)系，而不相關(guān)的項(xiàng)目應(yīng)該保持更遠(yuǎn)的距離。白色的空間在這里起著至關(guān)重要的作用，因?yàn)樗鼊?chuàng)造了對(duì)比，引導(dǎo)用戶的眼睛朝著預(yù)期的方向看�？瞻卓梢栽鰪�(qiáng)視覺(jué)層次結(jié)構(gòu)和信息流，便于閱讀和瀏覽布局。它將幫助用戶更快地實(shí)現(xiàn)他們的目標(biāo)，并深入研究?jī)?nèi)容。 

‍‍我們幾乎可以在任何地方應(yīng)用鄰近原則，從導(dǎo)航、卡片、圖庫(kù)和橫幅到列表、正文和分頁(yè)。

共同區(qū)域

與鄰近原則類似，將放置在同一區(qū)域內(nèi)的元素被視為分組。

共同區(qū)域原則如何適用于UI設(shè)計(jì)？

共同區(qū)域原則特別有用。它可以幫助信息分組和內(nèi)容組織，但它也可以實(shí)現(xiàn)內(nèi)容分離或充當(dāng)焦點(diǎn)。它提升了層次結(jié)構(gòu)，可掃描性，并有助于信息的推廣。

共同區(qū)域的原則可以將許多不同的因素組合在一起，使它們?cè)诟�大的群體中保持統(tǒng)一。我們可以通過(guò)使用線條，顏色，形狀和陰影來(lái)實(shí)現(xiàn)它。它經(jīng)常被用來(lái)使某個(gè)元素突出，表示交互作用或重要性。

‍‍一個(gè)絕佳的運(yùn)用公共區(qū)域理論的例子就是用戶界面上的卡片；一個(gè)定義良好的矩形空間，包含不同的信息。橫幅廣告圖跟表格也是很好的例子。

‍‍

相似

與不具有相似視覺(jué)特征的元素相比，具有相似視覺(jué)特征的元素被認(rèn)為更加相關(guān)。

相似性原則如何適用于UI設(shè)計(jì)？

我們傾向于把相似的元素看作是分組或模式。我們也可能認(rèn)為，它們的目的是相同的。相似性可以幫助我們組織和分類一個(gè)組內(nèi)的對(duì)象，并將它們與特定的意義或功能聯(lián)系起來(lái)。

有很多不同的方法可以讓元素們看起來(lái)相似，從而被用戶認(rèn)為是彼此關(guān)聯(lián)的。這些特征包括顏色、大小、形狀、紋理、尺寸和方向的相似性;其中一些比其他的更具交際力(例如顏色>大小>形狀)。當(dāng)相似發(fā)生時(shí)，一個(gè)物體可以通過(guò)與其他物體不同而得到強(qiáng)調(diào)，這被稱為“異�！�，可以用來(lái)創(chuàng)造對(duì)比或視覺(jué)重量。通過(guò)增加可瀏覽性、可發(fā)現(xiàn)性和整體信息流，將用戶的注意力吸引到某個(gè)焦點(diǎn)內(nèi)容上。 

‍‍我們可以在導(dǎo)航，鏈接，按鈕，標(biāo)題，呼叫動(dòng)作等等中使用相似性原則。

‍‍

閉合

一組元素通常被認(rèn)為是單個(gè)可識(shí)別的形式或圖形。閉合也發(fā)生在對(duì)象不完整或部分不封閉的時(shí)候。

閉合原則如何適用于UI設(shè)計(jì)？

正如閉合原則所指出的，當(dāng)我們面對(duì)適當(dāng)?shù)男畔⒘繒r(shí)，我們的大腦會(huì)通過(guò)填補(bǔ)空白并創(chuàng)建一個(gè)統(tǒng)一的整體來(lái)得出結(jié)論。通過(guò)這種方式，我們可以減少信息交流所需的元素?cái)?shù)量，減少?gòu)?fù)雜性，使設(shè)計(jì)更加吸引人。閉合可以幫助我們最小化視覺(jué)噪音并傳達(dá)信息，在一個(gè)很小的空間內(nèi)強(qiáng)化一個(gè)概念。

‍‍我們可以在圖像學(xué)中使用閉合原則，在這種情況下，簡(jiǎn)單有助于迅速而清晰地傳達(dá)意義。

‍‍

對(duì)稱

對(duì)稱的元素往往被認(rèn)為是歸屬在一起的，而不管它們之間的距離，都給我們一種牢固和有序的感覺(jué)。

對(duì)稱原則在UI設(shè)計(jì)中如何應(yīng)用？

對(duì)稱的元素簡(jiǎn)單、和諧、美觀。我們的眼睛尋求這些屬性，以及秩序和穩(wěn)定，以了解世界。因此，對(duì)稱是快速有效地交流信息的有用工具。對(duì)稱讓人感覺(jué)舒服，有助于我們專注于重要的東西。

對(duì)稱的構(gòu)圖是令人滿意的，但它們也會(huì)變得有點(diǎn)沉悶和靜態(tài)。視覺(jué)對(duì)稱往往更具動(dòng)態(tài)性和趣味性。在任意一種對(duì)稱設(shè)計(jì)中加入不對(duì)稱的元素都能讓用戶對(duì)這個(gè)元素印象深刻從而吸引到用戶的注意力，這種方法非常好用，比如當(dāng)你希望吸引用戶興趣、或者像促進(jìn)用戶做出操作的時(shí)候。 

‍‍對(duì)于作品集、圖庫(kù)、產(chǎn)品展示、列表、導(dǎo)航、橫幅和任何內(nèi)容豐富的頁(yè)面，使用對(duì)稱性都是很好的。

‍‍

延續(xù)

‍‍排列在一條線或一條細(xì)曲線中的元素被認(rèn)為比那些隨機(jī)排列或排列在一條粗線中的元素更相關(guān)。

‍‍

連續(xù)性原則在UI設(shè)計(jì)中如何應(yīng)用？

連續(xù)線之后的元素被認(rèn)為是分組的。線段越光滑，我們就越把它們視為統(tǒng)一的形狀;我們的頭腦更喜歡阻力最小的道路。

連續(xù)性幫助我們通過(guò)構(gòu)圖來(lái)解釋方向和運(yùn)動(dòng)。它是在對(duì)齊元素時(shí)進(jìn)行的，它可以幫助我們的眼睛平滑地在頁(yè)面上移動(dòng)，幫助我們閱讀信息。連續(xù)性原則加強(qiáng)了對(duì)分組信息的感知，創(chuàng)造了秩序，并通過(guò)不同的內(nèi)容片段引導(dǎo)用戶。中斷連續(xù)性可以標(biāo)志著一段內(nèi)容的結(jié)束，讓人注意到新的內(nèi)容。

行和列的線性排列是連續(xù)性的好例子。我們可以在菜單和子菜單，列表，產(chǎn)品排布展示，輪播，服務(wù)或過(guò)程/進(jìn)度顯示中使用它們。

共同的命運(yùn)

向同一方向移動(dòng)的元素被認(rèn)為比向不同方向移動(dòng)或根本不移動(dòng)的元素更相關(guān)。

共同命運(yùn)原則在UI設(shè)計(jì)中如何應(yīng)用？

無(wú)論元素有多遠(yuǎn)或者它們可能出現(xiàn)的差異多少，如果它們一起移動(dòng)或變化，它們都被認(rèn)為是相關(guān)的。即使隱藏元素本身的真實(shí)運(yùn)動(dòng)，它的移動(dòng)效果也可以通過(guò)其它視覺(jué)元素來(lái)反襯出來(lái)。

當(dāng)元素移動(dòng)同步時(shí)，共同命運(yùn)原則更有效; 在同一個(gè)方向，同一時(shí)間和速度。它可以幫助將相關(guān)信息分組并將結(jié)果與行為聯(lián)系起來(lái)。同步運(yùn)動(dòng)的中斷可以吸引用戶的注意力并將其引導(dǎo)至特定的元素或特征。它還可以建立不同分組或狀態(tài)之間的關(guān)系。

‍‍我們可以把命運(yùn)共同原則用在可擴(kuò)展菜單、折疊條目、小提示、滑塊、滾動(dòng)條和手勢(shì)操作提示等。

‍‍

結(jié)論

用戶界面設(shè)計(jì)不僅僅是漂亮的像素和閃亮的圖形。主要是關(guān)于溝通，性能和便利性。格式塔原則總是能夠幫助我們實(shí)現(xiàn)這些目標(biāo); 為用戶創(chuàng)造愉快的體驗(yàn)，并為企業(yè)取得巨大成功。