當(dāng)心理學(xué)遇上設(shè)計：格式塔原理是如何服務(wù)于設(shè)計的？

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

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

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

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

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

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

此外，以下圖片并非全部是我原創(chuàng)。

1. 接近律 

(law of proximity)

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

那么，我們?nèi)绾问褂迷亟咏蓙斫鉀Q設(shè)計問題呢？看看以下例子：

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

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

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

 2. 相似律 

(law of similarity) 

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

資料來源：graphicdesign.spokanefalls.edu

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

那么，是什么讓這兩個元素看起來彼此無關(guān)？

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

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

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

關(guān)于運用相似律的設(shè)計解決方案例子還有很多，不妨再看看。

例子2中，讓我們先觀察一下細(xì)節(jié)部分，文本系統(tǒng)包含以下：

• 標(biāo)題：40px 常規(guī)

• 正文：20px 常規(guī)

• 鏈接文字：20px 常規(guī)

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

那么，如何改進(jìn)呢？

以相似律作為解決方案，我們只需稍微調(diào)整下Type系統(tǒng)：

• 標(biāo)題：40px常規(guī)

• 正文：20px 常規(guī)

• 鏈接文字和圖標(biāo)：20px 加粗

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

順便說一下關(guān)于創(chuàng)建Type系統(tǒng)的知識：一定要選擇具有各種權(quán)重的字體（細(xì)，淺，常規(guī)，粗體等）。要創(chuàng)造對比度，不是使用具有較少權(quán)重的多種字號，而是應(yīng)該使用具有多種不同權(quán)重的些許字號即可。

3. 視覺焦點原則 

（Law of focal point）

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

關(guān)于視覺焦點的設(shè)計說明，這里有兩處例子，首先看看第一個例子：

在上面的例子中，元素的布局實際上沒有問題，問題其實是出現(xiàn)在信息層次結(jié)構(gòu)上，即主要操作按鈕和輔助操作按鈕具有相同的權(quán)重。

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

這里我給到的設(shè)計解決方案是：

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

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

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

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

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

簡言之：按鈕設(shè)計一致性=按鈕功能一致性。

現(xiàn)在我們看看第二個關(guān)于視覺焦點設(shè)計的例子。

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

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

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

 4. 共同區(qū)域原則 

（Law of Common Region）

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

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

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

使用邊框?qū)⑺性匕诟髯缘念悇e中，這樣看起來就是一個整體而不是多個雜亂元素了。下面是改進(jìn)后的界面設(shè)計：

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

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

本文轉(zhuǎn)自：摹客

ID：Mockplus