快收藏!這些UI設(shè)計(jì)排版技巧，我只告訴你！

前言
       前段時(shí)間收到一個(gè)這樣的問題，說：日常工作幾乎都能完成，但老板總是不太滿意，我自己也在做審美方面的練習(xí)，可一看自己做的，就完全覺得不是那么回事，這個(gè)怎么破？
       其實(shí)以上的問題或多或少大家都經(jīng)歷過，而且有些時(shí)候，最擔(dān)心得也是這種，因?yàn)樗菜普幱诟叩筒痪偷募挤ㄋ�。類似這樣的問題，我建議處于這種狀態(tài)得設(shè)計(jì)師努力方向是尋找設(shè)計(jì)技法得基礎(chǔ)源，也就是從新審視一下自己的基礎(chǔ)環(huán)節(jié)。一般來說，在我們沒法突破和進(jìn)階的時(shí)候，我們最應(yīng)該做的不是繼續(xù)埋頭向前沖刺，而是穩(wěn)下來深呼吸，回頭看看自己努力過的印記，是否有漏洞，或者扎實(shí)，如果有的話就應(yīng)該及時(shí)彌補(bǔ)。
       剛才那位同學(xué)通過最終的輔助梳理后，得出了一些結(jié)果，那就是他的排版技法稍有薄弱，而且每次在做設(shè)計(jì)時(shí)，都不能很好的把控整個(gè)布局得視覺焦點(diǎn)，所以……他練習(xí)去了!   不能光練，我在這里也總結(jié)了一些排版得技巧與知識點(diǎn)，并且將研制多年的排版技巧分享給大家，希望有類似問題或正在努力的設(shè)計(jì)師們一同學(xué)習(xí)進(jìn)步。
目錄
01. 拉開內(nèi)容的距離，分清主次關(guān)系
02. 規(guī)整雖好，但卻死板  
03. 將圖片和文字賦予層次感
04. 根據(jù)確定內(nèi)容選取字體
05. 案例講解
06. 總結(jié)
01. 拉開內(nèi)容的距離，分清主次關(guān)系
       首先第一個(gè)我要說的就是在一個(gè)界面中，最重要且最簡單得一個(gè)手法就是拉開整個(gè)界面內(nèi)容得距離，不管是圖片和圖片，還是圖片和文字，都應(yīng)該是帶有一個(gè)有節(jié)奏感的空間距離，這樣才能確保整個(gè)界面是具有呼吸感和條理性的。
       其次是要注意保持重點(diǎn)標(biāo)題文字和內(nèi)容文字得主次關(guān)系，我們一般可以通過字體粗細(xì)、大小、顏色進(jìn)行主次區(qū)分，然后在外加有規(guī)律得間距，這樣就可以很好的幫助我們進(jìn)行內(nèi)容分類分組了。
       最后一個(gè)是圖片與圖片之間的主次關(guān)系，比如在app設(shè)計(jì)中，有的app會有較多的圖片顯示（比如那種美食類和大牌服裝類的app），那么，圖片與圖片得間距，或者圖片組與圖片組有節(jié)奏的間距，也可以更好的幫助我們區(qū)分一個(gè)界面內(nèi)的主次板塊內(nèi)容。如果說有涉及到那些具有不同功能得圖片展示，我們還可以通過圖片大小進(jìn)行區(qū)分，這樣，我們就能不光單一的進(jìn)行距離設(shè)定，還能再多一個(gè)緯度～大小，進(jìn)行主次區(qū)分。
02. 規(guī)整雖好，但卻死板
       這個(gè)問題不光是大家，我也會有思路固板得時(shí)候，我們總是習(xí)慣性的左對齊、右對齊、上對齊、下對齊，還有一個(gè)居中對齊，其實(shí)這并不是我們得錯(cuò)，在初學(xué)設(shè)計(jì)時(shí)，不管誰教排版，都會圍繞四個(gè)基礎(chǔ)對齊進(jìn)行延展，倒不是不允許初學(xué)的我們創(chuàng)新，實(shí)在是如果不設(shè)定這個(gè)規(guī)矩得話，估計(jì)那會都能天馬行空了。但也正因?yàn)檫@樣，我們習(xí)慣了這四個(gè)排版方式，因?yàn)榇_實(shí)好用，還簡單順手，倒不是不想創(chuàng)意，時(shí)間長得了我們，可能慢慢的就忠愛這四個(gè)排版了。
       所以說，標(biāo)準(zhǔn)的四個(gè)對齊排版技法不管怎么用，一般情況下都不會出現(xiàn)太大問題，但也就是這樣，形成了高低不就的狀態(tài)，要想打破這個(gè)問題，大家應(yīng)該嘗試一種新的手法，那就是“錯(cuò)位技法”，比如內(nèi)容標(biāo)題和副標(biāo)題得排列錯(cuò)位、標(biāo)題和圖片得穿插錯(cuò)位、標(biāo)題和正文的排列錯(cuò)位、圖片和圖片的排列或穿插錯(cuò)位，等等。
       以上這幾個(gè)錯(cuò)位，是可以將界面變得更加靈活的方式，不過這里大家要注意一點(diǎn)，錯(cuò)位技法雖然靈活，但它確實(shí)較為難駕馭，這個(gè)還要看實(shí)際設(shè)計(jì)和個(gè)人技能水平情況而定，如果說不能較好的把控錯(cuò)位技法，我建議可以先穩(wěn)妥的在實(shí)際工作中使用標(biāo)準(zhǔn)對齊，然后自己私下在用同樣的內(nèi)容在練習(xí)一稿，并嘗試錯(cuò)位技法，這樣既不需要重新理解界面內(nèi)容模塊，還能嘗試新的技法，是個(gè)不錯(cuò)的選擇。
