推荐阅读

运营熊

旅游网站如何设计一款优秀的首页Banner图？

时间：2017-09-04 | 分类：网站运营

浏览：11740

​用户访问旅游网站的时候，第一屏至关重要，很大程度上它直接决定了用户的去留。旅游网站作为一个和美相关的行业，光靠文字大面积的堆积，不足以直观、迅速的告诉用户来到这里会得到什么有用的信息，因此首页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图了。