人腦是一個(gè)相當(dāng)出色的數(shù)據(jù)處理器，背后所蘊(yùn)藏的功能非常豐富，直到今天都還沒有得到充分的探索。

人腦是一個(gè)相當(dāng)出色的數(shù)據(jù)處理器，背后所蘊(yùn)藏的功能非常豐富，直到今天都還沒有得到充分的探索。對(duì)于需要對(duì)用戶體驗(yàn)進(jìn)行設(shè)計(jì)的設(shè)計(jì)師而言，了解人的認(rèn)知能力和背后的機(jī)制，對(duì)于創(chuàng)建對(duì)用戶友好的產(chǎn)品，非常有幫助。

在諸多認(rèn)知方式當(dāng)中，格式塔原理是相當(dāng)關(guān)鍵的一種，無論是日常生活還是UX設(shè)計(jì)當(dāng)中，都是相當(dāng)常見的一種認(rèn)知機(jī)制。人們?cè)诟兄獜?fù)雜的對(duì)象的時(shí)候，會(huì)有意識(shí)或者無意識(shí)地將它們納入到一個(gè)有組織的系統(tǒng)當(dāng)中，而不是簡(jiǎn)單的視作為對(duì)象的集合，而這就是格式塔原理的基礎(chǔ)。格式塔原理會(huì)適用到不同層次的認(rèn)知當(dāng)中，有的是顯性的，有的則是隱性的，但是最有趣的是可視化的部分，也就是設(shè)計(jì)師借助這種原理所創(chuàng)造出來的各種設(shè)計(jì)。格式塔原理當(dāng)中涵蓋了許多延伸出來的規(guī)則，今天我們要聊的，是其中的接近性原則。

接近性原則

我們常說的接近性原則，指的是對(duì)于彼此接近的事物、元素，傾向于認(rèn)為它們是相關(guān)的一種認(rèn)知傾向。所以，面對(duì)著數(shù)據(jù)，我們會(huì)將數(shù)據(jù)和不同的對(duì)象按照各種將它們分組，組織到一起。對(duì)于設(shè)計(jì)師而言，這是一種非常有效的思路：如何按照大腦吸收消化數(shù)據(jù)的自然方式來組織信息。Andy Rutledge 是這樣用可視化的方式將接近性原則呈現(xiàn)了出來：

值得注意的是，通過研究和實(shí)驗(yàn)驗(yàn)證，接近性原則中距離的接近，比起色彩和形狀的近似，更容易被人所認(rèn)知。即使是特征完全不同的元素，只要它們足夠靠近，人們也更加傾向于認(rèn)為這些元素是相關(guān)的，就像下面的案例。

在包含大量不同內(nèi)容的用戶界面當(dāng)中，接近性原則對(duì)于整個(gè)布局設(shè)計(jì)是有極大幫助的。合理運(yùn)用接近性原則能夠讓用戶更輕松地獲取信息，感知內(nèi)容。很多時(shí)候，用戶并沒有準(zhǔn)備好花費(fèi)時(shí)間來學(xué)習(xí)復(fù)雜的界面，可以快速被感知和識(shí)別的信息，能更好的留住用戶。在此之后，才能讓用戶真正享受到網(wǎng)站或者APP給他們帶來的便利。這個(gè)邏輯是很清晰的。

一般而言，我們認(rèn)為接近性原則在UI界面當(dāng)中，有兩個(gè)應(yīng)用方向：一是應(yīng)用于排版和文案等元素和內(nèi)容，另一個(gè)是不同的內(nèi)容區(qū)塊和控件區(qū)塊。接下來所說的案例，會(huì)用到之前Tubik 團(tuán)隊(duì)的設(shè)計(jì)和產(chǎn)品。

排版和文本

接近性原則在排版和文案當(dāng)中著相當(dāng)廣泛的應(yīng)用，甚至可以說是必須用到的規(guī)則。想要確保文本能夠被快速地閱讀，每行文本的長(zhǎng)度，間距，段落的篇幅，空間距離的控制都會(huì)對(duì)其有所影響，就像讀者通常不會(huì)接受橫排超長(zhǎng)的排版。同樣的，絕大多數(shù)的用戶在網(wǎng)頁上快速掃描的時(shí)候，會(huì)迅速地查看標(biāo)題、副標(biāo)題、高亮內(nèi)容和關(guān)鍵詞等因素，在對(duì)內(nèi)容感興趣的時(shí)候，才會(huì)點(diǎn)擊鏈接查看更多。這就是為什么設(shè)計(jì)師會(huì)盡量選擇可以快速感知且符合美學(xué)的界面設(shè)計(jì)。

留白通常也被稱為負(fù)空間，它也在排版布局過程中扮演著重要的角色。留白不僅可以強(qiáng)化排版布局的呼吸感，而且能夠用來區(qū)分不同的分組和區(qū)塊。

