App产品设计『运营工具』banner&开屏广告&插屏广告

这是《App产品设计指南》系列文章的第18篇内容，更多精彩可以点击下方链接查看。

《App产品设计指南》专栏目录

banner

App中的banner基本都出现在页面的顶部，可以配有文字，且一般都会有多张。所以需要支持切换，包括自动切换和手动切换两种模式，自动切换的时间一般是3秒。banner的最后一张和第一张可以做成循环切换的交互。banner的每一屏可以设置跳转到特定的页面。

banner还可以考虑和搜索、消息中心、用户信息等入口进行融合设计。比如喜马拉雅的首页banner和搜索框融合，背景会根据banner内容自动切换颜色，是一种很棒的设计。

喜马拉雅

开屏广告

开屏广告其实就是我们之前提到的闪屏页。在前面的启动页和引导页文章中已经说过，感兴趣的同学可以点击下方链接查看。

App产品设计『运营工具』启动页&引导页

开屏广告的定义是指出现在 APP 启动加载时的全屏或半屏广告，可以是静态图片或者动态视频。广告主根据CPC、CPD、CPM等类型向平台支付费用。

开屏广告可以分为全屏式与底部保留式。全屏式是整个页面都属于广告区域，可以展示更多内容；底部保留式是底部显示App信息，在其上面显示广告区域。

开屏广告一般都是可以点击跳转到特定页面的，比如App内页面，外部H5页面，唤醒其他App等等。当然某些开屏广告也可以只做展示，不做跳转。

网易云音乐

插屏广告

插屏广告具有强烈的视觉冲击效果，一般出现在应用首页，用户可以点击广告或者关闭广告。由于有比较高的点击率，广告主比较青睐。在投放插屏广告时要选择与应用协调的字体、颜色、创意素材等，以便更好的实现广告转化，不然反而会适得其反。

插屏广告需要用户主动点击或关闭，不然是不会自动消失的，所以它是一种典型的模态窗口。

有书

通用模型

通过前面的梳理我们获得了一个通用的模型，以后可以快速拓展，比如在内容主页、详情页、发现页面增加一个活动入口。如果前期已经定义了不同页面的类型做了适配，后期就可以根据这个模型灵活地进行拓展。模型如下：

（1）可以出现在App不同的页面中，不同页面中的展现形式是不一样的；

（2）可以点击跳转或者不跳转；

（3）可以跳转到App内原生页面，也可以打开H5页面；

（4）可以设置展示时间、显示的图片（视频）。

抖音

利益组成

开屏广告、插屏广告等组件一定程度上是影响了用户的体验，但通过合理的策划，展现，是能够保证用户的体验，同时又能实现平台的商业化价值。下图列出了App平台、广告主、用户和第三方平台的关系，其中第三方平台不是必须的。

来自网络

本文和大家介绍了banner、开屏广告、插屏广告三种组件，并延伸出了一个通用模型，有了这个模型我们可以灵活地进行设计。希望本文能对大家有所帮助。

在写作过程中，如果有意见或者想法，欢迎有兴趣的读者添加我的微信一起交流探索，共同进步。