學(xué)會這4個生理學(xué)小知識，你的設(shè)計會更有說服力！

2018/4/20 9:43:39來源：互聯(lián)網(wǎng)

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

譯文內(nèi)容：

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

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

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

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

1. 親密性

當物體彼此靠近時，這些物體被看作是一個團體而不是自力的。來源：Hubspot 的博客

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

△ 題目和鏈接相隔太遠

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

△ 線框圖

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

△ 居中題目和鏈接

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

2. 相似性

相似性原則出如今物體看起來相似的時候，人們常常會把他們看作是一個組或者是一個模式。資料來源：graphicdesign.spokanefalls.edu

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

△ 設(shè)計A

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

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

我的解決方案是，設(shè)計鼠標點擊狀況左右切換顏色添補來建立相似性，把他們設(shè)計成選項卡樣式。（譯者注：鼠標點擊時，左右的樣式會發(fā)生互換。）

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

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

△ 設(shè)計B

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

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

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

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

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

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

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

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

3. 焦點

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

我們將通過兩個設(shè)計題目來看看如何運用焦點原則：

△ 圖片來源： telecommunication

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

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

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

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