如何能让独立站广告图以最佳效果展现？-UEESHOP

相信大家并不陌生。网站的广告图或者叫Banner图。广告图的内容通常是热销爆款、主打商品、最新商品等重要信息。常见的广告图显示在页面最明显的地方，这样才能让访客第一时间就能看到，吸引访客目光点击进行购买。 

那什么位置是最明显呢？一个页面通常会被划分为上，中 ，下三个部分。这三个部分的内容需要根据网页的浏览顺序和聚焦的的强弱来进行合理布局。上半部分是一个网站聚焦度最强最明显的位置，访客进来网站第一眼就能看到这个地方。所以大部分网站的主打广告图都是在网页的上部分。选好位置还不够，还需要考虑现在多样化的显示屏幕尺寸和跨度比较大的多种终端，让广告图以最佳效果展示给访客。通常有三种解决方案。UEESHOP以电脑终端给大家举例。

第一种解决方案

上传多组不同尺寸的广告图来匹配不同主流的屏幕分辨率（1920px，1680px，1440px）。这样做的好处是无论哪种分辨率，都能得到最佳展示效果。但是管理员的上传工作量变大，网页大小就会大大增加，导致页面打开速度变慢。 

第二种解决方案

用一组广告图按宽高比自动适应不同尺寸屏幕分辨率。相对前面的第一种解决方案，这种方式减少了工作量和网站大小，但是展示效果就不是最佳的。有人就有疑问了，不是说好按宽高比吗？怎么会展示效果不是最佳呢。举个例子：一张广告图的尺寸是1920*420，当显示器的宽为1920px的时候，此时广告图的尺寸是1920*420，展示效果最佳。当显示器的宽度为1280px时，按比例广告图的尺寸变成1280*280，意味着广告图的内容被压缩了，会导致访客看不清图片里想要表达的内容，这样的展示效果无疑是最糟糕的。以此类推，分辨率越小，效果就会越差。 

第三种解决方案

同样是用一组广告图来自动适应不同的屏幕分辨率，但不是以比例缩放来达到适应目的。而是网页设计师把核心内容设计在宽为1000px区域，这个区域位于整张图的中央，区域以外的部分只是作为场景的延伸。无论工作效率和展示效果，相对前面两种解决方案是最优的。 

UEESHOP的广告管理系统采用第二种解决方案和第三种解决方案结合使用。根据网页内容的展示要求，结合不同方案的优点来达到最佳的展示效果。例如，需要全屏展示的广告图，采用第三种解决方案，在不同的尺寸，隐藏左右两边延长的场景，不影响主题内容的展示。非全屏展示的广告图，采用第二种解决方案，保持最优效果的情况下按比例缩放。 

UEESHOP 产品经理陈国治