简单聊聊app启动页的那些事儿

目录速览：

1、启动页存在的意义

2、启动页/闪屏/引导页的区别

3、启动页的3种常规类型

4、开屏页面适配方法

一、启动页存在的意义

启动页存在的目的就是为了让用户在等待的过程中忽略这个开启的过程，提高用户体验度，降低用户焦虑感，减少用户对于应用程序启动加载过久的认知。说直白点，启动页存在的价值，其实就是应用程序启动加载的一块“遮羞布”。

软件加载的速度越来越快，启动页停留的时间也越来越短。随着硬件、软件技术手段的提升，应用程序启动的速度会越来越快，启动页停留时间也将越来越短，有时候用户来不及看上一眼，启动页一闪而过就已经加载到主页面了。例如一些轻量级的工具型软件，手速截屏比不过启动页过渡的速度。

二、启动页/闪屏/引导页的区别

• 启动页：平台规范所明确定义的开屏页，常用方案为首屏骨架或品牌露出，有且只有一个，持续时间有时不超过1秒；

  
  

• 闪屏：多数应用借闪屏展现品牌精神、Slogan，或为了商业目标而设计广告宣传，闪屏可能会有连续多个，并且一般会设置“跳过”按钮；

  
  

• 引导页：在用户首次打开应用或应用更新时，指导用户操作或展示更新内容的页面。

首先启动页与闪屏、引导页最大的区别就在于：启动页是平台规范所明确规定的程序启动加载准则，它在应用上线时就已经内嵌在了应用程序之中，并且是必需的。可以理解为一张“死图”，当我们更换启动页后，会涉及到发版上线、用户更新等一系列流程，相对于比较繁琐。

而闪屏、引导页则是“活图”，开发可以自由掌控它们的显示与隐藏，并且更新开屏广告也不会涉及到发版上线，相对比较灵活。所以尽管你没有更新你的APP，每次打开应用时，你可能都会看到不同的开屏广告。

闪屏与引导页并没有平台规范来形成标准，那我们该如何设计这几个开屏页，才能存在且合理呢？

我在网络上看过同行总结过这样一张图：

首先应在开屏过程中判断用户性质，来选择闪屏与引导页其一展示即可。以免导致用户操作过多步骤才能进行实际应用使用，操作时间太久，友好度不高，也容易增加用户跳出。

其次闪屏如果是长期不会更换的品宣类图片，可选择以启动页展示。比如唱吧的iOS端（安卓端没有这个现象），开屏后会显示三个开屏画面，非常繁琐。

三、启动页的3种常规类型

很多企业就会利用启动页做一个营销手段，当然也有为了用户体验而放弃宣传品牌的产品。所以下面我把启动页分为三类，来专门说说它们不同的作用。

• 规范型

• 品牌推广型

• 商业需求型

规范型

什么是规范型？根据 iOS 和MD 的官方定义来说，认为启动页应该设计为类似应用程序打开后第一屏的屏幕骨架，这样不容易引人注意，看上去就像一启动应用程序就已经加载出了应用框架，剩下的时间只是在请求服务器数据，给人一种应用程序打开很快的感觉。

如：

nstagram的启动页面就是首页的框架，去掉了里面所有的内容，除了标题。这样就好像是用户进入了应用，它已经在加载，感觉非常快速的启动了，让用户觉得应用性能好，速度快。

iOS 官方给出的关于启动页的定义展示方式，总结来说就是两点:

1. 内容尽量的少；

2. 展现时间尽可能的短；

这样做的目的也已经很明确，就是改善用户体验度。你可能会觉得官方的这些准则会让启动页看起来显得乏味无趣。但他们就是这么想的，在他们看来，启动页不是让你展示什么品牌艺术，而是增强用户使用产品的感知度。

品牌推广型

这类启动页其实就是在规范型的基础上做了一点扩展，帮助品牌做一些宣传。其实在MD的官方定义中，是允许用户展示具有品牌特色的启动页的，但是在 iOS 中明确说明是不允许的，但是，谁管他呢，哈哈哈。通常来说，这类启动页会包括LOGO、品牌名称、Slogan（Slogan更多的是国内的APP会加入）这三个元素。

如：

淘宝在品牌推广这块做的还是相当好的，启动页花了不少心思，这种启动页既提高它们的知名度，也起到了宣传的作用。有部分App做一个小动画，有的人认为经常出现太烦，也有的人认为很炫酷。

我们设计的时候，要注意风格的搭配，不要太突兀，影响了产品整体的视觉效果。虽然这只是一个过渡的页面，但是它毕竟是用户打开产品之后看到的第一个画面，所以还是值得花点心思做的。我的建议是，如果没有商业需求，有品牌名称和LOGO就足够了，代入感也强，不会犯错。

商业需求型

再来说说商业需求型的启动页，它就是产品利用这块区域为商家做广告，从而获得收益，这种平时应该经常会看到。通常这类启动页的展示时间在3到5秒不等，是用户最不喜欢的一种。

如：

网易新闻是比较典型的一类，它很好的利用了这块区域来做广告。一般的产品是没办法做到的，毕竟人家是网易，不论是用户使用量还是品牌知名度，都是业内名列前茅的。

无论什么目的，都不要为了广告而在启动页停留过长时间，这样不仅会流失用户，到头来连商家都不找你了。有时候在商业利益和用户体验之间确实很难做到平衡，所以一定要慎重。

四、开屏页面适配方法

前面说到了，启动页是一张“死图”，是平台规范所定义的。所以iOS给予了明确的启动页图片上传尺寸，UI需输出以下尺寸.png图片给开发人员：

• iPhoneSE@2x：640px * 1136px；

• iPhoen4s/4(@2x) ：640px * 960px；

• iPhone 8/7/6(@2x) ：750px * 1334px；

• iPhone 8/7/6 plus (@3x) ：1242px * 2208px；

• iPhone x (@3x) ：1125px * 2436px

系统将会自动获取设备长宽比，选择对应的启动页尺寸去适配。

而闪屏与引导页则是产品设计过程中添加的，可灵活配置，在此给大家介绍一个非常实用且简单的出图方式：

UI输出一张1125px * 2436px闪屏图片，该尺寸对于iPhoneXS（375pt * 812pt）、iPhoneXR（414pt * 896pt ）、iPhoneXS Max（414pt * 896pt）机型可以等比例缩放适配。而对于iPhoneSE（320pt * 560pt）、iPhone8（375pt * 667pt）、iPhone 8 Plus（414pt * 736pt）等无法等比例缩放适配的机型，可以前端采取居中裁剪上下的方式。由此可以推算出：在该尺寸下做闪屏图片，主要内容安全区域为 1125px * 1968px。

五、结语

呈现开屏页面给用户原本是无可厚非，但呈现形式与呈现质量其实是需要产品设计者去推敲的。友好的、有趣的开屏页面，不但不会打扰到用户，甚至还会给用户带来新鲜感和愉悦感。

希望本文能够帮助大家了解几个开屏页的区别，并且做出更合理、不被用户嫌弃的开屏页面。