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

淺談banner設(shè)計(jì)

關(guān)于Banner的設(shè)計(jì),相信已經(jīng)有很多人都看過(guò)這方面經(jīng)驗(yàn)的分享了,我來(lái)公司也做過(guò)了一些Banner的設(shè)計(jì),那在這其中通過(guò)不斷的學(xué)習(xí)、實(shí)踐積累了自己的一些小小經(jīng)驗(yàn)和方法,下面給大家淺淺的分享下我總結(jié)的Banner設(shè)計(jì)經(jīng)驗(yàn)。如有錯(cuò)誤,盡管拍磚,小女子虛心請(qǐng)教學(xué)習(xí)。


Banner設(shè)計(jì)其實(shí)是我們接觸互聯(lián)網(wǎng)工作后,最常見(jiàn)一種工作。那么Banner到底是什么呢?Banner的核心使命其實(shí)是吸引用戶關(guān)注,然后被點(diǎn)擊。他的主旨就是主題明確,突出關(guān)鍵內(nèi)容,抓住用戶眼球。一個(gè)Banner他是由“背景、主視覺(jué)和標(biāo)題文字”三部分組成,在我剛剛接到需求的時(shí)候,我首先分析他的重點(diǎn)詞、字,想要表達(dá)什么,分析好了后可以在紙上畫(huà)下草稿,在大腦里有個(gè)大概的視覺(jué)效果,想法多的話可以畫(huà)幾版不一樣的,最后根據(jù)草稿定一個(gè)定稿,接下來(lái)就可以找素材著手做了。在做期間,還要注意整體的美觀,讓人看起來(lái)舒服。
下面從這三部分逐一給大家分享下。

一、背景

我們畫(huà)畫(huà)的同學(xué)可能都知道,一個(gè)畫(huà)面不可能都面面俱到,重點(diǎn)的需要細(xì)致刻畫(huà),有的一筆帶過(guò)即可。設(shè)計(jì)一個(gè)Banner有時(shí)候就像畫(huà)畫(huà)似的,首先要有大的環(huán)境,那Banner的背景就好比大環(huán)境,其實(shí)主要是起到襯托、烘托氣氛的作用。一個(gè)新需求過(guò)來(lái),首先我們考慮要營(yíng)造一個(gè)什么樣的環(huán)境,什么樣的氣氛,是歡快的、悲傷的、可愛(ài)的還是…比如過(guò)年,可能就用紅橙色,比如兒童類的,顏色上就要純一點(diǎn),活潑點(diǎn)等等。

但是需要注意一點(diǎn),背景不能太花,否則會(huì)影響整體的一個(gè)可讀識(shí)性,簡(jiǎn)單,清晰即可。

二、主視覺(jué)元素

Banner中的主視覺(jué)要清楚,符合主題,元素不可太多,否則看起來(lái)跟人感覺(jué)就會(huì)亂。有的人在做時(shí)只要是有地,就全放滿,其實(shí)頁(yè)面適當(dāng)?shù)?ldquo;留白”也是提升畫(huà)面品質(zhì)的一個(gè)好方法。視覺(jué)元素不論是人物,還是其他,一定要清晰,在我們找素材的時(shí)候也要找像素質(zhì)量高的,我一般會(huì)去站酷、昵圖網(wǎng)、花瓣或者直接google搜,不要太多。還有一點(diǎn)注意的是不可盜用他人的作品,頭像等等。大家都懂的:)

下面的這個(gè)Banner看起來(lái)就比較亂,東西太多,想表達(dá)的也太多,這時(shí)候需要用戶去花時(shí)間思考它想告訴我們什么,而往往這時(shí)候用戶是不愿意是思考的,一是畫(huà)面不知道他要表達(dá)什么,二是整體上沒(méi)有吸引住用戶的眼睛,這種情況下這個(gè)Banner是做到比較失敗的。

三、標(biāo)題文字

標(biāo)題文字非常重要,是整個(gè)Banner的主題,重點(diǎn)文字一定要在背景中突出出來(lái),不論用顏色對(duì)比、放大、變形設(shè)計(jì)還是即便做立體效果等等。(這里我分享一個(gè)經(jīng)驗(yàn),就是在頁(yè)面上新建一個(gè)黑色的圖層,樣式改成飽和度,整體上成黑白的效果后一眼就能看出來(lái)了)

這個(gè)Banner標(biāo)題用了描邊和投影,從背景中出來(lái)了,但還是看起來(lái)不舒服,主要是他的文字有用曲線、斜線的方式,讓人不禁會(huì)順著字的排版順讀下去,他這里面不同方向的斜線用的還比較多,這種方式看多了就會(huì)比較累,沒(méi)有形成統(tǒng)一。

這個(gè)Banner看起來(lái)比較清新,沒(méi)有過(guò)多的元素,但重點(diǎn)是文字,由于背景用的淺色,文字也用的淺色,用戶是很難看出來(lái)的,影響用戶的閱讀性。

最后總結(jié)幾點(diǎn)

1.畫(huà)面整體統(tǒng)一,顏色搭配的看起來(lái)舒服;
2.頁(yè)面元素要以組為單位;(如文字和文字之間的間距不要過(guò)大,讓人看起來(lái)是一組)
3.采用吸引力的用語(yǔ),或者添加“火速參與”等刺激性的詞語(yǔ)按鈕等,讓用戶在最短的時(shí)間內(nèi)有去點(diǎn)擊他的欲望。
4.主次對(duì)比分明,合理安排頁(yè)面布局;
5.輸出K數(shù)不宜過(guò)大,否則加載速度會(huì)慢;
6.最后最重要的一點(diǎn)是,前期工作一定要與需求方溝通好,要知道,在工作中,溝通是非常重要的一件事情。

以上是自己在平時(shí)工作中總結(jié)的一點(diǎn)點(diǎn)小經(jīng)驗(yàn)吧,希望對(duì)初學(xué)設(shè)計(jì)的同學(xué)來(lái)說(shuō)有點(diǎn)幫助,還望大師們多多指點(diǎn),我會(huì)虛心學(xué)習(xí)。有部分圖是從網(wǎng)上找的,在這里借用下,如果侵犯您的權(quán)了,請(qǐng)告知下。謝謝。

[教程作者:admin]
免責(zé)聲明:本站文章系圖趣網(wǎng)整理發(fā)布,如需轉(zhuǎn)載,請(qǐng)注明出處,素材資料僅供個(gè)人學(xué)習(xí)與參考,請(qǐng)勿用于商業(yè)用途!
本文地址:http://m.likemindfilms.com/tutorial/ui1257.html
網(wǎng)頁(yè)banner點(diǎn)評(píng),從修改前后對(duì)比設(shè)計(jì)
怎么設(shè)計(jì)趣味性的登陸頁(yè)面
圖趣網(wǎng)微信
建議反饋
×