UI 实操案例！手把手教你优化首页Banner设计

一、全文速览图

界面设计的配图除了一般图片素材的填充外，还有运营/广告图的填充，而它们因为类型和性质上的差异，填充的逻辑和普通配图也不一样。

如果应对得太随意，那么界面的视觉效果一定会被拖累，尤其是界面顶部放置的广告大图，如果做不好对设计观感起到的负面影响是巨大的。

所以今天我们就聚焦在顶部广告图上，分享怎么来正确完成对它的设计与填充。

二、顶部广告图的类型认识

顶部广告图在早年几乎是 App 首页必备的组件，虽然现在有很多产品移除了这个模块，或是将它改到下方（比如淘宝、京东），但依旧有很多应用的主页包含这个组件，或是在下级页面中使用这种布局逻辑。

在我们完成对它的填充之前，首先要理解顶部广告图的类型，可以简单把它划分成两个大类：

1. 固定广告图
2. 运营活动图

固定广告图，就是固定了布局形式和设计标准的基础广告图例，是产品日常运营过程中高频更新，或者完全由系统算法决定再根据预设模板生成出来的。

固定广告图的形式也包含两种情况，一种是图片区域内展示的就是一张纯图片，另一种则是图片背景+UI 文字前景的组合形式。

第一种比较好理解，主要讲的就是第二种情况，也就是广告图上的文字是系统渲染的 UI 文本，这么做是为了能更方便地编辑和变更文本内容，同时也可以将文字和背景进行分层，能实现更多的动画效果（比如移动速率不同）。

运营活动图和前者比起来，就是权重更高的广告图类型，往往只使用图片不会使用系统 UI 文本。这类活动的设计没有固定的形式，一次活动一个样，更关心能不能传递活动的氛围而不是和界面 UI 的统一。

在实际项目中，两种广告图类型我们都可能会涉及，但在做作品集时，就只推荐大家做第一类。原因就是这种广告图不仅简单易做（主要原因），而且和界面的结合度会更高，看起来更舒适。

除非你要在作品展示中同步展示运营活动案例，否则尽量避免在主要 UI 界面上增加视觉过重的运营图。

三、顶部广告图的应对方法

虽然固定广告图的做法更简单，但也不是完全没有技巧与门槛，比如下面的作业案例：

我们无需强行解读错误的设计问题在哪，而是应该认识合理的设计应该遵循哪些条件，下面是关键的要素：

1. 广告标题要足够清晰，字号要大且和背景有充分的对比
2. 标题字体主要使用黑体，笔画简单边缘干净
3. 主体物要简单易于识别，颜色也要和背景有对比能被凸显
4. 布局结构要简单，使用左右布局或居中布局为主

接着，我们就进行这个广告图的重新设计，那么首先就是确定布局方向，再创建格线系统。

在 App 界面中，最常用的广告图布局就两种，左右布局和居中布局。

左右布局是 App 广告图的万金油布局形式，安全可靠，但也普通平庸。居中布局则更有视觉冲击力，需要场景满足一定的条件才适用。

下面分开讲下两种布局形式：

四、左右布局型广告图

设计左右布局类广告图，首先定义上下左右四边的格线（即内间距）。这四个边的间距并不需要一致，我们轮流介绍每个参考线的定义标准。

上方，格线的位置是低于搜索框的，确保主要元素不会超过这个区域，被搜索框遮挡分割。

左侧，则是标题文本信息的对齐线，而这个对齐线并不需要和下方的内容保持对齐，只要对齐的话那么左侧间距就会过小，所以文本左侧间距至少要大于页边距的2倍以上。

下方，主要是留给页标圆点的，需要先把它的位置和高度确定出来，再确定出格线位置。

右侧，边缘则较小，或者可以不加，因为右侧放主体物的情况下，边缘不会特别规则，我们要关注重心的位置但不会是边缘，所以即使边缘超出也没关系。

