App设计体系之引导页/启动页/闪屏

254天前发布

原创文章 / UI / 教程
渐渐见减减简 原创,如需商业用途或转载请与渐渐见减减简联系,谢谢配合。

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、切图



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


0
- 位站酷推荐设计师推荐 -

声明:站酷(ZCOOL)内网友所发表的所有内容及言论仅代表其本人,并不反映任何站酷(ZCOOL)之意见及观点。

    没有新消息