推薦閱讀

運(yùn)營熊

旅游網(wǎng)站如何設(shè)計一款優(yōu)秀的首頁Banner圖？

時間：2017-09-04 | 分類：網(wǎng)站運(yùn)營

瀏覽：12140

?用戶訪問旅游網(wǎng)站的時候，第一屏至關(guān)重要，很大程度上它直接決定了用戶的去留。旅游網(wǎng)站作為一個和美相關(guān)的行業(yè)，光靠文字大面積的堆積，不足以直觀、迅速的告訴用戶來到這里會得到什么有用的信息，因此首頁Banner圖在這里起到了至關(guān)重要的作用。優(yōu)秀的Banner圖不僅僅是起到美觀裝飾的作用，它更能夠給用戶傳遞有用的信息，有效的信息傳達(dá)可以快速提高旅游網(wǎng)站的轉(zhuǎn)化率。

那么，你真的了解Banner圖嗎？印象中Banner圖是不是就是由簡單的一張圖、幾個字組成？其實(shí)Banner圖可以研究的東西還是有很多的，在旅游網(wǎng)站優(yōu)化過程中起著不可替代的作用，這一篇文章從Banner圖的各個方面來進(jìn)行說明，供大家參考。

一、Banner圖到底是什么？

Banner圖的官方解釋是網(wǎng)站頁面的橫幅廣告或者是游行活動時用的旗幟，隨著互聯(lián)網(wǎng)的興起，現(xiàn)在專門用Banner指代任何投放于線上（PC端、移動端）的各種尺寸和形狀的廣告圖，有靜態(tài)和動態(tài)之分，總之現(xiàn)在你在網(wǎng)頁上所看到的各種形狀尺寸的圖片基本都屬于Banner ，并且基本都是可點(diǎn)擊的。

二、Banner圖的作用是什么？

Banner圖主要體現(xiàn)網(wǎng)站的中心意旨，起到宣傳、展示、推廣的作用，進(jìn)而為網(wǎng)站、產(chǎn)品帶來相應(yīng)的轉(zhuǎn)化率。

三、Banner圖由哪些部分構(gòu)成？

Banner圖主要由文案、商品圖、模特或者背景這四項中的至少一項組成，旅游網(wǎng)站的Banner圖一般是由文案和圖片組成。

四、Banner圖的制作

很多站長覺得Banner圖制作簡單，就是放一張圖，然后在上面配上一些文字，沒有什么技術(shù)含量。確實(shí)如此，但這是指一般的Banner圖。一款優(yōu)秀的網(wǎng)站首頁Banner圖，它不僅要在用戶進(jìn)到網(wǎng)站的第一眼就震撼、驚艷，更能準(zhǔn)確向用戶傳遞網(wǎng)站想要傳達(dá)的信息。而這也是我接下來要說的重點(diǎn)——如何制作一款優(yōu)秀的首頁Banner圖。

（一）、網(wǎng)站定位

同屬旅游網(wǎng)站，有的專注于線路、有的專注于住宿、有的專注于攝影、有的專注于賽事，因?yàn)槠浒臉I(yè)務(wù)和類型不同，所以各個網(wǎng)站的定位也不同。網(wǎng)站在制作首頁Banner圖的時候，就要考慮到自己網(wǎng)站的整體定位。對不同的旅游業(yè)務(wù)和類型，做到符合其特質(zhì)，以此達(dá)到凸顯旅游網(wǎng)站特點(diǎn)的目的。

案例1如下圖所示是使用思途CMS的深度行旅游網(wǎng)，網(wǎng)站定位是專注于跟團(tuán)景點(diǎn)攝影，所以首頁Banner圖清晰、美觀、大氣，圖片上的而文字也是凸顯了攝影這個特質(zhì)。

案例2如下圖所示是使用思途CMS的華騰游網(wǎng)，網(wǎng)站定位是專注于湘西的吃喝玩樂，所以首頁Banner圖就帶有濃郁的湘西風(fēng)情，突出了當(dāng)?shù)氐娜宋娘L(fēng)情，和網(wǎng)站定位貼切。

（二）、背景圖

