編輯導語：在日常設計中，對于界面信息點密集時，我們需要對每個元素的設計掌握得當，元素的間距同樣也需要我們深思熟慮。本文從幾點講清楚如何利用“間距設計”把内容講清楚，讓整個界面的信息傳達更加高效，一起來看看。

優秀的界面設計體現在每個維度。

除了對元素的設計，元素的間距也同樣需要經過我們的深思熟慮。

如果我們處理好界面中的各種間距和留白區域，整個界面的信息傳達将更高效、便于人們使用。

一、遵循接近法則

界面中的元素間距可展示出元素之間的關聯性。

如下圖，當我們的設計遵循接近法則時，更便于用戶理解界面中的邏輯關系。

（留白區域與字号、字重和顔色密切相關，它能傳達界面中元素的結構層級）

該如何做：相關聯的元素間隔更小，反之亦然；同一類型的元素應均分間隔。

二、利用留白強調

留白也是一種有效的強調方式，它與其他吸引用戶注意力的方式如：加大字号、修改顔色、文字加粗等具有同樣的效果，甚至可以作為一種替代的方式。

比如現在對這句話的留白就是一個例子。

其實讓某個元素變得更大或使用顔色去強化它，并不是吸引用戶注意力的唯一方法。

試想想，當所有内容都變得更大、更高亮的時候，其實什麼都突出不了。

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

三、統一測量方法

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

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

（實際行高的文本）

1. 以“邊界框”為測量基準

在設計師使用的軟件中，文本會帶有這種邊界框，它在文本的頂部和底部還留有一定的空間，這導緻邊界框的高度遠大于實際的文本高度而引起測量誤差。

2. 以實際行高為測量基準

這種方法雖然更精确，但可能開發實現的時候會更複雜化。

該如何做：确保設計和開發都使用相同的測量方法，才能讓設計得到更好的還原。

四、使用栅格系統

栅格系統指在設計中使用一組具有遞進關系的間距值，為界面帶來統一協調的感覺。

（在栅格系統中隻需要設定少量的值）

該如何做：栅格系統可以讓你隻需在有限選項中做出設計決策，這使得設計疊代更快、更系統化。

五、避免相似間距

當不同間隔的數值差距過小時，用戶将很難感知到界面中的邏輯分組關系。

如果你希望區分兩個不同的模塊，那麼不止是要設置不同的間距，你還需要讓這些間距的差異能讓人明确地感知到。

（每行按鈕的上下間距差異過小，讓人很難理解這些按鈕是與上方的還是下方的内容關聯）

（每行按鈕在下方留出足夠大的間距，幫助人們區分按鈕與上下内容的關聯）

該如何做：我們可以在栅格系統中設置更大的區間值，使相鄰的間距值之間具有明顯的視覺差異。

六、行高比例非固定

行高不一定是随着文本變大而增加的。如果整個頁面統一保持同一個行高比例，那麼每行大文本之間會有太多的空白。

（文字行距太大了）

（當标題使用較小的行距時，兩行才會被看作一個整體内容）

該如何做：一般大标題的行高比例需要小于正文的行高比例。

七、密集≠雜亂

請記住，一個信息密集的界面不一定要讓人感到雜亂或不知所措。

（通過調整間距、字号并添加分割線來打造視覺秩序）

除了利用間距，還可以通過這些方法傳達元素間的關系，例如：

• 将相關的元素放進一個模塊裡
• 使用分割線或字符區分元素間的邊界
• 調整文本大小、字重或顔色來區分元素層級

每一個讓人“感覺不錯”的界面背後，需要我們花費大量的時間和精力不斷打磨。

有個有效的練習方法就是：找一個你喜歡的app或網站頁面，根據裡面的功能按你自己的想法進行重新設計，并将以上關于留白的8個方法加以實踐。

你将會發現，這個過程中有許多設計決策和細節需要你仔細考量。

總結：

1. 間距需遵循接近法則
2. 利用留白讓用戶将注意力集中在特定内容上
3. 确保設計和開發使用相同的測量方法
4. 使用栅格系統限制與規範設計
5. 避免使用過于相近的間距值
6. 行高不一定是随着文本變大而增加的
7. 頁面信息密集不等于要讓人感到雜亂

本文由 @SDL藝術實驗室 原創發布于人人都是産品經理，未經許可，禁止轉載。

題圖來自 Pexels，基于CC0協議

,

更多精彩资讯请关注tft每日頭條，我们将持续为您更新最新资讯!

查看全部