格式塔心理學誕生于20世紀初，指出人們的視覺感知具有整體性，并且總體大于個體的總和。
也就是說，我們不會只看局部或者個體，也是需要重新組織所看到的視覺信息來理解世界。如果不這樣做的話，我們的大腦就會不堪重負。就像下圖我們看到的是一個笑臉，而不會說是31個點。格式塔心理學家將組織信息的方法抽象為格式塔原則。
格式塔原則是非常重要的設(shè)計理論，因為信息的組織也就意味著信息的接收和理解，而信息易理解正是設(shè)計師的核心任務(wù)。
其中，格式塔原則中的接近原則是最常見的原則之一，下面我將提供一些例子來幫助大家理解這個原則。
01.接近原則
接近原則是指：將相關(guān)物體的物理位置靠近，這樣一來，相關(guān)的物體就會被看作凝聚為一體的一個組，而不是一堆彼此無關(guān)的片段。在左側(cè)的圖片中，你會看到一組圓圈；在右側(cè)的圖片中，你會看到三組圓圈。而它們唯一的區(qū)別就是圓圈之間的距離（接近度）。接近原則比其他的格式塔原則更強。即使物體的形狀和顏色都不相同，只要距離更近，他們?nèi)匀粫徽J為是一組。因此，接近性原則至少是比相似性原則更強。接近原則還能夠直接影響用戶的視覺動線，因為元素的物理距離不同，你會在左圖縱向瀏覽，看到的是列，右圖橫向瀏覽，看到的是行。
02.接近原則的重要性
接近原則對許多設(shè)計師而言，絕對算一個沒有專門了解，但卻經(jīng)常使用的原則。我認為，了解接近原則背后的原理總是有幫助的。比如，我們可以更好地進行設(shè)計推理并向其他人解釋設(shè)計問題。通過接近原則，可以快速地幫助開發(fā)同學理解，為什么卡片之間的水平距離是5px，而垂直距離是15px。并且當我們感覺設(shè)計稿奇怪卻不清楚原因時，格式塔原則也是一個很好的自查清單。
03.印刷品案例
字體與段落
接近原則能夠直接影響文本閱讀，使用好接近原則可以幫助用戶更快速地理解文本。比如，標題前后需要設(shè)置更大的空間，哪一邊的內(nèi)容距離標題更近，則會認為該內(nèi)容和標題聯(lián)系緊密。行高是另一個例子，行與行之間的空隙必須大于單詞與單詞之間的空隙，并且空隙要足夠小才能形成一個緊密的段落。英文字母之間的間距也是如此，字母之間的間距要足夠?qū)?，才可以區(qū)分出字母，但也要足夠窄，字母們才能夠形成單詞。
雜志布局
盡管如今是電子信息的時代，但我們先來看看印刷品的布局仍是有意義的。印刷品的布局是我們進行網(wǎng)頁設(shè)計的基礎(chǔ)，它能夠幫助我們更輕松地理解這些原則。在雜志版面中，圖片分布在頁面的不同位置，我們只需要判斷文本距離哪一個圖片更近，便可以知道文本在描述哪一個圖片。
名片布局
我們來看一下這兩個名片，左側(cè)名片上的每一項看上去都與其他項沒有任何關(guān)聯(lián)。這樣一來，我們不知道從哪里開始閱讀名片，也不知道何時才算結(jié)束。如果對名片的距離做一點調(diào)整，便形成了一個個組。我們會清楚的知道信息的閱讀順序，能夠更容易更快速地找到信息。另外，信息之間的空白也會變得更有組織。
04.網(wǎng)站案例
現(xiàn)在的網(wǎng)站信息非常豐富，組織信息也變得更加重要。
菜單
菜單通常位于網(wǎng)頁的左側(cè)或者頂部。在頂部菜單中，菜單之間保證充分的留白更加符合現(xiàn)代審美。但一定要注意的是，要確保菜單與下方內(nèi)容的距離，否則，很難辨別內(nèi)容和菜單本身。
項目組
一個項目組通常是由圖片、標題和文本內(nèi)容等不同部分組成，為了讓他們看起來是一個項目組，元素之間的距離不能太大。
卡片
卡片在如今的網(wǎng)頁中是一個常見元素，當有頁面中存在不同的卡片組時，一定要確保組內(nèi)卡片的空間小于卡片組之間的空間。
表單
表單同樣是一個常見頁面，比如注冊或登錄等都需要表單，針對表單我專門寫過兩篇文章，分別是組織內(nèi)容和標簽細節(jié)。比如，在頂對齊表單中，我們可以通過調(diào)整元素之間的距離，明確那個標簽/描述屬于哪一個字段，這將會讓表單更易于使用。
列表
每個app總會有一些列表相關(guān)的頁面，因此學習如何設(shè)計好它們是非常有價值的。列表設(shè)計的其中一個關(guān)鍵點就是，如何區(qū)分各項目。我們可以使用空間距離取代項目間的線條進行區(qū)分，這樣做可以減少視覺噪音。我們需要注意的是，確保項目之間的空間明顯大于組成元素的空間。接近原則是一個非常棒的設(shè)計原則，可以幫助設(shè)計師組織信息。雖然許多設(shè)計師已經(jīng)在無意識地使用著接近原則，但是如果進一步了解它，它或許是一個更加強大的設(shè)計工具。尤其是在復(fù)雜的屏幕中，我們更加需要接近原則幫助我們組織信息，減少其他元素的視覺干擾。
原文地址：Medium
譯文地址：栗子設(shè)計喵 （公眾號）
作者：Lukas Oppermann
譯者：栗子
轉(zhuǎn)載請注明：學UI網(wǎng)》格式塔之接近原則，如何幫助信息易理解？
藍藍設(shè)計建立了UI設(shè)計分享群，每天會分享國內(nèi)外的一些優(yōu)秀設(shè)計，如果有興趣的話，可以進入一起成長學習，請掃碼藍小助，報下信息，藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務(wù)合作，也請與我們聯(lián)系。
分享此文一切功德，皆悉回向給文章原作者及眾讀者.
免責聲明：藍藍設(shè)計尊重原作者，文章的版權(quán)歸原作者。如涉及版權(quán)問題，請及時與我們?nèi)〉寐?lián)系，我們立即更正或刪除。
藍藍設(shè)計( www.bouu.cn )是一家專注而深入的界面設(shè)計公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)
