當心理學遇上設計：格式塔原理是如何服務于設計的？

我始終堅信，心理學和設計的完美結合可以創造出非常好的用戶體驗。作為設計師，我們的職業目的就是解決用戶需求，在這個過程中，我們往往會產生和用戶一樣的同理心。而當我更加深入地研究心理學對于設計工作的影響時，某一天，我終于恍然大悟，發現格式塔心理學原理可以和設計完美結合。

那么，格式塔究竟是什么呢？

根據verywellmind中的定義，格式塔心理學是一種將人類的思想和行為看做一個整體的思想學派。在我們試圖理解我們周圍的世界時，格式塔心理學主張不能只關注事物的一個個組成部分。

相反，我們的思想傾向于將事物看做更大整體的一個部分，同時也是更復雜系統的組成元素，也就是說，整體不等于部分之和，意識不等于感覺元素的集合，行為不等于反射弧的循環。格式塔心理學對人類感覺和感知的研究發展起到了很大的推動作用。

在我發現并理解了格式塔原則之后，我充分認識到，格式塔原則可以很好地融入到我的設計工作中來。 因此，在本文中，我將與你分享我是如何利用格式塔原則來改進設計的，為了更好地說明，我會以一些網站和APP作為例子來具體闡述。

聲明：文中所提到的例子是使用格式塔原則作為設計解決方案的示例。你可能會發現，一些例子中的設計問題比較嚴重，可能需要通過重新設計才能解決，我這里只是展示了如何利用格式塔原則來進行再設計，如果你有其他的設計解決方案，歡迎交流哦。

此外，以下圖片并非全部是我原創。

1. 接近律 

(law of proximity)

Hubspot博客里曾有一句話，“當物體彼此靠近放置時，這些物體會被視為一個整體而不是單獨的個體。”

那么，我們如何使用元素接近律來解決設計問題呢？看看以下例子：

不難看出，分類標題（Online Booking & Cruises）和鏈接（Learn More）彼此分離，這使得它們看起來像是浮動元素。 如果我們以這樣的形態畫一個線框圖，那么就是這樣的：

所有組件都脫離了上下文，沒有任何東西將圖片，標題和鏈接聯系在一起。如果使用接近律，就可以很好地解決三個獨立元素漂浮無序的問題，并且使它們成為一個完整的組成部分，如下圖右：

這里使用居中對齊方式解決了標題和鏈接兩個元素之間距離過大且無關聯的問題。進一步地，通過這種方式，可以將3種元素（圖像，標題，鏈接）全部組合在一起，從而解決上下文缺失的問題。

 2. 相似律 

(law of similarity) 

"當對象看起來彼此相似時，就會產生相似性，人們更傾向于將它們視為一個整體或某種模式。" 

資料來源：graphicdesign.spokanefalls.edu

在下面的設計問題A中，我標記出了藍色顏色的文本。在用戶交互時，Heavy Data User 和 Flexible 其實是相關的，它們實際上是用戶界面的兩個標簽。但他們看上去顯然毫無關聯，這便是我標記的原因。

那么，是什么讓這兩個元素看起來彼此無關？

其實原因有很多。但最淺顯的一個因素是沒有任何東西可以將這兩個元素綁定在一起，因此使得它們看起來很孤立。正如我們所看到的，很明顯，界面的品牌顏色是綠色，但卻又突然出現藍色文字。如果用相似律來解決，則是這樣的，如圖右：

這里運用到了兩點：第一，將文本顏色設置為綠色；第二，添加左右內邊距到活動狀態。這樣，就以最簡單的辦法創建了相似性。

關于這個設計問題A，其實還需要重新設計來進一步改進，因為用戶體驗很不佳，只有重新設計才能真正的解決用戶困擾。但就目前而言，我們就用相似律原則來稍微改善一下吧。

關于運用相似律的設計解決方案例子還有很多，不妨再看看。

例子2中，讓我們先觀察一下細節部分，文本系統包含以下：

• 標題：40px 常規

• 正文：20px 常規

• 鏈接文字：20px 常規

乍一看，這只是一個不起眼的Type系統，完全不會引起注意。但如果你仔細觀察，就會發現問題出現在了正文和鏈接文字上，兩者都是相同的設置，即20px 常規，這很可能造成用戶困擾。當用戶瀏覽頁面時，如果他們需要點擊的部分是正文本分或純文本鏈接，他們可能會猶豫不決，進行反復試驗。

那么，如何改進呢？

以相似律作為解決方案，我們只需稍微調整下Type系統：

