推薦閱讀

運營熊

旅游網站如何設計一款優秀的首頁Banner圖？

時間：2017-09-04 | 分類：網站運營

瀏覽：12273

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

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

一、Banner圖到底是什么？

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

二、Banner圖的作用是什么？

Banner圖主要體現網站的中心意旨，起到宣傳、展示、推廣的作用，進而為網站、產品帶來相應的轉化率。

三、Banner圖由哪些部分構成？

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

四、Banner圖的制作

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

（一）、網站定位

同屬旅游網站，有的專注于線路、有的專注于住宿、有的專注于攝影、有的專注于賽事，因為其包含的業務和類型不同，所以各個網站的定位也不同。網站在制作首頁Banner圖的時候，就要考慮到自己網站的整體定位。對不同的旅游業務和類型，做到符合其特質，以此達到凸顯旅游網站特點的目的。

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

案例2如下圖所示是使用思途CMS的華騰游網，網站定位是專注于湘西的吃喝玩樂，所以首頁Banner圖就帶有濃郁的湘西風情，突出了當地的人文風情，和網站定位貼切。

（二）、背景圖

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

案例3如下圖所示的某網站，Banner圖因為放大而變形，直接給用戶留下網站不專業的印象。

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

（三）、走心文案

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

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

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

（四）、文字排版

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

1. 分清主標和副標

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

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

2. 若是主標太長又不能進行刪減的情況下，那就對主標的關鍵字進行強調，突出主要信息。

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

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

案例9如下圖所示是使用思途CMS的的新疆生產建設兵團中國青年旅行社。

（五）、Banner排版

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

1. 對齊

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

案例10如下圖所示的某旅游網站，主標在左邊，副標在右邊，用戶不能一眼看完所有內容，用戶體驗度不好。

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

2. 聚攏

Banner圖的顯示內容有時候因為想要表達的東西很多，所以要分成幾個不同的區域，但是記住相關的內容要放在一起，不能分散開來，否則整個Banner圖會顯得很混亂，抓不到重點。

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

3. 留白

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

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

4. 降噪

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

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

5. 配色

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

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

?

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