當我們在進行UI設計時，元件之間的距離，會讓使用者產生不同的感受，當間距小一點時，在視覺上會被列為一個群組，而背後所帶出來的可能是「相關性的功能或是類別」，因此在切換上會產生預設的期待。相反的如果間距比較大，會是獨立個別的區塊，每個區塊個各自代表不同的意義。

在設計上，我們必須特別留意間距上的使用，讓畫面看起來更協調，使用在瀏覽時也能容易辨別。以下是採用Friendship circle所定義出的間距與相關性的圖示：

第一，你會發現間距都是4或是8的倍數在調動，這是關於螢幕寬度與解析度所產生出的結果，今天我們不多談，如果有興趣你可以上網查詢相關文章。第二，當距離越接近，就會被列為「Best Friends」，如果在UI上所代表的就是這兩個元件關聯性相當大，因而採用距離的方式，兩者容易被視為一組。

以下圖為例，如果所有元間都使用16px，雖然看起並沒有不好，但卻缺少了層次，彼此之間的是一樣的。若使用Friendship circle，可以優化介面，讓視覺上看起來更有呼吸感，提升視覺上的易讀性。

未來在設計時，可以學習透這樣的設計法則，從一個小組件到整體網頁，讓整體看起來更加有結構性，而不會至於凌亂跟鬆散！

我是Lisa，收收UI / UX 和 Taiwan UI / UX人生設計學創辦人，曾任職平面設計師、網頁前端工程師，最後轉職到自己喜歡職位 – UI / UX Designer，目前也是一位講師，致力於零基礎教學，與協助想轉職的人。