在界面設計中，間距也是重要元素之一，合理的間距布局可以讓界面更加賞心悅目，有助于清晰地傳遞信息，并提升用戶的使用體驗。那麼，如何定義和布局“間距”？本篇文章裡，作者就間距的布局策略進行了總結，一起來看。

很多時候，我們發現自己精心設計的作品總是亂亂的感覺，究其根本，大部分都是文字、圖形、色彩處理不當，後續的優化調整也都圍繞着這幾點進行，這也是為什麼設計師在制定設計規範的時候，會把文字（标題、正文、提示的字号）、色彩（主色、輔助、點綴、漸變的使用場景）規範分的很細。

然而，有時候即便用好了規範，依然沒達到理想的視覺效果，這裡就要提到設計規範中很少有人關注、且非常容易被忽視的「間距」問題。

優秀的界面設計應該體現在每個維度，間距在設計中也是不可缺少的部分，尤其是界面元素較為密集時，需要對間距的使用掌握得當，合理的利用間距留白，能将信息更高效的傳達給用戶。

文字、圖形、色彩是UI設計的三大組成元素，間距即是這幾種元素結合的媒介，如何通過間距給用戶帶來更舒适的視覺體驗是設計過程中極其重要的一環，那麼你所理解的間距到底是什麼、有什麼作用、如何合理有效的使用？筆者進行了整理總結，通過本篇文章揭曉。

一、間距在UI中的重要性

1. 什麼是間距？

間距指的是界面各元素彼此相隔的距離，可以是文字自身的行距、與圖片、與組件、與模塊的間距，或是界面兩側的安全距離（如網頁的寬度為1920px，内容區為1400px，那麼安全距離為兩側各260px）等。

作為UI設計師，在設計界面的每一個元素都需要考慮到上、下、左、右以及毗鄰元素的屬性來合理調整間距，利用各間距之間的規律來組織界面内容，确保信息的節奏性，給用戶輕松、預約的浏覽體驗。

2. 間距的實際作用

間距可以讓界面信息更有節奏，提升内容的可讀性，還能通過不同的疏密程度來闡述各元素之間的關系，以吸引用戶的注意力，所以在控制界面間距時，一定要有“較真”的心态，任何一次的改動與調整都要先考慮清楚為什麼，能給産品和用戶帶來什麼。要做好間距，不能僅停留在視覺層面，需要進行多方面思考。

設計師層面：規範的定義間距，不必每個元素都去考慮間距的大小，有效減少決策和思考時間，提升效率。

開發層面：開發可以按照基礎間距去定義變量，長期如此，雖然不能煉成像素眼，但僅憑視覺也能看出間距的倍數。例如基礎間距以8px增量，在使用8px、16px、24px、32px、48px…等，開發直接使用基礎間距x1、x2、x3…，以此類推，在開發眼中，肉眼定然看不出1px的差别，但卻能區分出8px的差距，不必每次都去測量，還能減少誤差，高度還原設計效果。

用戶層面：有節奏且具備一緻性美感的界面效果，信息的有效傳遞變的輕松，用戶體驗能得到很大程度的提升。

3. 間距的統一性

設計規範的目的是提升設計師的工作效率、團隊之間的高效溝通、讓設計風格始終保持高度統一。同理，間距也是設計規範中非常重要的一環，它作為規範中的最小單元，如果沒有遵循統一，将會直接影響界面整體的版式和布局，信息的疏密程度嚴重影響用戶的浏覽。不僅是設計師，開發每次面對同樣的模塊都需要定義不同的間距也是崩潰的，毫無規律可循。

統一的間距能讓界面的視覺效果更有節奏，設計師在設計某些相似的模塊時可直接複用組件，即便是多人共同完成同個項目或更換成員，也不會因間距不統一的問題造成整個APP的風格混亂。

對開發來說，如果清楚間距的使用規律，即便有小的誤差，也能自行更正，例如使用8px增量，8、16、24…按倍數規律以此類推，若出現9的間距，開發會更正為8、15則會更正為16，自行多退少補，雖然設計師需要細心、盡量不出現這種小的出入，但任何事情都沒法做到絕對，統一的間距能讓減少設計的出入以及與設計師之間的頻繁溝通，能進一步提高開發效率。

從上圖可以看出，間距不規範、信息就像一鍋粥，而規範的使用間距就能将信息自動分組。

二、定義文字間距

