接近原則最早來(lái)源于心理學(xué)研究中得出的格式塔理論，后來(lái)被理論家應(yīng)用于視覺(jué)感知領(lǐng)域，成為設(shè)計(jì)師們非常有價(jià)值的工具。本篇文章講解了接近原則在實(shí)操中有哪些應(yīng)用技巧，讓我們一起來(lái)看看吧。

今天分享一個(gè)被我們廣泛應(yīng)用但還沒(méi)有注意的原則——接近原則。它是一個(gè)從用戶認(rèn)知習(xí)慣和心里模型總結(jié)出來(lái)的設(shè)計(jì)原則，掌握該原則可以有效的幫我們完成當(dāng)前的設(shè)計(jì)。

那么它在實(shí)操中有哪些技巧呢？一起來(lái)看看吧~

一、接近原則的定義

該原則最早來(lái)源于心理學(xué)研究中得出的格式塔理論，后來(lái)被理論家應(yīng)用于視覺(jué)感知領(lǐng)域，成為設(shè)計(jì)師們非常有價(jià)值的工具。

它解釋了人腦如何解讀周?chē)鷱?fù)雜元素，提出了眼腦的作用是一個(gè)不斷組織、簡(jiǎn)化、統(tǒng)一的過(guò)程。它產(chǎn)生出易于理解、協(xié)調(diào)的整體，降低我們?yōu)g覽和理解內(nèi)容的成本。我們的視覺(jué)系統(tǒng)自動(dòng)對(duì)視覺(jué)輸入構(gòu)建結(jié)構(gòu)，并且在腦中對(duì)設(shè)計(jì)元素進(jìn)行歸類，而不是只看到互不相連的邊、線和空間。

通過(guò)該理論，發(fā)現(xiàn)用戶會(huì)把界面中視覺(jué)相似的元素自動(dòng)歸類分組，視為整體，不管當(dāng)前頁(yè)面有多么復(fù)雜，元素之間距離較近的比距離較遠(yuǎn)的更具關(guān)聯(lián)性。在設(shè)計(jì)中我們?cè)O(shè)計(jì)師需要參考接近原則，了解它們之間的相對(duì)距離相較于它們的形狀、色差等其他特征更容易影響用戶的感知。

在實(shí)際設(shè)計(jì)中我們可以通過(guò)控制元素之間的距離來(lái)區(qū)分他們的關(guān)聯(lián)性，距離近的關(guān)聯(lián)性強(qiáng)，距離遠(yuǎn)的則關(guān)聯(lián)性較弱，可用于界面不同模塊布局以及分類的場(chǎng)景。

二、接近原則的特點(diǎn)

接近原則是格式塔原則中非常重要的設(shè)計(jì)理論，它應(yīng)用于信息秩序的設(shè)計(jì)與整理，易于理解的信息布局正是我們?cè)O(shè)計(jì)師追求的目標(biāo)。

1. 獲取效率的便捷化

在產(chǎn)品規(guī)劃的過(guò)程中有時(shí)經(jīng)常為了省事，盡可能多的在頁(yè)面中放入更多的文本以及圖片。我們要清楚用戶的注意力是有限的，過(guò)多的內(nèi)容填充反而會(huì)使得用戶在細(xì)節(jié)中迷失。

接近原則在界面中可以有效的對(duì)信息進(jìn)行歸類分組，避免了信息展示的雜亂無(wú)章，讓內(nèi)容呈現(xiàn)更有目標(biāo)感，使其潛意識(shí)里就知道哪里可以找到自己需要的信息，讓信息提取的效率便捷。

2. 信息層級(jí)的清晰化

接近原則不單單讓信息充滿目標(biāo)感，還讓其充滿了秩序感。我們可以通過(guò)不同元素的組合向用戶傳遞信息，這些元素是有關(guān)聯(lián)的。這些看不見(jiàn)的邊、線和空間是我們利用的工具，通過(guò)它們可以實(shí)現(xiàn)信息之間的關(guān)聯(lián)。

三、接近原則的應(yīng)用

接近原則其實(shí)很好理解，我們可以在設(shè)計(jì)的不同場(chǎng)景中應(yīng)用它，以下是該原則在設(shè)計(jì)中的應(yīng)用場(chǎng)景。

1. 更高的閱讀效率

我們之所以選擇該產(chǎn)品更多的是其內(nèi)容的吸引，因此它的可讀性與易讀性是產(chǎn)品設(shè)計(jì)的基本屬性?？勺x性與易讀性的影響因素有很多，包括了字體樣式、字體大小、字重、字間距等，但是頁(yè)面中內(nèi)容的版式也會(huì)直接影響信息的閱讀效率。

當(dāng)信息沒(méi)有任何版式，只是純粹的在頁(yè)面內(nèi)平鋪，它的易讀性與可讀性會(huì)收到影響。我們可以通過(guò)分隔線、間距來(lái)調(diào)整它們之間的關(guān)聯(lián)度。通過(guò)這種有條理的間距，凸顯了在空間內(nèi)不同的段落關(guān)系，幫助用戶掃描和閱讀文本。

