[2021-07-05] 「这篇专讲 动态Banner，下文包含大量gif动图实例，建议电脑端或者手机横屏浏览。」

        # 讲在前面 #

        过去一年自己的一大进步就是把个人风格和产品风格清楚地分开来了，设计上更成熟一点。

总结说就是：每样商品的定位、价格、消费人群……不一样，决定它的产品风格也不一样。设计中需要把个人(喜欢的)风格与之区分开来，可以在产品中带有个人印记或者设计痕迹，但务必保留产品自身的风格。

        商业设计有它自己的一套规则，不能因为一种设计与自己喜欢的风格不一样，就认为它一文不值是垃圾并对做出此设计的人嗤之以鼻。（例如喜欢简洁风的看到街头潮酷的作品，可能会想：这都是些什么玩意儿？！）

一、Banner分类

        运营 banner（下文以“横幅”指代）若细分起来也有挺多种的，从设计的角度出发，个人只简单将电商（独立站）横幅分为#带产品横幅#和#不带产品横幅#。

        #带产品横幅# 常见横幅都会附上自家的商品，一般为热销商品、新品、主推产品。视运营情况，也有可能是库存量大的商品。

        #不带产品横幅# 一般为大促、主题、节假日活动准备的。视运营情况，也有可能是某个特别活动的入口。

二、动效的作用

（一）引导视线    

       不可否认，平面排版做得好也能引导吸引消费者。但人眼天生容易被运动的物体吸引，动态横幅更容易“操控”消费者的聚焦点。

        同一种排版，动的地方总能最先吸引眼球，这样就能根据需要突出想要突出的点。▼▼▼

        

        需要强调的是，动态不能喧宾夺主，还是要以产品为重。动态范围(同一帧)控制在商品所占面积之下。动态元素不宜过多，超过一个应该遵循自然阅读/观看顺序排列（即从左到右，从上到下）▼▼▼

（二）装饰作用

        常见的手法是运用线条、色块、小元素等进行装饰。有时候增加装饰元素是为了不让排版看起来不那么呆板，有时候是为了起强调+弱引导的作用。

▲▲▲ 此品牌已不再运营，就不打马赛克了。

▲▲▲ 弱引导：两个爆炸点分别指示数量与价格。 

（三）烘托氛围

        烘托氛围有时候容易跟装饰作用混淆，总的来说，烘托氛围是以整个画面为考量的。

▲▲▲ PS也可实现此效果。

▲▲▲ 此类闪烁效果要归到“装饰”作用也行，但与主题对应做整体考量，说烘托更恰当。

▲▲▲ 这种“无病呻吟”式的渲染设计，不是每个运营小伙伴都可以接受的，设计前需沟通好。

三、设计的变化

        归纳来说，横幅设计的变化分为三类，一是变化文字，二是变化图片，三是综合手法变化。

        其中，变化文字的设计是非常丰富的，随便一种虚实线、正负形、大小写、摆动、波动、滚动、缩放、模糊、偏移……都可以做出多种多样的设计。

        相较而言，变化图片就显得少了些，主要有几点原因：a.图片一般为产品，大部分情况下需要保证产品图清晰完整。    b.由于动图是由多帧合成，变化的图片文件体积大，容易导致网站加载缓慢，降低跳转率等。(静止背景可大大减小最终图片大小)    c.部分情况下，运营提供的图片素材质量不高，变化条件受限。

        变化图片可以从饱和度、渐变映射、增加描边、勾勒线条……方面入手。

▲▲▲ 有些运营小伙伴是不能接受商品主体被遮盖的，做此设计前需沟通好。

                          ▲▲▲ 本人跟过一段时间国内营销的广告素材设计，根据优化师的反馈，

这个简陋的动效好像有种魔力，在手机竖版状态下，点击率提升明显。

         标题/主题/活动大部分情况下是一张横幅的重点，可在此方面多下功夫。▼▼▼

▲▲▲ 当前品牌已不再运营，就不打马赛克了。

四、写在最后

        1.图片的使用：模特图有时候遮住半张脸是为了保持一定神秘感，有时是因为版权/肖像权的原因。

        2.字体的使用：需考虑商用问题，特别是对于长久站点，任意使用网上下载字体会带来风险。免费商用的汉字也越来越多了，目前来说，思源黑体是多字重汉字体的首选。

        3.字体的选择：女性商品多衬线体，男性的多非衬线体。英文慎用复杂的手写体、脚本体。汉字少用书法体，不是不好，是大部分书法体制作得十分粗糙，容易踩坑。

        4.图片的大小：如上所述，图片过大会影响效果，没有成文的规定，大小一般控制在1M内。

        5.动图的导出：使用AE的话，可安装使用 GifGun 插件，不错！

        6.图片的帧率：高帧率会导致快速运动的元素拖影模糊，所以有时可适当降低帧率。超低帧率有时也可营造一种别致的效果。

        7.直角与圆角：直角显刚硬，多用于男性的商品，圆角多用于女性的，且由于全面屏手机的出现，圆角最近成为趋势之一。不过，得考虑网站的整体风格（有的网站直接套用模板，不能更改圆角度数，设计风格须与之匹配）。

        8.高大上？：回到开头的话，并不是所有的都要做成“高大上”的，重要的是与消费人群匹配。审美只有高低没有好坏对错。50块的商品设计得看起来像是要卖500块的就完全偏离了销售目标了。

        9.时刻记着做的 banner 是为营销服务的。

        10.想到再补充。