关于小黑盒的 Banner 设计，我们对非设计专业的同学有 4 点基本的视觉要求：安全区、图片清晰、Logo 规范、同一活动下各资源位视觉的统一。
对于设计同学，除上述基本要求，还要向目标用户进一步传达主题、表现氛围、提升阅读体验。运营 banner 按照组件化思路拆为 4 层：背景、点缀、商品和标题。通过 4 层的分析、及替换项对比，即可找出更好的设计方案。
本期分享聚焦「标题」为大家提供部分思路。标题优化可以从三方面来思考：字体选择、样式设计、层级组织。
往期干货：
编者注：Banner设计看似简单，实则囊括了平面设计、设计心理学、用户研究、文案设计等多领域的知识点，本文用1万2千字的超长篇幅，帮你从零开始掌握Banner设计。
阅读文章 >
黑体，省略衬线装饰，笔画粗细均衡，造型简明有力，更具现代感。结合小黑盒现代简约的风格，建议优先使用黑体。
此外，像思源黑体、阿里巴巴普惠体等可面向全场景使用的字体一般设计会更规范严谨、覆盖字符广，且保持着高识别度。由此以小黑盒为主的活动字体优先级参考下图，注意尾部标注的两点：版权，和笔画过粗导致的识别问题。
通过叠加纹理、倾斜变形、增加光影，相同字体可以呈现出不同效果，与画面和谐。这个我们归于标题的样式设计在本文第三节会做详细阐述。
当主题具有强烈的风格时，字体的选择要以主题风格为主，在没有合适字体时，需要通过笔画拼接、字体变形、原创字体达到契合主题风格的目的。如下图所示。
极影毁片辉宋：为适应印刷术而出现的宋体，源远流长，传统节日使用再适合不过
书法笔画拼接+叶根友离贤行书：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 设计，需要兼顾识别度、品牌感、视觉性，尽可能给玩家留下一目了然的主题和深刻的品牌印象。在发布图文的功能中，还提供了小黑盒设计团队准备的制图模板，欢迎各位小伙伴前往体验。
本篇来源：优设网
原文地址：https://www.uisdc.com/banner-design-4
广告
