android启动页广告图,一张图搞定APP启动页广告

之前我们产品里的启动页比较简单，就是背景色加上我们的logo、slogan等，这种形式适配起来比较容易，把元素切出来交给开发写出来就行。最近由于运营的需求，我们需要在APP启动页展示广告，广告图更新频繁、样式复杂，不可能交给开发适配，也不可能让设计师每次手动做多个尺寸(光想想就要抓狂)，所以我开始思考用一个尺寸适配所有屏幕的方法。

确定基础尺寸

我们主要适配的是Android和iPhone这两个主流平台，常见分辨率如下。

Android和iOS平台常见分辨率

从上表可以看出，iPhone 5/5s、iPhone 6/7/8、iPhone 6/7/8 Plus都是等比例的，屏幕的长宽比大约是1.77；而Android目前最主流的1080P、720P也都是这个比例。所以，为了兼顾两个平台，我采用这个比例下的最大尺寸，即iPhone 6/7/8 Plus的1242*2204为基础尺寸做图，其他尺寸用这张图去适配，这样可以最大限度地让尽可能多的屏幕完美显示，同时在较高分辨率下又不至于模糊。

如何裁剪

想用一张图适配不同尺寸的屏幕，图片肯定会被裁剪，那么图片是怎样被裁剪的呢？

为了填满屏幕的空间，图片需要按照一定的比例去等比放大或缩小，缩放的中心点为图片的中心点。当遇到长宽比比自己大(即高瘦)的屏幕时，为了填满屏幕高度，图片需要放大到与屏幕等高的大小，此时就会裁剪掉图片的左右两侧；而反过来，当遇到长宽比比自己小(即矮胖)的屏幕时，就会裁剪掉图片上下超出的部分。如下图示例。

简而言之，由矮胖往高瘦适配，裁剪掉左右；反过来则裁剪掉上下。

图片的裁剪方式

确定安全区域

确定了基础尺寸，弄清楚了裁剪的规则，那我们可以在图片上确定一块「安全区域」。所谓「安全区域」，就是适配时确保不会被裁掉的区域，设计师在设计时可以把文字、logo、slogan等重要内容安排在该区域内，从而保证核心内容不会被裁掉。

从上面的裁剪规则我们知道了，长宽比越小(越矮胖)的屏幕，上下部分会被裁剪得更多；长宽比越大(越高瘦)的屏幕，左右两侧则被裁剪得更多。因此，按照长宽比最小的屏幕尺寸和长宽比最大的屏幕尺寸，可以分别确定上下左右的裁剪边界，边界里的即为安全区域。

而在我们适配的范围内，长宽比最小的尺寸是320x480(mdpi，iPhone4)，最大的是375x812(iPhoneX)，因此最终确定的安全区域是1020x1863，如下图所示。

确定安全区域

适配效果

最终同一张图在各个分辨率下的适配效果如图，为了方便查看，图中对安全区域的四个角做了标记。

同一张图在各个分辨率下的适配效果

最后

如果你的启动页除了展示广告外，还需要固定展示品牌信息(如网易云音乐的启动页，下面会固定有一块区域展示logo、版权信息等)，可以在下面留出固定比例的空间，如留出15%的高度，剩下的空间按照上面的方法确定尺寸和安全区域就好啦。

android启动页广告图,一张图搞定APP启动页广告相关推荐

swift有一句代码搞定APP引导页（图片/GIF/视频）
APP启动引导页(图片/gif/视频) 在APP启动时候设置引导页,不管图片,gif,还是视频只需要一个方法视频引导页视频核心代码如下 URL为本地视频地址,如果为网络视频建议预下载在本地然后下 ...
处理安卓启动图片变形问题，用一张正方形9.png图片搞定安卓启动页
用一张正方形图片搞定安卓启动页示例Dome下载: 安卓启动图问题 HBuilderX上android端提供的三个尺寸的启动图片完全不能满足全面屏盛行的时代,各种比例的屏幕上出现启动图片变形问题,让人 ...
Android零基础入门第7节：搞定Android模拟器，开启甜蜜之旅
原文:Android零基础入门第7节:搞定Android模拟器,开启甜蜜之旅在前几期中总结分享了Android的前世今生.Android 系统架构和应用组件那些事.带你一起来聊一聊Android开发 ...
两步搞定暴风影音的文字广告!
两步搞定暴风影音的文字广告! 今天才把暴风影音2升级了(已到2.07.08.20),重启后,居然看见有广告,虽然还是文字阶段!于是就在其官网的BBS看见了这个关于暴风文字链广告的公告--恳请广大用户 ...
android 人际关系图,六张图说明六种人际关系（朋友圈转疯了）
原标题:六张图说明六种人际关系(朋友圈转疯了) 一.婚姻婚姻就如这幅画. 无论谁放手,受伤的都是孩子,多经典的话,多准确的配图. 所以从你选择了婚姻并有了孩子的那一刻起,就必须拉紧你的绳子,担负好你 ...
android 异形图片布局,杜蕾斯一张图说明异形全面屏手机进化史！刘海屏到水滴屏很形象...
原标题:杜蕾斯一张图说明异形全面屏手机进化史!刘海屏到水滴屏很形象全面屏手机最大的优势就是屏占比高,很多手机厂商都把提高屏占作为目标,于是现在就有了各种各样的异形屏.异形屏设计是一种妥协的产物,主要 ...
python一张图-一张图学会python
一张图学会摄影(共9篇)一张图读懂摄影全是套路论如何从零开始学摄影全是套路论如何从零开始学摄影相信很多想要玩摄影的朋友,总会遇见各种问题,比如相机怎么选,镜头怎么配,快门是什么之类的,看似很杂乱, ...
linux内核运行关系图,一张图看懂Linux内核运行交互关系
很多朋友如果接触过Linux的都知道Kernel的含义,kernel是操作系统的核心或者最重要的部分.众所周知的是,几乎整个互联网都运行在 Linux上,从网络协议,到服务器,到你平常访问的绝大多数 ...
一张图学会python3高清图-一张图理清 Python3 所有知识点
如果你前几天一直有关注 GitHub Trending,那你应该会留意到「Python3 in one pic」这个开源项目. 很多人学习python,不知道从何学起. 很多人学习python,掌握了 ...

android启动页广告图,一张图搞定APP启动页广告

android启动页广告图,一张图搞定APP启动页广告相关推荐

最新文章

热门文章