關(guān)于網(wǎng)頁(yè)UI,UE之類的論點(diǎn)文章網(wǎng)上太多了,更多大師將這些大師分析到極致,無論是開發(fā)領(lǐng)域還是設(shè)計(jì)領(lǐng)域,這些真正的大師所發(fā)表的文章都從不賣弄自己,更多的分析而無私的供獻(xiàn)自己的獨(dú)道見解,他們所寫博文與其它政治、娛樂、商業(yè)等領(lǐng)域所發(fā)表的博文完全不同類型，我不是大師，但我很崇拜大師。

　　一個(gè)頁(yè)面最醒目最吸引用戶的應(yīng)該是Banner了，尤其是Web2.0平臺(tái)Banner顯得更突出，Banner主要體心意旨，形象鮮明的展示所要表達(dá)的內(nèi)容。因?yàn)樗涯浚苑乓粋€(gè)很糟蹋的Banner上去效果也當(dāng)然“醒目”了。因此網(wǎng)頁(yè)Banner設(shè)計(jì)在這里起到了至關(guān)重要的作用，特別是首頁(yè)的Banner,直接決定了用戶的停留，下面讓我們通過大量?jī)?yōu)秀的案例進(jìn)入Banner，走進(jìn)大師們的靈感世界。

1.大面積的Banner

http://www.tearoundapp.com/
這個(gè)Banner非常直接的采用了一個(gè)很大的iPhone圖片，用戶幾乎不用思考的就知道網(wǎng)站的大概內(nèi)容，而且加上與產(chǎn)品類似風(fēng)格的功能按鈕直接展示了部分功能，大的Banner最直接最醒目，處理也最需要謹(jǐn)慎，否則事關(guān)功倍。

例其它類似Banner

2.文字與圖片1/2比例

http://www.scrapblog.com/
這種Banner不是很大，雖然文字與圖片占居空間相等，但加上大的Button讓文字內(nèi)容相對(duì)比較醒目，這種Banner的處理重點(diǎn)在于背景與和圖片和文字的協(xié)調(diào)，比例要均勻。

其它類似Banner

3.人物與文字

http://www.showandtellsale.com/
采用人物加文字內(nèi)容,讓主題思想顯得更鮮明活動(dòng),人物可以更直接更友好的告訴用戶這里有什么?

其它類似Banner

4.創(chuàng)意矢量圖形

http://ideafoundry.info/
純鼠繪而且的矢量CG圖形，獨(dú)特創(chuàng)意和視覺沖擊，精致的矢量風(fēng)格與網(wǎng)站整體完美結(jié)合，體現(xiàn)出網(wǎng)站整體實(shí)力。

其它類似Banner

5.軟件產(chǎn)品界面

http://bydreamtime.com/
大凡軟件產(chǎn)品服務(wù)網(wǎng)站都將自己的產(chǎn)品界面直接融合在Banner中,加上文字與個(gè)性Button,可以讓用戶直接深入的了解產(chǎn)品基本功能和構(gòu)造,甚至?xí)て鹩脩粝肓⒓丛囉玫挠?/P>

其它類似Banner

6.線條與光線

http://www.scarbantia-art.hu/
漸變的背景在融入線條元素，讓Banner更加動(dòng)感奪目，單色或多色的光線讓線條和背景更加炫彩，使Banner充滿迷幻進(jìn)一步刺激用戶的探索欲望。

其它類似Banner

7.純文字內(nèi)容的Banner

不需要華麗的背景,更不需要圖片的點(diǎn)綴,只需要一段文字加上單調(diào)的背景色....
http://enviramedia.com/

其它類似Banner

由于時(shí)間有限更多經(jīng)典案例沒來得及整理和未被發(fā)現(xiàn),不同類型的網(wǎng)站搭配不同類型的Banner，Banner的主要功能到底是誘導(dǎo)用戶，還是展示形象，還是刺激神經(jīng)，這些觀點(diǎn)都有它的支持者，所有Banner的核心共同點(diǎn)是讓用戶在短時(shí)間內(nèi)將鼠標(biāo)滑上去點(diǎn)擊。做到這一點(diǎn)，設(shè)計(jì)人員還需要好好的琢磨。

原文：http://www.zhouwenqi.com/blog/board_36.html