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

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

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

根據(jù)verywellmind中的定義，格式塔心理學(xué)是一種將人類(lèi)的思想和行為看做一個(gè)整體的思想學(xué)派。在我們?cè)噲D理解我們周?chē)氖澜鐣r(shí)，格式塔心理學(xué)主張不能只關(guān)注事物的一個(gè)個(gè)組成部分。

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

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

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

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

1. 接近律 

(law of proximity)

Hubspot博客里曾有一句話(huà)，“當(dāng)物體彼此靠近放置時(shí)，這些物體會(huì)被視為一個(gè)整體而不是單獨(dú)的個(gè)體?！?/span>

那么，我們?nèi)绾问褂迷亟咏蓙?lái)解決設(shè)計(jì)問(wèn)題呢？看看以下例子：

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

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

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

 2. 相似律 

(law of similarity) 

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

資料來(lái)源：graphicdesign.spokanefalls.edu

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

那么，是什么讓這兩個(gè)元素看起來(lái)彼此無(wú)關(guān)？

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3. 視覺(jué)焦點(diǎn)原則 

（Law of focal point）

“視覺(jué)焦點(diǎn)就是在某個(gè)整體里最有趣，最重要，最與眾不同的地方，是最能引起用戶(hù)注意的一個(gè)點(diǎn)?！?資料來(lái)源：Smashing Magazine

關(guān)于視覺(jué)焦點(diǎn)的設(shè)計(jì)說(shuō)明，這里有兩處例子，首先看看第一個(gè)例子：

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

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

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

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

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

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

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

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

簡(jiǎn)言之：按鈕設(shè)計(jì)一致性=按鈕功能一致性。

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

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

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

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

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

（Law of Common Region）

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

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

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

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

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

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

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

ID：Mockplus