對(duì)于大塊的文本內(nèi)容，設(shè)計(jì)師可以用不同的方式來進(jìn)行處理。比如設(shè)計(jì)師可以用留白來區(qū)分不同的段落，讓用戶在區(qū)分段落的情況下更好地理解其中的內(nèi)容。根據(jù)接近性原則，靠近的內(nèi)容會(huì)表達(dá)相近的意思，傳遞統(tǒng)一的想法，這樣一來，通過留白，段落和段落之間有了區(qū)分，內(nèi)容也就更加結(jié)構(gòu)化了。

Architecture blog

這是一個(gè)建筑博客的界面概念設(shè)計(jì)。整個(gè)界面是按照接近性原理來進(jìn)行構(gòu)建的，這也使得整個(gè)設(shè)計(jì)有了層次。首先，不同的文本被集中成小塊，各自呈現(xiàn)出不同的信息。其次，每一小塊內(nèi)容都靠近了相關(guān)的圖像，即使用戶是快速掃視，也能明白其中的相關(guān)性，從而更輕松的理解含義。而CTA按鈕和鏈接等元素則和文本元素相對(duì)距離較遠(yuǎn)，但是又包含在同一個(gè)內(nèi)容區(qū)塊內(nèi)，以此來呈現(xiàn)關(guān)系。設(shè)計(jì)師通過這樣的布局設(shè)計(jì)，激活了布局內(nèi)各個(gè)不同的功能區(qū)域，使得它們?cè)诮Y(jié)構(gòu)上足夠協(xié)調(diào)清晰，保持著和諧的感覺。所有的文本區(qū)塊都是圍繞著主題來設(shè)計(jì)，用戶可以一目了然地獲取信息。

這種設(shè)計(jì)方法還能延伸到目錄和列表的設(shè)計(jì)上去。因?yàn)榻咏栽瓌t還是組織信息群組和區(qū)塊的高效工具。

Slopes Website

舉個(gè)例子，看看 Slopes 這個(gè)網(wǎng)站。頂部頁頭的幾個(gè)鏈接關(guān)系著網(wǎng)站導(dǎo)航交互，它們被放置在一起，距離其他元素也很遠(yuǎn)，很明顯是一組。而從側(cè)面展開的漢堡菜單也類似，不同的鏈接互相靠近，組成不同的組。根據(jù)接近性原則，負(fù)空間增強(qiáng)了頁面的視覺層次結(jié)構(gòu)。

內(nèi)容區(qū)塊和控件

接近性原則的使用還可以延伸到布局當(dāng)中已經(jīng)組織好的內(nèi)容區(qū)塊和控件上，它們可以不止是文本，還能是圖像，鏈接，圖標(biāo)，控件和CTA元素，卡片，甚至其他的東西。設(shè)計(jì)師可以利用接近性原則組織出更加貼近人的認(rèn)知體系的設(shè)計(jì)。

Jewellery Ecommerce App

以下面這個(gè)在線的珠寶購物APP為例，右邊的屏幕可以顯示產(chǎn)品卡片，其中包含了相關(guān)的一般數(shù)據(jù)，包括顏色、寬度、重量和材質(zhì)等，通過相互靠近和線條的分割，從而讓人輕松分辨出清晰的分組，底部的文本內(nèi)容也自然而然地被視之為一個(gè)統(tǒng)一的內(nèi)容片段。用戶一瞥就能看清哪些是關(guān)鍵的數(shù)據(jù)，哪些是詳細(xì)描述。

The Big Landscape

這個(gè)在線雜志的布局也是一個(gè)不錯(cuò)的例子，同樣是倚靠接近性原則來實(shí)現(xiàn)清晰的布局。首先，整個(gè)網(wǎng)站的布局是嚴(yán)格按照網(wǎng)格系統(tǒng)來排布的，并沒有可見的線條框架來區(qū)分內(nèi)容。接近性原則讓用戶能夠一眼區(qū)分整個(gè)頁面的大體布局，頂部的導(dǎo)航鏈接明顯是一組，左側(cè)的列表?xiàng)l目都相互接近，是明顯的一組，而右側(cè)占據(jù)主要位置的文本內(nèi)容則和標(biāo)題非?？拷鼈儤?gòu)成了頁面的內(nèi)容主體。右上角的搜索和訂閱是相對(duì)次要的功能，但是也因其獨(dú)特的功能性，被分為一組。這種策略讓整個(gè)布局更加易于瀏覽，直觀，且易于導(dǎo)航。

雖然接近性原則是格式塔原理的一種使用方式，是非常簡(jiǎn)單但是極其有效的一種設(shè)計(jì)策略和技巧，幫助用戶節(jié)省了大量的經(jīng)歷，根據(jù)人的認(rèn)知習(xí)慣和心理模式來構(gòu)建界面。