? 色塊要有明顯的主次,要有大小對比、色彩對比、輪廓對比等。
? 色塊的數(shù)量要適當(dāng)控制,太少了顯得單調(diào),太多了會很碎。
▲比如上圖的色塊就過于零碎了。
▲上圖就要好很多。
? 不要把所有色塊都嚴(yán)格對齊,否則會很死板。
? 由于幾何色塊本身比較單調(diào)、生硬,所以色塊內(nèi)的信息和圖形可以靈活一點,可以增加一些細(xì)節(jié),比如裝飾元素。
? 不一定要把所有的信息都放進(jìn)色塊里,把個別信息、元素放出來,可以使版面看起來更靈活。
下面蔥爺給大家分享幾個案例,來看看色塊排版具體是怎么操作的。
案例一:服裝畫冊目錄設(shè)計
下圖是某服裝畫冊的目錄頁設(shè)計,其實也是用了色塊來排版,但是整體很混亂,信息分組不明確,而且很不精致,所以需要對它進(jìn)行調(diào)整。
? 原稿幾乎把所有信息都放在一個大色塊一中,這么做色塊就沒起到區(qū)隔信息的作用,所以我把背景分成了三塊(顏色全來自圖片),最上面的放標(biāo)題,下面兩塊分別放兩組內(nèi)容并對齊排版,使信息更清晰、更易讀。配圖保留原稿把圖片放入方形色塊的方式,只是去掉了多余的描邊。
? 重新設(shè)計標(biāo)題。黑色太過突兀,所以我把它改成了粉色,并給副標(biāo)題也加了一個綠色塊,副標(biāo)題與標(biāo)題以及下方的綠色塊疊加,既增加了畫面的層次感和設(shè)計感,也加強了上下兩個空間的聯(lián)系。
? 將內(nèi)文的排得更精致一點。首先,選了一個歐式風(fēng)格的字體,給內(nèi)文中的四組信息分別加上序號,在風(fēng)格與排版上與其他元素形成鮮明的對比。其次,把內(nèi)文的顏色從黑色改成與對應(yīng)色塊的深色,融合性更好。最后,在小標(biāo)題和正文之間加入短線條,做區(qū)隔和裝飾的作用,并適當(dāng)調(diào)整正文的行距。
? 用網(wǎng)格系統(tǒng)稍作規(guī)范就完成了。
方案二:兒童蛋白粉單張設(shè)計
下圖是該版面需要展示的主要內(nèi)容,文字較多,而且基本上是大段大段的,但信息組別并不多,大概可以分為四五個部分。
? 將屬于不同組別的信息和元素分別放入色塊中進(jìn)行區(qū)隔,色塊顏色來自于品牌logo和包裝。
? 這樣劃分色塊層級太少,而且矩形色塊太硬,不太適合兒童產(chǎn)品,所以把標(biāo)題和小標(biāo)題都單獨拿出來了,并把色塊做了圓角處理。色塊縮小后,產(chǎn)品圖片有一半露在外面,正好起到打破方塊的作用。
? 標(biāo)題需要突出設(shè)計一下,但由于左上角有Logo,所以如果把標(biāo)題拉大,那么左邊就會有點擁擠,右邊則會比較空,所以把產(chǎn)品圖片和產(chǎn)品介紹的文字左右調(diào)換一下更好。功效證明的文字太多,句子也很長,所以我把它分成了兩欄,提高文字的易讀性。
? 把標(biāo)題字體改成宋體和襯線體,并把產(chǎn)品圖片下方的色塊改成圓形,加強視覺上的對比效果和靈活性。
? 把標(biāo)題的文字改成右對齊,并跟與下邊功效證明文字的右欄對齊,這樣左上角的留白會更舒服一些,平衡性也更好。
兩個正文的大色塊里全是文字所以略顯單調(diào),于是我在文字上下加了一組波浪線,細(xì)節(jié)上會更精致一點,到這里這個單張就排完了。
方案三:移動寬帶海報設(shè)計
下圖是移動寬帶的一則促銷海報,也是用了色塊排版,該畫面中的信息其實挺清晰的,主次分明,也有一定的視覺沖擊力。問題在于美觀性不夠、形式過于普通不時尚、排版很呆板,下面我們來對它進(jìn)行優(yōu)化:
? 將該畫面中的信息一一用色塊框起來,原方案把“100M寬帶優(yōu)惠用”放在一個大色塊里,層級關(guān)系太少,視覺變化不夠豐富,所以我把它分成了三個色塊(由于移動的調(diào)性還是比較年輕的,所以我打算用孟菲斯風(fēng)格來做)。另外,原方案中的優(yōu)惠套餐被處理成三個很平均的色塊,看起來既分散又缺少變化,所以我把他們組合在了一起。
? 將“100M寬帶優(yōu)惠用”這幾個色塊進(jìn)行適當(dāng)錯位排版,并在其下面增加一個大的色塊(可以看作是電視機的屏幕),以使版面變得靈活且主次分明。
? 給文字色塊加上立體效果,加強版面的空間感和信息之間的層次感。
? 只有文字和矩形色塊的畫面太過單調(diào)和生硬,所以我加了一些與寬帶相關(guān)的圖形元素進(jìn)來,比如代表視頻的播放器符號、代表網(wǎng)速快的閃電符號、代表互聯(lián)網(wǎng)的箭頭、代表網(wǎng)線的曲線。整個版面變得生動、活潑了很多。
? 在背景中加入網(wǎng)格底紋,使背景與主體形成呼應(yīng),視覺上也沒那么單調(diào),并把活動時間和辦理方式從最下面的色塊中調(diào)出來放在視覺主體的下方,與其他的文字色塊形成對比,
? 再調(diào)整一點細(xì)節(jié)就做完了。
色塊排版的用法還有很多,通過改變色塊的風(fēng)格、造型、組合方式等等,可以創(chuàng)造出非常多樣的效果,所以用色塊排版也不一定會很死板、很粗暴,比較適合表現(xiàn)時尚、沖擊力強的設(shè)計需求,但確實不太適合用于表現(xiàn)高端、高級的視覺,這點需要注意一下。
原文地址:蔥爺(公眾號)
作者:蔥爺
轉(zhuǎn)載請注明:學(xué)UI網(wǎng)》用色塊打開排版的思路,簡單好用!
分享此文一切功德,皆悉回向給文章原作者及眾讀者.
免責(zé)聲明:藍(lán)藍(lán)設(shè)計尊重原作者,文章的版權(quán)歸原作者。如涉及版權(quán)問題,請及時與我們?nèi)〉寐?lián)系,我們立即更正或刪除。
藍(lán)藍(lán)設(shè)計( m.sillybuy.com )是一家專注而深入的界面設(shè)計公司,為期望卓越的國內(nèi)外企業(yè)提供卓越的UI界面設(shè)計、BS界面設(shè)計 、 cs界面設(shè)計 、 ipad界面設(shè)計 、 包裝設(shè)計 、 圖標(biāo)定制 、 用戶體驗 、交互設(shè)計、 網(wǎng)站建設(shè) 、平面設(shè)計服務(wù)、
UI設(shè)計公司、界面設(shè)計公司、UI設(shè)計服務(wù)公司、數(shù)據(jù)可視化設(shè)計公司、UI交互設(shè)計公司、高端網(wǎng)站設(shè)計公司、UI咨詢、用戶體驗公司、軟件界面設(shè)計公司