这篇分享是去年19年在公司内部的分享，当时被告知需要帮助内容运营的各地方站的小编们，如何能够准确描述出自己的要求，或设计出符合内容运营的Banner。因此根据当时的需求希望通过分享，能够帮助各地方站解决Banner制作水准不一，以及编辑如何与设计师沟通设计的问题。

最基本的解决这个需求的问题就在于——设计的基础语言。当编辑们了解设计最基础的语言时，可以非常容易地向设计师表达出自己的需求，也会对效果展示有更具体的形象。如果没有设计师可协助，编辑们也可以通过学习到的基础设计语言，可自身独立完成完整地具有设计感的运营Banner。因此本次分享主线就是解析最基础的视觉设计语言。

时隔一年了，因为各种不可抗力原因，把当时的内容整理一下分享出来，如有不同的见解，欢迎讨论～

Part 1. 关于Banner

-

先从「Banner是什么」开始解析，了解出目前市场上流行的Banner都有哪些特点。我们从类型、流行趋势、特点、表现这四个方面，最基本的知识点开始了解Banner的特点，有助于了解行业里优秀的Banner都是怎么做的，以及什么场合应该怎么处理等关键因素。

1. 常见的Banner类型

-

下图列举的三种类型我们都不陌生，但是每种类型应用的行业、场景都不太相同。

「插画」类别的更多运用在APP、小程序等无实体化产品的虚拟产品中；

「实景或模特」的类别常运用在音乐类或电商类等实体产品；

「文字」类别的应用范围则比较广泛，活动、音乐会、展览这种需要通过线上宣传至线下落地的产品为主，还有小说、杂志、课程等无具体图像的实体产品也是运营得非常广。

以上也只是大致上的一些应用方向，具体的实施还要根据具体需求应用。

2. Banner的风格

-

了解Banner的风格以及表现趋势，使我们设计的表现手法以及视觉上整体效果的把控。随着移动技术和设备的发展支持越来越多的视觉效果展现，因此2.5D、3D、动态等也成为了新的流行趋势。同样随着Retina屏的出现，我们可看的效果绝对绚丽夺目。其超高的像素密度已超过了人眼所能分辨的范围，使图像的逼真度提升至全新境界，文字显示更是棱角分明。借此我们现在的设计可设计的范围也大大增加，视觉上有更多的表现手法可选择。

3. 优秀Banner的特点

-

从视觉上和传播效果这两方面对市面上优秀的Banner进行分析与归纳，要想达到较好的视觉效果归纳总觉为以下三点：1.主题明确、2.场景感、3.色彩舒适。无论是为哪个行业哪个项目设计Banner，我们的Banner制作的目的始终是要向群众传达出「正确的主题」，以达到最佳的传播效果。因此在设计的时候，对主题整体的把控是视觉表达中最重要的，如果没把控好重心，技法再酷炫视觉再华丽也只能成为「无效Banner」。

其次则是场景感与色彩舒适度。无论是Banner还是海报的制作上，这两点都会给人们产生最强的视觉感知。通过场景化画面加深与用户之间的沟通，将用户带入场景中组成作品与用户之间的链接。设计师在运用色彩时，可运用一定的心理学知识正确运用色彩表达出来画面的情绪，譬如促销可热闹的配色，商务的可严肃的配色… 使整体画面内容保持一致的气氛。

4. Banner的表现

-

Banner的表示是指根据主题，我们的画面表现应有相应的情绪，我将常见的类型分为三大类：

第一类「快乐/娱乐/欣赏」整体画面是快乐的、愉悦的，元素丰满活泼，但是文字是以垂直或水平为主，保持快乐而温和的氛围。

第二类「兴奋/促销/热闹」整体画面是动态的、扩张的，文字以动态（倾斜、波浪等）形式出现，传达出热烈激动的感觉。

第三类「安静/忧伤/哀愁」整体画面留白更多，元素和文字的表达是静态且间距相较疏远，给出一种宁静且具备想象空间的表现。

Part 2. Banner的视觉表现

-

掌握了以上四点，我们已经大概知道Banner大概是什么，以及怎么做了，但为什么我们还是做不好呢？在实际工作的过程中，可能会遇到需求方很多种要求，譬如「高端」「大气」这些词到对怎么理解呢？需要表达更多更丰富的情绪时，构图就会混乱，不知道怎么处理。那么接下来要说的就是关于制作时的关键点「视觉铁三角」。

视觉铁三角

-

铁三角顾名思义就是缺一不可，三者互相关联此消彼长，缺其中一个元素，都会毁掉整个画面。只要把「色彩」「文字」「版式」这三点掌握好，整个画面的视觉传递也已经具备了一定的表现力。

1. 视觉铁三角 — 色彩

-

先从色彩的组合应用说起，常见的会有单色、双色和渐变。为什么我这篇分享不推荐三色以上的色彩组合呢？因为三种颜色以上需要有更好更强对色彩的把控能力，以及对配色有绝对的审美。

如果在对色彩感应没那么熟悉的时候比较容易出错，但又想更丰富的展现自己怎么做呢？第一种是可以在双色的情况下增加中性色黑白灰或画面的中间色调，第二种就是可采用渐变的形式，这样对画面的色彩把控会更轻松不容易出错。

色彩可以很简单，但好像也没有那么简单。举例来说就以我们中国人最喜欢的红色为例，通常我们用红色代表了喜庆，但是在红绿灯中红色代表了禁止，红色的玫瑰代表了浪漫…… 所以我们并不能笼统的说明红色就代表了热情，我们需要考虑实际场景。

以最基础的蓝、红、绿三种颜色来说，一下三张图和我们平时的印象中传达的情绪一样吗？为什么不一样呢？关键的原因在于颜色的「饱和度」和「明度」。

