編輯導(dǎo)語：在日常設(shè)計(jì)中，對(duì)于界面信息點(diǎn)密集時(shí)，我們需要對(duì)每個(gè)元素的設(shè)計(jì)掌握得當(dāng)，元素的間距同樣也需要我們深思熟慮。本文從幾點(diǎn)講清楚如何利用“間距設(shè)計(jì)”把內(nèi)容講清楚，讓整個(gè)界面的信息傳達(dá)更加高效，一起來看看。

優(yōu)秀的界面設(shè)計(jì)體現(xiàn)在每個(gè)維度。

除了對(duì)元素的設(shè)計(jì)，元素的間距也同樣需要經(jīng)過我們的深思熟慮。

如果我們處理好界面中的各種間距和留白區(qū)域，整個(gè)界面的信息傳達(dá)將更高效、便于人們使用。

一、遵循接近法則

界面中的元素間距可展示出元素之間的關(guān)聯(lián)性。

如下圖，當(dāng)我們的設(shè)計(jì)遵循接近法則時(shí)，更便于用戶理解界面中的邏輯關(guān)系。

（留白區(qū)域與字號(hào)、字重和顏色密切相關(guān)，它能傳達(dá)界面中元素的結(jié)構(gòu)層級(jí)）

該如何做：相關(guān)聯(lián)的元素間隔更小，反之亦然；同一類型的元素應(yīng)均分間隔。

二、利用留白強(qiáng)調(diào)

留白也是一種有效的強(qiáng)調(diào)方式，它與其他吸引用戶注意力的方式如：加大字號(hào)、修改顏色、文字加粗等具有同樣的效果，甚至可以作為一種替代的方式。

比如現(xiàn)在對(duì)這句話的留白就是一個(gè)例子。

其實(shí)讓某個(gè)元素變得更大或使用顏色去強(qiáng)化它，并不是吸引用戶注意力的唯一方法。

試想想，當(dāng)所有內(nèi)容都變得更大、更高亮的時(shí)候，其實(shí)什么都突出不了。

該如何做：通過留白可以讓用戶把注意力集中在特定內(nèi)容上，而不是一味地通過加大、高亮的形式突出內(nèi)容。

三、統(tǒng)一測(cè)量方法

通常，文本之間的間距可以用兩種方法來測(cè)量：

（帶有“邊界框”的文本）

（實(shí)際行高的文本）

1. 以“邊界框”為測(cè)量基準(zhǔn)

在設(shè)計(jì)師使用的軟件中，文本會(huì)帶有這種邊界框，它在文本的頂部和底部還留有一定的空間，這導(dǎo)致邊界框的高度遠(yuǎn)大于實(shí)際的文本高度而引起測(cè)量誤差。

2. 以實(shí)際行高為測(cè)量基準(zhǔn)

這種方法雖然更精確，但可能開發(fā)實(shí)現(xiàn)的時(shí)候會(huì)更復(fù)雜化。

該如何做：確保設(shè)計(jì)和開發(fā)都使用相同的測(cè)量方法，才能讓設(shè)計(jì)得到更好的還原。

四、使用柵格系統(tǒng)

柵格系統(tǒng)指在設(shè)計(jì)中使用一組具有遞進(jìn)關(guān)系的間距值，為界面帶來統(tǒng)一協(xié)調(diào)的感覺。

（在柵格系統(tǒng)中只需要設(shè)定少量的值）

該如何做：柵格系統(tǒng)可以讓你只需在有限選項(xiàng)中做出設(shè)計(jì)決策，這使得設(shè)計(jì)迭代更快、更系統(tǒng)化。

五、避免相似間距

當(dāng)不同間隔的數(shù)值差距過小時(shí)，用戶將很難感知到界面中的邏輯分組關(guān)系。

如果你希望區(qū)分兩個(gè)不同的模塊，那么不止是要設(shè)置不同的間距，你還需要讓這些間距的差異能讓人明確地感知到。

（每行按鈕的上下間距差異過小，讓人很難理解這些按鈕是與上方的還是下方的內(nèi)容關(guān)聯(lián)）

（每行按鈕在下方留出足夠大的間距，幫助人們區(qū)分按鈕與上下內(nèi)容的關(guān)聯(lián)）

該如何做：我們可以在柵格系統(tǒng)中設(shè)置更大的區(qū)間值，使相鄰的間距值之間具有明顯的視覺差異。

六、行高比例非固定

行高不一定是隨著文本變大而增加的。如果整個(gè)頁面統(tǒng)一保持同一個(gè)行高比例，那么每行大文本之間會(huì)有太多的空白。

（文字行距太大了）

（當(dāng)標(biāo)題使用較小的行距時(shí)，兩行才會(huì)被看作一個(gè)整體內(nèi)容）

該如何做：一般大標(biāo)題的行高比例需要小于正文的行高比例。

七、密集≠雜亂

請(qǐng)記住，一個(gè)信息密集的界面不一定要讓人感到雜亂或不知所措。

（通過調(diào)整間距、字號(hào)并添加分割線來打造視覺秩序）

除了利用間距，還可以通過這些方法傳達(dá)元素間的關(guān)系，例如：

• 將相關(guān)的元素放進(jìn)一個(gè)模塊里
• 使用分割線或字符區(qū)分元素間的邊界
• 調(diào)整文本大小、字重或顏色來區(qū)分元素層級(jí)

每一個(gè)讓人“感覺不錯(cuò)”的界面背后，需要我們花費(fèi)大量的時(shí)間和精力不斷打磨。

有個(gè)有效的練習(xí)方法就是：找一個(gè)你喜歡的app或網(wǎng)站頁面，根據(jù)里面的功能按你自己的想法進(jìn)行重新設(shè)計(jì)，并將以上關(guān)于留白的8個(gè)方法加以實(shí)踐。

你將會(huì)發(fā)現(xiàn)，這個(gè)過程中有許多設(shè)計(jì)決策和細(xì)節(jié)需要你仔細(xì)考量。

總結(jié)：

1. 間距需遵循接近法則
2. 利用留白讓用戶將注意力集中在特定內(nèi)容上
3. 確保設(shè)計(jì)和開發(fā)使用相同的測(cè)量方法
4. 使用柵格系統(tǒng)限制與規(guī)范設(shè)計(jì)
5. 避免使用過于相近的間距值
6. 行高不一定是隨著文本變大而增加的
7. 頁面信息密集不等于要讓人感到雜亂

本文由 @SDL藝術(shù)實(shí)驗(yàn)室 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理，未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Pexels，基于CC0協(xié)議