UI設計中間距的重要性
APP裡面的間距和邊距的設計，很有學問的，最近設計公司的產品，大部分都是列表，這些頁面視覺效果不強，但是難點在於要做的看起來舒服，而其中一個難點就是間距的設計。不要小看間距這個問題，新手做出來的介面大部分翻車的問題就是在於間距。今天我就好好研究一下關於間距的問題，主要有APP外邊距，字間距、行間距和元素邊距等四個方面。
外邊距
當圖片與螢幕邊距為0的時候，使用者的注意力更多的集中在圖片上，如下面對比圖所示：
由於沒有留白做視覺引導，視線在往下瀏覽時，會被圖片直接割裂，造成在圖片上停留的時間更長，因此通欄的設計大多更適合出現在頁面中間的運營banner上，如下圖所示：
這種設計視覺上很容易就能吸引使用者的注意，但是也很容易喧賓奪主，因此目前來說圖片與螢幕邊距為0的情況使用的不是很多，個人認為是有邊距的圖片或者banner可控性更強一點，也更推薦新手設計師借鑑。但是還有一個產品對於外邊距的處理有別的方法，如下圖所示：
MOO音樂的外邊距是30px，但是它左邊卡片的標籤外邊距是20px，也就是說MOO對標籤的處理是讓標籤衝出卡片左邊10px，這樣的設計也讓使用者的注意力更集中在了標籤上，值得借鑑。
字間距
1、圖文單行結合
首先要說的這種情況在我們平時使用的產品中是經常見的，大字號搭配小字號，如下圖所示：
這種彼此對比明顯，UI設計中間距的重要效能夠更好的進行資訊的主次傳遞，那麼在大字號與小字號之間的間距使用多大比較合適呢？如下圖所示：
這裡是以京東金融、淘寶、微信讀書和QQ讀書四個主流產品裡的單行文字間距為例的，上圖中我們可以看出文字與文字之間的間隔大多在16-20px之間，至於選擇16px還是20px，個人認為是透過左邊圖片的高度決定的（矮一點16px，高一點的20px），同時不論右邊的文字是兩行或者是三行，也都以左邊圖片的高度居中。除了文字和圖是左右搭配的，還有一種常見的情況是上下結構的，如下圖所示：
這類卡片式的設計，在我們的設計中經常用到，但行間距依然是一個難以讓介面看起來精緻的點，從上圖中我們能夠看出來，標題文字的大小是不一樣的，但行間距卻都是大機率的重合，因此個人認為我們可以參考這種型別的行間距數值：16-20px ，而文字的部分有各自產品的設計規範。
2、圖文多行結合
圖文多行在設計裡面算是比較複雜的情況，如下圖所示：
這種型別要考慮到的因素很多，標題是否換行、多行的間距、字型大小這些都是我們在設計的時候需要處理的細節，首先我們先來看標題只有單行的情況，如下圖所示：
從上圖中我們能夠看出來，雖然不存在折行的情況，但是因為展示的資訊很多，所以頁面設計的時候也會比較複雜，這種結構大多出現在電商產品中，因為外露的資訊比較多，想要儘量在列表頁展示更多的資訊來吸引使用者點選。而這裡需要遵循的方法有兩個，第一個是親密性原則，將你認為是同組的資訊做親密處理；第二個原則是4的倍數定律，上圖中的所有間距都是4的倍數，這跟我們在設計頁面定間距是的道理是一樣的。
1、標題行間距
這種情況一般出現在標題會有折行的情況下，但是下面的內容卻都是單行，如下圖所示：
上面四個產品中，除了京東的行間距是12px，其餘的都是16px，個人認為是因為京東的商品組建部分資訊很多，因此整體的字型也偏小，所以12px的行間距不會顯得太過擁擠。
2、正文行間距
這種情況是出現在標題最多隻有一行，但是正文都是折行的情況，如下圖所示：
在圖文列表的文字行間距都是12px，但是掌閱書籍詳情頁的文字行間距確是16px，關於行間距目前大部分的做法都是字型的大小乘以1。2~1。5倍，得出來的結果就是文字的行間距，但這種演算法僅限於行間距，不適用於其他的間距。
元素間距
在元素之間的間距我們經常犯的問題在於，設計的時候會讓別人無法看出哪個資訊是同一組的，如下圖所示：
左圖中的問題在我們的作品中經常見到，大元件之間的間距會與統一模組的間距設定成一樣的高度，這樣就會造成模組之間的關係不夠清晰，從圖中我們就可以看出來，元素間的間距也是親密原則，一起的就靠近，不同組的就分開，從視覺上就做出區分，這一點不僅僅用在介面中，圖示中也同樣適用，如下圖所示：
裡面的內容是一組的，因此間距會靠近，同時也會與外面的邊框間距近，雖然只是圖示，也是從視覺上來簡化資訊，便於使用者理解。
總結
從資訊層級的角度上來說，級別越高的內容間距越大，因為越重要的內容就要越吸引使用者越多的注意力，運用親密原則，能夠從視覺上減少使用者對文字資訊處理的成本。
