學(xué)會(huì)這4個(gè)生理學(xué)小知識(shí)，你的設(shè)計(jì)會(huì)更有說(shuō)服力！

編者按：對(duì)于做好用戶體驗(yàn)來(lái)說(shuō)，生理學(xué)和設(shè)計(jì)經(jīng)常是密不可分的。學(xué)好設(shè)計(jì)生理學(xué)知識(shí)，是我們每位設(shè)計(jì)師必須要掌握的技能！

譯文內(nèi)容：

我一向認(rèn)為，生理學(xué)和設(shè)計(jì)是用戶體驗(yàn)中很緊張的組成部分。每當(dāng)我們的目標(biāo)是知足人們的必要時(shí)，我們的專業(yè)要求我們必要同理心，目的就是要解決題目。當(dāng)我繼承深入了解生理學(xué)在設(shè)計(jì)中的作用時(shí)，我無(wú)意發(fā)現(xiàn)了格式塔生理學(xué)理論。

那么，什么是格式塔生理學(xué)呢？

格式塔生理學(xué)是把人的思想和舉動(dòng)看成是一個(gè)團(tuán)體的思想流派。當(dāng)我們?cè)噲D了解我們四周的世界時(shí)，格式塔生理學(xué)注解我們并不是只關(guān)注其中每一個(gè)小的部分，相反，我們的大腦傾向于將對(duì)象視為更大團(tuán)體的一部分。這同心專心理學(xué)流派在人類感知研究的當(dāng)代發(fā)展中發(fā)揮了緊張作用。資料來(lái)源: verywellmind

這次發(fā)現(xiàn)格式塔理論的過(guò)程讓我充分理解如何將這些原理融入到我的設(shè)計(jì)中。 因此，在本文中，我將與你分享如何將這些原則作為我的設(shè)計(jì)方案應(yīng)用到我碰到的以下網(wǎng)站和 APP 中。

1. 親密性

當(dāng)物體彼此靠近時(shí)，這些物體被看作是一個(gè)團(tuán)體而不是自力的。來(lái)源：Hubspot 的博客

以下是使用親密性原則解決設(shè)計(jì)題目的一個(gè)例子：

△ 題目和鏈接相隔太遠(yuǎn)

正如我們所看到的，分類題目 ( Online Booking & Cruises ) 和鏈接 ( Learn More )分的太開(kāi)了, 這使得它們看起來(lái)像兩個(gè)相互自力的元素。假如我們畫(huà)一個(gè)線框圖來(lái)透露表現(xiàn)的話，上面的例子看起來(lái)就像如許：

△ 線框圖

整個(gè)組件是相互離開(kāi)的，由于沒(méi)有任何東西將圖片、題目和鏈接聯(lián)系在一路。因此，親密性原則是我們的解決方案引導(dǎo)。把三個(gè)相互自力的元素歸到一組，就能使其看起來(lái)像是一個(gè)團(tuán)體：

△ 居中題目和鏈接

在我的解決方案中，使用親密性原則，我通過(guò)中間對(duì)齊來(lái)縮小題目和鏈接之間的距離。通過(guò)這種體例，能夠?qū)?個(gè)元素（圖片，題目，鏈接）結(jié)合在一路，這有助于我們解決上下文不連貫的題目。

2. 相似性

相似性原則出如今物體看起來(lái)相似的時(shí)候，人們常常會(huì)把他們看作是一個(gè)組或者是一個(gè)模式。資料來(lái)源：graphicdesign.spokanefalls.edu

在下面的設(shè)計(jì)題目 A 中，我已經(jīng)標(biāo)記出了藍(lán)色的筆墨。緣故原由是，在這個(gè)界面上，「Heavy Data User」和「Flexible Maximizer」是一組相似數(shù)據(jù)——他們是用戶界面上的兩個(gè)切換標(biāo)簽。

△ 設(shè)計(jì)A

那么，是什么使得這兩個(gè)元素互不相干呢？

