大產(chǎn)品小細(xì)節(jié)！5分鐘了解格式塔原則

金蝶云之家體驗(yàn)部交互設(shè)計(jì)師-王梓銘：這一篇「大產(chǎn)品小細(xì)節(jié)」想跟大家聊聊設(shè)計(jì)中很常用的一個(gè)生理學(xué)原則——格式塔原則。

一. 格式塔原則

首先我想簡(jiǎn)單介紹一下格式塔原則，格式塔原則分成五個(gè)部分：

• 相近（Proximity）：距離相近的各部分趨于組成團(tuán)體。
• 相似（Similarity）：在某一方面相似的各部分趨于組成團(tuán)體。
• 封閉（Closure）：彼此相屬、構(gòu)成封閉實(shí)體的各部分趨于組成團(tuán)體。
• 延續(xù)（Continuity）：我們傾向于完備地連接一個(gè)圖形，而不是觀察殘缺的線條或外形。
• 簡(jiǎn)單（Simplicity）：具有對(duì)稱、規(guī)則、平滑的簡(jiǎn)單圖形特性的各部分趨于組成團(tuán)體。

二. 說(shuō)明與舉例

相近（Proximity）

人們通常把位置相對(duì)靠近的事物當(dāng)成一個(gè)團(tuán)體。我用一幅圖來(lái)說(shuō)明一下：

同樣都是16個(gè)圓形，你會(huì)把左圖的16個(gè)圓形當(dāng)成一個(gè)團(tuán)體；但是右邊那幅圖，上面8個(gè)圓形和下面8個(gè)圓形分別靠近，所以你會(huì)把上面8個(gè)圓形當(dāng)成一個(gè)團(tuán)體，下面8個(gè)當(dāng)成另外一個(gè)團(tuán)體。

這里必要細(xì)致的是，相近性作為第一條原則，它的「權(quán)重」特別很是大，大到可以抵消其他原則，比如為上面的圓形添加顏色，甚至改變其外形，人們也會(huì)把相近的事物當(dāng)成一個(gè)團(tuán)體：

那么相近性原則的現(xiàn)實(shí)應(yīng)用，又有哪些呢？

最常見的地方就在一些功能列表網(wǎng)頁(yè)，比如設(shè)置，或者像微信的「發(fā)現(xiàn)」網(wǎng)頁(yè)那樣的功能列表網(wǎng)頁(yè)。大家會(huì)把「掃一掃」和「搖一搖」、「購(gòu)物」和「游戲」當(dāng)成一個(gè)團(tuán)體，如許可以使界面顯得更加清晰，同時(shí)還能凸起重點(diǎn)，這個(gè)列表的兩頭現(xiàn)實(shí)上是最凸起的，像「同伙圈」和「小程序」。假如沒(méi)有使用格式塔的相近原則，界面就會(huì)顯得特別很是紊亂了。

相似（Similarity）

人們會(huì)把那些顯明具有共同特征（如外形、大小、共同運(yùn)動(dòng)、方向、顏色等）的事物當(dāng)成一個(gè)團(tuán)體。比如下方第一幅圖，大家會(huì)把偕行的正方形當(dāng)成一個(gè)團(tuán)體，其他圓形當(dāng)成一個(gè)團(tuán)體。第二幅圖，人們就會(huì)把大正方形當(dāng)成團(tuán)體，小正方形當(dāng)成另一個(gè)團(tuán)體。

而這里必要細(xì)致的一點(diǎn)是人們對(duì)外形、大小、共同運(yùn)動(dòng)、方向、顏色的「感受權(quán)重」是不一樣的，在這里顏色屬性會(huì)覆蓋其他屬性的影響：

左邊這幅圖，大家會(huì)把正方形當(dāng)成一個(gè)團(tuán)體，加了顏色后的右圖，就變成豎列圓形+方形是個(gè)團(tuán)體了。

