手指无聊的在手机屏幕上滑动，N多程序跟着手指左左右右的翻来覆去，忽然眼角扫见了一个亮眼的程序，仔细一打量觉得有点意思，随手点击一下，等着程序启动。。。。。。
场景是太常见了，那么在点击图标之后，APP首页展示在我们面前之前，这段时间发生了什么呢？

在首页之前有几个页面

答案是俩。一般来说是俩，也许有的程序有很多，但我目前还没见过。这俩页面就是“引导页” “启动页”。

引导页，什么鬼？

当你第一次使用某个APP的时候，点击应用首先会出来这么一个页面，整个一个大的图，下面还有几个点，当你在屏幕上滑动时，图变了，下面的点也跟着发生变化，这个页面的内容是一些关于APP的形象介绍和产品宣传，这个页面就是引导页，引导用户使用，并借机宣传产品功能和特性。

引导页的作用

引导页一般会在两个时机出现，用户第一次使用时，和更新版本后第一次使用时。为什么会在这两个时机展示呢？我们让用户看引导页的目的是什么呢？
当用户第一次使用APP时，对于APP的了解都是抽象的不具体的，那么就需要用一些引导性的图片或者动画也可以是视频来对用户来一个简明扼要的说明，让用户了解APP是做什么的。
还有一种情形是产品更新了新版本，加入了更好玩更能吸引用户对用户更有帮助的新特性，为了让用户更快的了解到产品的变化也会在这个页面通过图片或动画的形式来告诉客户，吸引用户的兴趣。

引导页有几种

引导页的主要目的是为了给用户展示信息，做法也比较灵活，展现形式可静可动。

静态引导页

指的是页面图片内容是静止不动的。可以根据展示的图片的数量来分为，多图展示和单图展示。
多图展示，图片可以是多张图片，通过手指滑动来切换图片来展示内容，当然最好的变法是切换图片的时候加入一些切换动画，来让效果看起来更生动有朝气。 单图展示，图片是一张大的背景图，一般是做成卷轴的形式从左到右展现，读起来感觉像是在通过镜头在观赏一副画作，通过手指滑动来展示不同的位置。这样的形式甚至可以讲一个故事或者描述一个流程，跟看电影似得，仔细读读还挺过瘾。

动态引导页

动态引导页产生的目的是为了让用户看起来更形象更立体，动态引导页也可以分两种，一种是展示动画，一种是展示视频。 展示动画是在APP里内置一个gif文件或者一组连贯的图片，通过程序控制播放，通常是描绘的一个完整的用户使用的场景，优点是展示的场景更生动，缺点是会增大安装包的体积。 展示视频是在引导页播放一段小视频，可以使用户使用场景的一个片段也可以是一些人的发言，内容可发挥余地很大，是让用户体验起来最生动最好的。可惜如果内置视频会导致APP体积增大到很可怕的程度，一般最好不要在用户第一次安装时使用这种引导形式。

引导页的引申用法

之前说过引导页一般出现在用户第一次安装启动时，或者版本更新后第一次启动时。但是我们有一个特别牛的活动，可以给用户提供更好地服务，而且还不需要发版本，我该怎么让用户知道呢？难道靠用户在APP里瞎点么？这时候可以考虑打打引导页的主意，这就需要产品提前做好这个需求，让程序员开发。这个场景一般可能不需要，因为大部分牛逼的新功能会随着新版本一块儿发布，但万一呢，万一你有一个big Idea可以直接利用现有的H5页和App功能直接就能实现呢，一个牛逼的创意，都做出来了，然后用户确不知道，这不得憋屈死啊。所以这种模式-大活动展示-应用而生，建议目前有这个功能的APP产品人员记着点，这个方式可以极大的方便新特性推广，没有的产品记得尽快在某个APP里做进去。

做引导页的注意事项

产品在设计引导页的时候往往走入这么几个误区：

• 做个按钮点击了直接跳转到某个页面呗

• 既然图都能动了，那就来个动画呗，或者都能动画了那就直接来个视频得了

• 自己想要表达的没能表述清，再多弄几张图或者多一点时间
  千万不要，你的介绍再牛逼，你的动画再精彩，你所占用的也是用户的手机流量，用户的时间，现在用户对流量耗费还是很敏感的，世面上又有各种程序来查看程序耗费的资源，如果被用户发现了被卸载不说还有可能被用户传播，做烂了口碑。另外引导页毕竟只是个过渡页面，程序运行需要的各种设定可能还没准备好，你如果加了按钮加了交互操作有可能会引发不可预料的问题。

启动页

啥是启动页

这已经不是你第一次打开APP了，但每次打开都会有一张图先展示在你面前，页面逼格或low或高，画面风格或清爽或怪异，你总归要在这个页面呆个几秒才能正式进入到APP首页。这个页面就是启动页。

启动页的作用

启动页的形式，一般是一张大图下面再加一句朗朗上口的slogan,这样有两个好处，
1、品牌形象整体漏出，在加上slogan的描述，让用户对产品了解的更多一些，优秀的形象设计有利于在用户心理留下好印象，为产品的整体展示做好铺垫。 2、准备数据，启动页下一页就是首页，如果用户进入首页还要等待一段时间来加载数据会影响用户体验，而且会让用户明显的感受到数据请求的过程，进而对程序使用的流量点亮产生质疑，所以可以利用这段时间加载必须的数据，尽量让用户进入首页就能看到东西，让用户感觉程序使用很顺畅，流量和电量的使用无感知。 3、广告展示，如果策划了一个比较好的活动，可以在启动页展示海报，对活动进行一个相对详尽的描述，让用户快速的了解活动，也可以通过点击海报快速参与活动

