發表日期 3/25/2022, 1:13:41 PM
編輯導語:産品設計要如何對用戶心理做好把握,在提升用戶使用體驗的同時,也能達成設計上的美觀追求?也許,你可以結閤格式塔心理學原則進行閤理的UI設計。本篇文章裏,作者就格式塔原則在産品設計中的應用做瞭解讀,一起來看一下。
今天給大傢分享格式塔心理學設計原理,它是由 麥剋斯・沃特海默 (Max Wertheimer)於1923年發錶的論文,成為最有影響力的早期建議。
格式塔原則 是任何 設計師 都可以 學習 的 重要思想集閤 ,它們的實現不僅可以極大地 改善設計的美觀性 ,而且還可以極大地 改善其設計美感 ,其功能和用戶友好性。
分享大綱:
臨近定律
相似原理
封閉原則
連續原則
對稱原理
共同命運原則
圖地原理
一、鄰近定律
彼此靠近的事物比彼此隔開的事物關聯性更強。我們的大腦將這些緊密放置的元素集閤視為一組,臨近定律可以 更清晰知道元素之間關係 ,在UI這種運用比較廣泛。
那麼它在UI中如何應用?
左側卡片中,文字排版有點分散,導緻信息理解會誤判。右側卡片中文字排版信息集中,便於錶達同一個主題。
二、相似原理
具有 相似 視覺 外觀 的元素 更容易 被用戶認為是同類物體。在格式塔理論中,對相似元素進行視覺分組,可通過 顔色 、 形狀 、 大小 等將其安排在一起。
上圖中左側雖然間距大小一樣,但是 色彩不一樣 ,我們視知覺會自動將兩種顔色分彆視為兩組。
如何應用到UI設計中?
如上圖 ,在UI設計中,兩個 按鈕大小形狀一樣 , 顔色 不一樣,因此我們會將其視為兩種重要程度的功能。
由於相似原理,我們知道, 有顔色字體 是可以進行 點擊 操作的。 相似性可以讓整個UI係統更加一緻性,體驗更友好。
三、封閉原則
當對象不完整時,我們更喜歡完整的形狀,因此我們自動填充元素之間的間隙以感知完整的圖像,例如 形狀 、 字母 、 圖片 等。具體來說,當整個圖片的某些部分丟失時,我們的感知將填補視覺上的空白。
網上很齣名的一張圖
如上動圖中,即使小狗元素用 不規則 小點 組成,但是我們也能識彆齣來。
如何應用到UI設計中?
封閉原則在加載指示器中運用較多,這樣便於用戶理解。左側加載過於分散,無法讓用戶聯想到加載,因此右側思路與封閉原則有著一緻思路。
封閉原則在圖形LOGO設計中也是屢見不鮮。
四、連續原則
連續定律一般由 一條直綫 或者 麯綫 的端點為起點,一直延續下去達到終點,我們感知傾嚮於對象是以直綫或者麯綫的 形式 排列起來更為相關性。
如何應用到UI設計中?
在標簽欄設計中,我們把橫嚮連接在一起的視為一組,錶達一個功能含義。
上圖Apple和Medium的設計中,將標簽橫嚮排列一組,便於用戶橫嚮滑動找到對應功能。
五、對稱原理
我們的大腦將對稱對象視為同一組的一部分。他們給人以穩定和秩序的印象,對稱的UI元素有助於 掃描內容 和 瀏覽信息 。
如何應用到UI設計中?
在 誇剋 和 Naver 産品設計中,底部圖標網格菜單,采用對稱平衡手法,將功能排布在宮格列錶上。
六、共同命運原則
共同命運原則(law of common fate)是指在其他條件相同時, 朝同一方運動 和 具有相同速度 的元素會被組織在一起。
該原理是運動設計的基礎。每個有意義的動畫都會使用共同的命運來以正確的方式引導用戶的視綫。這有助於將內容與觸發的動作聯係起來。
如何應用到UI設計中?
如上圖,嚮左滑動可以顯示更多的內容,因此在設計時候就需要保證在統一方嚮上,讓它們有著共同屬性。
七、圖地原理
人眼能夠根據不同的聚焦計劃分離對象。我們直觀地知道哪些元素放置在前景中,哪些元素放置在背景中。
在模態彈齣窗口時,就可以見證“圖形地麵原則”的實際使用。
如上在彈窗設計中,我們經常會將背景疊加黑色便於突齣前景彈窗內容。
上圖中在版式上使用 圖地原則 ,清晰區分信息層級,通過 圓形 和 鞋子前後 關係,營造視覺焦點。
八、總結一下
格式塔心理學知識在UI設計中的運用遠遠要比我今天說得要多,大傢可以在項目實踐中去慢慢理解運用。這是個比較重要的設計理論學術,希望大傢可以掌握後學以緻用。
#專欄作傢#
Tony,微信公眾號:功夫體驗設計,人人都是産品經理專欄作傢。百度視覺體驗設計師,一直堅持原創文章,樂於幫助新人。擅長作品集指導、筆試題指導、UI視覺創意、設計趨勢風格等。
本文原創發布於人人都是産品經理。未經許可,禁止轉載。
題圖來自Unsplash,基於CC0協議