平面设计课堂！超多案例总结的Banner设计指南：标题篇

关于小黑盒的 Banner 设计，我们对非设计专业的同学有 4 点基本的视觉要求：安全区、图片清晰、Logo 规范、同一活动下各资源位视觉的统一。

对于设计同学，除上述基本要求，还要向目标用户进一步传达主题、表现氛围、提升阅读体验。运营 banner 按照组件化思路拆为 4 层：背景、点缀、商品和标题。通过 4 层的分析、及替换项对比，即可找出更好的设计方案。

本期分享聚焦「标题」为大家提供部分思路。标题优化可以从三方面来思考：字体选择、样式设计、层级组织。

往期干货：

一、标题字体选择

黑体，省略衬线装饰，笔画粗细均衡，造型简明有力，更具现代感。结合小黑盒现代简约的风格，建议优先使用黑体。

此外，像思源黑体、阿里巴巴普惠体等可面向全场景使用的字体一般设计会更规范严谨、覆盖字符广，且保持着高识别度。由此以小黑盒为主的活动字体优先级参考下图，注意尾部标注的两点：版权，和笔画过粗导致的识别问题。

通过叠加纹理、倾斜变形、增加光影，相同字体可以呈现出不同效果，与画面和谐。这个我们归于标题的样式设计在本文第三节会做详细阐述。

当主题具有强烈的风格时，字体的选择要以主题风格为主，在没有合适字体时，需要通过笔画拼接、字体变形、原创字体达到契合主题风格的目的。如下图所示。

极影毁片辉宋：为适应印刷术而出现的宋体，源远流长，传统节日使用再适合不过

书法笔画拼接+叶根友离贤行书：PC 端活动，使用书法体进行大小错落排布，大屏上更具冲击力

书法笔画拼接+叶根友离贤行书：以游戏方为主的强风格活动，使用灵动的书法，注意避免过于潦草导致的识别问题

创意字体：黑盒设计师+1 设计，以游戏方为主的强风格活动，颇有哥特、暗黑童话的感觉

二、标题样式设计

推荐阅读和颜阅设的《4 个维度搞定标题文字设计》，作者汇总的 28 个实操方法，是较全面的样式设计灵感库。本文将针对这些维度进行案例补充。

上图为小黑盒的饰品交易功能区 banner，此功能为游戏玩家提供了安全易用的饰品交易平台，目前主要支持游戏 CS:GO。通过 笔画变色（高等级金色）和 笔画替换（CS:GO 玩家喜爱且与文字造型契合的爪子刀）突出了“饰品”、丰富了标题，在后续多资源位投放中复用此标题形式起到了快速统一视觉的作用。

黑盒设计师可乐设计，小黑盒影视内容征稿 banner，通过 笔画模糊 和 笔画渐变 丰富了标题，烘托了活动主题“光影”的氛围。

通过 色块纹理（部分笔画网点——漫画式处理）和 添加环境效果（浮雕） 丰富了标题，让标题更突出的同时、也不至于和画面太过割裂。

图为黑盒虎年活动 banner，通过 图形边框（仿连环剪纸、圆形）丰富了标题。

黑盒设计师胡萝卜设计，通过 色块纹理（插画中黄油曲线）平衡了标题与插画的复杂度。

通过关键词 添加下划线 和 变色（背景的点缀色）丰富了标题，使标题更易读。

图为小黑盒独家的永劫无间专题战报，有丰富的统计数据、可根据用户的突出数据生成专属关键词。通过 添加图形色块 和 变色 丰富标题，使 banner 更易抓住用户视线。

黑盒设计师维奇设计，通过关键词 NS 变色（Switch 深入人心的红蓝手柄）处理，既丰富了标题，又加深了主题印象——NS相关活动。

图为小黑盒加速器免费加速 banner，每当 TI 等大型赛事时会为用户提供免费加速服务，通过 渐变叠加 和 主体物遮挡穿插（TI 赛事的代表物冠军盾），呼应画面中层次。

通过 浮雕效果（呼应手持武器的质感），丰富标题。

图为小黑盒刀塔自走棋专题战报，通过 错落效果（扁平化模仿竹简的翻折），丰富画面。

