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