「大產品小細節」5分鐘了解格式塔原則

前言

技術篇插播產品交互設計篇，今日早讀文章由 @jimmy授權分享。

正文從這開始～

這一篇「大產品小細節」想跟大家聊聊設計中很常用的一個心理學原則——格式塔原則。

一、格式塔原則

首先我想簡單介紹一下格式塔原則，格式塔原則分成五個部分：

相近（Proximity）：距離相近的各部分趨於組成整體

相似（Similarity）：在某一方面相似的各部分趨於組成整體

封閉（Closure）：彼此相屬、構成封閉實體的各部分趨於組成整體

連續（Continuity）：我們傾向於完整地連接一個圖形，而不是觀察殘缺的線條或形狀

簡單（Simplicity）：具有對稱、規則、平滑的簡單圖形特徵的各部分趨於組成整體

二、說明與舉例

1. 相近（Proximity）

人們通常把位置相對靠近的事物當成一個整體。我用一幅圖來說明一下：

同樣都是16個圓形，左圖你會把16個圓形當成一個整體；但是右邊那幅圖，上面8個圓形和下面8個圓形靠得更近，所以你會把上面8個圓形當成一個整體，下面8個當成另外一個整體。

這裡需要注意的是，相近性作為第一條原則，它的「權重」非常大，大到可以抵消其他原則，比如為上面的圓形添加顏色，甚至改變其形狀，人們也會把相近的事物當成一個整體：

那麼相近性原則的實際應用，又有哪些呢？

2. 相似（Similarity）

人們會把那些明顯具有共同特性（如形狀、大小、共同運動、方向、顏色等）的事物當成一個整體。比如下方第一幅圖，大家會把同行的正方形當成一個整體，其他圓形當成一個整體。第二幅圖，人們就會把大正方形當成整體，小正方形當成另一個整體。

而這裡需要注意的一點就是人們對形狀、大小、共同運動、方向、顏色的「感受權重」是不一樣的，在著這裡顏色屬性會覆蓋其他屬性的影響：

左邊這幅圖，大家會把正方形當成一個整體，加了顏色後的右圖，就變成豎列圓形+方形是個整體了。

全面提到了一個叫共同運動的東西，估計大家會很陌生，這裡我想以安卓的交互規範為例，說明共同運動。安卓的懸浮按鈕，就是一個用了相似性（共同運動）的設計，點擊右下角的分享，從下往上會出現多個操作按鈕，他們雖然 icon 不是一樣的，但是因為同樣是從下往上移動，所以人們會把他們當成一個整體。（這裡我想強調一點，前面提到的形狀、大小、共同運動、方向、顏色等條件，是可以組合使用的。這個懸浮按鈕實際上用了共同運動、相同形狀、同一顏色，從而達到相近性的目的。）

3. 封閉（Closure）

人會將不完全封閉的東西當成一個統一的整體，所以有些時候完全閉合是沒有必要的。比如世界自然基金會的 Logo，就是一個典型地用到封閉原則的設計：

熊貓的頭部和背部並沒有明顯的封閉界限，但是我們依然會把它當成一隻完整的熊貓。

那麼封閉性原則又在哪些使用呢？

這一原則其實很多地方都用到，不過我們一般不叫其為封閉性原則，而是叫截斷式設計。為了讓用戶感知到還有內容，一般我們會使用截斷式設計。像微信的錢包頁面，底部因為屏幕大小的關係被截掉了部分內容，但是用戶可以通過殘留的部分，「腦補」出下方仍然有個完整的整體：

4. 連續（Continuity）

我們傾向於完整地連接一個圖形，而不是觀察殘缺的線條或形狀。首先請大家看看這幅圖片：

大家覺得圖裡的是兩個圓形呢？還是兩個殘缺圓和一個兩圓相交的重合？

按照格式塔原則，我猜大家看到的應該是上方左邊的兩個圓形吧！

這個法則我們在交互設計上會用得比較少，但是在視覺設計中會多一點，比如某些應用就喜歡把 App Store 上的應用截圖做成連續的圖片。（歡迎大家留言說說哪些應用使用了連續原則哦~）

5. 簡單（Simplicity）

具有對稱、規則、平滑的簡單圖形特徵的各部分趨於組成整體。給大家看看一個例子：

左邊的界面就是個對稱頁面，所以我們會覺得左邊的各個卡片是個整體，下方還有一個新的卡片。但是右邊的卡片就不是了，因為整個頁面不是對稱的，用戶可能會疑惑右邊是不是還有卡片？

三、總結

看了這幾個例子，估計各位也發現，其實這幾個原則都是可以混合使用的。希望這篇文章可以幫助大家設計出更優秀的界面！不過，在這裡我想強調幾點：

1. 以前讀書的時候，對這些理論不屑一顧，但是真的工作後，才發現熟練使用這些理論可以極大地提高你的工作效率。

2. 原則不是一成不變的，熟練使用這些理論後，可以嘗試「打破」這些原則，說不定可以創造出更棒的效果！

關於本文

作者：@jimmy

知乎專欄：遲早會更新

點擊展開全文

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！