banner 设计需要平衡识别度与视觉性——这两个评估点都是相对而言的，要根据实际设计的风格、装饰元素以及主体物来确定复杂度。不变的标准是，标题一定要有识别度，切勿陷入盲目丰富样式的陷阱。

三、标题层级组织

如何从内容层面优化标题，使之一目了然？

针对复杂的标题：第一步缩写、提炼文案；第二步分层、在有限的空间和技法内拉开信息对比。

这就需要设计前了解用户的构成来源与运营目标，针对性做对症下药的设计。比如需要引导 IP 向用户，文案及元素设计要围绕品牌印象传达（例：多数游戏会有自己的品牌手册，在游戏宣发拉新阶段，要让用户第一眼获取对游戏的认知，建议围绕品牌手册做出精准的设计）；针对学生党，突出福利；针对游戏重度爱好者，突出画面玩法特点……

运营同学提供了如左图所示的素材，当时各媒体只狼曝光度高、素材重复度高，希望在小黑盒首页推广与常用素材区分开，最好以 暖色 为主营造促销氛围、强烈突出 超史低。此时需求明确，所以和运营同学沟通后直接做了文案删改，确保超史低和价格的突出。这是一个以标题为主的 banner，通过 主体物遮挡穿插 和 关键字加色块 适当做了层次丰富。

合理删除常用在分享、通知的方形小图需求中，因为尺寸极其有限，是最为凝练的地方，一般突出用户利益点。

产品同学提供了如左图所示的文案、和主 kv，人物和标题复杂度都很高需要做简化处理，再次沟通后明确了目标：突出小黑盒、PUBG 的合作，同时也了解到有哪些主要奖品。首先将活动名称做了 品牌化处理，然后根据人物 视线引导 进行构图，放在了左上方，最后强调的奖品 具象化 转移至商品、点缀层，完成了头图的设计。

作为小黑盒加速器的基础宣传 banner，覆盖关键信息多。左图主要问题在副标题，字重与主标题一致、5 项要素过于平均、移动端呈现字号小于 10，导致完全不具备可读性。与负责人的沟通及标签优先级方案对比后，通过 突出数字 (价格、支持游戏数的字体与间距)、标签位置亲密性调整（好评与商品图结合） 和 添加图形色块（按标签优先级做对比度区分）完成了 banner 设计。

图为未来之役刚上线时，与小黑盒加速器的合作活动。左图为初版文案。由于是新游、同时自带大 IP，将他与 IP 的关系说明可以加快用户的理解，活动以黑盒内完成加速任务为主、签到送好礼并不准确。与运营同学沟通后进行了文案的调整，通过 变色 和 添加图形色块 将复杂的文案调整为三个层级。

分层也有利于后期 转化模板。上图为小黑盒功能更新模板。标题分为功能名称、描述、了解更新按钮。

上述简化标题方法用到了交互设计四策略中的删除、组织、转移。设计核心逻辑是利用现有手段、工具解决现存的问题，内在是相通的。

标题的层级组织并不等于一味地简化，有时还需要进行适当的扩写、改写。比如上面小黑盒加速器与未来之役的活动案例，需要设计师以桥梁的身份拉近用户与活动的距离——帮助运营做好满足目标的合理表达。

图为小黑盒加速器的宣传需求，需求很简练——“免费加速PUBG”，投放在游戏界面内。其实也需要宣传到品牌、给出完整品牌名和必要的宣传点，沟通后将文案进行了补充。

在万圣节诸多游戏、平台搞活动时节，在 kv 不具备强烈品牌特色的情况下，通过提高标题优先级、文案中使用“PUBG”、“黑盒加速”能快速和其他活动区分开。

写在最后

banner 标题设计思路，可以分成三方面：字体选择、样式设计、层级组织。

在小黑盒，一个好的 banner 设计，需要兼顾识别度、品牌感、视觉性，尽可能给玩家留下一目了然的主题和深刻的品牌印象。在发布图文的功能中，还提供了小黑盒设计团队准备的制图模板，欢迎各位小伙伴前往体验。