旅游網(wǎng)站還是以展示目的地美景為主，經(jīng)過大量研究觀察，發(fā)現(xiàn)私人訂制和高端的旅游網(wǎng)站都極其喜歡用攝影大圖，一用整個網(wǎng)站就顯得高端大氣起來，不用設(shè)計甚至不用排版已經(jīng)吸引了用戶的眼球。但是注意，圖片選擇要清晰，一定要非常清晰，不能放大了就變得模糊。并且圖片所要表達(dá)出來的意境還需要后期進(jìn)行色調(diào)和明暗調(diào)的調(diào)整。

案例3如下圖所示的某網(wǎng)站，Banner圖因?yàn)榉糯蠖冃?，直接給用戶留下網(wǎng)站不專業(yè)的印象。

案例4如下圖所示是使用思途CMS的的青峰旅行網(wǎng)，背景圖干凈、簡單，不用加文字和額外的元素，給人的感覺就已經(jīng)足夠好。

（三）、走心文案

一篇文章，姑且不論內(nèi)容好壞，好的標(biāo)題能夠起到吸引人的作用，糟糕的標(biāo)題則令人想點(diǎn)擊的欲望都沒有。同理，設(shè)計首頁Banner圖除了符合網(wǎng)站定位外，要做好的第一件事就是設(shè)計走心的文案。好的文案，能夠通過簡單的一句話，就觸動用戶的心靈，或者說勾起用戶的興趣，激起用戶繼續(xù)瀏覽網(wǎng)站的欲望。

案例5如下圖所示的某網(wǎng)站首頁Banner圖，羅列了網(wǎng)站經(jīng)營產(chǎn)品或者說業(yè)務(wù)，從廣告的角度來看是合理的，但是第一眼睛看到這個banner這個圖完全抓不到重點(diǎn)啊，滿眼的小文字。所以記住首頁Banner圖上的文字不能多，最好能讓用戶一眼能夠看完。

案例6如下圖所示是使用思途CMS的的美途網(wǎng)，專注于美國旅行，文案就簡單的幾個字，直接清晰的表明網(wǎng)站業(yè)務(wù)，吸引用戶。

（四）、文字排版

首頁Banner圖的文字格式也是有講究的，不是任意放一個位置或者任意大小就行了。文字的排版要求重點(diǎn)突出，大小粗細(xì)錯落有致，字體保持在2種左右，加入一些跟內(nèi)容有聯(lián)系的元素或者圖形，可以更好的表達(dá)整個設(shè)計的情緒。

1. 分清主標(biāo)和副標(biāo)

從主次上來說，主標(biāo)為主，字體要大顏色要醒目。副標(biāo)起到從內(nèi)容上和形式上都輔助主標(biāo)的作用。一個好的banner標(biāo)題文字處理都比較飽滿，比較集中。

案例7如下圖所示是使用思途CMS的的絲路直通車網(wǎng)，主次明顯，且文字與輔助圖案相互呼應(yīng)，統(tǒng)一感很好。

2. 若是主標(biāo)太長又不能進(jìn)行刪減的情況下，那就對主標(biāo)的關(guān)鍵字進(jìn)行強(qiáng)調(diào)，突出主要信息。

案例8如下圖所示是使用思途CMS的的愛旅度假網(wǎng)，如果把浪漫蜜月三生三世這句話排成一行，就會顯得沒有主次，也沒有吸引力。網(wǎng)站把這一句話中的關(guān)鍵字提取出來，讓用戶容易看到重點(diǎn)，了解更多信息。

3.若是整體文字很短，Banner圖顯得太空，那么可以加入一些輔助信息來豐富畫面，例如加入英文，網(wǎng)站名等。

案例9如下圖所示是使用思途CMS的的新疆生產(chǎn)建設(shè)兵團(tuán)中國青年旅行社。

（五）、Banner排版

Banner排版的意思是將文案、圖片或者其他圖形在整個頁面上調(diào)整位置、大小，讓整個Banner圖看上去更和諧、美觀。有的網(wǎng)站Banner圖看上去雜亂不堪或者不上檔次，其實(shí)很大一部分是排版的原因。事實(shí)上，在Banner的排版上有著很多通用的規(guī)律，這里和大家分享一下。

1. 對齊

