?用戶訪問(wèn)旅游網(wǎng)站的時(shí)候，第一屏至關(guān)重要，很大程度上它直接決定了用戶的去留。旅游網(wǎng)站作為一個(gè)和美相關(guān)的行業(yè)，光靠文字大面積的堆積，不足以直觀、迅速的告訴用戶來(lái)到這里會(huì)得到什么有用的信息，因此首頁(yè)Banner圖在這里起到了至關(guān)重要的作用。優(yōu)秀的Banner圖不僅僅是起到美觀裝飾的作用，它更能夠給用戶傳遞有用的信息，有效的信息傳達(dá)可以快速提高旅游網(wǎng)站的轉(zhuǎn)化率。
那么，你真的了解Banner圖嗎？印象中Banner圖是不是就是由簡(jiǎn)單的一張圖、幾個(gè)字組成？其實(shí)Banner圖可以研究的東西還是有很多的，在旅游網(wǎng)站優(yōu)化過(guò)程中起著不可替代的作用，這一篇文章從Banner圖的各個(gè)方面來(lái)進(jìn)行說(shuō)明，供大家參考。
一、Banner圖到底是什么？
Banner圖的官方解釋是網(wǎng)站頁(yè)面的橫幅廣告或者是游行活動(dòng)時(shí)用的旗幟，隨著互聯(lián)網(wǎng)的興起，現(xiàn)在專門用Banner指代任何投放于線上（PC端、移動(dòng)端）的各種尺寸和形狀的廣告圖，有靜態(tài)和動(dòng)態(tài)之分，總之現(xiàn)在你在網(wǎng)頁(yè)上所看到的各種形狀尺寸的圖片基本都屬于Banner ，并且基本都是可點(diǎn)擊的。
二、Banner圖的作用是什么？
Banner圖主要體現(xiàn)網(wǎng)站的中心意旨，起到宣傳、展示、推廣的作用，進(jìn)而為網(wǎng)站、產(chǎn)品帶來(lái)相應(yīng)的轉(zhuǎn)化率。
三、Banner圖由哪些部分構(gòu)成？
Banner圖主要由文案、商品圖、模特或者背景這四項(xiàng)中的至少一項(xiàng)組成，旅游網(wǎng)站的Banner圖一般是由文案和圖片組成。
四、Banner圖的制作
很多站長(zhǎng)覺得Banner圖制作簡(jiǎn)單，就是放一張圖，然后在上面配上一些文字，沒有什么技術(shù)含量。確實(shí)如此，但這是指一般的Banner圖。一款優(yōu)秀的網(wǎng)站首頁(yè)Banner圖，它不僅要在用戶進(jìn)到網(wǎng)站的第一眼就震撼、驚艷，更能準(zhǔn)確向用戶傳遞網(wǎng)站想要傳達(dá)的信息。而這也是我接下來(lái)要說(shuō)的重點(diǎn)——如何制作一款優(yōu)秀的首頁(yè)Banner圖。
（一）、網(wǎng)站定位
同屬旅游網(wǎng)站，有的專注于線路、有的專注于住宿、有的專注于攝影、有的專注于賽事，因?yàn)槠浒臉I(yè)務(wù)和類型不同，所以各個(gè)網(wǎng)站的定位也不同。網(wǎng)站在制作首頁(yè)Banner圖的時(shí)候，就要考慮到自己網(wǎng)站的整體定位。對(duì)不同的旅游業(yè)務(wù)和類型，做到符合其特質(zhì)，以此達(dá)到凸顯旅游網(wǎng)站特點(diǎn)的目的。
案例1如下圖所示是使用思途CMS的深度行旅游網(wǎng)，網(wǎng)站定位是專注于跟團(tuán)景點(diǎn)攝影，所以首頁(yè)Banner圖清晰、美觀、大氣，圖片上的而文字也是凸顯了攝影這個(gè)特質(zhì)。
案例2如下圖所示是使用思途CMS的華騰游網(wǎng)，網(wǎng)站定位是專注于湘西的吃喝玩樂(lè)，所以首頁(yè)Banner圖就帶有濃郁的湘西風(fēng)情，突出了當(dāng)?shù)氐娜宋娘L(fēng)情，和網(wǎng)站定位貼切。
（二）、背景圖
旅游網(wǎng)站還是以展示目的地美景為主，經(jīng)過(guò)大量研究觀察，發(fā)現(xiàn)私人訂制和高端的旅游網(wǎng)站都極其喜歡用攝影大圖，一用整個(gè)網(wǎng)站就顯得高端大氣起來(lái)，不用設(shè)計(jì)甚至不用排版已經(jīng)吸引了用戶的眼球。但是注意，圖片選擇要清晰，一定要非常清晰，不能放大了就變得模糊。并且圖片所要表達(dá)出來(lái)的意境還需要后期進(jìn)行色調(diào)和明暗調(diào)的調(diào)整。
案例3如下圖所示的某網(wǎng)站，Banner圖因?yàn)榉糯蠖冃?，直接給用戶留下網(wǎng)站不專業(yè)的印象。
案例4如下圖所示是使用思途CMS的的青峰旅行網(wǎng)，背景圖干凈、簡(jiǎn)單，不用加文字和額外的元素，給人的感覺就已經(jīng)足夠好。
（三）、走心文案
一篇文章，姑且不論內(nèi)容好壞，好的標(biāo)題能夠起到吸引人的作用，糟糕的標(biāo)題則令人想點(diǎn)擊的欲望都沒有。同理，設(shè)計(jì)首頁(yè)Banner圖除了符合網(wǎng)站定位外，要做好的第一件事就是設(shè)計(jì)走心的文案。好的文案，能夠通過(guò)簡(jiǎn)單的一句話，就觸動(dòng)用戶的心靈，或者說(shuō)勾起用戶的興趣，激起用戶繼續(xù)瀏覽網(wǎng)站的欲望。
案例5如下圖所示的某網(wǎng)站首頁(yè)Banner圖，羅列了網(wǎng)站經(jīng)營(yíng)產(chǎn)品或者說(shuō)業(yè)務(wù)，從廣告的角度來(lái)看是合理的，但是第一眼睛看到這個(gè)banner這個(gè)圖完全抓不到重點(diǎn)啊，滿眼的小文字。所以記住首頁(yè)Banner圖上的文字不能多，最好能讓用戶一眼能夠看完。
案例6如下圖所示是使用思途CMS的的美途網(wǎng)，專注于美國(guó)旅行，文案就簡(jiǎn)單的幾個(gè)字，直接清晰的表明網(wǎng)站業(yè)務(wù)，吸引用戶。
（四）、文字排版
首頁(yè)Banner圖的文字格式也是有講究的，不是任意放一個(gè)位置或者任意大小就行了。文字的排版要求重點(diǎn)突出，大小粗細(xì)錯(cuò)落有致，字體保持在2種左右，加入一些跟內(nèi)容有聯(lián)系的元素或者圖形，可以更好的表達(dá)整個(gè)設(shè)計(jì)的情緒。
1. 分清主標(biāo)和副標(biāo)
從主次上來(lái)說(shuō)，主標(biāo)為主，字體要大顏色要醒目。副標(biāo)起到從內(nèi)容上和形式上都輔助主標(biāo)的作用。一個(gè)好的banner標(biāo)題文字處理都比較飽滿，比較集中。
案例7如下圖所示是使用思途CMS的的絲路直通車網(wǎng)，主次明顯，且文字與輔助圖案相互呼應(yīng)，統(tǒng)一感很好。
2. 若是主標(biāo)太長(zhǎng)又不能進(jìn)行刪減的情況下，那就對(duì)主標(biāo)的關(guān)鍵字進(jìn)行強(qiáng)調(diào)，突出主要信息。
案例8如下圖所示是使用思途CMS的的愛旅度假網(wǎng)，如果把浪漫蜜月三生三世這句話排成一行，就會(huì)顯得沒有主次，也沒有吸引力。網(wǎng)站把這一句話中的關(guān)鍵字提取出來(lái)，讓用戶容易看到重點(diǎn)，了解更多信息。
3.若是整體文字很短，Banner圖顯得太空，那么可以加入一些輔助信息來(lái)豐富畫面，例如加入英文，網(wǎng)站名等。
案例9如下圖所示是使用思途CMS的的新疆生產(chǎn)建設(shè)兵團(tuán)中國(guó)青年旅行社。
（五）、Banner排版
Banner排版的意思是將文案、圖片或者其他圖形在整個(gè)頁(yè)面上調(diào)整位置、大小，讓整個(gè)Banner圖看上去更和諧、美觀。有的網(wǎng)站Banner圖看上去雜亂不堪或者不上檔次，其實(shí)很大一部分是排版的原因。事實(shí)上，在Banner的排版上有著很多通用的規(guī)律，這里和大家分享一下。
1. 對(duì)齊
在Banner圖中相關(guān)內(nèi)容（例如主副標(biāo)），就要做到上下對(duì)齊，不能主標(biāo)在左邊，副標(biāo)放在右邊，這樣不利于用戶查看。而采用對(duì)齊的方式，用戶的視線就能快速移動(dòng)，一眼看完自己感興趣的內(nèi)容。
案例10如下圖所示的某旅游網(wǎng)站，主標(biāo)在左邊，副標(biāo)在右邊，用戶不能一眼看完所有內(nèi)容，用戶體驗(yàn)度不好。
案例11如下圖所示是使用思途CMS的的走四方網(wǎng)，上下對(duì)齊，用戶一眼就能看到最重要的信息。
2. 聚攏
Banner圖的顯示內(nèi)容有時(shí)候因?yàn)橄胍磉_(dá)的東西很多，所以要分成幾個(gè)不同的區(qū)域，但是記住相關(guān)的內(nèi)容要放在一起，不能分散開來(lái)，否則整個(gè)Banner圖會(huì)顯得很混亂，抓不到重點(diǎn)。
案例12如下圖所示是使用思途CMS的的聚嗨樂(lè)游網(wǎng)，Banner圖中想要強(qiáng)調(diào)搶購(gòu)這個(gè)主題，時(shí)間、主標(biāo)、副標(biāo)等都排列整齊，看上去整潔，沒有擾亂客戶查看重點(diǎn)內(nèi)容。
3. 留白
想要Banner圖看上去高端，留白就是必不可少的一點(diǎn)。經(jīng)過(guò)研究，發(fā)現(xiàn)高端的網(wǎng)站Banner圖上的文案和相關(guān)圖形都很少，盡量展示原圖的美景。留白多一些，就能減少整個(gè)Banner圖帶給用戶的壓迫感，還能讓用戶清晰看到重點(diǎn)內(nèi)容，不至于擾亂視線。
案例13如下圖所示的某旅游網(wǎng)站，為了國(guó)慶節(jié)專門做的Banner圖，第一眼看過(guò)去就覺得畫面非常的擁擠，不知道重點(diǎn)在哪里。
4. 降噪
好的Banner頁(yè)面一定都很干凈，上面的字體最好不要超過(guò)3種，字體太多會(huì)顯得Banner圖凌亂，顏色也不能過(guò)多，否則就會(huì)分散用戶的注意力。旅游網(wǎng)站的Banner圖最好還是以清晰、美觀的風(fēng)景大圖為主，配上簡(jiǎn)單的文字，這樣已經(jīng)足夠好。
案例14如下圖所示是使用思途CMS的的皇途網(wǎng)，Banner圖是一張簡(jiǎn)單的風(fēng)景圖，畫面簡(jiǎn)單干凈，用戶很容易對(duì)網(wǎng)站產(chǎn)生好感，有繼續(xù)瀏覽網(wǎng)站的欲望。
5. 配色
不同的配色會(huì)給用戶帶來(lái)不同的感覺，比如橙色給人溫暖的感覺、 藍(lán)色給人清爽的感覺、粉色給人幸福的感覺。因此在制作Banner圖的時(shí)候就要考慮到你想傳達(dá)給用戶的情感是什么，你想讓他們看到Banner圖是什么感覺，然后再看Banner圖是不是符合你想表達(dá)的主題，如果不是就要進(jìn)行色彩的修改。
案例15如下圖所示是使用思途CMS的的愛旅度假網(wǎng)，網(wǎng)站定位是專注于海島旅游度假，這個(gè)主題就很好的在Banner圖上進(jìn)行了體現(xiàn)，粉色溫馨，和蜜月度假相符。
?
首頁(yè)Banner的目的是讓用戶進(jìn)網(wǎng)站的第一眼就被吸引，有繼續(xù)瀏覽的欲望。我看過(guò)很多的旅游網(wǎng)站，產(chǎn)品內(nèi)容不錯(cuò)，就是Banner圖制作不走心，變形或者不清晰，很難讓用戶產(chǎn)生好感，就不要談后續(xù)的產(chǎn)品轉(zhuǎn)化了。因此站長(zhǎng)們?cè)谑醉?yè)Banner圖的制作上應(yīng)該要花費(fèi)更多的時(shí)間，做好細(xì)節(jié)，弄清楚主次。還要注意Banner圖要及時(shí)更新，比如說(shuō)為國(guó)慶專門設(shè)計(jì)的Banner圖，在節(jié)日后記得換成其他的。其實(shí)對(duì)于旅游網(wǎng)站來(lái)說(shuō)，首頁(yè)Bannre圖最基本的要求就是清晰美觀，如果能夠做到信息傳達(dá)準(zhǔn)確，就已經(jīng)是足夠優(yōu)秀的Banner圖了。
小米
參與評(píng)論