设计banner是有规律的

最近公司运营同学在做推广活动，提出需要在首页添加一张banner作为入口。但是，设计部的同学，在设计banner的时候，改了一版又一版，运营同学觉得都不好。这种情况，在设计师的改稿生涯中，是很常见的。所以，我想总结一下banner的设计规律。根据这些规律，设计出来的banner，真是又快又好。

下面看看banner设计的几种规律。直接上图。

———————————————–

banner设计规律1：

上面这2张图的banner设计，来自【支付宝】网站。

总结这2张banner的设计规律：底层放一张背景图，摄影图片留白的地方，添加文字即可。

这种风格的配图设计，主要在于背景图的视觉效果，以及恰到好处的视觉留白。

———————————————–

banner设计规律2：

上面这2张图的banner设计，来自【京东金融】APP。

总结这2张banner的设计规律：底层放一张背景图，中间一层从黑色半透明的图层，最上面添加文字就好。

这种风格的图片设计，在【每日开眼】app的界面上，得到了大规模的运用。

———————————————–

banner设计规律3：

上面这2张图的banner设计，来自【虎嗅网】网站。

总结这2张banner的设计规律：底层放一张背景图，中间一层从黑色到透明的渐变层，最上面打上文章的标题文字就好。

这种风格的banner，在【36氪】网站也得到运用。因为模板简单，设计师可以很快完成的，很适合每天都需要设计大量配图的新闻类网站。

———————————————–

banner设计规律4：

上面这2张图的banner设计，来自【人人都是产品经理】的网站。

总结这2张banner的设计规律：底层放一张背景图，中间一层半透明的黑色长条的矩形，在矩形上方添加文章的标题，配图左上角再加上网站的logo。

这种风格的配图，我在设计的时候，会把中间的半透明黑色，改成半透明的产品颜色。

———————————————–

banner设计规律5：

上面这2张图的banner设计，来自【口碑网】app。

总结这2张banner的设计规律：底层放一张大面积背景图，四周添加各种和标题相关的物品，中间留白部分添加大标题和小标题。

这种风格的配图，我设计的时候，会把小标题左右两边的线条，改成随形附体的各种线条，增强bannner的构图感觉。

———————————————–

banner设计规律6：

上面这2张图的banner设计，来自【支付宝】app。

总结这2张banner的设计规律：左边一张插画图片，右边配上大标题和小标题。

这种风格的banner设计，首先要找到素材图片，然后把素材图片绘制成插画即可。当然了，如果你直接放一张已经购买版权的图片上去，也是可以的。

———————————————–

banner设计规律7：

上面这2张图的banner设计，来自【天猫】app。

总结这2张banner的设计规律：右边放一张产品实物图，左边配上产品的文案，背景用上淡淡的颜色。

这种风格的图片，在【陆金所】的官方网站也得到了运用。文字颜色可以直接吸取产品的主色调，背景的浅色调可以直接吸取产品主色调中的高光部分的颜色。

———————————————–

如果你遇到过banner设计稿，改了一版又一版，需求方都不能定稿的话，那么你也可以主动总结一些设计banner的规律，互相分享一下^.^

本文作者: 张云钱。微信公众号：944352559，从Ui->到PM->到UED。坐标：上海。