編輯導語:産品設計要如何對使用者心理做好把握,在提升使用者使用體驗的同時,也能達成設計上的美觀追求?也許,你可以結合格式塔心理學原則進行合理的UI設計。本篇文章裡,作者就格式塔原則在産品設計中的應用做了解讀,一起來看一下。
今天給大家分享格式塔心理學設計原理,它是由麥克斯·沃特海默(Max Wertheimer)于1923年發表的論文,成為最有影響力的早期建議。
格式塔原則是任何設計師都可以學習的重要思想集合,它們的實作不僅可以極大地改善設計的美觀性,而且還可以極大地改善其設計美感,其功能和使用者友好性。
分享大綱:
臨近定律
相似原理
封閉原則
連續原則
對稱原理
共同命運原則
圖地原理
一、鄰近定律
彼此靠近的事物比彼此隔開的事物關聯性更強。我們的大腦将這些緊密放置的元素集合視為一組,臨近定律可以更清晰知道元素之間關系,在UI這種運用比較廣泛。
那麼它在UI中如何應用?
左側卡片中,文字排版有點分散,導緻資訊了解會誤判。右側卡片中文字排版資訊集中,便于表達同一個主題。
二、相似原理
具有相似視覺外觀的元素更容易被使用者認為是同類物體。在格式塔理論中,對相似元素進行視覺分組,可通過顔色、形狀、大小等将其安排在一起。

上圖中左側雖然間距大小一樣,但是色彩不一樣,我們視知覺會自動将兩種顔色分别視為兩組。
如何應用到UI設計中?
如上圖 ,在UI設計中,兩個按鈕大小形狀一樣,顔色不一樣,是以我們會将其視為兩種重要程度的功能。
由于相似原理,我們知道,有顔色字型是可以進行點選操作的。相似性可以讓整個UI系統更加一緻性,體驗更友好。
三、封閉原則
當對象不完整時,我們更喜歡完整的形狀,是以我們自動填充元素之間的間隙以感覺完整的圖像,例如形狀、字母、圖檔等。具體來說,當整個圖檔的某些部分丢失時,我們的感覺将填補視覺上的空白。
網上很出名的一張圖
如上動圖中,即使小狗元素用不規則小點組成,但是我們也能識别出來。
封閉原則在加載訓示器中運用較多,這樣便于使用者了解。左側加載過于分散,無法讓使用者聯想到加載,是以右側思路與封閉原則有着一緻思路。
封閉原則在圖形LOGO設計中也是屢見不鮮。
四、連續原則
連續定律一般由一條直線或者曲線的端點為起點,一直延續下去達到終點,我們感覺傾向于對象是以直線或者曲線的形式排列起來更為相關性。
在标簽欄設計中,我們把橫向連接配接在一起的視為一組,表達一個功能含義。
上圖Apple和Medium的設計中,将标簽橫向排列一組,便于使用者橫向滑動找到對應功能。
五、對稱原理
我們的大腦将對稱對象視為同一組的一部分。他們給人以穩定和秩序的印象,對稱的UI元素有助于掃描内容和浏覽資訊。
在誇克和Naver産品設計中,底部圖示網格菜單,采用對稱平衡手法,将功能排布在宮格清單上。
六、共同命運原則
共同命運原則(law of common fate)是指在其他條件相同時,朝同一方運動和具有相同速度的元素會被組織在一起。
該原理是運動設計的基礎。每個有意義的動畫都會使用共同的命運來以正确的方式引導使用者的視線。這有助于将内容與觸發的動作聯系起來。
如上圖,向左滑動可以顯示更多的内容,是以在設計時候就需要保證在統一方向上,讓它們有着共同屬性。
七、圖地原理
人眼能夠根據不同的聚焦計劃分離對象。我們直覺地知道哪些元素放置在前景中,哪些元素放置在背景中。
在模态彈出視窗時,就可以見證“圖形地面原則”的實際使用。
如上在彈窗設計中,我們經常會将背景疊加黑色便于突出前景彈窗内容。
上圖中在版式上使用圖地原則,清晰區分資訊層級,通過圓形和鞋子前後關系,營造視覺焦點。
八、總結一下
格式塔心理學知識在UI設計中的運用遠遠要比我今天說得要多,大家可以在項目實踐中去慢慢了解運用。這是個比較重要的設計理論學術,希望大家可以掌握後學以緻用。
#專欄作家#
Tony,微信公衆号:功夫體驗設計,人人都是産品經理專欄作家。百度視覺體驗設計師,一直堅持原創文章,樂于幫助新人。擅長作品集指導、筆試題指導、UI視覺創意、設計趨勢風格等。
本文原創釋出于人人都是産品經理。未經許可,禁止轉載。
題圖來自Unsplash,基于CC0協定