網(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)重的障礙,所以是不可取的。
本文地址:http://m.likemindfilms.com/tutorial/di1415.html
您可能還喜歡
- Macaron 馬卡龍系色譜 ;附HC(16進(jìn)制碼
- 7個(gè)手機(jī)版網(wǎng)頁(yè)設(shè)計(jì)的原則
- 折紙多邊形網(wǎng)頁(yè)背景效果制作教程
- 龐門正道:好好玩耍的點(diǎn)線面(上)
- 網(wǎng)頁(yè)設(shè)計(jì)中的常見(jiàn)頁(yè)面布局方式
- WAP APP的柵格設(shè)計(jì)
- 八種很漂亮的排版方法和技巧分享
- 網(wǎng)頁(yè)設(shè)計(jì)的首屏標(biāo)準(zhǔn)你了解多少?
- 字體大寶庫(kù):40款為網(wǎng)頁(yè)設(shè)計(jì)師準(zhǔn)備的時(shí)
- 視覺(jué)設(shè)計(jì)分享—專題頁(yè)面設(shè)計(jì)篇
- 專訪:石墨文檔產(chǎn)品總監(jiān)羅穎
- UI設(shè)計(jì)不得不知的移動(dòng)端UI尺寸適
- 光音移動(dòng)設(shè)計(jì)規(guī)范 — 表單類
- 體驗(yàn)設(shè)計(jì)中的排序問(wèn)題
- 網(wǎng)頁(yè)設(shè)計(jì)精粹 網(wǎng)頁(yè)中那些迷人的按
- aliued:響應(yīng)式設(shè)計(jì)的現(xiàn)狀與趨勢(shì)
- 10個(gè)智能對(duì)象處理的ps技巧
- 網(wǎng)頁(yè)UI - 原子設(shè)計(jì)理論(上)
- 如何通過(guò)設(shè)計(jì)提升banner點(diǎn)擊率?
- 晉小彥視覺(jué)設(shè)計(jì)系列文章(二):全屏