UI設(shè)計(jì)中的排版設(shè)計(jì)技巧

　　不知道大家有沒(méi)有遇到過(guò)這樣的情況,在排版的時(shí)候咔咔一頓操作，圖形字母四處飛，試了一遍又一遍，但最后卻發(fā)現(xiàn)效果并不咋地!反正我是經(jīng)常遇到這種情況，其實(shí)原因就在于我并沒(méi)有理清思路，如果我能把排版的思路想清楚，就不會(huì)每次都浪費(fèi)大量時(shí)間了。今天AAA教育郭老師就帶大家分析一下UI設(shè)計(jì)中的排版設(shè)計(jì)技巧吧。
 

　　下面兩張圖是去年做的練習(xí)，兩個(gè)排版的思路是一樣的：

　　在排版上我做了很多次嘗試，中間有很多過(guò)程稿奇丑無(wú)比。
 

　　那到底正確的思路是怎樣的?一起來(lái)看看吧!
 

　　大綱如下：
 

　　1.別影響主角光環(huán)

        2.按照缺少的形狀補(bǔ)充內(nèi)容

        3.主體框架還是一個(gè)主體物加四角點(diǎn)綴

        4.元素之間的細(xì)節(jié)
 

　　1.別影響主角光環(huán)
 

　　在最開(kāi)始排版的時(shí)候，因?yàn)闆](méi)想清楚，所以一頓瞎排，背景的形狀、顏色都是沒(méi)有章法的安放：

 

　　但其實(shí)我們只需要記住一點(diǎn)，最重要的一點(diǎn)，背景修飾元素不要搶主體，那就一定不會(huì)有太大的錯(cuò)誤，所以我把背景使用了非常淺的灰色字母：

 

　　這樣一個(gè)既有背景修飾，又不搶主體物的畫(huà)面就出來(lái)了。
 

　　2.按照缺少的形狀補(bǔ)充內(nèi)容
 

　　有了主框架，我們會(huì)發(fā)現(xiàn)如果我們?cè)诒澈螽?huà)一個(gè)隱形的矩形，會(huì)發(fā)現(xiàn)右下角是空的，嚴(yán)格來(lái)說(shuō)就還不算飽滿(mǎn)：

 

　　這時(shí)候我們就可以按照缺少的形狀，加一些相對(duì)應(yīng)的排版，比如文字與圖形的組合：

 

　　這樣就算是比較飽滿(mǎn)了。
 

　　3.主體框架還是一個(gè)主體物加四角點(diǎn)綴
 

　　平時(shí)我經(jīng)常用到的一個(gè)排版就是四角排版，很簡(jiǎn)單，不易出錯(cuò)，比如：

 

　　這個(gè)畫(huà)面其實(shí)也可以使用這個(gè)思路，我們可以先把剛才右下角的元素亮起來(lái)：

 

　　然后在其他三個(gè)角落繼續(xù)添加輔助元素，元素盡量個(gè)不相同：

 

　　這樣一個(gè)主體加四角修飾的排版框架就基本完成了，但四個(gè)角落的元素還是有點(diǎn)突兀，需要繼續(xù)細(xì)化，接著看吧!
 

　　4.元素之間的細(xì)節(jié)
 

　　先來(lái)看下四個(gè)角落元素細(xì)化前后的對(duì)比圖：
 

　　細(xì)化前：

 

        細(xì)化后：

 

　　我做了三件事：
 

　　第一：深淺對(duì)比，四個(gè)角落元素都突出來(lái)，有點(diǎn)搶?zhuān)园炎笙陆堑脑氐氯ァ?br />  

　　第二：色彩對(duì)比，講右上角的圓圈增加色相，使整體更加豐富，當(dāng)然色相必須和主題有所呼應(yīng)，所以選了藍(lán)色。
 

　　第三：前后對(duì)比，把右上角的圓圈放在灰色字母后面，形成前后關(guān)系，豐富層次。
 

　　做完這三點(diǎn)，看起來(lái)就和諧多啦!
 

　　5.總結(jié)
 

　　其實(shí)不論做什么，心里沒(méi)底都是因?yàn)楸澈蟮倪壿嫑](méi)想清楚，當(dāng)我們能靜下心來(lái)認(rèn)真思考，想清楚原因，再加以改善，大部分問(wèn)題都是可以解決的，慢慢的，心里也就有底了。
 

　　排版也是一樣的，多思考再多練習(xí)，不說(shuō)咱們能稱(chēng)為排版大神吧，但至少解決工作問(wèn)題、做個(gè)作品集啥的，問(wèn)題不大!
 

　　長(zhǎng)點(diǎn)心，比啥都強(qiáng)!點(diǎn)個(gè)贊，更強(qiáng)!
 

　　因此，您現(xiàn)在已經(jīng)了解了與UI設(shè)計(jì)師的工作相關(guān)的主要技能。如果您想了解更多信息，請(qǐng)?jiān)L問(wèn)AAA教育，包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。