移动端Banner设计初识

什么是Banner

Banner的意思是横幅广告，在App和Web端轮播图中经常出现。Banner需求往往来源于运营方面，为了配合某个运营活动或者广告宣传而做的的面向用户的展示入口。

Banner的大小

具体的尺寸大小要看活动重要级别，以及页面空间等来制定，常见的有16：9、5：3、5：2等，也可以根据具体需求自定义尺寸。
通常Banner不会太大，一方面来自手机屏幕的限制；另一方面为了视觉的平衡，避免头图Banner太大造成头重脚轻的感觉。

Banner的构成

排版 字体 配色 点缀

排版

常见的版式布局：左右构图 上下构图 左中右构图 居中构图等

• 左图右文
  需要图片非常具象能够表明主题，并且图像的品质感要高、精致。这种分割排版的构图方式，画面有明确的独立性和引导性。
• 左文右图
  这种方式能够精确地将信息传达给用户，强调文字的吸引力，使得信息在视觉上更加清晰容易分辨。
• 上下构图
  一般为上字下图，常见于Banner中要出现多个人物或商品，比较难掌握。
• 左中右构图
  层次感更加丰富，对画面的区块划分能够保证画面的平衡，要注意不能影响信息的视觉传达。
• 居中构图
  这种方式是将主体放置在画面的中心进行构图，醒目大方，视觉更聚焦，信息更集中，在突出主体的同时能是整体的画面具有一点的冲击力。

字体

明确字体的使用场合，不同的字体满足不同的产品调性

• 衬线体
  指的是字体结构笔画之外的装饰性笔画，且笔画的粗细会有所不同。衬线体能够给人古典、优雅、高冷、文艺的感觉
• 无衬线体
  完全抛弃装饰衬线，造型简明有力，可塑性很强，更具现代感，识别性高。通常用于现代、促销类的设计中，能有效的吸引用户注意力。
• 粗壮的字体气质
  给人的感觉粗壮紧凑，颇具力量感，可表现为阳刚有力的男性气质，也可以用作商品促销，营造一种热闹、兴奋的氛围
• 纤细的字体
  除了表现女性的特点外，通常还体现出高贵、高冷、典雅的特点；常被用作化妆品、女性杂志、艺术等女性主题领域。
• 可爱的字体气质
  一般用在表现活泼、不严肃的专题页面中，比较随意，就像小孩天真萌萌哒的性格。
• 书法体的字体气质
  书法字体具有很强的设计感与艺术表现力，给人传统、古典、豪迈、飘逸的感觉。
  文案对齐方式（左对齐 右对齐 居中对齐 自由排版）

配色

• 色彩是有情感的，要根据设定的主题和文案的内容，包括品牌色来决定使用哪种颜色最为合适，烘托出想要表达的情绪和氛围。
  ——暖色能够引起人的躁动，增强人的购欲望，加强了促销运营感，给人感觉热情、温暖、火爆、自信
  ——高明度的色彩搭配在一起，看起来积极、活跃、充满了自由清爽的气息
  ——粉色象征女性、温柔、甜美、浪漫，很符合当前主题
  ——色彩饱和度偏低，能体现简洁、文艺的感觉（莫兰迪配色）
  ——邻近色方案，可以吸取商品、模特的颜色进行调节，整体画面和谐自然（90°以内）
  ——对比色方案，通过选择对比强烈的色彩，视觉冲击力很强，能吸引眼球

点缀

点缀的意义在于丰富画面，使Banner整体不单调，更具有趣味性，能更好的烘托主题营造氛围，有规律的点缀也能让Banner更具有节奏感
——基础形状点缀（各种小形状矩形 三角 等 画出来的）
——抽象形状点缀（需要再次加工的，波浪 、滤镜等）
——标签点缀（色块 里面 加文字之类的）

选图

• 选图要有助于吸引用户的视觉焦点；
• 选图要符合当前的设计主题，能更好的传达设计的意图或目标；
• 选图质量要高，要清晰真实。