你工作中是否遇到過這樣的問題:
1、就是看著不太舒服,也說不出哪裡不對;
2、頁面元素散亂;
3、頁面看著單薄沒有層次。
...
那麼跟我一起來了解下格式塔原理吧。其實對于格式塔早有耳聞,甚至在工作中已經不知不覺的用到,但是對於其中的具體概念和應用場景沒有一個系統的學習與分析。於是決定對此做一個小小的總結,以便更清晰的解決工作中的一些不確定問題。
格式塔原理源於心理學,它最基本的概念就是整體大於各個部分的總和,給不完整的視覺信息找尋最直接最簡單的解讀方式。也就是說,我們的大腦會直接把肉眼所看到的內容篩選、分組、歸類、完整。而這都基于格式塔的幾個基本原則:
一些元素足夠近的時候,我們會把它們定義為一個整體。而那些距離較遠的,就自動將其視為其他組。在此主要強調位置。
文字部分信息之間間距較小,使用戶將其視為一個整體,與其他內容區分開來。而多個模塊之間間距較大。我們一眼看去,就能給界面明確劃分模塊:頂部導航、文字部分、卡片部分、配圖。雖然界面中的內容幾乎鋪滿,但是有序不散亂。
這個界面整體模塊間分塊清晰。圖文混排部分,使用親密原則將文字和圖片視為一個整體。利用間距空白形成各小組間的天然分割。
以上兩個界面,雖然沒有使用分割線與色塊做分割,但是元素間的間距大小對比使模塊關係都很清晰。原因是相同屬性的內容在一起會提高用戶的感知率,同時無關的元素要遠離,避免造成不必要的誤解。有時候界面會被說散,可能就是親密問題沒有把控好。
實操中要注意一個界面中不要有過多的間距,間距過多也會導致混亂不清。
人眼看到眾多元素在一起的時候,會自動將具有相似特性的元素(形狀、大小、顏色)視為一組。其中顏色屬性最為明顯。
因此我們做界面的時候可以將相同性質的元素做的近似,而需要重點突出的部分用顏色或者形狀區分。比如說界面中吸引用戶點擊轉化的按鈕可以用色彩進行區分。
又比如說列表中使用色塊或分割線將零散的元素圈成一個整體,引導用戶橫向閱讀。一方面使界面清晰,元素關係明確不散亂!另一方面引導用戶視覺。
表單中根據相似原則,利用分割線還有卡片,抵消距離的不確定感,避免因為距離混亂而不能明確將信息分組。
下面這個界面中比較明顯的是用灰色色塊,來將一組的內容框起來。圖中圖文部分比較親密,而和按鈕一行稍微有些疏遠,如果不用色塊做分割可能會造成迷惑。這就是利用了相似性原則引導用戶去將色塊中內容視為一個整體,使整個界面更加清晰。
下圖內容區域的三個模塊都使用了相似原則,在配色、排版以及配圖上都保持相似。整個界面看起來風格統一,比較和諧。
按一定規則連續排列的同種元素被感知為整體則視為連續原則。
人們視覺傾向於感知連續的形式而不是離散的碎片,通常人們會追隨某種連續的方向,視覺上把各個元素連結起來,且人們對於連續性的感知優先於相似性。
比如很多點組成的線,我們通常會把他們看成一條線,而不是很多點。這個原則不管是在界面,平面還是交互動效中都被廣泛的應用。
在界面中,卡片組利用漏出邊界引導用戶的視覺延續。讓用戶知道界面外還有內容,可以滑動觀看,以做到在有限的空間內展示更多的內容。
左圖也是卡片連續,滑動會有大小切換的效果,使界面狀態明確,有空間感,且這種效果使用戶在使用界面時更加流暢自然。
右圖界面左側線條和圓點將界面的內容連接起來,也是連續原則,起到引導用戶視線的作用
在logo設計中
尋找共同點連續,達到一個統一的整體。下面兩個logo都是由線組成的,但是我們第一視覺看到的是它的整體形態,而不是一根根單獨的線。
在交互中
在需要引導和指示的功能點中,通常會用到連續原則。比如引導頁、操作流程指示等,延續用戶的視覺方向,引導用戶操作。
封閉原則是人們通常在視覺上將尚未閉合的圖形看作一個完整的圖形。封閉性原理是對簡單原理的追隨,人們趨向將敞開的形態封閉、易於理解的完整形態。
比如下面兩個圖形,雖然是斷續的線組成的開放圖形,但是我們看到的就是圓形和方形,而不是多個線段。
圖標
斷點圖標就是典型的運用的封閉原則,雖然斷開依然不影響看整體的形態。但是在做成套斷點圖標時,要注意斷開的位置以及大小都要統一,比較複雜的圖標不適合做斷線。有個別不適合斷線的圖標,可以尋求其他的共同點與整體圖標保持統一,而不是強行斷線。
對稱是指物體或圖象對某一點、直線或平面而言,在大小、形狀和排列上相互對應。一般對稱給人的感覺是平衡、和諧。多用在平面設計中。一般在使用的時候為了避免單調,在平面設計中用到對稱的時候,經常會做不完全對稱處理。
我們在感知事物的時候,總是自動的將視覺區域分為主體和背景。一般在元素重疊的時候,我們會將上方小的元素視為主體,其他視為背景。
這裡比較典型的是界面中經常使用的彈窗設計,通過將當前的內容變暗,將之轉換成為背景,之後彈出燈箱,使用戶的視覺焦點轉移。
共同命運主要針對的是運動的元素,一起運動的物體被視為是具有共同命運的一組。就比如下圖中的圖片和左側的文字。
其實這種例子還有很多,比如底部導航欄切換時點擊和未點擊狀態的共同切換,可視為共同命運;還有界面中成組滑動的卡片等。
了解了這些基本的原理,在日常的素材搜集中還要多分析,看那些優秀的設計都使用了哪些原則,我們如何去將它好的點用在自己的設計中去。長此以往才能真正掌握,一起加油鴨~