UI設(shè)計(jì)師的工作，每天面對(duì)各種屏幕在那“方寸之間”的地方尋求不同凡響的效果帝牡。UI設(shè)計(jì)師最擅長(zhǎng)的是將交互原型圖視覺化往毡，而UX設(shè)計(jì)師則擅長(zhǎng)于將需求轉(zhuǎn)化為可視化的原型圖。如果說UI設(shè)計(jì)比較感性靶溜，那么UX相對(duì)就比較理性开瞭。但是UI和UX有著共同的目的就是將產(chǎn)品體驗(yàn)變的更好。
之前我也從《UI設(shè)計(jì)師如何改版提升產(chǎn)品》和《改版提升產(chǎn)品——如何搭建產(chǎn)品結(jié)構(gòu)層罩息？》講述過著手提升產(chǎn)品體驗(yàn)的一些方法嗤详。兩篇文章分別從產(chǎn)品的體驗(yàn)要素和如何搭建產(chǎn)品的結(jié)構(gòu)，進(jìn)行了闡述瓷炮。而這篇文章我主要從產(chǎn)品的「框架層」來講述產(chǎn)品交互設(shè)計(jì)的交互原型圖（線框圖）和視覺設(shè)計(jì)的界面背后的“秘密”葱色。
作為設(shè)計(jì)師的你有沒有想過這個(gè)問題：這個(gè)界面我為什么要這樣布局界面信息。為什么要這樣去設(shè)計(jì)娘香？是什么支撐了它必須要這樣去設(shè)計(jì)苍狰？我經(jīng)常會(huì)想這個(gè)問題办龄。也許是性格緣故，做事習(xí)慣刨根問底舞痰，遇到問題土榴，就想要找出那個(gè)支撐事物的根源的依據(jù)。而我也發(fā)現(xiàn)界面設(shè)計(jì)是有跡可循的响牛，也就是設(shè)計(jì)是有原則的玷禽。而界面設(shè)計(jì)背后的這個(gè)原理則來源———格式塔原理支撐
其實(shí)產(chǎn)品設(shè)計(jì)所有的這些界面設(shè)計(jì)準(zhǔn)則是很相似的。這是為什么呢呀打？答案在于矢赁，所有設(shè)計(jì)準(zhǔn)則都基于人類心理學(xué)：人們?nèi)绾胃兄W(xué)習(xí)贬丛、推理撩银、記憶，以及把意圖轉(zhuǎn)換為行為豺憔。許多設(shè)計(jì)準(zhǔn)則至少有一些心理學(xué)背景额获，應(yīng)用在軟件系統(tǒng)設(shè)計(jì)上。
說到底恭应，用戶界面設(shè)計(jì)準(zhǔn)則是以人類心理學(xué)為基礎(chǔ)的抄邀。感知和認(rèn)知心理學(xué)的知識(shí)能使交互系統(tǒng)設(shè)計(jì)更具有可用性和是實(shí)用性。
格式塔原理就是根據(jù)人類感知和認(rèn)知心里而總結(jié)提煉的視覺規(guī)則昼榛。那么必然為我們視覺設(shè)計(jì)師境肾、交互設(shè)計(jì)師在設(shè)計(jì)產(chǎn)品時(shí)提供了理論依據(jù)。
下面是我總結(jié)的部分格式塔原理胆屿，我會(huì)分開一一闡述奥喻，我想等你把內(nèi)容讀完，應(yīng)該明白“為什么要這樣進(jìn)行設(shè)計(jì)的問題非迹？”像這種問題應(yīng)該有些許答案环鲤。
格式塔原理：
1.接近性
接近性原理是指，物體之間的距離會(huì)影響我們感知它們是否以及如何組織在一起的彻秆⌒ń剩互相靠近（相對(duì)于其他物體）的物體看起來屬于一組，而那些距離較遠(yuǎn)的就不是唇兑。
上圖我們一眼就可以識(shí)別，圖（1）是以行一行為一組桦锄，一共3行扎附；圖（2）是以列為組，一共3列结耀。我們的視覺認(rèn)知習(xí)慣就是這樣留夜，很容易把互相靠近的物體歸類為一組匙铡。
那這對(duì)我們平時(shí)設(shè)計(jì)有什么影響呢？我們既然了解到這個(gè)視覺認(rèn)知的原理碍粥，那在平時(shí)設(shè)計(jì)中有所運(yùn)用鳖眼？
上圖的界面，拋開界面配色外嚼摩，只從界面布局上看钦讳，很容易看出界面左側(cè)一豎排icons我們很自然會(huì)把它們歸類為一組，這就是格式塔原理的接近性原理枕面。
2.相似性
相似性原理指出了影響我們感知分組的另一個(gè)因素：如果其他因素相同愿卒，那么相似的物體看起來歸屬一組。
（如上圖1）我們很容易把上面第二排帶黑色邊框的菱形菱形視為一組潮秘，盡管12個(gè)菱形屬于一個(gè)整體琼开。我們還是一眼注意到三個(gè)帶黑色邊框的菱形。
下圖是我隨便截取的一個(gè)Mac OS的“語(yǔ)言地區(qū)”的設(shè)置界面枕荞，對(duì)話框使用了相似性原理柜候。界面右側(cè)這五個(gè)非常相似的選擇條，我們很容易把它歸類為一組躏精，五個(gè)選擇條并不緊挨著擺放渣刷，但因看起來足夠相似而顯得相關(guān)。
3.連續(xù)性
連續(xù)性原理是：我們視覺傾向于感知連續(xù)的形式而不是離散的碎片玉控。如下圖飞主，我們看到的不是兩端橙色線或兩段藍(lán)色線，也不是一個(gè)左藍(lán)右橙的“V”形高诺，位于一個(gè)左橙右藍(lán)的“V”形之上碌识。在圖”B“中我們看到的是一個(gè)水中的海怪，而不是一個(gè)三段身體的海怪虱而。
在圖形設(shè)計(jì)中筏餐，使用連續(xù)性一個(gè)廣為人知的例子就是IBM的標(biāo)志。它由非連續(xù)性的藍(lán)色組塊制成牡拇，但一目了然魁瞪，很容易看到三個(gè)粗體字，就像透過百葉窗看到的效果惠呼。（見下圖）
4.封閉性
封閉性原理：我們的視覺系統(tǒng)自動(dòng)嘗試將敞開的圖像關(guān)閉起來导俘，從而將其感知為完整的物體，而不是分散的碎片剔蹋。
如下圖：圖（1）可見它并不是一個(gè)閉合的原型旅薄，但是我們的視覺習(xí)慣會(huì)自覺把它的分段補(bǔ)充，把它看作一個(gè)圓形泣崩；圖（2）也是少梁，其實(shí)就是一個(gè)白色地上的幾塊黑色墨塊洛口，但是我們并不會(huì)這么認(rèn)為，而是把它看成一個(gè)熊貓圖案凯沪。
5.對(duì)稱性
對(duì)稱性原理抓住了我們觀察物體的三種傾向性：我們傾向分解復(fù)雜的場(chǎng)景來降低復(fù)雜度第焰。我們的視覺區(qū)域中的信息有不止一個(gè)可能的分析，但我們的視覺會(huì)自動(dòng)組織并解析數(shù)據(jù)妨马，從而簡(jiǎn)化這些數(shù)據(jù)并賦予它們對(duì)稱挺举。
例如：我們會(huì)將下圖（1）中左邊復(fù)雜的形狀看成是兩個(gè)疊加的菱形，而不是兩塊頂部對(duì)接的偶磚或者一個(gè)中心為小四方形的細(xì)腰八邊形身笤。一對(duì)疊加的菱形比其他兩個(gè)解釋更簡(jiǎn)單豹悬，它的邊更少且比另外兩個(gè)解釋更對(duì)稱。
6.主題／背景
我們大腦將視覺區(qū)域分為主題和背景液荸。主題包括一個(gè)場(chǎng)景中占據(jù)我們主要注意力的所有元素瞻佛，其它的則是背景。如下圖娇钱，我們很容易會(huì)把藍(lán)色視為黃色三角形的背景色伤柄。
那么在設(shè)計(jì)中有哪些運(yùn)用呢？其實(shí)也很常見文搂，我們經(jīng)常做的彈出層适刀，其實(shí)就運(yùn)用了這一原理。
7.共同命運(yùn)
共同命運(yùn)原理指出一起運(yùn)動(dòng)的物體被感知為屬于一組或者是彼此相關(guān)煤蹭。
如下圖笔喉，我們很容易就會(huì)把Chapter1，Chapter7硝皂，Chapter10常挚，Chapter12歸類為一組，因?yàn)樗麄儙讉€(gè)有著相同的運(yùn)動(dòng)趨勢(shì)稽物，這就是共同命運(yùn)原理奄毡。當(dāng)然這幾個(gè)文件夾運(yùn)用了相似性原理，灰度相同贝或，可見在一個(gè)場(chǎng)景中可以多個(gè)格式塔原理疊加使用吼过。
上述的七個(gè)格式塔原理，無時(shí)不刻的會(huì)出現(xiàn)在我們的產(chǎn)片設(shè)計(jì)咪奖、界面設(shè)計(jì)布局中盗忱。希望設(shè)計(jì)師們?cè)谠O(shè)計(jì)師界面的時(shí)候，不只是為了單純的為了設(shè)計(jì)而設(shè)計(jì)羊赵，更知道背后的視覺原理售淡，采用哪種方式去布局。這樣我們才會(huì)做到“有理有據(jù)”慷垮，并在今后的設(shè)計(jì)工作中合理運(yùn)用這些原理揖闸。
