移动端运营banner设计的那些“套路”

突出活动文案，居中构图是个很好的选择，不足就是体现不了有趣好玩的调性。直白说主要就是明确干什么。所以用户的视觉焦点会聚集在重心区域，忽略掉周围的东西，在设计的时候，周围元素主要是衬托，不能抢主视觉重心。

所以说运用插画风格的话，简单轮廓插画和剪影插画是最适合的。

设计的时候注意几点：一，主体物要突出饱满，太小容易画面太空；二，弱化辅助元素并不是要把它做的粗糙。

左右结构分为两种，一种是左图右文，左文右图。两种构图的秘密在于，用户的浏览顺序是"从左至右"，如果图在左边，图在表意性不明显的情况下，我们需要看一遍文字，再看一遍图，这样图相当于重复浏览了两次；文字在左边就减少了重复阅读，提高了阅读效率，在运营推广"3秒原则"里，是首先要考虑的因素。而插画设计本身也是为了烘托气氛，表意性不是很明显，所以突出文案尤为重要。

所以，市面上大部分的学习知识类左右构图的，更倾向第二种左文右图。

左右构图受限于屏幕显示内容，所以，有一个明确的主体物至关重要。比如：像VIPKID和哒哒英语，会有一个自己的IP主形象，比较生动突出了品牌特征，还能让用户有代入感；还有像一些知识分享的，就会有一个明确的讲师或者人物，体现专业权威性，在设计上一切都以突出主人物来展开，就不要设计太过于复杂。

不同于电商的模特，主人物首先穿着上不能太花哨，要正式；周围装饰上不要太浮夸，要精简，甚至像高端知识分享的，背景就一个简单颜色来衬托。

还有以上面构图衍生的构图形式，比如倾斜构图，受限于banner尺寸高度，过大的倾斜角度会让画面失衡，负空间留白不均，会让画面不协调。

注意画面整体构图比例，文案占比永远都是大的，不要让主要画面辅助元素过大抢了文案的风头，因为即使图形辅助再精彩，用户更关心的是"你能给他看什么"。

文案和辅助元素大概是六四开，黄金分割比例能让焦点更多的关注内容，有些小伙伴可能在做的时候过多的沉浸在放大的画布里，由于没有直观感受，错误的预估当前构图的合理性，所以做图的时候多缩小画布离远看是个非常不错的方法。还有一个就是，做完了banner导出图片，双击打开图片，把图拖小到无法拖动为止，再看当前实际尺寸大小，用实际尺寸来检查。

文字的选择也是衡量当前产品用户定位的标准，首先文字结构不能太过于复杂，K12教育因为本身用户年轻化的特点，字形简单而且饱满有趣，所以一些艺术手写可爱字体比较适合。

免费商用可爱字体推荐：沐瑶软笔手写体、站酷快乐体、郑庆科黄油体、站酷小薇LOGO体、锐字真言体。

其他可爱字体推荐：汉仪唐美人、汉仪糯米团、汉仪铸字童年体、汉仪小麦体、方正胖娃体、方正字迹新手书、造字工房童心、文悦方糖体。

如果是高端知识分享和知识付费，体现高端。文字就要简单，字形不要那么随意，一些黑体和简单的衬线体就比较合适。

免费商用黑体衬线体推荐：思源黑、思源宋、站酷文艺体、方正书宋简体。

其他黑体衬线体推荐：汉仪瑞意宋、方正清刻本悦宋、方正兰亭、造字工房朗宋、造字工房黄金时代体、造字工房尚雅体。

当用户人群比较年轻，意味着所有的呈现方式都要直接，文案精简并且排版直观，提炼关键主标题，信息层级要拉开明显，如果信息层级不清楚，识别性是很差的，先看下面的案例：

看这两个，明显右边的对于我们识别，和对当前功能的认知更清晰，还有一个明显的视觉引导，突出了最主要的交互点；而左边的由于信息比较密集，导致我们无法短时间反应出关键信息是什么，这是比较糟糕的，运营同样如此，而运营比较尴尬的一点是，如果用户看不懂或不敢兴趣，是根本不会点击、不予理睬的。那么流量入口的意义就没有了，设计的再精美，都是一个非常差的作品。

提炼文案是很有必要的，下面两个同样的设计，右边对于文案的认知就更明显。

有的时候往往文案的关键信息比较多，我们在排版的时候第一个重要点，就是排版怎么拉开信息对比，同时又让排版紧凑？有时需要增加一些特定图形，或按钮。但是又会考虑，加了这些特殊图形和文案又显得相对独立不整体；还有就是关键点该怎么取舍，强化那些文案、弱化哪些，或是主文案是重要的，同时关键的数字也要突出怎么办？

左图，左边主文案放大了关键点，由于右边文案文字比较粗，所以层级拉开还是不够突出，如果想拉开对比的话那就让他们截然不同。右图，字体选择上拉开强弱，让右边的文字比划选择细一些；左图的关键数字不够突出，通过提亮改变颜色，来强化；按钮在左边画面显得太独立，和文案没有形成统一关系，反而按钮看起来变得要比文案重要，那么把按钮插到里面。

现在所有的信息，一环插一环，并且突出的文案明显，关键数字也明显；最后让他们整体在画面构图中面积比例放大，改版后是不是舒服很多。

还有一些小伙伴可能觉得亲密性原则不就是距离相近么，然后没有把控好各个部分的文字距离，导致反而该拉开的没有拉开，该近的没有近。

上图这个案例里，主文案分为了两行，但左边由于主文案行距比较宽，而跟辅助信息的距离太近，导致亲密性不够，而由于副标题文案又比较孤立，上半部的信息和下半部信息太散，整体统一度不够。

右图改进后，调整合适行距，并且加装饰线，协调一下辅助信息比较短小的问题（emmm感觉上好像在开车…不开车不开车我们继续……），同时也起到分割的作用让上下文案有关联和统一。

文案排版的其他细节还有错位排版时，注意错位的大小，太大会丢失掉排版的平衡性；注意文案排版对齐，往往有的时候不注意，会让你的作品看起来不够精细；文案做倾斜处理的时候，一般情况都是往右边倾斜，第一，右边都是我们的主要习惯方向；第二，往右可以很好的把用户引导到关键信息上，这些也是做banner排版里经常犯的错也是要规避的一些坑。