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、切图
转载:http://t.csdn.cn/Is8TY
*部分图片来源于网络,如有侵权请联系删除。