本文主要運(yùn)用了多個(gè)不同的案例向大家介紹了心理學(xué)與設(shè)計(jì)之間的相互聯(lián)系，以及一些作者個(gè)人的心得體會(huì)，仔細(xì)閱讀，相信會(huì)有一些收獲!

創(chuàng)新互聯(lián)堅(jiān)持“要么做到，要么別承諾”的工作理念，服務(wù)領(lǐng)域包括：網(wǎng)站建設(shè)、網(wǎng)站設(shè)計(jì)、企業(yè)官網(wǎng)、英文網(wǎng)站、手機(jī)端網(wǎng)站、網(wǎng)站推廣等服務(wù)，滿足客戶于互聯(lián)網(wǎng)時(shí)代的電白網(wǎng)站設(shè)計(jì)、移動(dòng)媒體設(shè)計(jì)的需求，幫助企業(yè)找到有效的互聯(lián)網(wǎng)解決方案。努力成為您成熟可靠的網(wǎng)絡(luò)建設(shè)合作伙伴！

文章結(jié)尾分享一個(gè)小彩蛋，記得查收~!

以下是譯文全文：

我一直認(rèn)為，心理學(xué)和設(shè)計(jì)是用戶體驗(yàn)中很重要的組成部分。每當(dāng)我們的目標(biāo)是滿足人們的需要時(shí)，我們的專業(yè)要求我們需要同理心，目的就是要解決問題。當(dāng)我繼續(xù)深入了解心理學(xué)在設(shè)計(jì)中的作用時(shí)，我偶然發(fā)現(xiàn)了格式塔心理學(xué)理論。

那么，什么是格式塔心理學(xué)呢?

格式塔心理學(xué)是把人的思想和行為看成是一個(gè)整體的思想流派。當(dāng)我們試圖了解我們周圍的世界時(shí)，格式塔心理學(xué)表明我們并不是只關(guān)注其中每一個(gè)小的部分，相反，我們的大腦傾向于將對象視為更大整體的一部分。這一心理學(xué)流派在人類感知研究的現(xiàn)代發(fā)展中發(fā)揮了重要作用。資料來源:verywellmind

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

聲明：以下設(shè)計(jì)解決方案是使用格式塔原則的示例設(shè)計(jì)。有些設(shè)計(jì)問題可能需要重新設(shè)計(jì)，但是我堅(jiān)持使用原來的設(shè)計(jì)，只是用格式塔原則對它進(jìn)行優(yōu)化。所以，如果你有其他解決方案，歡迎留言探討。

1.親密性

當(dāng)物體彼此靠近時(shí)，這些物體被看作是一個(gè)整體而不是獨(dú)立的。來源：Hubspot的博客

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

標(biāo)題和鏈接相隔太遠(yuǎn)

正如我們所看到的，分類標(biāo)題(OnlineBooking&Cruises)和鏈接(LearnMore)分的太開了,這使得它們看起來像兩個(gè)相互獨(dú)立的元素。如果我們畫一個(gè)線框圖來表示的話，上面的例子看起來就像這樣：

線框圖

整個(gè)組件是相互脫離的，因?yàn)闆]有任何東西將圖片，標(biāo)題和鏈接聯(lián)系在一起。因此，親密性原則是我們的解決方案指導(dǎo)。把三個(gè)相互獨(dú)立的元素歸到一組，就能使其看起來像是一個(gè)整體——

居中標(biāo)題和鏈接

在我的解決方案中，使用親密性原則，我通過中心對齊來縮小標(biāo)題和鏈接之間的距離。通過這種方式，能夠?qū)?個(gè)元素(圖片，標(biāo)題，鏈接)結(jié)合在一起，這有助于我們解決上下文不連貫的問題。

2.相似性

相似性原則出現(xiàn)在物體看起來相似的時(shí)候，人們常常會(huì)把他們看作是一個(gè)組或者是一個(gè)模式。資料來源:graphicdesign.spokanefalls.edu

在下面的設(shè)計(jì)問題A中，我已經(jīng)標(biāo)記出了藍(lán)色的文字。原因是，在這個(gè)界面上，“HeavyDataUser”和”FlexibleMaximizer“是一組相似數(shù)據(jù)——他們是用戶界面上的兩個(gè)切換標(biāo)簽。

設(shè)計(jì)A

那么，是什么使得這兩個(gè)元素互不相關(guān)呢?

答案可能有很多種，但是最突出的問題是，沒有什么東西能將這兩個(gè)元素結(jié)合到一起，這使得他們看起來是相互獨(dú)立存在的。正如我們所看到的，很顯然，界面的品牌顏色是綠色的，但是突然跳出一個(gè)藍(lán)色的文本顏色。這樣，相似性原則就派上用場了：

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

對于設(shè)計(jì)問題A，可以通過重新設(shè)計(jì)來優(yōu)化，提升用戶體驗(yàn)。但是現(xiàn)在，我們用相似性原則，以最少的步驟改善了它的設(shè)計(jì)。

還有另一種方法來使用相似性原則——問題2：

設(shè)計(jì)B

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

標(biāo)題:40pxRegular內(nèi)容文本:20pxRegular文本鏈接:20pxRegular

