您當(dāng)前位置:圖趣網(wǎng)(Tuquu) >> 網(wǎng)頁(yè)設(shè)計(jì)教程 >> 設(shè)計(jì)理論 >> 瀏覽設(shè)計(jì)教程

網(wǎng)站廣告常見(jiàn)構(gòu)圖方法

廣告始終是網(wǎng)站賴以生存的至上法寶,所以廣告設(shè)計(jì)的好壞也直接影響到網(wǎng)站效果的好壞,以前圖趣分享過(guò)淺談移動(dòng)互聯(lián)網(wǎng)的廣告設(shè)計(jì),這里再深入講解下網(wǎng)站廣告的構(gòu)圖方式。

網(wǎng)站廣告遵循原則:主體突出、視覺(jué)平衡。

為什么:

1)主體突出才能有傳播力,才能高效的表達(dá)廣告語(yǔ)的主題。

2)視覺(jué)平衡才能符合人們的視覺(jué)習(xí)慣,看起來(lái)舒服,符合常人的視覺(jué)體驗(yàn)。

 

 

一、 比例關(guān)系:

1、主體圖片的比例一般約為整個(gè)BANNER的1/3;邊距約為15PX。

2、以圖片為主體的構(gòu)圖:文字信息約占畫(huà)面的1/5到1/2,不超過(guò)1/2;面積的大小主要由文字的多少確定。

需要強(qiáng)調(diào)主次關(guān)系,主次口號(hào)性文字需要突出,介紹性文字可淡化。

3、logo的視覺(jué)不需要過(guò)于突出,能清晰識(shí)別即可;

 

 

在確定好文字與圖片位置關(guān)系時(shí),還需要考慮文字的層次關(guān)系,每一個(gè)廣告都會(huì)有主題文字,不會(huì)所有文字都保持一致效果;文字層次關(guān)系明確,用戶更容易看到吸引眼球的文字,也就是我們需要宣傳的主題。

 

 

二、 位置關(guān)系

1)圖片文字左右關(guān)系

主題視覺(jué)與文案的形成左右的位置關(guān)系,這種布局符合用戶的瀏覽習(xí)慣,是一種最常見(jiàn)的布局方式;適合廣告中主體圖片色彩較刺激醒目的產(chǎn)品。圖片自然的吸引用戶的眼光,然后視線逐步右移到文字上;

 

 

根據(jù)主圖的擺放方式,也可以選擇文字在左,圖片在右的布局方式

如下廣告,產(chǎn)品圖是一個(gè)長(zhǎng)條的形狀,占據(jù)畫(huà)面寬的一半以上,這樣形成了左邊的空隙用來(lái)擺放文字;

 

 

反過(guò)來(lái),我們看下圖,如果我們還是左右排版,最后的效果可能會(huì)是下圖的效果,這樣的構(gòu)圖就顯得非常不美觀也不合理了,因?yàn)檫@樣文字區(qū)域顯得特別小氣壓抑,而圖片左邊又形成一個(gè)很大的空隙,這樣畫(huà)面被分割成多個(gè)不合理的區(qū)域。所以,不適合文字右圖片左的排版。

 

 

2)上下關(guān)系
這種類型的排版一般是用作主圖占畫(huà)面寬的大部分以上,如下圖,汽車圖片讓畫(huà)面已經(jīng)沒(méi)有了左右的空間,所以可以把文字放在左上方。

 

 

相反,同樣的產(chǎn)品,如果角度不一樣,在畫(huà)面并沒(méi)有占大部分的寬度,還是可以選擇左右布局的。這個(gè)時(shí)候如果還是上下布局,我們看看會(huì)是什么效果,是不是覺(jué)得畫(huà)面特別空呢。

 

 

3)自由形式布局

這類布局較難把握,因?yàn)槭且环N打破了常規(guī)的章法,但是有必須遵循章法的設(shè)計(jì)方式,在廣告中一般出現(xiàn)的比較活潑的氛圍中,如活動(dòng)廣告,個(gè)性產(chǎn)品廣告等。

畫(huà)面元素?cái)[放看起來(lái)顯得隨意,但是實(shí)際上遵循了視覺(jué)平衡、易讀、不凌亂的原則;左邊文字主次關(guān)系明顯,文字區(qū)域與圖片區(qū)域可以形成平衡關(guān)系,視覺(jué)流程左右關(guān)系明確。

如果像下圖那樣“自由”的排,沒(méi)有任何章法,隨意的東倒西歪,讓用戶怎么閱讀呢,給用戶造成了嚴(yán)重的障礙,所以是不可取的。

[教程作者:admin]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://likemindfilms.com/tutorial/di1415.html
設(shè)計(jì)師為何做不出產(chǎn)品經(jīng)理想要的設(shè)計(jì)
簡(jiǎn)潔的設(shè)計(jì)可能是最好的設(shè)計(jì)
圖趣網(wǎng)微信
建議反饋
×