• 標題：40px常規

• 正文：20px 常規

• 鏈接文字和圖標：20px 加粗

將文本鏈接加粗，再添加一個容易引起視覺注意的圖標，這就增加了對比度。這些小改動，既可以保留頁面相似性，又降低了用戶的認知成本。

順便說一下關于創建Type系統的知識：一定要選擇具有各種權重的字體（細，淺，常規，粗體等）。要創造對比度，不是使用具有較少權重的多種字號，而是應該使用具有多種不同權重的些許字號即可。

3. 視覺焦點原則 

（Law of focal point）

“視覺焦點就是在某個整體里最有趣，最重要，最與眾不同的地方，是最能引起用戶注意的一個點。” 資料來源：Smashing Magazine

關于視覺焦點的設計說明，這里有兩處例子，首先看看第一個例子：

在上面的例子中，元素的布局實際上沒有問題，問題其實是出現在信息層次結構上，即主要操作按鈕和輔助操作按鈕具有相同的權重。

毫無疑問，該界面的目標是引導用戶下載APP，而FAQ只是一個輔助選項，只是為了讓用戶更好地了解他們的APP（這樣的設計真的讓我忍俊不禁，我都懷疑他們希望用戶閱讀常見問題解答而不是去下載APP）。

這里我給到的設計解決方案是：

為了突出焦點，我將“View FAQs按鈕”界面更改為邊框按鈕，給下載按鈕添加了聚光燈效果。并且也調換了它們的排序，將下載按鈕放在右邊，FQA按鈕放在了左邊。為什么要把重要按鈕放在左側呢？不妨看看Gutenberg Diagram里的說法:

“根據這個定理，右邊的兩個點（在“Z”字母的第一個點和它的最末端）是用戶最想要采取行動的地方。因此，關于行為召喚按鈕究竟應該放在左邊和右邊其實是沒有必要爭論的。它就是應該始終放在右邊。”

這里也順便說一下其他的一些常見的按鈕設計問題，就是不同功能的按鈕都采取相同的設計，比如注冊按鈕，取消按鈕，加載更多按鈕，閱讀更多按鈕等，都采用同一種填充式設計按鈕。這也是不對的。

你也許會問，這難道這不是為了達到設計的一致性要求嗎？

誠然，我們都知道一致性在用戶體驗設計中起著重要作用，但這里我們講的是功能一致性問題。如果我們使用相同類型的按鈕設計去對應不同的功能，就很可能導致用戶體驗的不一致問題，最終影響到我們客戶的業務目標。

簡言之：按鈕設計一致性=按鈕功能一致性。

現在我們看看第二個關于視覺焦點設計的例子。

該設計中也出現了同樣的錯誤，“確定”和“取消”兩個按鈕具有相同的設計樣式，這就要求用戶必須花費更多的時間分辨兩個按鈕的含義，才能知曉哪個是提交和哪個是取消。

采用視覺焦點原則，可以很好地減少了用戶閱讀標簽的時間，下面就是我給出的解決方案：

首先互換了兩個按鈕的位置，并且把OK按鈕的名字改為了“Submit”，這樣，用戶的體驗就流暢了，也能很快知曉他們一旦單擊提交按鈕就會有怎樣的操作。

 4. 共同區域原則 

（Law of Common Region）

“共同區域原則和接近律息息相關。它是指當物體都位于同一個封閉區域內時，人們就會將它們視為一個組。” 來源：User Testing

不難看出，Spotify，迪士尼，Netflix等功能展示并未與其類別組合在一起，這讓他們看起來似乎是浮動元素。為了方便理解，我們看看它的線框圖是什么樣子的：

從上面的線框可以看出，界面看起來并不是4個組的組成，而是多個單元素隨意放置。下面是改進的線框圖：

使用邊框將所有元素包含在各自的類別中，這樣看起來就是一個整體而不是多個雜亂元素了。下面是改進后的界面設計：

除了增加邊框以外，第一個分組里的文本 （*Free Netflix for six (6) months for Plans 999 and up）也進行了更改，這里沒有將它直接展示出來，而是放在了Netflix元素的右上方，用黃色圖標來提醒用戶，這樣，功能列表就可以有更多的空間，不會擁擠，用戶一點單擊黃色圖標，該提示就會展示出來。

以上就是格式塔心理學的4個原則在設計中的運用。還有更多的格式塔原理可以在設計中很好地幫助你提升用戶體驗，希望你也可以自己去研究，然后分享出來哦。

本文轉自：摹客

ID：Mockplus