標(biāo)題的字號通常會(huì)比較大，這時(shí)如果給它搭配一個(gè)字號比較小、字體不一樣的副標(biāo)題，或者是英文標(biāo)題，那么就可以得到鮮明的大小對比和字體對比，甚至還可以有色彩對比、空間對比等。這么做可以增加標(biāo)題的層級關(guān)系，使視覺更豐富，更生動(dòng)。
▲ 上圖的標(biāo)題只有四個(gè)字，如果單獨(dú)排版會(huì)很單調(diào)，所以設(shè)計(jì)師把它與英文標(biāo)題一起排版。如果你想要排版的效果比較時(shí)尚、活潑，可以將標(biāo)題進(jìn)行斷行、錯(cuò)位處理，兩行或三行的標(biāo)題比單行標(biāo)題的層級更豐富、對比關(guān)系更多。
▲ 上圖的標(biāo)題搭配了一行字號更小、字重更細(xì)的副標(biāo)題，由于上圖海報(bào)想要表現(xiàn)出比較高端的品質(zhì)感，所以標(biāo)題和副標(biāo)題采用了同一種字體，也沒有加入太多的排版技巧。
▲ 上圖的標(biāo)題與活動(dòng)時(shí)間和裝飾英文組合排列在一起，并且在排版時(shí)有明顯的大小對比、字體對比、顏色對比、點(diǎn)線面的對比等，使整個(gè)標(biāo)題看起來有豐富的細(xì)節(jié)。
二、賣點(diǎn)要有Icon
絕大部分的產(chǎn)品海報(bào)或?qū)氊愒斍轫撋隙紩?huì)展現(xiàn)產(chǎn)品的賣點(diǎn)（核心優(yōu)勢），這通常會(huì)是比較重要的信息，所以需要重點(diǎn)突出。不過突出的手法不一定要使用很大的的或者是對比很強(qiáng)的顏色，給賣點(diǎn)增加icon就是一個(gè)很常見、很有效的技巧，既可以通過icon把賣點(diǎn)信息與其他信息區(qū)別開，從而吸引讀者的目光，也能使畫面視覺更豐富、有更多細(xì)節(jié)。
當(dāng)然，icon設(shè)計(jì)本身也很關(guān)鍵，首先，要盡量使用一些大家比較熟、能一看就懂的圖形符號；其次，要盡量設(shè)計(jì)得細(xì)致一些，雖然會(huì)需要花一些時(shí)間，但這是值得的。
另外，風(fēng)格的統(tǒng)一也很重要，一方面是每個(gè)icon的風(fēng)格要一致，不要有些硬朗、有些柔和，也不要有些很復(fù)雜、有些很簡單；另一方面是Icon的調(diào)性也要符合產(chǎn)品調(diào)性以及畫面的風(fēng)格，這樣畫面的整體視覺才能更統(tǒng)一、更美觀。
比如，在上圖的兒童牙刷海報(bào)中，由于畫面部分采用了剪紙風(fēng)格，所以賣點(diǎn)的icon也使用了剪紙風(fēng)格。
三、信息要分組
版面中的信息一定要分組，不要全部排成一堆或者四分五裂地排列，否則都會(huì)加大閱讀和理解的難度，可以通過控制信息之間的間距來分組，也可以利用線、線框、色塊來分組。并且，信息分組還需要注意以下兩點(diǎn)：
? 視覺上要有主次，即每組信息版面空間占比不要太一致。
? 要符合閱讀及信息傳播的邏輯。有些設(shè)計(jì)師會(huì)為了好看而隨意把信息的順序打亂重組，這是本末倒置的行為。
例如在下圖的海報(bào)中，設(shè)計(jì)師雖然將信息進(jìn)行了分組，但是除了主體很突出以外，其他信息都太過平均了，再加上信息塊（包含文字組和圖片部分）特別多，所以導(dǎo)致排版很散。
而在優(yōu)化后的方案中，把版面信息進(jìn)行了重新分組和排列，視覺更整體、層級關(guān)系更鮮明。
下圖海報(bào)的排版也有幾個(gè)比較嚴(yán)重的問題：
? 信息分組不合理。大部分文字信息都被圓形色塊打包成一個(gè)組，但里面很多信息的意義并不相同，其實(shí)不適合組合在一起；
? 文案的排版不符合邏輯。比如把“只選直徑…”這句文案放在最上面有點(diǎn)突然；再比如“首創(chuàng)一品黑蒜豬大蹄飯”其實(shí)是一句話，設(shè)計(jì)師卻把它拆開排列，而且順序是錯(cuò)亂的；
? 排版太亂。雖然用了圓形色塊進(jìn)行整合，但是在這一組新信息里，有的文字排成弧線、有的文字豎排、有的文字橫排、有的文字對齊排、有的文字錯(cuò)位排，同一個(gè)信息塊里采用了太多不同的排版形式，而且組合得不好。
修改過的方案則進(jìn)行了合理的分組，信息排版也更符合閱讀理解的邏輯。
? 把標(biāo)題和副標(biāo)題分成一組排在左上角。在面積上是版面中的第二大視覺塊，信息一目了然且主次分明；
? 把價(jià)格、口感NO.1?“只選直徑…”這三個(gè)信息分成一個(gè)組，排在標(biāo)題和副標(biāo)題下方、產(chǎn)品的上方，符合正確的視覺流程和閱讀邏輯。而且該組文案與產(chǎn)品圖片進(jìn)行疊加或繞排處理，既加強(qiáng)了文字與圖片的關(guān)聯(lián)，也使得文案與產(chǎn)品形成了一個(gè)大的整體。
所以，設(shè)計(jì)師在做設(shè)計(jì)時(shí)，一定要閱讀文案、理解文案，看哪些信息可以劃分到一組排列，哪些信息應(yīng)該要分開排列。
四、視覺層級要分明
只要不是同一句話或者同一類信息，那么都要區(qū)分它們的層級關(guān)系以及視覺呈現(xiàn)，哪怕這些信息被分在同一組。比如標(biāo)題、副標(biāo)題、小標(biāo)題、正文、賣點(diǎn)、注解、價(jià)格等等，這些信息在視覺呈現(xiàn)上都要有所區(qū)分，并且區(qū)分得要盡量明顯一些，如果只是把字號加大一點(diǎn)、改變文字的顏色，那么可能會(huì)比較難把信息進(jìn)行有效區(qū)隔，視覺上也會(huì)比較單調(diào)。
所以，為了視覺上更美觀、更易閱讀，我們還可以通過改變字體、排版的方向、排列的位置，增加輔助元素（icon、色塊、線條、線框等）、裝飾效果（描邊、立體效果、扭曲效果、裁剪效果等）等等，創(chuàng)造出比較鮮明的對比以及視覺層級。
另外需要注意的是，區(qū)隔信息的手法要與設(shè)計(jì)的風(fēng)格和調(diào)性吻合，通常來說，高端、簡約的版面，所用的排版技巧和裝飾手法會(huì)比較少，視覺效果也不會(huì)太夸張；而如果是時(shí)尚類或者促銷類的設(shè)計(jì)，其用于區(qū)隔信息層級的手法可以盡量豐富、夸張一點(diǎn)。
比如下圖是蘋果筆記本的banner設(shè)計(jì)，其每一行文字的視覺效果都有明顯的區(qū)別，但并沒有采用特別夸張的表現(xiàn)手法，字體和排版方向都是統(tǒng)一的。
而下面這則貓糧的海報(bào)，其文字表現(xiàn)手法則要豐富很多，對比要更強(qiáng)。
總結(jié)一下
想要版式更加精致、更便于信息的傳播，我們需要處理好以下幾處細(xì)節(jié)：? 給標(biāo)題搭配輔助文字；? 賣點(diǎn)要有Icon；? 信息要分組；? 視覺層級要分明。
作者：蔥爺
轉(zhuǎn)載請注明：學(xué)UI網(wǎng)》做好這幾處細(xì)節(jié)，你的排版才能更精致
藍(lán)藍(lán)設(shè)計(jì)( www.bouu.cn )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)、UI設(shè)計(jì)公司、界面設(shè)計(jì)公司、UI設(shè)計(jì)服務(wù)公司、數(shù)據(jù)可視化設(shè)計(jì)公司、UI交互設(shè)計(jì)公司、高端網(wǎng)站設(shè)計(jì)公司、UI咨詢、用戶體驗(yàn)公司、軟件界面設(shè)計(jì)公司