浅谈明度与饱和度

-

先来了解一下明度与饱和度。色彩明度，也就是亮度，影响的是颜色的深浅变化。饱和度则管辖色彩的鲜艳程度，也可以认为是色彩的纯度。

了解这两个概念之后，我们可以通过这明度和饱和度的调整，达到我们想要的效果。譬如如果我需要做一个可爱风的Banner，那么我就会知道我的主色调是低饱和度+高亮度的，知道这个概念之后，再根据我的主题或场景选择色相，以此类推。

2. 视觉铁三角 — 文字

-

文字也是Banner中非常重要的部分，除了是最直接以及清晰表达Banner的主题，也可以作为元素点缀画面。在设计文字的时候，不能过于为了追求「表现力」而影响了文字原本应该具备的阅读性。

文字的性格 - 衬线VS非衬线

-

在制作的时候我们也会有「字体选择困难症」，但我们只要了解最基本的文字最基础的两个体系「衬线」与「非衬线」那么选择就简单了一半。

「衬线体」就是在笔画的开始与结束地方都有额外的装饰，我们中文的字体宋体就是最典型的衬线体。衬线体看上去更优雅以及具有一定的时代感，更具女性化。

「非衬线体」则是指字体结构以外没有装饰性笔画，它通常用在正文或大段文字的时候，可提高阅读性。而在我们的Banner制作中，它看上去更现代而且更有个性、带有清爽感。

案例演示 - 以下A和B哪个更好呢？

-

案例一

从内容来看，Banner的主题是要介绍英文写作，并且是具备逻辑性的，因此这样的背景以及场景下，使用非衬线更符合主题的情绪与氛围。

文字的性格 —— 「粗or细」「直or圆」

-

刚刚所说的是衬线与非衬线只是选对了一半，还有另外一半是由文字的线条所决定的。不可小看字体的线条，选错了会破坏整个画面的氛围。

从画面上的观感来看，粗的线条会使画面更满、更沉，而细的线条则笔画与笔画之间间距会更大，会使整个画面更透气、柔和。笔直的线条会给我们带来利落、爽朗感，而圆弧形的线条则会给我们带来活泼、可爱的感觉，所以在选好了衬线与非衬线后，就要开始判断字体的线条是否适合画面氛围。

案例演示 - 以下A和B哪个更好呢？

-

案例一

这组电影海报是粉红的色调为主，画面中奔跑中的女孩以及整个画面氛围都是轻柔、带有女性情感的，因此都采用了衬线字体，但两组的粗细不一。右边的粗线则把整个感觉压实了，并不像「听说」更像「看到」，而左边那组使用细线那张海报更符合「听说」这种若有若无的情景，因此此海报使用细线会更加优选。

3. 视觉铁三角 — 版式

-

设计中最基础也是最重要的一点 —— 版式设计。版式的基础也体现出了整个设计水平的高低，一个好的版式表现，决定了整个Banner的质感。从版式的表现上来看，分为两大类「排版」和「构图」。

排版

-

排版的结构很简单，常见的有左右、左中右、上下结构。

结构的意思就是图文之间的位置关系，而构成完整的作品。左右结构就是，图文分别在左右；左中右其实就是居中结构，以图或文居中，左右两侧包围图片或文字，形成左中右结构；上下结构则是图上文下或图下文上的结构。

构图

-

构图相较结构来说会较为难把握一些，如果把视觉表现比喻为作品的外衣，那么构图就是我们的身体。构图是整个作品的基石，选定构图决定作品最基本的调性，最基础分为三大类「垂直与水平」、「倾斜」、「错落」，三种给人是完全不同的感觉，他们可混合或单一使用。

「垂直与水平」因为结构相对稳定，因此给我们带来安静平稳的感觉，常用于咖啡店、书店、珠宝、商务等，适合营造高级感强、可信赖的、稳定的感觉。

「倾斜」因为打破了垂直带来的安全感，因此给人一种动感、有冲击力的感觉，适用于促销、运动等动态事件。

「错落」因为元素是分散的，因此视觉上会给我们一种懒散的感觉，适用于儿童类、趣味类。

我们设计Banner所表达的情绪，总不会是单一的，所以我们需要思考一下以下问题，当我们需要表达的情绪产生了情绪矛盾，该如何处理呢？

运用视觉铁三角制作一个海报

-

Step1. 确定主题

-

制作海报或Banner之前，我们首先都要先确定主题，也要考虑主题与需求是否符合，而再进作下一步的考虑。

Step2. 确定色调

-

因为我定下的主题与宇宙相关，因此会采用到高饱和明亮度高的颜色，使整个画面更具备科技未来感。而这同时也是一个线下的培训会，因此其次的颜色会用到饱和度高且明度低的颜色，给人一种稳重感觉。

Step3. 确定版式

-

因为海报的文字内容是最重要的，因此我采用了居中的结构，把中间留下空白给文字作为填充。因为需要体现这是一个有趣且活力的培训会，因此采用了散落+倾斜的构图，这样就确定了海报的基本构图。

Step4. 确定字体

-

因为海报的主调性是「科技的」「现代的」，因此标题文字采无衬线粗线的字体，表达出直爽、利落的氛围。字体结构的转角是锐利，将字体设计成倾斜的，更好的结合了太空人想上冲的动感的感觉。最后根据画面特性，沿着星球的外弧形将培训内容依次铺排上去，展示出有趣的氛围。

Step5. 完善海报

-

平铺完后会发现海报还是缺乏一些气氛，最后我们添加元素，调整一些颜色之间的过度，海报就这样完成了。