网页设计中，banner应该是最耗时间的模块了，很多学习
Web前端设计培训课程的学员都比较头疼这一块，其实没有大家想象的那么难，看下面一幅图，你看到了什么？
上图就是典型的网页banner，从图中，我们看到了产品（鞋子）、文案（勇攀高峰等）、背景（山、天、树、石等），其实百分之八九十的banner就包括这三个方面，我们简单概括为三步骤：搭背景、输文案、放产品。接下来，
Web前端设计培训课程老师从这三个步骤分别分析其中的易错点。
一、搭背景
1、搭背景-合成细节
先来对比以下两款banner（只看背景部分）。
问题1：图一搜索的素材有平视有仰视比较错乱，图二透视关系是对的；
问题2：图一明度从左到右一致，图二明暗关系有层次；
问题3：图一色系太多显得有点花，图二配色会比较舒服。
综上，搭背景要注意合成细节，要看起来像是一整幅画那么和谐，而不是硬生生的拼凑到一起，要二次处理，主要体现在视角、明暗和色调。
2、搭背景-是否抢镜
先来对比以下两款banner（只看背景部分）。
问题1：图一素材占比重比较大，抢文案的镜，图二背景稍显利索；
问题2：图一金币的种类比较杂乱，图二相对单一；
问题3：图一素材铺的特别满，图二能够给画面留一些空隙，疏密合适。
综上，搭背景要注意不要抢产品和文案的镜，banner的主角是文案和产品，背景只是陪衬，所以不能抢镜，主要体现在太花、太乱和太满。
3、搭背景-有无层次
先来对比以下两款banner（只看背景部分）。
问题1：图一只有宽度高度而没有厚度，图二有远近透视，让画面有了厚度；
问题2：图一背景铺的微微的渐变，图二有虚实明暗大小远近的层次关系。
综上，搭背景要注意有层次，让画面不止有宽度和高度，还要有厚度，主要体现在三维概念和明暗虚实。
二、输文案
1、输文案-整体整齐
先来对比以下两款banner（只看文案部分）。
问题1：图一有水平、有倾斜有些许乱，图二整体左右对齐。
综上，输文案要注意整体整齐，注意不是每一句话都对齐，只要整体整齐就足矣，这样才显得利索。这个最简单了，无非就是左对齐、右对齐、居中对齐、两端对齐。
2、输文案-紧凑清晰
先来对比以下两款banner（只看文案部分）。
问题1：图一文案放的满画面都是，图二文案放的比较紧凑集中；
问题2：图一文字有部分看不清，图二清晰明了。
综上，输文案要注意紧凑清晰，在这个快节奏的社会里，文案要遵循扫描式阅读，让用户一眼就能抓取到信息，主要体现在不满屏放、文字识别度要高。
3、输文案-是否有主次
先来对比以下两款banner（只看文案部分）。
问题1：图一字号一致，没有主次，图二有明显的主次关系；
问题2：图一文案普通，没有创意，图二有文案创意，比较新颖。
综上，输文案要注意主次，只有体现出主次，才能有懒人阅读法的作用，如果让人印象深刻，主文案最好有文案创意，主要体现在字号、颜色、文案创意。
三、放产品
1、放产品-是否精修
先来对比以下两款banner（只看产品部分）。
问题1：图一产品在画面中比较飘，图二产品在背景图上比较稳；
问题2：图一产品色调有点暗淡不像新品，图二比较清亮吸引人。
综上，产品要注意精修，不能止于抠图，要把拍出来的产品精修出高大上的感觉，让产品在画面中很协调，主要体现在立体性、光影的变化。
2、放产品-是否高清
先来对比以下两款banner（只看产品部分）。
问题1：图一模特图比较模糊，图二产品比较清晰。
综上，产品一定要注意高清，想必不做设计的人员也不会喜欢模糊的图，所以这是最基本最简单的，主要体现在不模糊、不水印、不变形。
3、放产品-是否融入画面
先来对比以下两款banner（只看产品部分）。
问题1：图一产品与模特跟背景不融合，图二比较协调；
问题2：图一产品识别度不高，图二产品清晰可见；
问题3：图一产品大小比重比较低，不能够引起用户的注意，图二产品比例合理。
综上，产品要注意与背景的融合度，不能各自为营，互不干涉，要融为一体，在一块合情合理，主要体现在色调、大小、比例和前后层次。
通过以上的讲解，相信大家也会觉得banner其实并不难，跟套公式一样，每项注意就可以，我们来总结一下：
第一：搭背景，注意合成细节、是否抢镜、层次感
第二：输文案，注意整体整齐、紧凑清晰、有主次
第三：放产品，注意是否精修、是否高清、融合度
Web前端设计培训课程老师整理的以上总结，希望能帮助大家设计出既有效率又有质量的网页banner。
本文来源：上海非凡进修学院。整理：
Web前端设计培训课程老师。更多资讯【请关注微信号：feifanxueyuan】(版权声明：推送文章和图片我们都会注明作者和来源，除非无法确认。部分文章和图片推送时未能与原作者取得联系，若涉及版权，烦请原作者联系小编更正，谢谢！)
源自名校
学院资质
专注17年
400-616-2336
刘老师
返回顶部