答案可能有許多種，但是最凸起的題目是，沒(méi)有什么東西能將這兩個(gè)元素結(jié)合到一路，這使得他們看起來(lái)是相互自力存在的。正如我們所看到的，很顯然，界面的品牌顏色是綠色的，但是忽然跳出一個(gè)藍(lán)色的文本顏色。如許，相似性原則就派上用場(chǎng)了。

我的解決方案是，設(shè)計(jì)鼠標(biāo)點(diǎn)擊狀況左右切換顏色添補(bǔ)來(lái)建立相似性，把他們?cè)O(shè)計(jì)成選項(xiàng)卡樣式。（譯者注：鼠標(biāo)點(diǎn)擊時(shí)，左右的樣式會(huì)發(fā)生互換。）

對(duì)于設(shè)計(jì)題目 A，可以通過(guò)重新設(shè)計(jì)來(lái)優(yōu)化，提拔用戶體驗(yàn)。但是如今，我們用相似性原則，以最少的步驟改善了它的設(shè)計(jì)。

設(shè)計(jì) B 中有另一種方法來(lái)使用相似性原則：

△ 設(shè)計(jì)B

在題目2中，我們先來(lái)拆解它的基本組成部分：

• 題目：40px Regular
• 內(nèi)容文本：20px Regular
• 文本鏈接：20px Regular

乍一看，我們很可能會(huì)認(rèn)為這是一個(gè)沒(méi)有題目的設(shè)計(jì)。但是當(dāng)我們更細(xì)心的去看時(shí)，題目來(lái)了，它發(fā)生在內(nèi)容文本和文本鏈接上，它們共用統(tǒng)一個(gè)筆墨體系樣式（20px Regular），這可能會(huì)讓用戶混淆并且會(huì)缺乏信賴。當(dāng)他們欣賞網(wǎng)站時(shí)，可能會(huì)游移，可能會(huì)用鼠標(biāo)在正文文本和文本鏈接上反復(fù)的嘗試能不能點(diǎn)擊。

那么，我們?nèi)绾谓鉀Q這個(gè)題目呢？

使用相似性原則，我們必要稍微調(diào)整下筆墨體系樣式：

• 題目：40px Regular
• 內(nèi)容文本：20px Regular
• 文本鏈接：20px Bold

我們通過(guò)把文本鏈接加粗，并增長(zhǎng)指導(dǎo)圖標(biāo)，使得這個(gè)類型在內(nèi)容中有了對(duì)比。通過(guò)這些修改，我們把整個(gè)文本鏈接創(chuàng)建了相似性，加快了用戶的識(shí)別和操作服從。

在創(chuàng)建一個(gè)筆墨系統(tǒng)時(shí)，請(qǐng)選擇具有各種字重的字體（細(xì)，輕，常規(guī)，粗體等）。我們的目標(biāo)不應(yīng)該是只使用字體大小來(lái)做對(duì)比，而是要同時(shí)運(yùn)用字體的字重來(lái)做好對(duì)比設(shè)計(jì)。細(xì)致的內(nèi)容閱讀《讓設(shè)計(jì)細(xì)節(jié)更高級(jí)的10個(gè)實(shí)用小技巧》

3. 焦點(diǎn)

焦點(diǎn)是畫(huà)面中用戶感愛(ài)好、強(qiáng)調(diào)或者差異的區(qū)域，能夠捉住用戶的細(xì)致力。資料來(lái)源: Smashing Magazine

我們將通過(guò)兩個(gè)設(shè)計(jì)題目來(lái)看看如何運(yùn)用焦點(diǎn)原則：

△ 圖片來(lái)源： telecommunication

在上面的例子中，對(duì)于元素的布局現(xiàn)實(shí)上沒(méi)什么題目。但是，信息層級(jí)上重要內(nèi)容和次要內(nèi)容用了雷同的按鈕樣式。

我們可以看到，這個(gè)界面的目標(biāo)是為了讓用戶下載 APP，而 FAQs 只是一個(gè)幫助文檔，為了讓用戶更好的理解他們的 APP，因此，我們的解決方案如下：

