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