UI設計乾貨丨格式塔原理讓排版變得簡單

格式塔是一種視覺感知的理論,是研究人們視覺如何將元素組織成群體或整體,從而視覺上進行分類,在設計中,我們使用格式原理能使得我們設計更科學性,更具吸引力。通過格式塔效應,去處理設計中的點、線、面、顏色、空間和形狀的分組排版,格式塔原理很重要,它是一切排版的基礎,我們需要了解我們的心理是如何感知視覺。

什 麼 是 格 式 塔 原 理 ?

格式塔是1890年德國哲學和心理學首先引入的概念,它的原理是,我們的視覺系統自動對視覺輸入構建結構,並且在系統層感官形狀,圖形和物體,自動形式一個認知,而不是隻看到互不相連的邊、線和區域。

大家看圖理解,大家看下面這張圖,“不存在的三角形”我們對一個三角形的認知,並非純粹從三角形的形狀,大小感官而來,還包括我們過去對於三角形的經驗和印象,加在一起就是我們對一個三角形的認知。

UI設計乾貨丨格式塔原理讓排版變得簡單

格 式 塔 重 要 的 幾 個 原 理

UI設計乾貨丨格式塔原理讓排版變得簡單

▲ 相似原理:我們潛意識會把更緊密的事物將被視為屬於一起一組。

UI設計乾貨丨格式塔原理讓排版變得簡單

▲ 對稱原理:我們的思維傾向於將對象視為在中心點對稱,並且去均勻分割這些元素找到平衡。

UI設計乾貨丨格式塔原理讓排版變得簡單

▲ 連續性原理:我們視覺系統傾向於連續性,視覺系統傾向於感知連續的形式而不是離散的碎片。

UI設計乾貨丨格式塔原理讓排版變得簡單

▲ 封閉原理:視覺系統自動嘗試將敞開的圖形關閉起來,從而將其感知為完整的物體而不是分散的碎片。

UI設計乾貨丨格式塔原理讓排版變得簡單

▲ 共同命運原理:一起運動的物體被感知為屬於一組或者彼此相關的。

UI設計乾貨丨格式塔原理讓排版變得簡單

▲ 主體背景原理:我們的大腦將視覺區域分為主體和背景,主體包括一個場景中佔據我們主要注意力的所有元素,其餘的則是背景。

那麼設計中我們需要去如何運用這些原理呢?下面我做些簡單分析和案例。

1.緊密原理/相似性原理

緊密原理

我們潛意識會把更緊密的事物將被視為屬於一起一組。

UI設計乾貨丨格式塔原理讓排版變得簡單

▲ 左圖挨著更近為一組 ,右圖分3個為1組,2個為1組

相似原理

具有相同特徵(形狀、顏色、陰影、質量、方向)的東西將被視為屬於一起。

UI設計乾貨丨格式塔原理讓排版變得簡單

UI設計乾貨丨格式塔原理讓排版變得簡單

舉個栗子

在日常設計中,我們面對信息比較少的,可以採用緊密原則,根據信息熟悉進行分類,讓信息看起來更有秩序。

UI設計乾貨丨格式塔原理讓排版變得簡單

UI設計乾貨丨格式塔原理讓排版變得簡單

▲ 淘寶網導航菜單就是運用這種原則,根據產品類別一致性,進行同類分類,就是使用的格式塔緊密原則。

UI設計乾貨丨格式塔原理讓排版變得簡單

UI設計乾貨丨格式塔原理讓排版變得簡單

▲ 反例:底部一排大部分是可以鏈接,紅圈部分無鏈接。

緊密和相似共用案例

UI設計乾貨丨格式塔原理讓排版變得簡單

UI設計乾貨丨格式塔原理讓排版變得簡單

2.對稱原理

我們的思維傾向於分解複雜場景為簡單場景,我們會自覺把周圍的物體圍繞著中心點,這個原則指出,組合不應該提供混亂或不平衡的感覺。否則,用戶視線將花費時間嘗試找到丟失的元素或修復。

所以在設計中,我們應該去製造這種中心對稱,平衡感。

UI設計乾貨丨格式塔原理讓排版變得簡單

UI設計乾貨丨格式塔原理讓排版變得簡單

▲ 製造平衡感,左右對稱

UI設計乾貨丨格式塔原理讓排版變得簡單

UI設計乾貨丨格式塔原理讓排版變得簡單

UI設計乾貨丨格式塔原理讓排版變得簡單

3.連續性原理

我們視覺系統傾向於連續性,視覺系統傾向於感知連續的形式而不是離散的碎片。

連續性是沿著道路,河流,海灘,山川,臺階,線條或曲線繪製眼睛的連續原則。

UI設計乾貨丨格式塔原理讓排版變得簡單

UI設計乾貨丨格式塔原理讓排版變得簡單

▲ 圖中你看見的是藍色和黃色線的物理交叉是很連續的,而並非是四條線相遇在終點。

在網頁和界面設計中,最基本的原則是讓用戶看到後知道點什麼,設計師需要做的是最大限度地提高可點擊性的感知能力。

UI設計乾貨丨格式塔原理讓排版變得簡單

UI設計乾貨丨格式塔原理讓排版變得簡單

設計界面時,我們需要引導用戶的眼睛遵循一定的路徑,通過視覺手段突出我們想表達的元素,來製造出一條視覺層級排列元素,幫助用戶完成任務。

UI設計乾貨丨格式塔原理讓排版變得簡單

▲ 這些icon都說使用連續性原理,它們的方向,秩序是連續的有方向的。

UI設計乾貨丨格式塔原理讓排版變得簡單

▲ 我們視覺系統對方向的識別,會自動把上下圖形像馬路一樣延伸出去。

UI設計乾貨丨格式塔原理讓排版變得簡單

▲ 我們視覺系統對方向的識別會自動把圖形注意點集中到中間縱向衝擊的點。

UI設計乾貨丨格式塔原理讓排版變得簡單

▲ 我們視覺系統對文字的識別會自動把兩側的文字連續性補全。

UI設計乾貨丨格式塔原理讓排版變得簡單

▲我們視覺系統對形狀的識別會自動把遮住的半片封面膠片補全。

總 結

格式塔更多是一種人們心理潛意識排版原理,我們需要了解它並靈活運用它,使得我們的設計更科學,更具有吸引力,格式塔在網頁設計、平面設計、UI設計中都無處不在;

以上靈感素材來自愛集網

覺得沒看夠的話,請點擊下方“瞭解更多”,更多靈感圖片訪問愛集網,配色、排版、文案一應俱全


分享到:


相關文章: