2019-12-27 09:31:53 壹念視覺

banner是我们设计师的家常便饭，不知道平日里大家在设计banner的时候，有没有很注重文案的设计？还是低着头一味的去烘托整个画面氛围，完全不管字体？只求画面漂亮、有空间感？抬头一看文案怎么摆都别扭，最后急了，直接转行居中就OK了？说到这里可能有人会对号入座，的确! 这是很多新人都会走的弯路，我们都知道一副完整的banner作品，文案在里面起着举足轻重的地位，是非常重要的！那今天我们和大家一起盘点一下文字对banner设计的基本准则，文末附有一些基础文案排版原型骨骼图~

Banner常见文字排版类型
Banner设计中文字注意法则
文字排版原型参考
优秀banner鉴赏

一、Banner常见文字排版类型

文字横竖排版

横竖排版的方式，其实是很常见的文字排版方式，这都是大家比较容易使用的排版方式，给人一种简单直接的感觉。基本上在排版，保证文字的对齐，效果就很比较好。

文字线框排版

其实很多时候，大家排版文字，直接利用线框来进行排版，比如说利用线框将文字框起来，在文字中加上线框的形状，让标题看上去更加的丰富好看一些。要注意线框不要随意的添加，注意它的粗细和长短。

文字错位排版

文字的排版，其实也可以呈现出一种错位的方式，因为文字错位效果，也能够呈现出一种动感和节奏感，在视觉上会具有很特殊的吸引力。而且文字的错位也很有创意，保持文字的连贯性，相信会很有吸引力。

文字加图形排版

文字加上图形，如果能够巧妙的组合，所形成的效果一定会很有创意。因为图片文字结合，会产生图文并茂的效果，让画面看上去更具有趣味。只是要形成这样的效果并不容易，能够将文字和图片结合起来，需要大家做好文字和图片的设计，可能对设计的能力有较高的要求。

二、Banner中文字注意法则

文字的排列要遵循规律

平时我们在阅读文字的顺序都是

从上到下、自左而右的。所以文案的排版应尽量遵从这一规则，除特殊版式之外（如中国风他就是自上而下，从右到左的竖型排版），尽可能减少参差不齐或右对齐排列，大部分情况下，使用左对齐或居中对齐是最为合适的选择。

左对齐、居中对齐、右对齐、参差不齐

不管是应用了文字的特效、文字的前后层次还是文字的倾斜，都是遵循左对齐原则。

而当沿着某一板块或素材的左侧排列文字的时候，我们使用右对齐会比左对齐和居中对齐，要有更好的表达效果，但一定要记住这是特例

明确主、副标题及描述

文字排版应用的核心是对比，而对谁做对比，怎么对比，为什么要对比是很多设计师都做不好的点。

主标题大、粗、醒目。副标题与主标题用同一字体，略大，略粗，较为规整。描述——常伴有形搭配来划出分隔。利于阅读，较细、较小（有些文案没有描述或副标题时，可彼此借鉴综合使用）另外在字体的选择上尽量不要使用识别度较低，特性异性的字体。

主标题的应用

一般情况下，我们都是以主题的长度为一个文字排版的左右宽幅，而如果主标题过长会导致我们的视觉点被拉长，文字如果都以主标题为基准去排列会显的臃肿，不按主标题去排列，主标题和其它文字之间会有很明显的断档，所以一般情况下，档主标题超过8个字的时候我们可以选择性地分段。

很多朋友愿意文字排版的开头使用你整体文案中最大或最粗的文字，其实有时候这种版式会让画面头重脚轻，有很强的压迫感，文字排版的摸索阶段，还是多以副标题或缩小的主标题作为开头比较合理。

主标题字数略少时候可以单独以主标题的每一个字作为一个图层样式，通过大小变化、粗细变化、旋转、叠加、排列等方式灵活运用主标题，必要时可附带特效。

行距与间距

行距与间距的把握是文字排版中最为点睛的一环，如果控制得好，整个文案都会很和谐，如果控制不好即便上边提到的几个技巧都做的完善也会感觉整体非常不舒服。距离的把空中我们一定要慎重考虑承重是否合理，直白的说你就是下方的文案能否撑得住上方的文案，而这个撑的含义就是通过行距与间距去展现的。

上图为例，我们说说行距，上图的文字整体行距是比较保守的同距型，这种方式比较随意的摆放合理一些，但是整个文案部分看起来较为死板呆滞。

我们可以拉开文案间距的行距，较为合理的承重行距的上窄下宽，宽度可以帮助你去支持画面，但是注意，这个时候我们要把同一范围的文案看做一个整体，当做一个分块，但不要让这种整体在一个画面里出来太多，板块分的太多文案就会散乱，视觉也不易局集中，一般情况下两块即可。不过这个整体中的文案之间可以做一些小浮动性的行距的处理。

红框部分为一个整体，注意上面提到过，就算是整体，其中的行距也可以租欧一些小的浮动变化，尤其是文案较多的时候不要让你的文字看着死板。然后整个文案和明确的分为两部分，红色一部分，点击领取一部分，通过两个部分的行距拉大来增加承重，但这种行距的拉大不要做的太过，尽量让他们集中在一个视野的范围。

间距一般来说使用默认距离是不会出现太大的问题的，足够应付很多场合，但是有的时候我们需要通过间距拉伸来达到某些目的，比如下图中“精品台钓竿”与整体文案相比较文字部分相对薄弱，我们就可以使用文字间距拉伸的方式让它又更好的表现效果，不过我们要注意文字间距的人为拉伸尽量不要让拉开的距离超过当前一个字体大小的一半，那样文字就会散乱。

尽量不要超过单一文字体积的二分之一

如果你非要做大于一个体积的间距，就需要增加一些装饰效果来弥补空白过大所带来的视觉问题。

再延伸到一个问题，很多朋友都很喜欢用英文做些装饰效果或者翻译，这种情况我们经理使用大写字母而不要使用小写，小写文字有高有低，一行下去很不规整，凹凸不平，很容易干扰视觉，而大写高度相同就会减少这种视觉上的冲突。

从干扰的角度去出发，文字中的标点符号也是比较影响视觉的，可以选择性去掉，我们可以使用空格或一些装饰符号去代替生硬的标点

三、文字排版原型参考

下面是为大家整理了一些Banner设计中的文案排版原型参考，当然说的意思便是我们在平时临摹一些作品的时候可以借此方法，抛开表层文字，看下他是在什么形状里面进行排版的，这种只有看的多才能积累更多的想法，到了真正去用的时候才能游刃有余，胸有成竹，要知道罗马非一日建成！

四、优秀Banner设计鉴赏

平日逛设计网站时看到的一些不错的banner就收集起来了，今天放这里给大家参考学习，当然看的时候不要看帅哥美女，请抛开这些表层的东西，看banner里面的主副标穿插、文字布局排版、装饰英文该怎么放、次要信息样式穿插等等这些，所以千万别被帅哥美女带跑题了。最后，希望大家看完有所收获，每日可以进步一丢丢，如果喜欢此类型的banner形式话不妨文末留言反馈给我，让我知道你喜欢，下次就知道分享更多的优秀作品。你要是喜欢你就说嘛，为什么不说呢，你明明喜欢为什么不早说呢？