android 闪屏拉伸,App设计体系之引导页/启动页/闪屏

1、定义

启动App需要一小段的等待时间，为了缓解用户等待焦虑，启动时需要过渡界面，过渡界面包括三种类别：启动页、闪屏、引导页。

1.1 启动页

启动页通常是一张静态图片，不能点击也不能跳过，通常会缓存在本地以便每次启动时使用，由于显示时间短，不宜包含太多内容，也不要过于吸引用户的注意，只需表现品牌基因即可。

1.2 闪屏

闪屏也就是广告，可点击进入到广告活动h5界面，也可跳过闪屏直接进入首页或N秒(3～5S)后自动消失；当有了闪屏，启动页可以去掉，否则启动时间过长。

1.3 引导页

用户安装或更新后首次启动APP时才有引导页，引导页数通常为3～5张，用于介绍App的功能玩法、核心业务等；通过左右滑动来切换界面，切换到最后一张才能点击按钮进入APP。

每页的主要文案不要超过9个字(短时记忆的7± 2效应)，如果有更多内容可以用小号文字进行辅助说明。

1.4 三者之间的流程

流程图清晰表达了三者之间的关系和用法，需要注意的是，三者不能同时存在，不然启动时间很长，对用户是不利的。

2、常见适配问题

在iPhone X发布前，手机屏幕比例趋向统一化(16:9)，随着 iPhone X(屏比19.5:9) 和 Android 全面屏(屏比2:1以上)手机的普及，依旧用比例16:9的图适配就会出现问题。

有三种常见的适配问题：被拉伸、留白过多、信息不完整。

2.1 被拉伸

没有针对全面屏做相对应的适配方案，直接将16:9的图在垂直方向上拉伸到19:9，界面内容严重变形。

2.2 留白过多

有一种启动页样式是图和品牌LOGO的结合，当图片原封不动的从16:9移到全面屏时，图片高度不够，下半LOGO部分留白填充，导致头重脚轻。

2.3 内容裁剪

屏幕比例从16:9变成19:9，图片等比例放大，导致图片两边被裁掉一部分。

3、正确的适配方式

针对上述的问题，有以下几种适配方式：横向裁切、纵向裁切、为不同比例配图、使用切图弹性适配、图文分离。

3.1 横向裁剪

当用16:9的图片适配全面屏时，左右两边会超出屏幕区域将被裁剪，因此在设计时，注意内容位置，保证内容在裁剪区域内。

有一种启动页样式是图和品牌LOGO的结合，当图片原封不动的从16:9移到全面屏时，下方的logo留白区域会过大，页面整体不协调，因此在全面屏上需要将上部分图片等比例拉到合适长度，裁切超出屏幕部分，上部分图片长度可以通过固定底部LOGO区域，图片根据剩余高度适配，裁切左右多余部分。

3.2 纵向裁剪

以最大尺寸进行设计，主要信息区域在最小尺寸里，上下预留高度，以背景为延伸，不放置重要信息，根据不同的屏幕，对图片高度进行裁剪，屏幕比例减小也不会影响内容。

3.3 使用切图弹性适配

如果内容简单，可以分成上下两个部分，这样在不同屏幕上，只需改变中间间距即可。

3.4 图文分离

图文分离，是将图片中的文字和图片分开，图片在不同屏幕下等比例缩放，两边会有所裁剪，文字在页面中的位置也相对于调整，这种方式需要技术加工实现。

如下图，模特的形象先出现，文字再从两边向中间渐现登场。

4、切图

*部分图片来源于网络，如有侵权请联系删除。