格式塔心理學(xué)是一種將人的思想和行為視為一個整體的思維學(xué)派，在本文中，我將與你分享，如何將這些原則作為我設(shè)計解決方案，并應(yīng)用于我的網(wǎng)站和應(yīng)用程序中。

我一直認為心理學(xué)和設(shè)計是包含用戶體驗的，每當(dāng)我們的目標是解決需求的時候，我們的專業(yè)就需要有同理心。隨著我繼續(xù)深入研究心理學(xué)進入設(shè)計領(lǐng)域時，我偶然發(fā)現(xiàn)了格式塔原則。

當(dāng)對象彼此相似時會出現(xiàn)相似性，人們通常將它們視為一個群體或模式。資料來源：graphicdesign.spokanefalls.edu

在下面的設(shè)計問題A中，我指出了藍色的文字顏色。原因在于：在用戶交互中，Heavy Data User?和?Flexible Maximizer?是相似的——它們在界面中實際上都是標簽。

設(shè)計A

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

答案很多。但是更簡單的說明，沒有任何東西將這兩個元素綁定在一起，這使得它們看起來很分散。正如我們所看到的那樣：很明顯，界面的品牌顏色是綠色的，但突然間一個藍色的文字顏色從無處跳出。

因此，相似法則的規(guī)律在于：

作為我們的解決方案，我通過將文本顏色設(shè)置為綠色并調(diào)整按鈕的左右填充來創(chuàng)建相似性，以便它更接近另一個按鈕?Flexible Maximizer。

這個設(shè)計問題A，可以通過重新設(shè)計來進一步改進（這實際上需要重新設(shè)計），這樣可以更加簡化用戶的體驗。但現(xiàn)在，讓它在制作中改動一小步來到達相似性原則。

方法2：

設(shè)計B

現(xiàn)在在方法2中，我們來觀察它的基本部分——類型系統(tǒng)，它們是：

• 標題：?40px Regular
• 正文：?20px Regular
• 文字鏈接：?20px Regular

乍一看，我們可能會認為這只是一個我們可以忽略的普通類型系統(tǒng)。但是當(dāng)我們看得更近時，問題發(fā)生在正文文本和文本鏈接之間，它們都共享相同的文字系統(tǒng)（20px Regular），這可能導(dǎo)致用戶混淆并且缺乏用戶信任。

當(dāng)他們?yōu)g覽網(wǎng)站時，他們可能會猶豫，他們正在交互的是正文文本還是文本鏈接，那么就需要進行反復(fù)試驗。

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

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

• 標題：?40px Regular
• 正文：?20px Regular
• 文字圖標鏈接：?20px粗體

我們通過使文本鏈接加粗，并且添加了一個圖標，這樣就增加了對比度。通過進行這些更改，我們在整個文本鏈接中創(chuàng)建了相似度，并加快了用戶的認知加載速度。

超出主題的快速提示：在創(chuàng)建一個Type系統(tǒng)時，請選擇具有各種權(quán)重的字體（細，輕，常規(guī)，粗體等）。我們的目標不應(yīng)該是具有較少權(quán)重的各種字體大小以獲得更好的對比度，而是要具有幾種不同權(quán)重的字體大小。

三、焦點

焦點是關(guān)注領(lǐng)域，強調(diào)或找到構(gòu)圖中的差異，以捕捉并保持觀看者的注意力。

在焦點問題上，我們將展示兩個設(shè)計問題：

從電信網(wǎng)站

在上面的例子中，元素的布局實際上沒有問題。但是我們擁有的信息層次結(jié)構(gòu)——主要操作和次要操作共享相同的按鈕系統(tǒng)。

我們可以看到，這個界面的目標是讓用戶下載應(yīng)用程序，并且FAQ是一個支持文檔，讓用戶更好地理解他們的應(yīng)用程序。

因此，我們的解決方案是：

設(shè)計解決方案A

利用焦點原則，我將View FAQs按鈕界面更改為邊框按鈕，為下載應(yīng)用程序按鈕提供所需的聚光燈效果。我還交換了他們的訂單，主要行動在右邊和次要在左邊。

其原因在于古騰堡圖（Gutenberg Diagram），它說：

基于這個定理，右邊的兩個點（在“Z”的第一個點及其最后點）是游客期望采取行動的地方。因此，在這里，您的號召性用語屬于正確還是左側(cè)，在這里確實沒有問題，它應(yīng)該始終朝向屏幕的右側(cè)。

我們通?？梢钥吹降某Ｒ姷陌粹o設(shè)計問題，也僅僅是為了增加主題外的一些東西，為不同功能創(chuàng)建一種按鈕界面（填寫注冊按鈕、取消、加載更多內(nèi)容、閱讀更多內(nèi)容等）。

難道創(chuàng)造一致性不好嗎？

是的，我們都知道一致性在UX設(shè)計中扮演著重要角色，但我們稱之為功能一致性。如果我們將創(chuàng)建相同類型的按鈕設(shè)計來滿足不同的功能，則會導(dǎo)致用戶不一致的體驗，并且可能會影響我們客戶的業(yè)務(wù)目標。

脫離主題快速提示：按鈕設(shè)計一致性=按鈕功能。

現(xiàn)在轉(zhuǎn)向Approach 2應(yīng)用程序：

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

這種設(shè)計也會出現(xiàn)同樣的問題：“確定”和“取消”按鈕共享相同的設(shè)計風(fēng)格，這要求他們徹底閱讀按鈕標簽，以便他們能夠知道提交和取消的內(nèi)容。

使用焦點，我們減少了閱讀標簽的時間，這導(dǎo)致我們設(shè)計解決方案B：

我們互換了按鈕并將按鈕副本從OK更名為Submit，以使其更加上下文，并通知我們的用戶，一旦他點擊按鈕，就會發(fā)生一個動作。

四、共同區(qū)域

共同區(qū)域的原則與鄰近度高度相關(guān)。它指出，當(dāng)物體位于同一封閉區(qū)域內(nèi)時，我們認為它們被分組在一起。來源：用戶測試

Spotify、迪士尼、Netflix等功能不會與其類別一起分組，并且似乎是浮動元素。為了使它更簡單，創(chuàng)建一個線框?qū)⒖雌饋硐襁@樣：

從上面的線框中可以看出，它比4個整體組件更可能是單個元素。因此，作為解決方案，共同區(qū)域原則：

我們新的線框與共同區(qū)域原則

在線框中，我們使用框邊將所有特征包含到它們各自的類別中，以便將它們視為一個而不是單個元素。以下是實施：

除了邊界框之外，我們用Plan Net 999替換了* Free Netflix六個月，并在Netflix元素的右上角用一個信息圖標（彩色黃色圖標）替代了功能列表的空間，一旦點擊，會出現(xiàn)一個工具提示。

總結(jié)，這是4格式塔原則，可以節(jié)省您的設(shè)計時間。還有更多的格式塔原理可以用作您的解決方案。

希望你也受用，祝開心！

本文翻譯來自Medium

感謝Psychology + design: Gestalt principles you can use as design solutions

原文作者：Medium

譯文作者：cherri二哈

譯文鏈接：https://www.jianshu.com/p/311939783be5

本文由 @cherri二哈 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)作者許可，禁止轉(zhuǎn)載

題圖來自 Pexels ，基于 CC0 協(xié)議