版式的重要性就不多說(shuō)了, 一個(gè)頁(yè)面的排版,基本就能看出一個(gè)人的設(shè)計(jì)功底了,而且不管你是從事vi、畫(huà)冊(cè)、電商、平面、網(wǎng)頁(yè)、ui都是離不開(kāi)版式的,一手好的版式非常重要。其實(shí)版式可以簡(jiǎn)單理解為,在一個(gè)限定好大小尺寸的畫(huà)面里,把信息進(jìn)行有視覺(jué)層次的展現(xiàn),基礎(chǔ)的字體圖片選擇應(yīng)用等就不多講了,這里主要講5點(diǎn),下面開(kāi)始正文 ~
1.畫(huà)面切割,由大而小
常見(jiàn)的分割有,左右、上下,而我則喜歡不規(guī)則分割(大體看是不規(guī)則,其中還是有著某種規(guī)則),我的習(xí)慣是先把畫(huà)面分割好,然后去填充對(duì)應(yīng)內(nèi)容,這樣就非??焖倭?,實(shí)際上和海報(bào)合成之前的靈感草圖是一樣一樣的,下面我就拿幾張近期的海報(bào)舉個(gè)栗子。
因?yàn)樯蠄D是海報(bào),我都是以純圖片為背景的,就是在已有的空間上去分割出文案的位置,可能表達(dá)的不是很透徹,下面我以網(wǎng)頁(yè)來(lái)舉例子。
那么最先開(kāi)始的就是大版面分割了,頁(yè)面做出來(lái)是新穎特別呢還是穩(wěn)定常規(guī)?基本就有感覺(jué)了,具體版面怎么分割,完全看個(gè)人,只要比例協(xié)調(diào),版塊與版塊之間銜接舒適就ok。
上圖左邊頁(yè)面結(jié)構(gòu),看起來(lái)就會(huì)顯得穩(wěn)定常規(guī)一些,而右邊則新穎一些,當(dāng)然分割不止是大版面,由大而小,大版面分完了就需要從店招開(kāi)始依次往下進(jìn)行小版面的分割,最后去填充內(nèi)容,具體填充手法就看個(gè)人設(shè)計(jì)功底了,下面實(shí)際舉例,左邊為我創(chuàng)作之前的版面分割,大到頁(yè)面布局,小到某個(gè)地方的排版,都是事先分割好的。
也有這種情況,就是按照事先切割好的版塊設(shè)計(jì)途中,有了更好的想法,就會(huì)稍作改動(dòng),但是大體基本是沒(méi)有什么變化的(有時(shí)候?yàn)榱诵薷囊粋€(gè)版塊排版,結(jié)果把下面的排版都給改了去迎合這一個(gè)排版,都是淚)
2.了解版式中的點(diǎn)、線、面
那么什么是點(diǎn)、線、面呢?
簡(jiǎn)單來(lái)講,單個(gè)元素、文字或者圖形都可以是點(diǎn),多個(gè)點(diǎn)相連就形成線,多個(gè)點(diǎn)、線在同一個(gè)平面內(nèi)相交形成面。
點(diǎn)
單個(gè)或者極小范圍內(nèi)的圖形元素,稱(chēng)之為點(diǎn),點(diǎn)在版式中常用于,點(diǎn)綴、裝飾、平衡頁(yè)面輕重。
線
線是點(diǎn)運(yùn)動(dòng)的軌跡,多個(gè)點(diǎn)的鏈接則形成了線,線常用于強(qiáng)調(diào)突出、鏈接、分割
面
擴(kuò)大的點(diǎn),或者多個(gè)點(diǎn)線則形成了面,常用于背景、區(qū)域劃分
下面舉個(gè)栗子,大家可以找找圖里的點(diǎn)線面分別是哪里,有什么作用。
應(yīng)該不難看出,單個(gè)的虛化漸變都是點(diǎn),單個(gè)的字母 數(shù)字也是點(diǎn),點(diǎn)在這里起到的是裝飾點(diǎn)綴作用,中間的大面積漸變是線的體現(xiàn),下面一排文案相連也是線的體現(xiàn),線在這里起到的是鏈接視覺(jué)作用,最后這張圖里多個(gè)點(diǎn)、線的存在就形成了面。
3.信息表達(dá)分主次
層級(jí)混亂是導(dǎo)致畫(huà)面失衡的重要因素,客戶(hù)看圖會(huì)看得云里霧里,這就注定了是一張失敗的圖,什么是層級(jí),就是在一個(gè)畫(huà)面里,一眼能看出來(lái)主次,信息層級(jí)的清楚區(qū)分會(huì)給人舒適的瀏覽體驗(yàn),仔細(xì)觀看優(yōu)秀設(shè)計(jì)師的作品,你會(huì)發(fā)現(xiàn),好的作品會(huì)在瀏覽舒適的同時(shí), 引導(dǎo)著你的視覺(jué)瀏覽順序,我們來(lái)看看案例。
我們來(lái)簡(jiǎn)單看看問(wèn)題,首先是上圖,產(chǎn)品和文字之間的距離沒(méi)有拉開(kāi),信息層級(jí)區(qū)分不夠明顯,沒(méi)有明顯的視覺(jué)瀏覽順序以及舒適的體驗(yàn),設(shè)計(jì)本身就是一個(gè)細(xì)節(jié)見(jiàn)證品質(zhì)產(chǎn)物,如果一個(gè)頁(yè)面里多個(gè)地方出現(xiàn)這種無(wú)層級(jí)的信息,則問(wèn)題就大了。
那么信息分層的方法有哪些呢?
方法1:改變透明度,弱化其他信息的透明度來(lái)突出你想要突出的信息
方法2.拉開(kāi)信息間距,把主題放在視覺(jué)焦點(diǎn)的位置展示,一般為中心,或者視覺(jué)瀏覽順序,即左右,或者上下
方法3:改變字體粗細(xì),通過(guò)調(diào)整字體粗細(xì)來(lái)進(jìn)行弱化和突出
方法4:顏色,通過(guò)色彩來(lái)區(qū)分主次,黑白灰我稱(chēng)為無(wú)色調(diào),不算顏色。
方法5:大小,通過(guò)改變字體或者圖片大小來(lái)進(jìn)行弱化和突出
如果結(jié)合多種方法,那么信息層級(jí)的區(qū)分就會(huì)非常明顯了,下圖用到了居中,顏色,大小,透明度。
4.頁(yè)面平衡
也是很重要的一點(diǎn),平衡這個(gè)詞的概念非常廣泛,各種平衡,自然、物理、藝術(shù)、心理、色彩、空間等等都包含平衡,而在設(shè)計(jì)中,平衡也是不可缺少的一個(gè)構(gòu)成要素,畫(huà)面不平衡就會(huì)導(dǎo)致看起來(lái)不穩(wěn)定,在設(shè)計(jì)中,更多的是體現(xiàn)色彩與體積的平衡。
那么頁(yè)面為什么需要平衡?
我個(gè)人理解為,構(gòu)成版面的所有元素,不論是文字還是圖片,都是有份量的,比如面積大小、顏色深淺、我們?cè)谂虐娴臅r(shí)候要做到各種元素在畫(huà)面中的占比達(dá)到和諧,畫(huà)面才會(huì)平衡,那我們來(lái)看看常用的平衡有哪些。
4.1 色塊體積占比平衡
上圖中,非常明顯的平衡就是上下兩個(gè)色塊的面積占比基本一致,給人一種平衡感,色塊平衡多用于平衡頁(yè)面重心,讓畫(huà)面看起來(lái)更加穩(wěn)定,但是上圖因?yàn)閳D片反著的,所以才會(huì)給人一種另類(lèi)的感覺(jué)。
4.2 位置空間的平衡
上圖就是空間平衡,沒(méi)有用整個(gè)圖片素材填滿(mǎn)整張圖,而是文字部分和圖片各占據(jù)一半,形成平衡。
在來(lái)看個(gè)栗子
上圖兩張基本一致,上圖就是移動(dòng)了一下文案和裝飾英文的位置,以及加了根條線,卻給人不一樣的感覺(jué),可以想想為什么。
5.對(duì)齊
關(guān)于對(duì)齊真的是非?;A(chǔ)的一項(xiàng)內(nèi)容,也是非常重要的內(nèi)容,放在最后來(lái)講也是希望在提醒大家一遍,畫(huà)面里的信息一定是遵循著某種規(guī)則而擺放,絕對(duì)不是隨意擺放,有位大哥說(shuō)過(guò),隨意擺放經(jīng)不起時(shí)間推敲,有規(guī)則擺放則可能流芳百世 ~ 下面我們來(lái)看看對(duì)齊的例子。
你都看到哪些地方對(duì)齊了? 這樣產(chǎn)出的頁(yè)面,是否更具說(shuō)服感呢,元素切勿隨意擺放,讓每一個(gè)元素位置都滿(mǎn)足為什么。
總結(jié):
版式中包含非常多的設(shè)計(jì)理念,從字體圖片的選擇、網(wǎng)格系統(tǒng)的規(guī)范、點(diǎn)線面的認(rèn)知、視覺(jué)平衡感、信息分層等多項(xiàng)知識(shí)點(diǎn)。今天沒(méi)有講柵格,因?yàn)槲矣X(jué)得我理解的柵格還不是很系統(tǒng)規(guī)范,等后續(xù)稍微成熟點(diǎn)在做分享吧,希望本篇文章能對(duì)現(xiàn)階段的你帶來(lái)幫助,感謝瀏覽,有問(wèn)題歡迎留言探討。