UI設(shè)計(jì)中間距的重要性

　　APP里面的間距和邊距的設(shè)計(jì)，很有學(xué)問的，最近設(shè)計(jì)公司的產(chǎn)品，大部分都是列表，這些頁面視覺效果不強(qiáng)，但是難點(diǎn)在于要做的看起來舒服，而其中一個難點(diǎn)就是間距的設(shè)計(jì)。不要小看間距這個問題，新手做出來的界面大部分翻車的問題就是在于間距。今天AAA教育郭老師就好好研究一下關(guān)于間距的問題，主要有APP外邊距，字間距、行間距和元素邊距等四個方面。
 

　　外邊距

 

　　當(dāng)圖片與屏幕邊距為0的時候，用戶的注意力更多的集中在圖片上，如下面對比圖所示：

 

　　由于沒有留白做視覺引導(dǎo)，視線在往下瀏覽時，會被圖片直接割裂，造成在圖片上停留的時間更長，因此通欄的設(shè)計(jì)大多更適合出現(xiàn)在頁面中間的運(yùn)營banner上，如下圖所示：

 

　　這種設(shè)計(jì)視覺上很容易就能吸引用戶的注意，但是也很容易喧賓奪主，因此目前來說圖片與屏幕邊距為0的情況使用的不是很多，個人認(rèn)為是有邊距的圖片或者banner可控性更強(qiáng)一點(diǎn)，也更推薦新手設(shè)計(jì)師借鑒。但是還有一個產(chǎn)品對于外邊距的處理有別的方法，如下圖所示：

 

　　MOO音樂的外邊距是30px，但是它左邊卡片的標(biāo)簽外邊距是20px，也就是說MOO對標(biāo)簽的處理是讓標(biāo)簽沖出卡片左邊10px，這樣的設(shè)計(jì)也讓用戶的注意力更集中在了標(biāo)簽上，值得借鑒。
 

　　字間距
 

　　1、圖文單行結(jié)合
 

　　首先要說的這種情況在我們平時使用的產(chǎn)品中是經(jīng)常見的，大字號搭配小字號，如下圖所示：
 

　　這種彼此對比明顯，能夠更好的進(jìn)行信息的主次傳遞，那么在大字號與小字號之間的間距使用多大比較合適呢?如下圖所示：

 

　　這里是以京東金融、淘寶、微信讀書和QQ讀書四個主流產(chǎn)品里的單行文字間距為例的，上圖中我們可以看出文字與文字之間的間隔大多在16-20px之間，至于選擇16px還是20px，個人認(rèn)為是通過左邊圖片的高度決定的(矮一點(diǎn)16px,高一點(diǎn)的20px)，同時不論右邊的文字是兩行或者是三行，也都以左邊圖片的高度居中。除了文字和圖是左右搭配的，還有一種常見的情況是上下結(jié)構(gòu)的，如下圖所示：

 

　　這類卡片式的設(shè)計(jì)，在我們的設(shè)計(jì)中經(jīng)常用到，但行間距依然是一個難以讓界面看起來精致的點(diǎn)，從上圖中我們能夠看出來，標(biāo)題文字的大小是不一樣的，但行間距卻都是大概率的重合，因此個人認(rèn)為我們可以參考這種類型的行間距數(shù)值：16-20px ，而文字的部分有各自產(chǎn)品的設(shè)計(jì)規(guī)范。
 

　　2、圖文多行結(jié)合
 

　　圖文多行在設(shè)計(jì)里面算是比較復(fù)雜的情況，如下圖所示：

 

　　這種類型要考慮到的因素很多，標(biāo)題是否換行、多行的間距、字體大小這些都是我們在設(shè)計(jì)的時候需要處理的細(xì)節(jié)，首先我們先來看標(biāo)題只有單行的情況，如下圖所示：

 

　　從上圖中我們能夠看出來，雖然不存在折行的情況，但是因?yàn)檎故镜男畔⒑芏?，所以頁面設(shè)計(jì)的時候也會比較復(fù)雜，這種結(jié)構(gòu)大多出現(xiàn)在電商產(chǎn)品中，因?yàn)橥饴兜男畔⒈容^多，想要盡量在列表頁展示更多的信息來吸引用戶點(diǎn)擊。而這里需要遵循的方法有兩個，第一個是親密性原則，將你認(rèn)為是同組的信息做親密處理;第二個原則是4的倍數(shù)定律，上圖中的所有間距都是4的倍數(shù)，這跟我們在設(shè)計(jì)頁面定間距是的道理是一樣的。
 

　　1、標(biāo)題行間距
 

　　這種情況一般出現(xiàn)在標(biāo)題會有折行的情況下，但是下面的內(nèi)容卻都是單行，如下圖所示：

 

　　上面四個產(chǎn)品中，除了京東的行間距是12px，其余的都是16px，個人認(rèn)為是因?yàn)榫〇|的商品組建部分信息很多，因此整體的字體也偏小，所以12px的行間距不會顯得太過擁擠。
 

　　2、正文行間距
 

　　這種情況是出現(xiàn)在標(biāo)題最多只有一行，但是正文都是折行的情況，如下圖所示：

 

　　在圖文列表的文字行間距都是12px，但是掌閱書籍詳情頁的文字行間距確是16px，關(guān)于行間距目前大部分的做法都是字體的大小乘以1.2~1.5倍，得出來的結(jié)果就是文字的行間距，但這種算法僅限于行間距，不適用于其他的間距。
 

　　元素間距
 

　　在元素之間的間距我們經(jīng)常犯的問題在于，設(shè)計(jì)的時候會讓別人無法看出哪個信息是同一組的，如下圖所示：

 

　　左圖中的問題在我們的作品中經(jīng)常見到，大組件之間的間距會與統(tǒng)一模塊的間距設(shè)置成一樣的高度，這樣就會造成模塊之間的關(guān)系不夠清晰，從圖中我們就可以看出來，元素間的間距也是親密原則，一起的就靠近，不同組的就分開，從視覺上就做出區(qū)分，這一點(diǎn)不僅僅用在界面中，圖標(biāo)中也同樣適用，如下圖所示：

 

　　里面的內(nèi)容是一組的，因此間距會靠近，同時也會與外面的邊框間距近，雖然只是圖標(biāo)，也是從視覺上來簡化信息，便于用戶理解。
 

　　總結(jié)
 

　　從信息層級的角度上來說，級別越高的內(nèi)容間距越大，因?yàn)樵街匾膬?nèi)容就要越吸引用戶越多的注意力，運(yùn)用親密原則，能夠從視覺上減少用戶對文字信息處理的成本。因此，您現(xiàn)在已經(jīng)了解了與UI設(shè)計(jì)師的工作相關(guān)的主要技能。如果您想了解更多信息，請?jiān)L問AAA教育，包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。