有了四周的定义，再确定更细致的格线，首先是居中增加一条竖线，作为左右的大致分界。左侧增加水平方向的横线来确定文本的垂直摆放位置，右侧再增加一条竖线，确定主体物的中轴。

有了这个标准，下一步就可以开始进行布局了。首先确定左边文字信息的部分，我们直接选择常规黑体字，然后使用较大的字号将标题打进去并完成布局。

然后再根据亲密性原则，在上方添加标签，下方添加字号更小的副标题和按钮标识。

然后，我们再选择合适的素材置入，将画面的重心放在主体区域中。对于生鲜这类相对简单的物体，可以适当使用 AI 来生成素材图（只有 GPT 够用）。

最后再去优化细节，比如给标题添加一定的效果，增加一些线条、手写体的装饰，添加背景图，给主体添加投影等等。这些细化的效果都是根据排版和界面的组合效果去加，是尽可能用最少的效果实现最好的图例，而不是像做 H5 专题主视觉一样就冲着复杂去造。

五、居中布局型广告图

居中布局的模式包含两种类型，一种是标题在上主体物在下，一种是主体物居中标题也居中和主体物“叠加”。

第一类多数应用在广告图上下空间较大的场景，如果像案例中广告图实际展示区域偏扁，就难以使用这种布局形式。更常见的就是主体和标题都居中，再结合一定的叠加方式。

下面我们先创建对应的格线系统：

上下左右的格线主要确认上下方的预留空间，上下的设置逻辑和前面一样，左右则需要增加更多的间距，控制画面主体尺寸不要过大，否则视觉冲击力会太强难以驾驭。

水平居中线就是中轴用于居中对齐比较好理解，而中间偏上的横线则是标题的垂直对齐线。这有一个小知识点，就是在广告图中，核心标题需要处于中等偏上的状态才能保证视觉的平衡，尤其是当前广告图在视觉上还延伸到界面顶部，如果标题处于正中位置，实际的观感一定是偏下的。

所以基于这个格线标准，我们就可以置入标题、信息以及主体区域了。

再之后，就可以往里填充内容并优化，完成后续设计了。在这类布局中，主体物的形状是最重要的，如果是黄瓜、香蕉、眉笔一类细长的实物是不会有好效果的，所以一定要选较粗比例适中的图形。

最后一点，就是 Banner 的背景，在非场景化的设计中，背景的设计除了直接使用一整张素材图外，最简单的做法就是纯色背景加弥散。即先填充一个背景纯色，可以直接从主体物身上吸取再微调，然后填入白色的圆形并给它们添加模糊和透明度效果。

最后再看下前后的对比：

这种设计当然一点也不惊艳，但它一定比凭感觉“硬做”的效果更好一点，也更能贴合界面的需求，就是安全不出错的做法。

那么为什么不直接做最理想、最有设计感、最能表现设计能力的方式？

因为缺少平面设计经验的话是驾驭不了的，越复杂的设计需要关注的细节越多，光有一个框架远远不够支撑成熟的视觉图片输出，所以新人应该先学会用好最基础的方法。

额外提几个需要规避的地方，第一个就是避免使用 AI 生成的细节极多的 3D 图形主体，因为细节太多，就需要字体和背景去呼应它们，需要增加很多工作量，也很容易让界面顶部的视觉效果过载。

第二点，就是不要模仿“场景性”的案例，很多优秀广告图是会在画面中构建出一个场景出来的，且字体元素的设计都会满足这个场景的特性。因为画面有很多设计思路、技法的运用，新手就是想抄也很难抄好。

要牢记顶部广告图只是 UI 界面中的一部分，不一定要让它的效果特别突出（又不是腰间盘），只要保证它不出错，不给界面起反作用，就是合格的设计。

六、结尾

基础广告图的设计只有自己掌握且能动手做好才是最好的选择，而不是指望整张图的设计全交给 AI 一次输出，AI 味太重的广告图应用是很让人嫌弃的。

精力有限先只输出一种设计的类型，后续有空再补发居中模式的排版思路。

下篇再贱~