03. 將圖片和文字賦予層次感
      一般情況下，我們在做作界面設(shè)計(jì)時(shí)，首先想到的就是依次羅列界面中的各種元素和文字，比如一張圖片，然后下面是標(biāo)題，在下面說明文案/關(guān)注，最后是分享/消息/點(diǎn)贊/標(biāo)簽，按照常規(guī)做法的話，這么做相對而言比較穩(wěn)妥，但同時(shí)也就缺乏了我們進(jìn)行創(chuàng)意的探究，其實(shí)，界面設(shè)計(jì)和平面中的版式設(shè)計(jì)具有異曲同工之處，我們可以在考慮如何將界面更加視覺和條理化，既滿足了極少空間更多內(nèi)容的展示，又同時(shí)提升了整體視覺的呈現(xiàn)。
      我們可以將圖片與圖片進(jìn)行重合（例如將銀行卡類的圖片設(shè)計(jì)進(jìn)行層級疊加），又或者我們可以文字+圖片形式的重合（例如瓷片區(qū)時(shí)的圖片和文字展示），這些種種案例，其實(shí)都是幫助我們從規(guī)規(guī)矩矩的視覺角度去進(jìn)行多方位的設(shè)計(jì)探索。通過以上這些層次技法表現(xiàn)，我們可以在視覺上更加靈活展現(xiàn)，并突出內(nèi)容主體，豐富界面的空間關(guān)系。
04. 選擇貼合設(shè)計(jì)風(fēng)格和氣質(zhì)的字體
       對于選取字體，我這里不做太多講述，主要因?yàn)樗粏渭兒驮O(shè)計(jì)有關(guān)，而是我們設(shè)計(jì)師選取的字體，到了開發(fā)那邊是否能被采用并實(shí)現(xiàn)，目前來講，我所見到的開發(fā)一般都是采用標(biāo)準(zhǔn)的微軟雅黑、蘋方等字體，也有部分又購買字體版權(quán)，比如目前我涉及到的產(chǎn)品就用到了方正蘭亭圓簡體_粗，但歸根結(jié)底，字體的選取還是較為局限的。那你會問竟然沒什么論述為何還要講呢？其實(shí)在一整個(gè)界面設(shè)計(jì)內(nèi)，設(shè)計(jì)師可以觸碰和自我控制的字體選取還是有一些地方的，比如banner內(nèi)容的字體設(shè)計(jì)和選取，大標(biāo)題是否采用宋體，活動/H5界面的字體設(shè)計(jì)，等等，都是可以進(jìn)行排版設(shè)計(jì)，并賦予界面視覺化的地方。
       一個(gè)界面是否好看和實(shí)用，不單純在于簡單的排版與羅列，必要的字體設(shè)計(jì)也是不可缺少的一部分，所以，在一些運(yùn)營活動界面，還是建議大家多去可以選取和設(shè)計(jì)一些好的字體進(jìn)行界面陪襯。正確的字體選擇，而且還能夠在信息和視覺兩個(gè)層面給用戶傳遞信息，錯(cuò)誤的選擇會導(dǎo)致誤解和混亂的結(jié)果。
總結(jié)
       我們看似一個(gè)（375*812）PT的界面沒有很多內(nèi)容，但這里面同樣隱藏著很多的排版技巧與知識點(diǎn)，也是我們設(shè)計(jì)師必須要學(xué)習(xí)和熟練掌握的重要技能之一，無論你目前從事C端還是B端，還是電商、平面，排版技巧都不排斥，反而說，它卻是所有設(shè)計(jì)最基礎(chǔ)的技法之一了，所以，在實(shí)際的工作中，我們都應(yīng)該重視起來，并總是下意識的進(jìn)行操練。
       本文由培訓(xùn)無憂網(wǎng)長沙牛耳教育課程顧問老師整理發(fā)布，希望能夠?qū)ο雲(yún)⒓娱L沙UI設(shè)計(jì)培訓(xùn)的學(xué)生有所幫助。更多課程信息可關(guān)注培訓(xùn)無憂網(wǎng)電腦IT培訓(xùn)或添加老師微信：15033336050

      注：尊重原創(chuàng)文章,轉(zhuǎn)載請注明出處和鏈接 http://m.elsolbar.com/news-id-2988.html 違者必究！部分文章來源于網(wǎng)絡(luò)由培訓(xùn)無憂網(wǎng)編輯部人員整理發(fā)布,內(nèi)容真實(shí)性請自行核實(shí)或聯(lián)系我們，了解更多相關(guān)資訊請關(guān)注UI設(shè)計(jì)頻道查看更多，了解相關(guān)專業(yè)課程信息您可在線咨詢也可免費(fèi)申請?jiān)囌n。關(guān)注官方微信了解更多：150 3333 6050