启动页设计注意事项

1、不要用冲击太大的色彩和图，启动页是展示是很频繁的，这时候用户的心里状态基本是这样的，“终于选好了一个应用，不用再满无目的的瞎划了，静下心来看看这个应用里有什么好东西”，注意这时用户的心里是稍微有点平静的，注意不要用冲击力很强的颜色，如红色，如果用的话也不要把冲击性高的颜色当背景色。背景色尽量选择平和一点的。
PS：游戏恰恰相反，要根据游戏类型选择视觉差距明显的颜色，来吸引用户的眼球，刺激用户的肾上腺素调节，烘托一下嗨的氛围。
2、预留合作方图标的空间，再设计的时候需要考虑到你的APP可能会做不同渠道的首发，要给别人的图标留个地方来放。
3、广告显示时，一定要有跳过的按钮，如果没有按钮就是强奸用户，让用户感觉你是在浪费我的时间。
4、失效广告及时下线，如果用户点了已经失效的广告，结果进去发现活动无效，会让用户鄙视的，觉得在欺骗用户的。
在程序启动后进入首页前显示几个页面其实并不是限制死的，你可以做成多个页面，也可以在一个页面里实现功能。首页之前的页面主要的目的是，承接用户点击图标时的期待和兴趣，对产品进行一个较为详细的阐述，让用户了解的多一点，也可以通过广告的形式让用户直达活动，给后太数据请求和操作留下时间，让用户感觉到顺滑自然的进入首页。

在我们看不见的后台，程序干了些啥

怎么确定要去哪些页面

之前我们说过首页前页面的一个重要的作用就是给后台数据加载争取时间，那么在这段时间里程序干了什么呢。下面做一个详细的解读。 程序的判断逻辑。

进入什么页面if( 需要显示引导页){
    进入引导页
} else{
    进入启动页
}

是否需要显示引导页if(第一次安装){
    是
} else if（更新版本后第一次打开）{
    是
} else if(活动需要展示){
    是
} else {
    否
}

后台发生了什么

当引导页或启动页在前台展示时，会有一段时间是等待用户操作或者等时间到时的，这时候程序后台会在后台做一些数据上的准备，具体做的事有以下几件

图片资源准备

进入启动页会先请求接口判断是否有新的广告图需要展示，如果没有会显示之前的广告图或者不显示广告图。如果有会有两种处理方式：

• 直接下载图片，并展示。这时页面表现为，先展示品牌logo，过一段时间图片加载完成后显示广告图，为了防止直接切换图片显得突兀，可以加一个图片切换东湖。

• 显示上一次的广告图或不展示，后台下载图片以供下一次启动时用。这种方式用户无感知，推荐使用。

定位，组件注册

目前地理位置信息在手机APP里应用比较多，所以大部分应用都有定位操作，定位操作受GPS信号和网络信号的影响比较大，所需时间长短不一，为了避免影响用户在首页的使用，需要把这个操作前置，提前获取到位置信息，当用户进入首页时直接使用正确的地址显示正确的数据。
当前APP里大多有分享，支付，以及聊天，推送等功能，一般都是集成第三方控件来实现的，有些控件是需要在程序启动时就要声明使用的，这部分操作就在首页前完成。

检查更新

APP启动时需要检查是否发布了新版本，如果有新版本一般会在后台下载好，待再次启动时，提醒用户是否需要更新，当然也有任性的，直接要求你更新不更新不能使用。后者命名为强制更新，强制更新对用户伤害很大，一般不使用。

业务需求

根据不同的产品需求，有些功能可能没有及时开发完成或者有一些配置文案类的东西，会在APP启动后进首页前加载，集中获取，提前写好。避免在使用时再加载，保证用户体验顺畅。
部分情况为了保证首页打开时直接就有数据，也可以在这一阶段把首页的数据都请求下来存在内存里，在切换到首页时，直接显示内容。

首页前流程技术注意事项

在进入首页前，程序后台要做的事可能不只以上这些。为了保证用户进入首页流程顺畅，我们可以把一些准备性的工作都在这一阶段完成。但功能不是无限加的，一定要保证时间不要太长，用户操作也不要太多。因为，当用户点击的时候，会有一段时间的心里平静期，这段时间是我们可以利用的时间。但这段时间不会太长，一定不要让用户等的不耐烦。也不要让用户在这段时间有太多的操作出口，操作出口太多有可能导致用户点击，点来点去进不到首页，得不偿失了。

设计引导页和启动页的原则

我们在首页前展示的页面有且只有两个目的，1、品牌形象宣传。2、进首页的数据准备。一定要注意的是这个时间不会太长，形象宣传设计要精简到位，准备的数据也要重要且必须，不要在这个阶段展示太多东西也不要浪费太多的时间，毕竟尽快让用户进入首页看到整体才有效果，这才是我们的目的。

本文出自 “荣一” 博客，请务必保留此出处http://rong1.blog.51cto.com/8605932/1881290

APP进首页之前，发生了什么