上圖為接近原則的示例，段落之間的距離大于行與行之間的距離，讓相關(guān)的內(nèi)容在視覺(jué)上形成緊密的段落，確保用戶可以在視覺(jué)上對(duì)其進(jìn)行掃描和閱讀。

2. 更便捷的表單填寫(xiě)

表單是一個(gè)常見(jiàn)的信息錄入工具，糟糕的表單設(shè)計(jì)會(huì)帶來(lái)令人抓狂的用戶體驗(yàn)。作為產(chǎn)品體驗(yàn)的重要組成部分，無(wú)論是Web端還是移動(dòng)端，信息的輕松錄入都是表單設(shè)計(jì)的重要目標(biāo)。接近原則在表單填寫(xiě)中主要應(yīng)用于標(biāo)簽位置、表單分組以及數(shù)字展示這3塊。

（1）標(biāo)簽位置

標(biāo)簽位置對(duì)于用戶快速理解輸入項(xiàng)含義特別重要。在英文場(chǎng)景下，由于其詞組較長(zhǎng)，可將標(biāo)簽放于輸入框頂部并保持左對(duì)齊，以便讓用戶輕松的掃描表單，這對(duì)于有著長(zhǎng)標(biāo)簽的輸入框尤為重要，特別是當(dāng)標(biāo)簽與輸入框之間的距離較遠(yuǎn)且關(guān)系不明確時(shí)，用戶需要花較多的時(shí)間來(lái)弄清楚不同的標(biāo)簽與輸入框之間的對(duì)應(yīng)聯(lián)系。

（2）表單分組

常規(guī)的表單一般包含多個(gè)錄入字段，我們需要采用接近原則改變用戶對(duì)表單的看法。合理的控制表單內(nèi)容的相關(guān)距離，對(duì)它們進(jìn)行分組，可以有效的幫助用戶對(duì)所填寫(xiě)內(nèi)容的理解。同組內(nèi)信息的距離與不同組距離之間對(duì)比的節(jié)奏感，給用戶帶來(lái)了體驗(yàn)上的舒適性。

例如下圖中左右兩側(cè)的輸入量基本一致，但是由于右側(cè)對(duì)需要輸入的信息按照關(guān)聯(lián)度做了的分組，給用戶的感覺(jué)完全不一樣的感覺(jué)。（輸入框量越多，分組后產(chǎn)生的差距效果越明顯）從視覺(jué)的角度可以讓信息更有層次，避免了表單瀏覽的疲憊。

（3）數(shù)字展示

我們可以在較長(zhǎng)數(shù)據(jù)展示的時(shí)候采用接近原則，通過(guò)對(duì)復(fù)雜信息的組塊來(lái)提升操作效率，這一點(diǎn)跟米勒定律很像。例如常見(jiàn)的銀行卡號(hào)以及金融數(shù)字的展示，我們可以采用4個(gè)或者3個(gè)數(shù)字一組的形式，控制不同數(shù)字之間的距離，在空間上進(jìn)行分組，保證數(shù)字清晰的可讀性。

3. 負(fù)空間的營(yíng)造

我們?cè)谔幚眄?yè)面內(nèi)容時(shí)，靠得近意味著關(guān)聯(lián)性強(qiáng)，但當(dāng)我們對(duì)接近原則反向應(yīng)用，例如通過(guò)元素形態(tài)、色差等增加與周?chē)刎?fù)空間的比對(duì)可以起到吸引用戶的注意的作用。

當(dāng)頁(yè)面內(nèi)重要元素周?chē)?fù)空間較多時(shí)，它對(duì)用戶的吸引則越大，意味著用戶很容易就會(huì)發(fā)現(xiàn)它的存在，畢竟該空間內(nèi)沒(méi)有其他信息吸引他們的注意。例如下圖我們一眼就可以看到搜索框，而瀏覽器用戶、圖片、郵件相關(guān)信息由于距離其較遠(yuǎn)，因此視覺(jué)權(quán)重較弱反而凸顯了搜索框。

四、寫(xiě)在最后

將關(guān)聯(lián)的元素相互靠近，在界面中創(chuàng)建分組是我們經(jīng)常應(yīng)用的設(shè)計(jì)原則，可能在設(shè)計(jì)中我們已經(jīng)無(wú)意識(shí)的使用了好久，但是如果我們可以更進(jìn)一步了解它則會(huì)讓它更加強(qiáng)大。

我們可以利用接近原則來(lái)指導(dǎo)如何在頁(yè)面中組織信息元素，創(chuàng)建有意義的分組，以便用戶可以清晰的獲取信息，提升產(chǎn)品的用戶體驗(yàn)。

以上就是我對(duì)接近原則的理解，不知道你對(duì)它有什么不一樣的看法，歡迎一起討論~