看招拆招!其实设计banner是有规律的

分享到:更多 ()

Image title

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

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

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

Image title

Image title

banner设计规律1:

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

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

这种风格的配图设计,主要在于摄影图片的视觉效果,以及恰到好处的视觉留白。

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

Image title

Image title

banner设计规律2:

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

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

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

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

Image title

Image title

banner设计规律3:

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

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

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

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

Image title

Image title

banner设计规律4:

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

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

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

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

Image title

banner设计规律5:

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

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

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

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

Image title

Image title

banner设计规律6:

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

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

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

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

Image title

Image title

banner设计规律7:

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

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

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

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

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

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

 

最美UI|学ui设计联盟|一起努力学设计!

最美UI zuimeiui.com 学ui设计最值得关注的UI学习教程交流平台! 每天发布高质量的设计教程和分享设计经验,帮助喜欢UI设计的初学同学快速转型,我们给大家提供更多免费学习ui的机会,想成为设计师的你赶快加入吧! 给最美UI点个赞!有你的支持是我们前进的动力! 猛点这里 >>

最美ui微信公众号zuimeiui要养成关注干货好习惯哦!

[ 最美特色栏目推荐 ]
设计导航:全球顶尖设计网站推荐,设计师必备导航! → 猛戳这里
设计欣赏:收集海量精选APP截图,让你设计灵感小宇宙大爆发!! → 猛戳这里
设计师:三人行必有我师。在这里可以交到良师益友哦!还不赶紧加入? → 猛戳这里

【最美UI 原创文章 投稿邮箱:tougao@zuimeiui.com | 期待您的投稿!我们将一一答复!】

未经允许不得转载:最美ui » 看招拆招!其实设计banner是有规律的

1
分享到:更多 ()