×

Banner怎么做?史上最全Banner解析

发布时间:2019-09-06 11:46:05

因为最近正好在做banner ,心血来潮想整理完善了一下自己掌握的banner的知识点,同时也想分享给大家Banner怎么做?

一、认识banner

大家应该都对banner有一个基本的了解,说通俗一点,像手机APP里的banner无非就是吸引用户点击 的,要么就是推广产品的,还能有啥?

其实以上所表达的也不够准确,所以作为一个设计师还是有必要好好了解一下“什么是banner?”

banner的历史呢,我这里从百科找到了早期的介绍:

Banner的中文翻译过来是可以作为网站页面的 横幅广告 ,也可以作为游行活动时用的旗帜,还可以是报纸杂志上的大标题。Banner主要体现中心意旨,形象鲜明表达最主要的情感思想或宣传中心。

通过上面的介绍,我们可以理解现在的banner通常指的是PC端的网页banner和手机移动端的网页banner。

认识了什么是banner,那它有什么作用?用它意义是什么?

我总结了一下:

作用:吸引用户,宣传主题,如电商,环保公益海报,KFC广告等等

意义:达成作者的目的,对应上面,购买商品,唤醒环保意识,去吃新汉堡等等

二、banner应用领域

那我们来接着了解banner应用领域有哪些呢?

常见的banner的应用领域,根据行业来区分的话,按热门程度来分有

1.电商

1.webp.jpg

(各种电商网站经常看到,如目前最火爆的某宝,鲁班就非常厉害了,每天不停撸图吸引剁手族)

2.游戏

2.webp.jpg

(看网页小说,玩APP,可以说铺天盖地的各种游戏广告banner,吸引游戏玩家来玩赚钱)

3.金融

3.webp.jpg

(经常在APP里看到推送的各种贷款产品广告)

4.饮食

4.webp.jpg

(宣传自家产品相关内容,如雪津啤酒,可乐,零食等等)

5.汽车

5.webp.jpg

(各种车类APP,如瓜子二手车/人人车等等)

其他等等比较冷门的就不一一举例了

三、【banner设计风格】

目前banner应用于各行各业各种情况,在上面的常见领域里电商设计风格多样,其他领域风格基本出入不大。

我们来看下常见的banner设计风格有哪些?

我这里采用的是按设计手法来分类:

1.扁平风格

6.webp.jpg

(以纯色扁平图形为主,偏向2次元更加简洁。自2013年以来热度不减,经常运用各个画面中,考验图形的创意以及排版布局和色彩的搭配能力)

2.轻质感风格

7.webp.jpg

(在扁平的基础上增加了渐变和肌理以及阴影,让画面更加富有质感,接近现实的拟真效果,相比扁平更容易有视觉冲击力)

3.描边风格

8.webp.jpg

(描边风格是扁平的延伸,通过给图形元素加描边的粗细,来加强图形轮廓,凸显视觉效果)

4.合成风格

9.webp.jpg

(利用多种图片素材合成实现不可能的画面,创意十足,富有趣味性,有极强的展现效果)

5.手绘风格

10.webp.jpg

(手绘的画法有多种风格,画面充满故事性,色彩效果极佳,生动有趣吸引用户)

6.三维风格

11.webp.jpg

(使用C4D建模写实丰富的场景来吸引用户,画面新颖,创新性强)

7.2.5D风格

12.webp.jpg

(等轴测图,属于伪3D效果,由于早期的”纪念碑谷“带火这一风格,图形创意视觉效果丰富)

8.特殊风格

13.webp.jpg

14.webp.jpg

(近年最火的短视频”抖音“引起了故障风热潮,还有其他比较少见的波普风等)

以上的大部分设计风格,都可以通过 PS/SK 为主,AI为辅来完成设计效果,其中三维风格的话就需要借助C4D这样的软件来实现,目前电商领域对应banner需求最大,所应用的设计风格也最多。

按时间成本来排的话,首先花费最少的是扁平/轻质感/描边风/,其次是2.5D,最后是三维风格,因为需要构建模型渲染来实现,建模贴材质打灯光都比较费时;还有合成和手绘风格,需要设计师有很强的透视和光影以及色彩搭配处理能力,也就是专业的理论知识和扎实的手绘功底。

四、【如何做最佳banner】

1.传达信息准确

15.webp.jpg

(画面所展现的内容信息,如果表达的和文案不匹配的话,这在一定程度上就影响了用户认知;精准有趣的文案,不仅可以定位正确的用户人群,也可以刺激用户购买欲望)

2.字体设计新颖

16.webp.jpg

(越富有创新形式的组合排版越吸引用户关注)

3.版式布局凸显

17.webp.jpg

(画面内容排版优劣,给用户的感觉最为直接,不能做到第一眼吸引住用户的banner不是成功的banner)

4.色彩搭配吸睛

18.webp.jpg

(富有情绪的颜色搭配,最为影响用户,极大程度地冲击用户的视觉直观感受)

其实banner的设计最考验设计师的平面设计功底 ,大家可以加强三大构成的练习运用,将极大的提高各方面的设计能力。虽然现在越来越多现成的技法教程学习,无不是节省时间的捷径。

但终究偏离了设计的本质,舍本琢末了。最普遍的现象就是想要阐述自己的设计却很难表达的清楚,毕竟只有自己真正掌握了知识原理,合理地运用在设计中,你就能发现你知道怎样  做出更好的设计  ~

原创: 陈晓国  

来源:UI设计师之家 

返回列表>