文字是UI設計中非常重要的信息元素，雖然大多數設計師對文字的屬性比較了解，但在真實設計中總會因其他信息的幹擾不能合理運用，與上線後的視覺效果預期相差甚大。文字的各種間距處理看似簡單，但實際上有很多因素要考慮，例如字間距、行高、段落等，下面帶大家一起了解。

1. 字符間距

字符間距一般都是設計工具的默認數值，無需調整。當碰到多行文字需要避開頭尾的标點符号時，使用工具中的避頭尾功能即可自動調整字間距，如無此功能，則需手動調整，這裡并沒有所謂的技巧與方法，頭尾避開标點符号即可。

另外，在設計卡片、瓷片區的标題時，有時需要通過調整字符間距來提升界面的舒适度，間距數值自行定義，但相同層級的内容标題字間距一定要保持一緻。

2. 文字行高

行高是指上邊框 下邊框 字号的高度之和，這裡主要針對多行文本。在平面設計中，行高沒有一定的标準，如無特别需要，使用系統默認的行高即可。

在UI設計中，文字會有5～6個不同的等級，為便于用戶閱讀，一般會設定行高标準，尤其是新聞資訊類型的應用本身就以文字内容為主，不同的行高對文字的易讀性會産生較大的影響。

文字行高一般會設定為字号的1.2～1.5倍，具體值跟字号有很大關系，文字越小，行高就越大。例如，我們可以設定字号32px為中間值（非絕對），小于或等于32的字體、行高為字号的1.5倍，大于32的為1.2倍。另外，也可以直接将所有行高固定在字号的1.5倍，不難發現，字體越大其折行的概率就越低，試想一下，如果将48px的文字折成幾行，界面還能剩下多少空間？

3. 文字段落

文本段落間距的重要性在移動UI界面中并不明顯，更多體現在網頁設計中。需要着重糾正一點的是，部分設計師在設置段間距時習慣性的多敲一次回車鍵，這種方式并不可取，會造成間距過大、内容脫節。

如有需要，一定要手動設置段間距，這裡沒有固定的數值和規律，視覺舒适即可。筆者習慣将段間距設定為字号的0.5倍，例如字号為30、段間距為15，字号為40、段間距為20，僅供參考。

三、定義元素/組件間距

定義間距其實并沒有一個絕對的标準，主要取決于最小單位，例如4px、5px、6px、8px都是可以的，到底使用哪個數值還得根據産品自身定位及内容組織形式，前提是所有間距都要遵循最小單位并基于倍數形成規律。

在設計界面時，需要利用間距來建立信息層級、提升浏覽體驗以及表達各元素之間的關系，這就是為什麼當我們打開新聞資訊、電商類應用會發現信息非常緊湊，而打開工具、社交類應用時感覺信息比較寬松。間距的基數越小、頁面就越細碎；基數越大、頁面的留白就越多，使用不同的基數，呈現出來的視覺效果也形态各異。

筆者在工作中通常以8px作為基數，以此衍生出8、16、24、32、48、64這6個間距數值，完全能夠滿足絕大多數的使用場景。當然，針對信息較少的頁面也會使用到120、160、200…其他間距數值，例如缺省頁、登錄頁面等。不難看出，上述以8px為基數定義間距數值時，沒有40、56這兩個數值，難道他們不是8的倍數嗎？

我們以8和16做對比，後者是前者的2倍，其間距的變化尤為明顯；但如果用56和64做對比，後者是前者的1.14倍，其間距的差别微乎其微。

敲重點，設計師在定義間距時，需要遵循倍數規則，但同時也要為考慮界面美觀及用戶的浏覽體驗而跳出呆闆的規則，當間距數值越大時，根據基數所跳躍的倍數就越大，其實設定字号也是相同的邏輯（後期詳解）。

四、定義模塊間距

從信息層級角度來看，等級權重越高、間距就越大，在現實世界中也是如此，一個物體周圍的空間越大，就越容易吸引人們的注意力。

模塊間距分為塊内間距（同一模塊中不同元素或信息組之間的距離）和塊外間距（同一個頁面中不同模塊的之間的距離），為了更好的區分信息層級，塊外間距一定會大于塊内間距，也能保持塊内信息的親密性。

如下圖所示，将裝修序列步驟、官方攻略、常用服務等看作不同的信息模塊，每個模塊内元素的間距都會比各模塊之間的間距小很多。

五、間距的使用技巧及原則

1. 接近性原則

