UI設(shè)計(jì)師的工作，每天面對(duì)各種屏幕在那“方寸之間”的地方尋求不同凡響的效果。UI設(shè)計(jì)師最擅長(zhǎng)的是將交互原型圖視覺(jué)化，而UX設(shè)計(jì)師則擅長(zhǎng)于將需求轉(zhuǎn)化為可視化的原型圖。如果說(shuō)UI設(shè)計(jì)比較感性，那么UX相對(duì)就比較理性。但是UI和UX有著共同的目的就是將產(chǎn)品體驗(yàn)變的更好。
之前我也從《UI設(shè)計(jì)師如何改版提升產(chǎn)品》和《改版提升產(chǎn)品——如何搭建產(chǎn)品結(jié)構(gòu)層？》講述過(guò)著手提升產(chǎn)品體驗(yàn)的一些方法。兩篇文章分別從產(chǎn)品的體驗(yàn)要素和如何搭建產(chǎn)品的結(jié)構(gòu)，進(jìn)行了闡述。而這篇文章我主要從產(chǎn)品的「框架層」來(lái)講述產(chǎn)品交互設(shè)計(jì)的交互原型圖（線框圖）和視覺(jué)設(shè)計(jì)的界面背后的“秘密”。
作為設(shè)計(jì)師的你有沒(méi)有想過(guò)這個(gè)問(wèn)題：這個(gè)界面我為什么要這樣布局界面信息。為什么要這樣去設(shè)計(jì)？是什么支撐了它必須要這樣去設(shè)計(jì)？我經(jīng)常會(huì)想這個(gè)問(wèn)題。也許是性格緣故，做事習(xí)慣刨根問(wèn)底，遇到問(wèn)題，就想要找出那個(gè)支撐事物的根源的依據(jù)。而我也發(fā)現(xiàn)界面設(shè)計(jì)是有跡可循的，也就是設(shè)計(jì)是有原則的。而界面設(shè)計(jì)背后的這個(gè)原理則來(lái)源———格式塔原理支撐
其實(shí)產(chǎn)品設(shè)計(jì)所有的這些界面設(shè)計(jì)準(zhǔn)則是很相似的。這是為什么呢？答案在于，所有設(shè)計(jì)準(zhǔn)則都基于人類心理學(xué)：人們?nèi)绾胃兄?、學(xué)習(xí)、推理、記憶，以及把意圖轉(zhuǎn)換為行為。許多設(shè)計(jì)準(zhǔn)則至少有一些心理學(xué)背景，應(yīng)用在軟件系統(tǒng)設(shè)計(jì)上。
說(shuō)到底，用戶界面設(shè)計(jì)準(zhǔn)則是以人類心理學(xué)為基礎(chǔ)的。感知和認(rèn)知心理學(xué)的知識(shí)能使交互系統(tǒng)設(shè)計(jì)更具有可用性和是實(shí)用性。
格式塔原理就是根據(jù)人類感知和認(rèn)知心里而總結(jié)提煉的視覺(jué)規(guī)則。那么必然為我們視覺(jué)設(shè)計(jì)師、交互設(shè)計(jì)師在設(shè)計(jì)產(chǎn)品時(shí)提供了理論依據(jù)。
下面是我總結(jié)的部分格式塔原理，我會(huì)分開(kāi)一一闡述，我想等你把內(nèi)容讀完，應(yīng)該明白“為什么要這樣進(jìn)行設(shè)計(jì)的問(wèn)題？”像這種問(wèn)題應(yīng)該有些許答案。
格式塔原理：
1.接近性
接近性原理是指，物體之間的距離會(huì)影響我們感知它們是否以及如何組織在一起的。互相靠近（相對(duì)于其他物體）的物體看起來(lái)屬于一組，而那些距離較遠(yuǎn)的就不是。
上圖我們一眼就可以識(shí)別，圖（1）是以行一行為一組，一共3行；圖（2）是以列為組，一共3列。我們的視覺(jué)認(rèn)知習(xí)慣就是這樣，很容易把互相靠近的物體歸類為一組。
那這對(duì)我們平時(shí)設(shè)計(jì)有什么影響呢？我們既然了解到這個(gè)視覺(jué)認(rèn)知的原理，那在平時(shí)設(shè)計(jì)中有所運(yùn)用？
上圖的界面，拋開(kāi)界面配色外，只從界面布局上看，很容易看出界面左側(cè)一豎排icons我們很自然會(huì)把它們歸類為一組，這就是格式塔原理的接近性原理。
2.相似性
相似性原理指出了影響我們感知分組的另一個(gè)因素：如果其他因素相同，那么相似的物體看起來(lái)歸屬一組。
（如上圖1）我們很容易把上面第二排帶黑色邊框的菱形菱形視為一組，盡管12個(gè)菱形屬于一個(gè)整體。我們還是一眼注意到三個(gè)帶黑色邊框的菱形。
下圖是我隨便截取的一個(gè)Mac OS的“語(yǔ)言地區(qū)”的設(shè)置界面，對(duì)話框使用了相似性原理。界面右側(cè)這五個(gè)非常相似的選擇條，我們很容易把它歸類為一組，五個(gè)選擇條并不緊挨著擺放，但因看起來(lái)足夠相似而顯得相關(guān)。
3.連續(xù)性
連續(xù)性原理是：我們視覺(jué)傾向于感知連續(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è)粗體字，就像透過(guò)百葉窗看到的效果。（見(jiàn)下圖）
4.封閉性
封閉性原理：我們的視覺(jué)系統(tǒng)自動(dòng)嘗試將敞開(kāi)的圖像關(guān)閉起來(lái)，從而將其感知為完整的物體，而不是分散的碎片。
如下圖：圖（1）可見(jiàn)它并不是一個(gè)閉合的原型，但是我們的視覺(jué)習(xí)慣會(huì)自覺(jué)把它的分段補(bǔ)充，把它看作一個(gè)圓形；圖（2）也是，其實(shí)就是一個(gè)白色地上的幾塊黑色墨塊，但是我們并不會(huì)這么認(rèn)為，而是把它看成一個(gè)熊貓圖案。
5.對(duì)稱性
對(duì)稱性原理抓住了我們觀察物體的三種傾向性：我們傾向分解復(fù)雜的場(chǎng)景來(lái)降低復(fù)雜度。我們的視覺(jué)區(qū)域中的信息有不止一個(gè)可能的分析，但我們的視覺(jué)會(huì)自動(dòng)組織并解析數(shù)據(jù)，從而簡(jiǎn)化這些數(shù)據(jù)并賦予它們對(duì)稱。
例如：我們會(huì)將下圖（1）中左邊復(fù)雜的形狀看成是兩個(gè)疊加的菱形，而不是兩塊頂部對(duì)接的偶磚或者一個(gè)中心為小四方形的細(xì)腰八邊形。一對(duì)疊加的菱形比其他兩個(gè)解釋更簡(jiǎn)單，它的邊更少且比另外兩個(gè)解釋更對(duì)稱。
6.主題／背景
我們大腦將視覺(jué)區(qū)域分為主題和背景。主題包括一個(gè)場(chǎng)景中占據(jù)我們主要注意力的所有元素，其它的則是背景。如下圖，我們很容易會(huì)把藍(lán)色視為黃色三角形的背景色。
那么在設(shè)計(jì)中有哪些運(yùn)用呢？其實(shí)也很常見(jiàn)，我們經(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)用了相似性原理，灰度相同，可見(jiàn)在一個(gè)場(chǎng)景中可以多個(gè)格式塔原理疊加使用。
上述的七個(gè)格式塔原理，無(wú)時(shí)不刻的會(huì)出現(xiàn)在我們的產(chǎn)片設(shè)計(jì)、界面設(shè)計(jì)布局中。希望設(shè)計(jì)師們?cè)谠O(shè)計(jì)師界面的時(shí)候，不只是為了單純的為了設(shè)計(jì)而設(shè)計(jì)，更知道背后的視覺(jué)原理，采用哪種方式去布局。這樣我們才會(huì)做到“有理有據(jù)”，并在今后的設(shè)計(jì)工作中合理運(yùn)用這些原理。
