?用戶訪問旅游網站的時候，第一屏至關重要，很大程度上它直接決定了用戶的去留。旅游網站作為一個和美相關的行業，光靠文字大面積的堆積，不足以直觀、迅速的告訴用戶來到這里會得到什么有用的信息，因此首頁Banner圖在這里起到了至關重要的作用。優秀的Banner圖不僅僅是起到美觀裝飾的作用，它更能夠給用戶傳遞有用的信息，有效的信息傳達可以快速提高旅游網站的轉化率。
那么，你真的了解Banner圖嗎？印象中Banner圖是不是就是由簡單的一張圖、幾個字組成？其實Banner圖可以研究的東西還是有很多的，在旅游網站優化過(guo)程中起著不可替(ti)代的作用，這一篇文章從Banner圖的各個方面來進行說明，供大家(jia)參考(kao)。
一、Banner圖到底是什么？
Banner圖(tu)的(de)(de)官(guan)方(fang)解釋是(shi)網站(zhan)頁面的(de)(de)橫幅廣告或者(zhe)是(shi)游行(xing)活動(dong)(dong)時用的(de)(de)旗幟，隨(sui)著互聯網的(de)(de)興起，現(xian)在專門用Banner指代任(ren)何投放于線上(shang)（PC端(duan)、移(yi)動(dong)(dong)端(duan)）的(de)(de)各(ge)種尺寸(cun)和形狀的(de)(de)廣告圖(tu)，有靜態和動(dong)(dong)態之(zhi)分(fen)，總之(zhi)現(xian)在你在網頁上(shang)所(suo)看到的(de)(de)各(ge)種形狀尺寸(cun)的(de)(de)圖(tu)片(pian)基本都屬于Banner ，并且(qie)基本都是(shi)可點擊的(de)(de)。
二、Banner圖的作用是什么？
Banner圖(tu)主要體現(xian)網(wang)站(zhan)的(de)中心意旨，起到宣傳、展示、推廣(guang)的(de)作用，進而為網(wang)站(zhan)、產(chan)品帶來(lai)相應的(de)轉化率。
三、Banner圖由哪些部分構成？
Banner圖主要由(you)文(wen)案、商品圖、模特(te)或者背景這四項中的至(zhi)少一項組成，旅(lv)游網站(zhan)的Banner圖一般是由(you)文(wen)案和(he)圖片(pian)組成。
四、Banner圖的制作
很多站長(chang)覺得(de)Banner圖(tu)(tu)制作(zuo)簡單，就是放(fang)一(yi)張圖(tu)(tu)，然后在上面配上一(yi)些文(wen)字，沒有什(shen)么技(ji)術含量(liang)。確實如此，但這是指一(yi)般(ban)的(de)Banner圖(tu)(tu)。一(yi)款優(you)秀的(de)網(wang)站首頁Banner圖(tu)(tu)，它不僅要(yao)在用戶(hu)進(jin)到網(wang)站的(de)第(di)一(yi)眼就震撼、驚艷，更能準(zhun)確向用戶(hu)傳(chuan)(chuan)遞網(wang)站想要(yao)傳(chuan)(chuan)達的(de)信息。而這也是我接下來要(yao)說的(de)重點——如何制作(zuo)一(yi)款優(you)秀的(de)首頁Banner圖(tu)(tu)。
（一）、網站定位
同(tong)屬(shu)旅(lv)游(you)網站，有(you)的(de)(de)(de)(de)(de)(de)專注于(yu)(yu)線(xian)路、有(you)的(de)(de)(de)(de)(de)(de)專注于(yu)(yu)住宿、有(you)的(de)(de)(de)(de)(de)(de)專注于(yu)(yu)攝影、有(you)的(de)(de)(de)(de)(de)(de)專注于(yu)(yu)賽事，因為其包含的(de)(de)(de)(de)(de)(de)業(ye)(ye)務(wu)(wu)和類型(xing)不同(tong)，所以(yi)各個網站的(de)(de)(de)(de)(de)(de)定(ding)位也不同(tong)。網站在(zai)制作首頁Banner圖的(de)(de)(de)(de)(de)(de)時候(hou)，就(jiu)要考(kao)慮到(dao)自己(ji)網站的(de)(de)(de)(de)(de)(de)整體定(ding)位。對不同(tong)的(de)(de)(de)(de)(de)(de)旅(lv)游(you)業(ye)(ye)務(wu)(wu)和類型(xing)，做到(dao)符合其特質，以(yi)此達到(dao)凸顯(xian)旅(lv)游(you)網站特點的(de)(de)(de)(de)(de)(de)目的(de)(de)(de)(de)(de)(de)。
案例1如下圖所示是使用思途CMS的(de)深度行旅游網，網站(zhan)定(ding)位是專注于跟團景點攝(she)影，所以首(shou)頁(ye)Banner圖清晰(xi)、美觀(guan)、大氣(qi)，圖片上的(de)而文(wen)字也是凸顯了攝(she)影這(zhe)個特質(zhi)。
案例2如下(xia)圖所示(shi)是使用思途CMS的(de)華騰游網，網站定位(wei)是專注于湘西(xi)(xi)的(de)吃喝玩樂，所以(yi)首頁Banner圖就(jiu)帶有濃郁的(de)湘西(xi)(xi)風情(qing)，突出了當地的(de)人文(wen)風情(qing)，和網站定位(wei)貼切。
（二）、背景圖
旅游(you)網站還是(shi)以展示目的(de)(de)地美景(jing)為主，經過大量研(yan)究觀(guan)察，發(fa)現私(si)人訂制和高(gao)端的(de)(de)旅游(you)網站都極其喜歡用攝影大圖(tu)，一(yi)用整(zheng)個(ge)網站就顯(xian)得(de)高(gao)端大氣起來(lai)，不(bu)用設計甚至不(bu)用排(pai)版已經吸引(yin)了用戶的(de)(de)眼球。但是(shi)注意，圖(tu)片選擇要清(qing)晰，一(yi)定要非(fei)常清(qing)晰，不(bu)能(neng)放大了就變得(de)模糊(hu)。并且圖(tu)片所要表達出來(lai)的(de)(de)意境還需要后期進行(xing)色調(diao)(diao)和明暗調(diao)(diao)的(de)(de)調(diao)(diao)整(zheng)。
案例3如下圖所示的某網(wang)站(zhan)(zhan)，Banner圖因(yin)為放(fang)大而變形(xing)，直接(jie)給用(yong)戶留下網(wang)站(zhan)(zhan)不專業的印象(xiang)。
案例4如下圖所示是使用思途CMS的(de)的(de)青峰(feng)旅行網，背(bei)景圖干凈、簡單，不用加文字和額外(wai)的(de)元素，給(gei)人的(de)感覺(jue)就已(yi)經足夠好(hao)。
（三）、走心文案
一篇文(wen)章，姑且不論內容(rong)好壞，好的(de)(de)(de)標(biao)題能夠起(qi)到吸引人(ren)的(de)(de)(de)作(zuo)用，糟糕(gao)的(de)(de)(de)標(biao)題則令人(ren)想點擊的(de)(de)(de)欲(yu)望都沒(mei)有。同理，設計首頁Banner圖除了符合(he)網站定(ding)位外，要做好的(de)(de)(de)第一件事(shi)就是(shi)設計走心(xin)的(de)(de)(de)文(wen)案(an)。好的(de)(de)(de)文(wen)案(an)，能夠通過簡單的(de)(de)(de)一句話，就觸(chu)動用戶(hu)的(de)(de)(de)心(xin)靈(ling)，或者說(shuo)勾(gou)起(qi)用戶(hu)的(de)(de)(de)興趣，激起(qi)用戶(hu)繼續(xu)瀏覽網站的(de)(de)(de)欲(yu)望。
案(an)例(li)5如(ru)下圖所示的(de)某網站首(shou)頁(ye)Banner圖，羅列了(le)網站經營產品或者說業(ye)務，從廣告的(de)角度(du)來看(kan)(kan)是(shi)合理的(de)，但是(shi)第一(yi)眼(yan)睛看(kan)(kan)到(dao)(dao)這個(ge)banner這個(ge)圖完(wan)全抓不到(dao)(dao)重點啊，滿(man)眼(yan)的(de)小文字(zi)。所以記(ji)住首(shou)頁(ye)Banner圖上的(de)文字(zi)不能多(duo)，最好能讓用戶一(yi)眼(yan)能夠看(kan)(kan)完(wan)。
案(an)例6如下(xia)圖所示是(shi)使(shi)用(yong)思途(tu)(tu)CMS的(de)的(de)美途(tu)(tu)網(wang)，專注于美國(guo)旅行(xing)，文案(an)就簡單的(de)幾個字，直(zhi)接清晰的(de)表明網(wang)站(zhan)業(ye)務，吸引用(yong)戶。
（四）、文字排版
首(shou)頁Banner圖的(de)(de)文(wen)字格式也是(shi)有(you)講究的(de)(de)，不是(shi)任意放一個位置或者(zhe)任意大小就行了(le)。文(wen)字的(de)(de)排版要求重點突出，大小粗(cu)細錯落有(you)致(zhi)，字體保(bao)持在(zai)2種左右，加入(ru)一些跟內容有(you)聯系的(de)(de)元(yuan)素或者(zhe)圖形(xing)，可以更好的(de)(de)表達(da)整個設計的(de)(de)情緒。
1. 分清主標和副標
從主(zhu)(zhu)次上(shang)來說，主(zhu)(zhu)標(biao)為主(zhu)(zhu)，字體要大(da)顏(yan)色要醒目。副標(biao)起到(dao)從內(nei)容上(shang)和形(xing)式上(shang)都輔助主(zhu)(zhu)標(biao)的作用。一(yi)個好的banner標(biao)題文字處(chu)理都比較飽滿，比較集中。
案例7如(ru)下圖(tu)所(suo)示(shi)是使用思途(tu)CMS的(de)的(de)絲路直通車網，主次明顯，且文字(zi)與輔助圖(tu)案相互呼(hu)應，統(tong)一感很好。
2. 若是主(zhu)標太(tai)長又(you)不(bu)能進(jin)行刪減(jian)的(de)情況(kuang)下，那(nei)就對(dui)主(zhu)標的(de)關鍵(jian)字進(jin)行強調，突(tu)出(chu)主(zhu)要信息(xi)。
案例8如下圖所示是使(shi)用思途CMS的(de)(de)的(de)(de)愛旅度(du)假網，如果(guo)把浪漫蜜月三生(sheng)三世這句話排成一行(xing)，就(jiu)會顯得沒(mei)有主次，也沒(mei)有吸引力。網站把這一句話中的(de)(de)關鍵字提取出來(lai)，讓用戶容易看到重點，了(le)解(jie)更多(duo)信息。
3.若是整體(ti)文字(zi)很(hen)短，Banner圖顯得太空，那么可以加入一些輔(fu)助(zhu)信息來豐富(fu)畫面，例如加入英(ying)文，網站名等。
案例(li)9如下圖所(suo)示是使用思途CMS的的新疆生產建(jian)設兵團中國青年旅行社。
（五）、Banner排版
Banner排(pai)版的意思是(shi)將(jiang)文案、圖片或者(zhe)(zhe)其他圖形在整(zheng)(zheng)個(ge)頁面上(shang)調整(zheng)(zheng)位置、大小，讓整(zheng)(zheng)個(ge)Banner圖看(kan)上(shang)去更和(he)諧(xie)、美觀(guan)。有的網站Banner圖看(kan)上(shang)去雜亂不(bu)(bu)堪或者(zhe)(zhe)不(bu)(bu)上(shang)檔(dang)次，其實很大一(yi)部(bu)分(fen)是(shi)排(pai)版的原(yuan)因。事實上(shang)，在Banner的排(pai)版上(shang)有著很多通用的規律，這里和(he)大家分(fen)享一(yi)下。
1. 對齊
在Banner圖中相關內容(rong)（例如(ru)主(zhu)副標(biao)(biao)），就(jiu)要做到上下對齊，不能(neng)主(zhu)標(biao)(biao)在左邊(bian)，副標(biao)(biao)放在右邊(bian)，這(zhe)樣不利于用戶查看。而采用對齊的(de)方式，用戶的(de)視線就(jiu)能(neng)快速(su)移動，一眼看完自己(ji)感興趣(qu)的(de)內容(rong)。
案例10如下圖所示的某旅游網站，主標在左邊，副標在右邊，用戶不能一眼看完所有內容，用戶體驗度不好。
案例(li)11如下圖所示是使用思途CMS的(de)(de)的(de)(de)走四(si)方網，上(shang)下對齊，用戶一眼(yan)就能看到最重要的(de)(de)信息。
2. 聚攏
Banner圖的(de)顯示內容(rong)有時候(hou)因為想要表達的(de)東西很多，所以要分(fen)成(cheng)幾個不(bu)同的(de)區域，但是記住(zhu)相關(guan)的(de)內容(rong)要放在一起(qi)，不(bu)能分(fen)散開來，否則(ze)整個Banner圖會顯得很混亂(luan)，抓不(bu)到重點。
案例12如下圖所(suo)示是使用思途CMS的(de)的(de)聚(ju)嗨樂游網，Banner圖中想要強(qiang)調搶購(gou)這(zhe)個主題(ti)，時間、主標、副(fu)標等都排(pai)列整(zheng)齊，看上去整(zheng)潔，沒有擾(rao)亂客戶查看重點內容。
3. 留白
想要Banner圖(tu)(tu)看上去高端(duan)，留(liu)(liu)白就是(shi)必不(bu)可少(shao)的(de)一點。經過(guo)研(yan)究，發現高端(duan)的(de)網站Banner圖(tu)(tu)上的(de)文案和相關圖(tu)(tu)形都很少(shao)，盡量展示原(yuan)圖(tu)(tu)的(de)美景。留(liu)(liu)白多一些(xie)，就能(neng)減少(shao)整(zheng)個(ge)Banner圖(tu)(tu)帶給用戶(hu)的(de)壓迫感，還能(neng)讓(rang)用戶(hu)清晰看到重點內容，不(bu)至于擾(rao)亂視線。
案例13如下圖所示的(de)某(mou)旅游網站，為了(le)國慶節專門做(zuo)的(de)Banner圖，第一眼看(kan)過去就覺得(de)畫(hua)面非常的(de)擁擠，不知道重點在哪里(li)。
4. 降噪
好(hao)(hao)的(de)Banner頁面一定都很干(gan)凈，上(shang)面的(de)字(zi)體最好(hao)(hao)不要超過(guo)(guo)3種，字(zi)體太多(duo)會顯得Banner圖凌(ling)亂，顏色(se)也不能過(guo)(guo)多(duo)，否則就會分散用戶的(de)注(zhu)意(yi)力。旅游網站(zhan)的(de)Banner圖最好(hao)(hao)還是以(yi)清(qing)晰(xi)、美觀(guan)的(de)風景大圖為主，配(pei)上(shang)簡(jian)單的(de)文字(zi)，這樣已經足夠好(hao)(hao)。
案例(li)14如下(xia)圖所示是(shi)(shi)使(shi)用思(si)途CMS的的皇途網(wang)，Banner圖是(shi)(shi)一張簡單(dan)的風景(jing)圖，畫面簡單(dan)干凈，用戶很容(rong)易對網(wang)站產生好感，有繼續(xu)瀏覽網(wang)站的欲望。
5. 配色
不同的(de)(de)配色(se)會給(gei)用戶帶來不同的(de)(de)感覺(jue)，比如橙(cheng)色(se)給(gei)人溫暖的(de)(de)感覺(jue)、 藍(lan)色(se)給(gei)人清爽的(de)(de)感覺(jue)、粉色(se)給(gei)人幸福的(de)(de)感覺(jue)。因此在制作Banner圖的(de)(de)時候就(jiu)要考慮到你(ni)想傳達給(gei)用戶的(de)(de)情感是什(shen)么，你(ni)想讓他們看到Banner圖是什(shen)么感覺(jue)，然(ran)后再(zai)看Banner圖是不是符合你(ni)想表達的(de)(de)主題，如果不是就(jiu)要進行色(se)彩的(de)(de)修改。
案例(li)15如(ru)下圖(tu)(tu)所示(shi)是(shi)使用(yong)思途CMS的(de)(de)的(de)(de)愛(ai)旅(lv)度假(jia)網，網站定位是(shi)專(zhuan)注于海島(dao)旅(lv)游度假(jia)，這個(ge)主題就很好的(de)(de)在Banner圖(tu)(tu)上進行了(le)體現(xian)，粉色溫馨，和蜜月(yue)度假(jia)相(xiang)符。
?
首頁Banner的(de)(de)目(mu)的(de)(de)是讓用戶進網站(zhan)的(de)(de)第一眼就(jiu)(jiu)被吸引(yin)，有(you)繼續(xu)瀏覽的(de)(de)欲望。我看(kan)過很多的(de)(de)旅(lv)游網站(zhan)，產(chan)品內容不錯，就(jiu)(jiu)是Banner圖制作不走心，變形或者不清晰(xi)(xi)，很難讓用戶產(chan)生好(hao)感，就(jiu)(jiu)不要(yao)談后續(xu)的(de)(de)產(chan)品轉(zhuan)化了(le)。因此站(zhan)長們(men)在(zai)首頁Banner圖的(de)(de)制作上應該(gai)要(yao)花費更(geng)多的(de)(de)時(shi)間，做好(hao)細節，弄清楚主次。還要(yao)注意Banner圖要(yao)及時(shi)更(geng)新(xin)，比(bi)如說為國慶專門設計的(de)(de)Banner圖，在(zai)節日后記得(de)換成其他(ta)的(de)(de)。其實對(dui)于(yu)旅(lv)游網站(zhan)來說，首頁Bannre圖最(zui)基本的(de)(de)要(yao)求就(jiu)(jiu)是清晰(xi)(xi)美觀，如果(guo)能(neng)夠做到信息傳達準確(que)，就(jiu)(jiu)已經是足夠優秀的(de)(de)Banner圖了(le)。
贊
3
有一點幫助
0
沒有幫助
小米
