对于外贸网站来说宣传是必不可少的，我们更多的选择使用banner图来传递我们网站上的主要信息，好的banner图可以获得访客的关注，起到宣传和销售的效果。然而很多设计师在制作banner图时，不知道该从哪作为突破口，今天我们来分享下网站banner图如何设计以及需要注意哪些问题。

首先了解网站banner是什么?

Banner图是一张大尺寸横幅的图片，是首页上展示信息的一种方式，通常放在首页第一屏的位置，主要呈现网站最重要的内容概述，banner图是访客进入网站后第一眼看到的视觉效果，即访客产品的第一印象，而研究数据显示用户在第一屏花费的注意力高达80.3%，所以对该区域的浪费相当于对流量的浪费。

Banner图的作用

1.从上面的研究数据可以看出 ，banner图是首页最重要的位置，而且可以展示多页内容，更能吸引客户关注并继续观看其他内容。

2.对于企业来说，banner可以起到广告宣传的作用，获得竞争优势，帮助访客在最短的时间了解相关内容。

banner的设计如此重要，那优秀的banner有哪些共性呢？

有强烈的视觉冲击力，在第一时间抓住访客的注意力。

每张banner只传达一个概念或观点。

色彩搭配与网站整理协调，符合自己品牌的形象和人群对品牌熟知的认同感。

正确的对比度，与CTA元素相区别，衬托而不喧宾夺主。

匹配页面主题，帮助标题直达浏览者最关注的问题。

我们在设计banner时，经常会发生因设计不当导致banner被忽略的问题，直接影响点击率，那体验效果好的banner图应如何设计呢？

一、内容为王

banner图上的内容，一定程度上决定了图片的质量，不相关的内容会给客户带来不好的体验，需要注意以下几点：

1.文案内容。独特而有个性的文案内容可以拉近我们的产品和访客的距离，好的文案一般是直观、简短、可以引导用户执行某些操作。

1）突出产品的主题。让客户一目了然，如下图：网站上产品众多，将主推广的产品放置在banner图上，文案内容突出我们是专业的泵制造商，按钮设计引导客户继续点击查看产品详情介绍。

2）突出企业品牌和文化。在banner图设计时注意与公司的企业文化、品牌定位及形象相结合，这些都可以通过banner的风格、色彩、和文字直接体现。根据产品的类型定位简约的风格，设计中融合了客户的logo，注重客户的品牌宣传。

二、善用CTA按钮

CTA是常见的用户交互元素，如：“阅读更多 ”“立即注册”等按钮，好的CTA设计是转化的重要步骤，可以引导客户进行下一步的操作，那我们在设计banner图上的CTA时要注意哪些方面呢？

1.放置位置。放置位置建议在文案信息后，引导客户看完我们的营销信息后进行下一步操作。

2.CTA的形状建议使用按钮形式，经测试得出：使用按钮形式的CTA点击率会比其他的样式更高。

3.颜色。一般来说红色、绿色、黄色是转化率较高的颜色，但我们在制作banner图时也要结合网站的整体风格及logo色调来设计。

4.大小。按钮的尺寸建议略短于上方文案内容，这样会给访客以紧张感，增强访客行动力。

5.按钮上的文案我们要体现价值，让访客有所期待。如“留言免费领取样品”、“免费领取课程”等，增强客户的转化，但注意文字不可过长。

6.注意在移动端的展示效果。在手机端要着重注意按钮的大小，要有足够的留白效果能让访客轻松点击。

三、banner风格和整体网站风格要统一

做banner图，简洁的设计比一个复杂的元素多的图效果会更好。主色调建议不要超过三种，在设计中为了突出主题，也会运用一些视觉表现手法：如：民族风－会用古典的、复古的、文化底蕴的效果；扁平风－使用活泼的、简单的背景；工业风－再现应用场景，增加真实感。banner与网站的整体风格搭配清晰简洁，若左边为产品图，右边是主推产品的简述，有不错的视觉效果，文案下面就是CTA，引导客户查看更多并留下询盘，非常的一目了然。

四、打造故事情节的视觉效果

通过展示banner图向访客讲述一个故事，无形中向客户灌输我们的应用场景、产品特征等，但切记不宜放太多信息，能让访客第一眼抓住重点和核心信息。背景融合了产品的应用场景，更直接触达客户共鸣，继而引导访客继续关注并了解我们的产品。

五、优化网站banner的大小

1.尺寸大小

我们在设计时要注意使用最优的尺寸，banner图分为窄屏Banner和全屏Banner，在早期建站时考虑到网站打开速度的问题，通常使用窄屏尺寸，但这种尺寸无法适应不同的屏幕大小，所以依据屏幕大小平铺的banner设计就应用而生，这种尺寸的banner图视觉效果更好，使网站显得更加大气。

2.占内存大小

由于图片加载需要时间，在Banner图做好后，我们要在不损害图片质量的情况下对图片的大小进行优化，减少页面加载速度对转化率的影响,一般建议banner图的文件小于200K。这里推荐大家使用Tinypng图片压缩工具（网址：https://tinypng.com/），这个工具支持jpg和png同时批量压缩，并最大限度的对图片无损的压缩。

六、给访客清晰的操作反馈

1. 要时刻有清晰的指示，告诉访客当前所在的位置，以及提示用户操作后可见的内容，引导访客找到自己感兴趣的内容，点击率也更高。 在banner图的下方可展示缩略图，让客户提前获取隐藏的内容，访客选择自己感兴趣的内容进行下一步操作。

2. 提示访客快速识别到点击区域，减少点击出错的情况发生。在设计时我们尽量做稍大一些的点击区域，让访客轻松找到哪些区域是可以点击的。

以上内容即为制作banner图需要注意的事项，我们要注重banner图内容主要从文案、主推产品、企业品牌来考虑，并结合使用CTA按钮，做到banner风格和整站风格的统一，利用有冲击力的视觉效果，吸引客户点击查看网站更多内容或提交询盘，制作完成后在不影响图片质量的前提下对banner图进行压缩，保证网站的打开速度小于3S。

 想了解更多：谷歌SEO、谷歌优化、外贸快车、小语种网站、谷歌ADS、Youtube视频、外贸牛、全球贸易通、扬州谷歌优化、杭州谷歌优化、上海谷歌优化、请添加

郑重声明：本文版权归原作者所有，转载文章仅为传播更多信息之目的，如作者信息标记有误，请第一时间联系我们修改或删除，多谢。