需要通過各元素的間距來體現出信息的關聯性，格式塔原理中的“接近性”原則告訴我們，相互靠近的物體被認為比相互距離較遠的物體更有關聯性，因此，相關聯的元素之間靠的越近，用戶越能感知到信息的關聯，同時更能了解整個界面中各模塊信息的邏輯關系。

2. 利用留白強調

很多時候，想讓一個元素變的突出，可以用加大字号、修改色值或後加粗等方式進行強調，但這并不是突出信息的唯一方式，當所有元素都變的突出，那就等于什麼都不突出了。

如果想讓界面中的元素不同程度的突出，留白也是一種強調信息的方式，它能引導用戶将注意力集中在特定的内容上。

3. 使用栅格系統

善用栅格系統（上述有詳細說明），通過最小間距值進行遞增，讓整個界面看起來更協調。栅格系統可以讓設計師在元素的親疏關系上更快作出決策，後續不管是疊代還是更換設計成員，都能保持統計的間距規範。

4. 文字行高規則

這個問題在很多團隊中都是硬傷，甚至在設計驗收時還被直接忽略。在主流UI設計工具中，添加文本元素時，都會有默認行高，在前面的内容中有講過多行文本的行高為字号的1.2~1.5倍，那麼單行文字的行高到底是需要手動設置還是遵循默認，筆者認為都是可以的，但一定要與開發保持一緻。

行高決定着文字邊緣與定界框的間距，而開發隻能看到定界框與其他元素的間距。

1）默認行高

默認行高值會随着字号的變化基于一定的倍數自動增減，需要将此規律或倍數告知開發，開發将此規則植入代碼方能最大化還原設計效果。

另外在設計界面時，尤其是多組文字元素的上下間距，需要通過計算（文字邊緣到定界框的間距 文字元素間距=實際間距）或手動測量才能達到精準狀态，下圖為例：

2）手動設置行高

手動設置即字号是多少、就将行高設置為多少，确保文字邊緣緊貼定界框，在設計過程中調整間距時，無需計算，根據設計工具的智能提示調整即可。

5. 間距值數量設定

在同一APP應用中，根據最小基數定義的間隔值數量不易過多，一般在6個左右就能滿足絕大多數的設計場景。例如以8px的基數為8、16、24、32、48、64等，以5px的基數為5、10、15、25、40、60等。

數量過多會導緻界面不同元素、模塊的間距差異化不夠明顯，數量太少無法滿足多元素、模塊使用場景，也會導緻間距跨度較大。

6. 明顯相鄰間距值

設定間距值需遵循一個原則“數值越大、遞增的倍數就越大”。當相鄰間距值的差異化較小時，用戶很難感知到界面中信息之間的邏輯關系，我們需要根據栅格系統中間距值的增大、設置更大的區間值，讓相鄰間距值之間的視覺差異更加明顯。

7. 跳出間距的束縛

當界面中的信息較為密集、間距不足以滿足信息的突出程度時，需跳出純粹的間距規範束縛，換種方式或許更好。例如：給元素添加背景讓其聚焦、使用分隔線/色塊間隔、調整元素大小等，需知「此消彼長」的道理。

六、結語

如果在處理界面信息層級時，改來改去還是覺得很亂，不防從間距角度出發，或許會有不一樣的收獲。

雖然在剛開始的時候，規範間距帶來的效果甚微，但随着團隊規模不斷擴大、界面數量越來越多、内容越來越複雜時就會發現，所有内容統一間距規範，不管是構建一緻性界面視覺效果、還是對開發和設計師來說，既能提升用戶體驗、還能提高團隊的工作效率。

間距是否規範使用，決定着界面是否規整、信息傳達是否清晰，即便如此，間距也隻是解決信息層級方式的其中之一，切不可讓其限制設計師的發揮和思考空間。制定設計規範有助于項目的高效運轉，間距也好、色彩也罷，設計師依然需要從實際用戶場景出發，通過不斷的思考和經驗總結，打磨出更合理、更符合項目需求的設計規範。

專欄作家

大漠飛鷹；公衆号：能量眼球，人人都是産品經理專欄作家。緻力于産品需求的驅動、産品體驗的挖掘，利用設計的手段為受衆用戶帶來更好的體驗，即好看、好用。

本文原創發布于人人都是産品經理，未經許可，禁止轉載。

題圖來自 Unsplash，基于 CC0 協議。

該文觀點僅代表作者本人，人人都是産品經理平台僅提供信息存儲空間服務。

,

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

查看全部