在Banner圖中相關(guān)內(nèi)容（例如主副標(biāo)），就要做到上下對齊，不能主標(biāo)在左邊，副標(biāo)放在右邊，這樣不利于用戶查看。而采用對齊的方式，用戶的視線就能快速移動，一眼看完自己感興趣的內(nèi)容。

案例10如下圖所示的某旅游網(wǎng)站，主標(biāo)在左邊，副標(biāo)在右邊，用戶不能一眼看完所有內(nèi)容，用戶體驗(yàn)度不好。

案例11如下圖所示是使用思途CMS的的走四方網(wǎng)，上下對齊，用戶一眼就能看到最重要的信息。

2. 聚攏

Banner圖的顯示內(nèi)容有時候因?yàn)橄胍磉_(dá)的東西很多，所以要分成幾個不同的區(qū)域，但是記住相關(guān)的內(nèi)容要放在一起，不能分散開來，否則整個Banner圖會顯得很混亂，抓不到重點(diǎn)。

案例12如下圖所示是使用思途CMS的的聚嗨樂游網(wǎng)，Banner圖中想要強(qiáng)調(diào)搶購這個主題，時間、主標(biāo)、副標(biāo)等都排列整齊，看上去整潔，沒有擾亂客戶查看重點(diǎn)內(nèi)容。

3. 留白

想要Banner圖看上去高端，留白就是必不可少的一點(diǎn)。經(jīng)過研究，發(fā)現(xiàn)高端的網(wǎng)站Banner圖上的文案和相關(guān)圖形都很少，盡量展示原圖的美景。留白多一些，就能減少整個Banner圖帶給用戶的壓迫感，還能讓用戶清晰看到重點(diǎn)內(nèi)容，不至于擾亂視線。

案例13如下圖所示的某旅游網(wǎng)站，為了國慶節(jié)專門做的Banner圖，第一眼看過去就覺得畫面非常的擁擠，不知道重點(diǎn)在哪里。

4. 降噪

好的Banner頁面一定都很干凈，上面的字體最好不要超過3種，字體太多會顯得Banner圖凌亂，顏色也不能過多，否則就會分散用戶的注意力。旅游網(wǎng)站的Banner圖最好還是以清晰、美觀的風(fēng)景大圖為主，配上簡單的文字，這樣已經(jīng)足夠好。

案例14如下圖所示是使用思途CMS的的皇途網(wǎng)，Banner圖是一張簡單的風(fēng)景圖，畫面簡單干凈，用戶很容易對網(wǎng)站產(chǎn)生好感，有繼續(xù)瀏覽網(wǎng)站的欲望。

5. 配色

不同的配色會給用戶帶來不同的感覺，比如橙色給人溫暖的感覺、 藍(lán)色給人清爽的感覺、粉色給人幸福的感覺。因此在制作Banner圖的時候就要考慮到你想傳達(dá)給用戶的情感是什么，你想讓他們看到Banner圖是什么感覺，然后再看Banner圖是不是符合你想表達(dá)的主題，如果不是就要進(jìn)行色彩的修改。

案例15如下圖所示是使用思途CMS的的愛旅度假網(wǎng)，網(wǎng)站定位是專注于海島旅游度假，這個主題就很好的在Banner圖上進(jìn)行了體現(xiàn)，粉色溫馨，和蜜月度假相符。

?

首頁Banner的目的是讓用戶進(jìn)網(wǎng)站的第一眼就被吸引，有繼續(xù)瀏覽的欲望。我看過很多的旅游網(wǎng)站，產(chǎn)品內(nèi)容不錯，就是Banner圖制作不走心，變形或者不清晰，很難讓用戶產(chǎn)生好感，就不要談后續(xù)的產(chǎn)品轉(zhuǎn)化了。因此站長們在首頁Banner圖的制作上應(yīng)該要花費(fèi)更多的時間，做好細(xì)節(jié)，弄清楚主次。還要注意Banner圖要及時更新，比如說為國慶專門設(shè)計的Banner圖，在節(jié)日后記得換成其他的。其實(shí)對于旅游網(wǎng)站來說，首頁Bannre圖最基本的要求就是清晰美觀，如果能夠做到信息傳達(dá)準(zhǔn)確，就已經(jīng)是足夠優(yōu)秀的Banner圖了。