APP里面的間距和邊距的設(shè)計(jì),很有學(xué)問(wèn)的,最近設(shè)計(jì)公司的產(chǎn)品,大部分都是列表,這些頁(yè)面視覺(jué)效果不強(qiáng),但是難點(diǎn)在于要做的看起來(lái)舒服,而其中一個(gè)難點(diǎn)就是間距的設(shè)計(jì)。不要小看間距這個(gè)問(wèn)題,新手做出來(lái)的界面大部分翻車的問(wèn)題就是在于間距。今天AAA教育郭老師就好好研究一下關(guān)于間距的問(wèn)題,主要有APP外邊距,字間距、行間距和元素邊距等四個(gè)方面。
外邊距
當(dāng)圖片與屏幕邊距為0的時(shí)候,用戶的注意力更多的集中在圖片上,如下面對(duì)比圖所示:
由于沒(méi)有留白做視覺(jué)引導(dǎo),視線在往下瀏覽時(shí),會(huì)被圖片直接割裂,造成在圖片上停留的時(shí)間更長(zhǎng),因此通欄的設(shè)計(jì)大多更適合出現(xiàn)在頁(yè)面中間的運(yùn)營(yíng)banner上,如下圖所示:
這種設(shè)計(jì)視覺(jué)上很容易就能吸引用戶的注意,但是也很容易喧賓奪主,因此目前來(lái)說(shuō)圖片與屏幕邊距為0的情況使用的不是很多,個(gè)人認(rèn)為是有邊距的圖片或者banner可控性更強(qiáng)一點(diǎn),也更推薦新手設(shè)計(jì)師借鑒。但是還有一個(gè)產(chǎn)品對(duì)于外邊距的處理有別的方法,如下圖所示:
MOO音樂(lè)的外邊距是30px,但是它左邊卡片的標(biāo)簽外邊距是20px,也就是說(shuō)MOO對(duì)標(biāo)簽的處理是讓標(biāo)簽沖出卡片左邊10px,這樣的設(shè)計(jì)也讓用戶的注意力更集中在了標(biāo)簽上,值得借鑒。
字間距
1、圖文單行結(jié)合
首先要說(shuō)的這種情況在我們平時(shí)使用的產(chǎn)品中是經(jīng)常見(jiàn)的,大字號(hào)搭配小字號(hào),如下圖所示:
這種彼此對(duì)比明顯,能夠更好的進(jìn)行信息的主次傳遞,那么在大字號(hào)與小字號(hào)之間的間距使用多大比較合適呢?如下圖所示:
這里是以京東金融、淘寶、微信讀書(shū)和QQ讀書(shū)四個(gè)主流產(chǎn)品里的單行文字間距為例的,上圖中我們可以看出文字與文字之間的間隔大多在16-20px之間,至于選擇16px還是20px,個(gè)人認(rèn)為是通過(guò)左邊圖片的高度決定的(矮一點(diǎn)16px,高一點(diǎn)的20px),同時(shí)不論右邊的文字是兩行或者是三行,也都以左邊圖片的高度居中。除了文字和圖是左右搭配的,還有一種常見(jiàn)的情況是上下結(jié)構(gòu)的,如下圖所示:
這類卡片式的設(shè)計(jì),在我們的設(shè)計(jì)中經(jīng)常用到,但行間距依然是一個(gè)難以讓界面看起來(lái)精致的點(diǎn),從上圖中我們能夠看出來(lái),標(biāo)題文字的大小是不一樣的,但行間距卻都是大概率的重合,因此個(gè)人認(rèn)為我們可以參考這種類型的行間距數(shù)值:16-20px ,而文字的部分有各自產(chǎn)品的設(shè)計(jì)規(guī)范。
2、圖文多行結(jié)合
圖文多行在設(shè)計(jì)里面算是比較復(fù)雜的情況,如下圖所示:
這種類型要考慮到的因素很多,標(biāo)題是否換行、多行的間距、字體大小這些都是我們?cè)谠O(shè)計(jì)的時(shí)候需要處理的細(xì)節(jié),首先我們先來(lái)看標(biāo)題只有單行的情況,如下圖所示:
從上圖中我們能夠看出來(lái),雖然不存在折行的情況,但是因?yàn)檎故镜男畔⒑芏?,所以?yè)面設(shè)計(jì)的時(shí)候也會(huì)比較復(fù)雜,這種結(jié)構(gòu)大多出現(xiàn)在電商產(chǎn)品中,因?yàn)橥饴兜男畔⒈容^多,想要盡量在列表頁(yè)展示更多的信息來(lái)吸引用戶點(diǎn)擊。而這里需要遵循的方法有兩個(gè),第一個(gè)是親密性原則,將你認(rèn)為是同組的信息做親密處理;第二個(gè)原則是4的倍數(shù)定律,上圖中的所有間距都是4的倍數(shù),這跟我們?cè)谠O(shè)計(jì)頁(yè)面定間距是的道理是一樣的。
1、標(biāo)題行間距
這種情況一般出現(xiàn)在標(biāo)題會(huì)有折行的情況下,但是下面的內(nèi)容卻都是單行,如下圖所示:
上面四個(gè)產(chǎn)品中,除了京東的行間距是12px,其余的都是16px,個(gè)人認(rèn)為是因?yàn)榫〇|的商品組建部分信息很多,因此整體的字體也偏小,所以12px的行間距不會(huì)顯得太過(guò)擁擠。
2、正文行間距
這種情況是出現(xiàn)在標(biāo)題最多只有一行,但是正文都是折行的情況,如下圖所示:
在圖文列表的文字行間距都是12px,但是掌閱書(shū)籍詳情頁(yè)的文字行間距確是16px,關(guān)于行間距目前大部分的做法都是字體的大小乘以1.2~1.5倍,得出來(lái)的結(jié)果就是文字的行間距,但這種算法僅限于行間距,不適用于其他的間距。
元素間距
在元素之間的間距我們經(jīng)常犯的問(wèn)題在于,設(shè)計(jì)的時(shí)候會(huì)讓別人無(wú)法看出哪個(gè)信息是同一組的,如下圖所示:
左圖中的問(wèn)題在我們的作品中經(jīng)常見(jiàn)到,大組件之間的間距會(huì)與統(tǒng)一模塊的間距設(shè)置成一樣的高度,這樣就會(huì)造成模塊之間的關(guān)系不夠清晰,從圖中我們就可以看出來(lái),元素間的間距也是親密原則,一起的就靠近,不同組的就分開(kāi),從視覺(jué)上就做出區(qū)分,這一點(diǎn)不僅僅用在界面中,圖標(biāo)中也同樣適用,如下圖所示:
里面的內(nèi)容是一組的,因此間距會(huì)靠近,同時(shí)也會(huì)與外面的邊框間距近,雖然只是圖標(biāo),也是從視覺(jué)上來(lái)簡(jiǎn)化信息,便于用戶理解。
總結(jié)
從信息層級(jí)的角度上來(lái)說(shuō),級(jí)別越高的內(nèi)容間距越大,因?yàn)樵街匾膬?nèi)容就要越吸引用戶越多的注意力,運(yùn)用親密原則,能夠從視覺(jué)上減少用戶對(duì)文字信息處理的成本。因此,您現(xiàn)在已經(jīng)了解了與UI設(shè)計(jì)師的工作相關(guān)的主要技能。如果您想了解更多信息,請(qǐng)?jiān)L問(wèn)AAA教育,包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。
填寫下面表單即可預(yù)約申請(qǐng)免費(fèi)試聽(tīng)!怕錢不夠?可先就業(yè)掙錢后再付學(xué)費(fèi)! 怕學(xué)不會(huì)?助教全程陪讀,隨時(shí)解惑!擔(dān)心就業(yè)?一地學(xué)習(xí),可推薦就業(yè)!
?2007-2021/ m.5wd995.cn 北京漫動(dòng)者教育科技有限公司 備案號(hào): 京ICP備12034770號(hào) 監(jiān)督電話:010-53672995 郵箱:bjaaa@aaaedu.cc