这是《App产品设计指南》系列文章的第18篇内容,更多精彩可以点击下方链接查看。
《App产品设计指南》专栏目录
banner
App中的banner基本都出现在页面的顶部,可以配有文字,且一般都会有多张。所以需要支持切换,包括自动切换和手动切换两种模式,自动切换的时间一般是3秒。banner的最后一张和第一张可以做成循环切换的交互。banner的每一屏可以设置跳转到特定的页面。
banner还可以考虑和搜索、消息中心、用户信息等入口进行融合设计。比如喜马拉雅的首页banner和搜索框融合,背景会根据banner内容自动切换颜色,是一种很棒的设计。
![582362752cb371bde0a94fae1483a164.png](https://i-blog.csdnimg.cn/blog_migrate/c35bb4de22a6a8ab3628de36d72735e1.jpeg)
开屏广告
开屏广告其实就是我们之前提到的闪屏页。在前面的启动页和引导页文章中已经说过,感兴趣的同学可以点击下方链接查看。
App产品设计『运营工具』启动页&引导页
开屏广告的定义是指出现在 APP 启动加载时的全屏或半屏广告,可以是静态图片或者动态视频。广告主根据CPC、CPD、CPM等类型向平台支付费用。
开屏广告可以分为全屏式与底部保留式。全屏式是整个页面都属于广告区域,可以展示更多内容;底部保留式是底部显示App信息,在其上面显示广告区域。
开屏广告一般都是可以点击跳转到特定页面的,比如App内页面,外部H5页面,唤醒其他App等等。当然某些开屏广告也可以只做展示,不做跳转。
![d3752c203284a3d453665bd2f71f0db8.png](https://i-blog.csdnimg.cn/blog_migrate/d9f6df25ef03b339019ac1f38c7db62d.jpeg)
插屏广告
插屏广告具有强烈的视觉冲击效果,一般出现在应用首页,用户可以点击广告或者关闭广告。由于有比较高的点击率,广告主比较青睐。在投放插屏广告时要选择与应用协调的字体、颜色、创意素材等,以便更好的实现广告转化,不然反而会适得其反。
插屏广告需要用户主动点击或关闭,不然是不会自动消失的,所以它是一种典型的模态窗口。
![429243b5e3f697a056c4599ed8d712fc.png](https://i-blog.csdnimg.cn/blog_migrate/ca6308f29e9c94b55683c7a581859906.jpeg)
通用模型
通过前面的梳理我们获得了一个通用的模型,以后可以快速拓展,比如在内容主页、详情页、发现页面增加一个活动入口。如果前期已经定义了不同页面的类型做了适配,后期就可以根据这个模型灵活地进行拓展。模型如下:
(1)可以出现在App不同的页面中,不同页面中的展现形式是不一样的;
(2)可以点击跳转或者不跳转;
(3)可以跳转到App内原生页面,也可以打开H5页面;
(4)可以设置展示时间、显示的图片(视频)。
![dc21fd849ca55c6638804f8dbdb5ac83.png](https://i-blog.csdnimg.cn/blog_migrate/ec17572591a48cf6b0f948618d1a446a.jpeg)
利益组成
开屏广告、插屏广告等组件一定程度上是影响了用户的体验,但通过合理的策划,展现,是能够保证用户的体验,同时又能实现平台的商业化价值。下图列出了App平台、广告主、用户和第三方平台的关系,其中第三方平台不是必须的。
![3f0c667f98972ea8e14c190cb7ba0212.png](https://i-blog.csdnimg.cn/blog_migrate/174c169b5da828e77168bf04c4abf97c.jpeg)
本文和大家介绍了banner、开屏广告、插屏广告三种组件,并延伸出了一个通用模型,有了这个模型我们可以灵活地进行设计。希望本文能对大家有所帮助。
在写作过程中,如果有意见或者想法,欢迎有兴趣的读者添加我的微信一起交流探索,共同进步。
6 年互联网从业经历,擅长产品设计、需求管理,有问题欢迎向我咨询。