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

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

一、认识banner

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

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

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

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

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

认识了什么是banner，那它有什么作用？用它意义是什么？

我总结了一下：

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

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

二、banner应用领域

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

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

1.电商

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

2.游戏

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

3.金融

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

4.饮食

（宣传自家产品相关内容，如雪津啤酒，可乐，零食等等）

5.汽车

（各种车类APP，如瓜子二手车/人人车等等）

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

三、【banner设计风格】

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

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

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

1.扁平风格

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

2.轻质感风格

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

3.描边风格

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

4.合成风格

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

5.手绘风格

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

6.三维风格

（使用C4D建模写实丰富的场景来吸引用户，画面新颖，创新性强）

7.2.5D风格

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

8.特殊风格

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

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

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

四、【如何做最佳banner】

1.传达信息准确

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

2.字体设计新颖

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

3.版式布局凸显

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

4.色彩搭配吸睛

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

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

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

原创： 陈晓国  

来源：UI设计师之家