當(dāng)用戶訪問(wèn)一個(gè)網(wǎng)站的時(shí)候，第一屏的信息展示是非常重要的，很大程度上影響了用戶是否決定停留，然而光靠文字大面積的堆積，很難直觀而迅速的告訴用戶來(lái)到這里會(huì)得到什么有用的信息，因此網(wǎng)頁(yè)Banner設(shè)計(jì)在這里起到了至關(guān)重要的展示作用，特別是對(duì)于首頁(yè)Banner，有效的信息傳達(dá)讓用戶和文字之間的互動(dòng)變得生動(dòng)而有趣，下面就讓我們通過(guò)大量?jī)?yōu)秀的設(shè)計(jì)案例走進(jìn)Banner設(shè)計(jì)，走進(jìn)設(shè)計(jì)師們的靈感揮灑空間。

一.Banner的構(gòu)成與設(shè)計(jì)形態(tài)分解

自然界的萬(wàn)物形態(tài)構(gòu)成都離不開(kāi)點(diǎn)、線、面。它們是視覺(jué)構(gòu)成的基本元素，具有不同的情感特征，因此要善于采用不同的組合去體現(xiàn)不同Banner的情感訴求。

a.點(diǎn)的聚合

點(diǎn)的排列所引起的視覺(jué)流動(dòng)，引入了時(shí)間的因素,利用點(diǎn)的大小、形狀與距離的變化，可以設(shè)計(jì)出富于節(jié)奏韻律的畫(huà)面。點(diǎn)的連續(xù)排列構(gòu)成線，點(diǎn)與點(diǎn)之間的距離越近，線的特性就越顯著。點(diǎn)的密集排列構(gòu)成面，同樣，點(diǎn)的距離越近，面的特性就越顯著。

http://www.peminoz.com/

http://icondock.com/

無(wú)數(shù)圖形的點(diǎn)聚合在一起，增強(qiáng)畫(huà)面的韻律感

http://www.apple.com/

b.線的流動(dòng)
線分為四類：直線、曲線、折線以及三者的混合。直線又有水平線、垂直線、斜線三種形式。其中，水平線給人平靜、開(kāi)闊、安逸的感受；垂直線給人崇高、挺拔、嚴(yán)肅的感受；曲、折、弧線具有強(qiáng)烈的動(dòng)感，更容易引起視線的前進(jìn)、后退或擺動(dòng)。

http://oypro.com/

http://www.dongfeng-nissan.com.cn/3Ddrive/

嚴(yán)謹(jǐn)?shù)木€條，使頁(yè)面穩(wěn)重富有理性

c.面的分割

面在設(shè)計(jì)中的概念，可以理解為點(diǎn)的放大，點(diǎn)的密集或線的重復(fù)。Banner元素在不同大小色塊元素的風(fēng)格對(duì)比下，能獲得清晰、條理的秩序，同時(shí)在整體上也顯得和諧統(tǒng)一

http://rareformbranding.com/

清晰突出的圖片所產(chǎn)生的第一視覺(jué)點(diǎn)

http://www.cult-f.net/

色塊與線條間不同比例的分隔畫(huà)面，使頁(yè)面具有形式美感

http://www.prville2009.com/

二.Banner設(shè)計(jì)的形式美法則

在banner設(shè)計(jì)中采用特殊的形式結(jié)構(gòu)，會(huì)使網(wǎng)頁(yè)變得個(gè)性十足并很好的區(qū)別于同類產(chǎn)品，讓人記憶深刻。

a.有機(jī)形的柔和與美

有機(jī)形是由一定數(shù)量的曲線組合而成，是自然物外力與內(nèi)力相抗衡而形成的形態(tài)。有機(jī)形富有內(nèi)在的張力，給人以純樸、溫暖而富有生命力的感覺(jué)。

曲線與個(gè)性化的插圖形成強(qiáng)烈的對(duì)比。

http://www.wildaboutgardening.org/

b.偶然形的獨(dú)特魅力

偶然形是力的作用下隨機(jī)形成的圖形，它具有天然成趣的效果，利用偶然因素提煉美的方法，讓Banner設(shè)計(jì)更加與眾不同。

偶然形使頁(yè)面產(chǎn)生趣味性

三.有效的設(shè)計(jì)創(chuàng)意方法

?

a.預(yù)留大面積的Banner空間創(chuàng)作

Banner設(shè)計(jì)占用很大的空間，且占用的空間是重要而有價(jià)值的面積，那么你需要萬(wàn)分小心的去處理，但是如果處理的好的話，它將會(huì)事倍功半，而且信息傳達(dá)非常有效。

http://tearoundapp.com/

http://digitalmash.com/

b.有效的措辭與行為導(dǎo)向按鈕

在banner設(shè)計(jì)中通過(guò)真實(shí)產(chǎn)品的展示，并配以鼓動(dòng)人心的措辭口號(hào)及醒目的可以直接誘導(dǎo)用戶點(diǎn)擊的行為導(dǎo)向按鈕，讓網(wǎng)頁(yè)獲得更多的用戶點(diǎn)擊和關(guān)注目光。

http://www.guifx.com/

http://www.campaignmonitor.com/

c.插圖及清新手繪讓頁(yè)面倍感親切

http://srburns.es/

http://www.mailchimp.com/

http://www.hdlive09.co.uk/

d.引入肢體語(yǔ)言讓畫(huà)面變得生動(dòng)

http://www.kompakt.cz/

http://www.ronniesan.com/

http://www.tolingo.com/

http://www.kinoz.com/

e.豐富的產(chǎn)品展示組合效果

用堆積這種效布局特效來(lái)展示不同的作品示例，并附上一條介紹性質(zhì)的口號(hào)，網(wǎng)頁(yè)變得更有說(shuō)服力，豐富而富有層次感。

http://www.htc.com/asia/

http://www.darrenhoyt.com/

http://deaxon.com/

http://digitalmash.com/journal/articles/dynamic-columns/

http://www.shopify.com/

http://www.davidhellmann.com/

f.特殊肌理的組合

適當(dāng)?shù)倪\(yùn)用肌理以及拼貼效果，讓畫(huà)面變得有質(zhì)感且意味深長(zhǎng)，是讓Banner與眾不同的好辦法之一。

http://www.habitationsbouladier.com/

http://www.foxie.ru/

http://www.njrebel.com/

g.讓資訊循環(huán)動(dòng)起來(lái)

使用滑動(dòng)效果來(lái)將更多信息填進(jìn)到Banner區(qū)域。這對(duì)于有很多特性和豐富產(chǎn)品線的網(wǎng)站很有用，通過(guò)一些很有用的Javascript庫(kù)及其插件，讓這類效果更加活靈活現(xiàn)。

http://glue.be/en/

http://icondesigner.net/

通過(guò)以上大量的案例對(duì)比，希望能給您帶來(lái)更多靈感碰撞，感謝您的閱讀 ^_^

• (本文出自Tencent CDC Blog，轉(zhuǎn)載時(shí)請(qǐng)注明出處)