周全提到了一個(gè)叫共同運(yùn)動(dòng)的東西，估計(jì)大家會(huì)很陌生，這里我想以安卓的交互規(guī)范為例，說(shuō)明共同運(yùn)動(dòng)。安卓的懸浮按鈕，就是一個(gè)用了相似性（共同運(yùn)動(dòng)）的設(shè)計(jì)，點(diǎn)擊右下角的分享，從下往上會(huì)出現(xiàn)多個(gè)操作按鈕，雖然 icon 不是一樣的，但是由于同樣是從下往上移動(dòng)，所以人們會(huì)把他們當(dāng)成一個(gè)團(tuán)體。（這里我想強(qiáng)調(diào)一點(diǎn)，前面提到的外形、大小、共同運(yùn)動(dòng)、方向、顏色等條件，是可以組合使用的。這個(gè)懸浮按鈕現(xiàn)實(shí)上用了共同運(yùn)動(dòng)、雷同外形、統(tǒng)一顏色，從而達(dá)到相近性的目的。）

封閉（Closure）

人會(huì)將不完全封閉的東西當(dāng)成一個(gè)同一的團(tuán)體，所以有些時(shí)候完全閉合是沒(méi)有需要的。比如世界天然基金會(huì)的 Logo，就是一個(gè)典型地用到封閉原則的設(shè)計(jì)：

熊貓的頭部和背部并沒(méi)有顯明的封閉界限，但是我們依然會(huì)把它當(dāng)成一只完備的熊貓。

那么封閉性原則又在哪些地方使用呢？

這一原則其實(shí)許多地方都用到，不過(guò)我們一樣平常不叫其為封閉性原則，而是叫截?cái)嗍皆O(shè)計(jì)。為了讓用戶感知到還有內(nèi)容，一樣平常我們會(huì)使用截?cái)嗍皆O(shè)計(jì)。像微信的錢包網(wǎng)頁(yè)，底部由于屏幕大小的關(guān)系被截掉了部分內(nèi)容，但是用戶可以通過(guò)殘留的部分，“腦補(bǔ)”出下方仍然有個(gè)完備的團(tuán)體：

延續(xù)（Continuity）

我們傾向于完備地連接一個(gè)圖形，而不是觀察殘缺的線條或外形。首先請(qǐng)大家看看這幅圖片：

大家覺得圖里的是兩個(gè)圓形呢？照舊兩個(gè)殘缺圓和一個(gè)兩圓相交的重合？

按照格式塔原則，我猜大家看到的應(yīng)該是上方左邊的兩個(gè)圓形吧。

這個(gè)法則我們?cè)诮换ピO(shè)計(jì)上用得比較少，但是在視覺設(shè)計(jì)中會(huì)用得多一點(diǎn)，比如某些應(yīng)用就喜好把 App Store 上的應(yīng)用截圖做成延續(xù)的圖片。

簡(jiǎn)單（Simplicity）

具有對(duì)稱、規(guī)則、平滑的簡(jiǎn)單圖形特性的各部分趨于組成團(tuán)體。給大家看看一個(gè)例子：

左邊的界面就是個(gè)對(duì)稱網(wǎng)頁(yè)，所以我們會(huì)覺得左邊的各個(gè)卡片是個(gè)團(tuán)體，下方還有一個(gè)新的卡片。但是右邊的卡片就不是了，由于整個(gè)網(wǎng)頁(yè)不是對(duì)稱的，用戶可能會(huì)迷惑右邊是不是還有卡片。

三. 總結(jié)

看了這幾個(gè)例子，估計(jì)各位也發(fā)現(xiàn)，其實(shí)這幾個(gè)原則都是可以混合使用的。盼望這篇文章可以幫助大家設(shè)計(jì)出更良好的界面！不過(guò)，在這里我想強(qiáng)調(diào)幾點(diǎn)：

曩昔讀書的時(shí)候，對(duì)這些理論不屑一顧，但是真的工作后，才發(fā)現(xiàn)諳練使用這些理論可以極大地進(jìn)步你的工作服從。

原則不是刻舟求劍的，諳練使用這些理論后，可以嘗試「打破」這些原則，說(shuō)不定可以創(chuàng)造出更棒的結(jié)果！

迎接關(guān)注微信公眾號(hào)：「UXD-Cloudhub」