乍一看，我們很可能會(huì)認(rèn)為這是一個(gè)沒有問題的設(shè)計(jì)。但是當(dāng)我們更仔細(xì)的去看時(shí)，問題來了，它發(fā)生在內(nèi)容文本和文本鏈接上，它們共用同一個(gè)文字系統(tǒng)樣式(20pxRegular)，這可能會(huì)讓用戶混淆并且會(huì)缺乏信任。當(dāng)他們?yōu)g覽網(wǎng)站時(shí)，可能會(huì)遲疑，可能會(huì)用鼠標(biāo)在正文文本和文本鏈接上反復(fù)的嘗試能不能點(diǎn)擊。

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

使用相似性原則，我們需要稍微調(diào)整下文字系統(tǒng)樣式：

標(biāo)題:40pxRegular內(nèi)容文本:20pxRegular文本鏈接：20pxBold

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

本文內(nèi)容以外的提示：在創(chuàng)建一個(gè)文字體系時(shí)，請選擇具有各種字重的字體(細(xì)，輕，常規(guī)，粗體等)。我們的目標(biāo)不應(yīng)該是只使用字體大小來做對比，而是要同時(shí)運(yùn)用字體的字重來做好對比設(shè)計(jì)。詳細(xì)的內(nèi)容可以看看我的另一篇文章(譯者注：也就是本公眾號(hào)的上一篇文章：10個(gè)實(shí)用小技巧，讓你的設(shè)計(jì)細(xì)節(jié)更高級)

3.焦點(diǎn)

焦點(diǎn)是畫面中用戶感興趣、強(qiáng)調(diào)或者差異的區(qū)域，能夠抓住用戶的注意力。資料來源:SmashingMagazine

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

圖片來源：telecommunication

在上面的例子中，對于元素的布局實(shí)際上沒啥問題。但是，信息層級上——主要內(nèi)容和次要內(nèi)容用了相同的按鈕樣式。

我們可以看到，這個(gè)界面的目標(biāo)是為了讓用戶下載APP，而FAQs只是一個(gè)幫助文檔，為了讓用戶更好的理解他們的APP(是的，我都懷疑他們更想讓用戶看幫助文檔而不是下載APP了。)

因此，我們的解決方案如下：

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

使用焦點(diǎn)原則，我把FAQs按鈕改成了一個(gè)邊框按鈕樣式，給下載應(yīng)用按鈕足夠的聚焦效果。同時(shí)，我也改變了他們的順序，主要操作放右邊，次要操作放左邊。其原因在于古騰堡圖解定理，它說：

基于這個(gè)定理，右邊的兩個(gè)點(diǎn)(在“Z”右側(cè)的第一個(gè)點(diǎn)及其最后點(diǎn))是用戶期望采取行動(dòng)的地方。因此，在這里，提示性語句放在左側(cè)，重要操作放在右側(cè)。

(譯者注：原文沒有這張圖，為了方便大家理解，從作者給出的參考文獻(xiàn)中找到了這張圖。這個(gè)理論還需要考慮到用戶的閱讀習(xí)慣綜合考慮)想查看更詳細(xì)的資料，你可以點(diǎn)擊這里和這里

說點(diǎn)題外話，我們經(jīng)常能看到一些按鈕的設(shè)計(jì)問題，為不同功能的按鈕設(shè)計(jì)成了同樣的一個(gè)樣式(注冊、取消、查看更多、閱讀等等)

建立一致性難道不好嗎?

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

題外話：按鈕設(shè)計(jì)一致性=相同的按鈕功能

現(xiàn)在我們看看問題2：

兩個(gè)按鈕都具有相同的視覺層次結(jié)構(gòu)

同樣的問題也出現(xiàn)在這個(gè)設(shè)計(jì)中。OK和Cancel按鈕共用相同的設(shè)計(jì)樣式，這要求用戶必須仔細(xì)閱讀按鈕上的文字，才能知道提交和取消。

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

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

4.共同區(qū)域

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

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

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

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

在線框圖中，使用描邊線將所有元素都封閉到它們各自的類別中，這樣它們看起來就是一個(gè)組而不是單個(gè)元素。下面就是具體的做法：

除了邊界框，我還用一個(gè)小圖標(biāo)替換了底部的一句話“FreeNetflixforsix(6)monthsforPlans999andup”并放在Netflix的右上角，為功能列表創(chuàng)建了更多的空間，一旦點(diǎn)擊，就會(huì)出現(xiàn)一個(gè)工具提示。

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

希望這篇文章能夠幫到你。

彩蛋：格式塔心理學(xué)簡易總結(jié)網(wǎng)站：https://lawsofux.com

作者：RielM譯者：彩云Sky本文翻譯已獲得作者的正式授權(quán)

本文由@彩云Sky原創(chuàng)發(fā)布于彩云譯設(shè)計(jì)。未經(jīng)許可，禁止轉(zhuǎn)載。

標(biāo)題名稱：格式塔心理學(xué)能提升你的設(shè)計(jì)價(jià)值嗎？
瀏覽路徑：http://m.newbst.com/article22/cggccc.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供建站公司、網(wǎng)站維護(hù)、品牌網(wǎng)站設(shè)計(jì)、商城網(wǎng)站、定制開發(fā)、網(wǎng)站設(shè)計(jì)

廣告

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源： 創(chuàng)新互聯(lián)