△ 設(shè)計(jì) A 的解決方案

使用焦點(diǎn)原則，我把 FAQs 按鈕改成了一個(gè)邊框按鈕樣式，給下載應(yīng)用按鈕充足的聚焦結(jié)果。同時(shí)，我也改變了他們的順序，重要操作放右邊，次要操作放左邊。其緣故原由在于古騰堡圖解定理，基于這個(gè)定理，右邊的兩個(gè)點(diǎn)（在“Z”的第一個(gè)點(diǎn)及其最后點(diǎn)）是用戶期望采取舉措的地方。 因此，在這里，提醒性語(yǔ)句放在左側(cè)，緊張操作放在右側(cè)。

我們經(jīng)常能看到一些按鈕的設(shè)計(jì)題目，為不同功能的按鈕設(shè)計(jì)成了同樣的一個(gè)樣式（注冊(cè)、取消、查看更多、閱讀等等）。

建立同等性難道不好嗎？

是的，我們都知道同等性在用戶體驗(yàn)設(shè)計(jì)中扮演偏重要的角色，但我們稱之為功能的同等性。假如我們要?jiǎng)?chuàng)建同樣的按鈕設(shè)計(jì)來(lái)迎合不同的功能，它會(huì)導(dǎo)致用戶有不同等的體驗(yàn)，也可能會(huì)影響用戶的操作目標(biāo)。按鈕設(shè)計(jì)同等性=雷同的按鈕功能。

如今我們看看題目2：

△ 兩個(gè)按鈕都具有雷同的視覺(jué)條理結(jié)構(gòu)

同樣的題目也出如今這個(gè)設(shè)計(jì)中。OK 和 Cancel 按鈕共用雷同的設(shè)計(jì)樣式，這要求用戶必須細(xì)心閱讀按鈕上的筆墨，才能知道提交和取消。

使用焦點(diǎn)原則，可以削減閱讀按鈕筆墨的時(shí)間，因此下面是設(shè)計(jì)解決方案 B：

我們互換了按鈕位置并把按鈕上的 OK 改為 Submit，使其意思更加正確，告知用戶，一旦他們點(diǎn)擊這個(gè)按鈕，就會(huì)觸發(fā)一個(gè)提交動(dòng)作。

4. 共同區(qū)域

共同區(qū)域的原則與親密性原則很相干。它的意思是當(dāng)物體在統(tǒng)一個(gè)封閉區(qū)域內(nèi)時(shí)，會(huì)被認(rèn)為是統(tǒng)一組元素。資料來(lái)源: User Testing

像 Spotify、Disney、Netflix 被隨意擺放而沒(méi)有規(guī)律，我們不會(huì)認(rèn)為他們是一組。為了使題目更清晰，創(chuàng)建一個(gè)線框圖透露表現(xiàn):

從上面的線框圖中可以看出，它更可能是多個(gè)單個(gè)元素，而不是4個(gè)團(tuán)體。因此，運(yùn)用共同區(qū)域原則設(shè)計(jì)一個(gè)解決方案：

△ 新的線框圖運(yùn)用了共同區(qū)域原則

在線框圖中，使用描邊線將所有元素都封閉到它們各自的類別中，如許它們看起來(lái)就是一個(gè)組而不是單個(gè)元素。下面就是詳細(xì)的做法：

除了邊界框，我還用一個(gè)小圖標(biāo)替代了底部的一句話「Free Netflix for six (6) months for Plans 999 and up」并放在Netflix 的右上角，為功能列表創(chuàng)建了更多的空間，一旦點(diǎn)擊，就會(huì)出現(xiàn)一個(gè)工具提醒。

這4個(gè)格式塔生理學(xué)知識(shí)應(yīng)該能夠幫助到你的設(shè)計(jì)工作，你還可以運(yùn)用更多的格式塔原理解決更多的設(shè)計(jì)題目。

原文鏈接：https://uxdesign.cc Riel M

迎接關(guān)注譯者的微信公眾號(hào)：「 彩云譯設(shè)計(jì)」