2020-12-1 ui設計分享達人
設計源于生活,本文通過生活視角溯源格式塔原理,從生活到界面設計感受格式塔原理應用在方方面面。
一、什么是格式塔原理
格式塔即Gestalt,是德語中“形狀”和“圖形”的意思。是基于心理學對人類視覺系統的研究,人類的視覺系統自動對視覺輸入構建結構。
最重要的格式塔原理有:接近性原理、相似性原理、連續性原理、封閉性原理、對稱性原理、主體/背景原理、共同命運體 原理。
下面將進行詳細分述
視覺會把互相靠近的物體看成一組,反之則不是。
下方示意圖中A被看作三排,B被看作三列
【 生活中】
無論是在看閱兵還是軍訓,我們都有所經歷,左右間距為一拳,前后間距為一臂。
列與列之間的間距遠大于每個人之間的間距,互相靠近的則被看作一列。
(圖片來源于網絡,僅供交流學習)
【界面設計中】
個人中心中,同一組信息之間的間距遠小于不同組,下圖中我們明顯可以感知到7組由圖標和文字組成的信息。
(圖片來源于網絡,僅供交流學習)
建議
設計過程當中可以控制元素與元素之間的間距,從而對元素進行視覺分組,就像排隊一樣,有利于元素排列更有規律,主次分明,易于用戶獲取信息。
視覺會把相似的物體看成一組,反之則不是
下方示意圖中顏色相似的被看成一組,顏色較深的兩個圓被看作一組
【 生活中】
大家都玩過跳棋,在全部棋子形狀相同的情況下,通過顏色進行陣營區分。相同顏色的棋子很容易區分被分為一個陣營。
(圖片來源于網絡,僅供交流學習)
【界面設計中】
下圖中01、02、03三個圖標區域呈現不同的圖標樣式,通過樣式的相似性進行了合理分組,體現了個人中心圖標的強弱層級。
建議
設計過程當中可以通過制造相似性,包括:顏色、形狀、格式、質感等,使某些對象在視覺上成組。
視覺傾向于感知連續性,而不是零散的事物
下圖中我們更傾向于把圖形看作為兩條不同顏色的線交疊,甚至是一個X。而不是一條淺色線段,兩條深色線段
【 生活中】
被切開的水果我們依然可以感受到完整的樣子,一看便知這是一個完整的橙子被切開之后的樣子
(圖片來源于網絡,僅供交流學習)
【界面設計中】
利用連續性原理,我們將上圖中的會員等級曲線看成是完整的曲線,而不是兩段不同顏色的曲線
利用連續性,下圖中依然可以感受到完整的一盤食物
(圖片來源于網絡,僅供交流學習)
建議
設計中可以利用連續性原理,只露出部分元素暗示完整元素,或用連續性來暗示走向趨勢等。
視覺會將敞開的圖形封閉起來,從而感知完整的物體
下圖中我們不會將其看作三段曲線,而是很容易感知到是一個圓
【 生活中】
劃分停車位的時候,即使不畫出四面封閉的四邊形,我們依然可以感知到完整的四邊形車位
(圖片來源于網絡,僅供交流學習)
【界面設計中】
下圖中的斷點式icon設計,即使圖形沒有完全連續,我們依然可以感受到完整的圖形
(圖片來源于網絡,僅供交流學習)
建議
設計中可以利用封閉性原理合理刪減、斷點等方式增加設計感、豐富度,強化頁面趣味感、精細度
視覺會將復雜物體解析為符合對稱規律的更簡單的物體,從而降低復雜性
我們可以很快感知到下圖是兩個圓交疊,而不是其他更復雜的圖形,因為一對圓的復雜度遠小于其他
【 生活中】
河對岸的房子倒影在水面上,我們通常會最快地自動解析出水平的對稱線,將其視為上下對稱的兩組房子
(圖片來源于網絡,僅供交流學習)
【界面設計中】
下圖的網頁排版,我們的視覺自動梳理出了左右對稱的規律,即使左右的顏色并不一樣,也有其他小字信息干擾。但對稱的解析方式極大地降低了頁面的復雜性
(圖片來源于網絡,僅供交流學習)
建議
設計中復雜圖形可以通過簡單圖形復用得出,降低視覺理解難度。復雜的排版中可以制造對稱性,從而降低頁面的理解成本。
視覺將聚焦部分解析為主體其余解析為背景,或改變焦點時呈現不同的主體
大的矩形和圓形交疊時,我們傾向于把小的看作主體,矩形則視為背景。
【 生活中】
下圖中將深色區域視為主體時我們看到了建筑,把淺色視為主體時我們看到了五角星,在五角星中我們把美隊看作主體,天空看作背景
(圖片來源于網絡,僅供交流學習)
【界面設計中】
下圖中彈窗的出現轉移了頁面的主體
(圖片來源于網絡,僅供交流學習)
建議
可以通過控制主體與背景,改變用戶視線焦點,從而起到引導用戶視覺的目的。
一起運動的物體被感知成一組或彼此關聯
下圖中三個運動的小球被看作一組
【 生活中】
舞蹈表演中,通向運動的舞蹈演員被我們歸位同一組
(資料來源于網絡,僅供交流學習)
【界面設計中】
背景的文字擁有一致的運動速度,因此原本零散的文字在動效過程中被我們視為同一層元素
(資料來源于網絡,僅供交流學習)
建議
設計中不僅可以通過接近性、相似性,還可以通過同樣的動態特征將物體成組,減少視覺凌亂感。
文章來源:UI中國 作者:JuneW
藍藍設計( ssll180.com )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務