公司网站设计制作（网站设计公司讲解Banner设计）

对于外贸网站来说宣传是必不可少的，我们更多的选择使用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。
如下图是我们经过A/B测试，最终使用Microsoft Clarity得出：改版后的Banner图相比之前，点击率提升了20%，banner也更吸引客户对我们的网站产生兴趣，并快速与访客建立关系，获得更多潜在客户。

第一步：对文案的调整，这张banner图主要体现产品的质量，在内容上撰写时突出我们经验以及质量和售后的保证，让客户更放心；在色调上使用logo的颜色，和整体更搭配。
第二步：优化产品图片，对产品图片进行了色调、亮度的调整，对产品做了投影效果，提升了立体的视觉效果。
第二步：配合使用产品的应用场景，如：此产品是应用的汽车上，应用相关的背景图片，客户看后一目了然，更能触达客户共鸣。
第四步：善用CTA按钮，按钮的边框做成金属质感更贴近应用的场景，引导客户点击了解更多详情。
第五步：最终调整，建议从整体到局部，再由局部到整体来看整个画面是否还需要优化，如：汽车的投影调整的更真实一些，色调要和整体网站搭配等。
当然，网站的banner设计是一方面，想近一步说服访客，网站有更高的转化率还需要看整站的内容，成功的网站会在说服访客的过程中不断提供给其有价值的内容。