02-产品策划-启动页设计

最近在整理做产品以来收集到的各种资料，准备针对app的常见功能模块总结下经验，一来加深学习效果，二来供大家学习交流，共同进步，今天先来说说产品的启动页设计。

一、什么是启动页

启动页（loading screen），也叫闪屏（splash screen）。当应用程序被用户打开时，在程序启动过程中被用户所看到的过渡页面（或动画）都被我们统称为启动页。由于启动页在每次打开应用时都会出现，并且往往停留很短的时间，就像闪现的效果一样，所以也有人把启动页称之为闪屏。

二、为什么要有启动页？

苹果官方给出的关于iOS启动页的说明:

为了增强应用程序启动时的用户体验，您应该提供一个启动图像。启动图像与应用程序的首屏幕看起来非常相似。当用户在主屏幕上点击您的应用程序图标时，iPhone OS会立即显示这个启动图像。一旦准备就绪，您的应用程序就会显示它的首屏幕，来替换掉这个启动占位图像。请记住，启动图像并不是为您提供机会进行艺术展示；它完全是为了增强用户对应用程序能够快速启动并立即投入使用的感知度。

原本Apple设计启动页Launch Image的目的仅仅是为了让用户觉得你的APP已准备好给用户使用，减少用户打开启动到正常使用的焦虑感。

Apple HIG原文精简下大意就是：你的启动页三不要——不要闪一个页面再进去！不要当做关于xxx的页面！不要有品牌元素！

对，你没看错，国内APP占全了三不要，在国内启动页的作用如下：

①提高用户体验，减少用户焦虑

②品牌效应

③商业需求

④情怀（褒义）

很明显，国内的app违反了Apple的三不要，但是，回过头来说，当我们长久这么使用了之后，觉得怪么？不怪，我觉得所有的UI都不是傻瓜，在对原规范和自主之间，选择一个更贴近国人的选择也是情理之中的事。

三、怎么设计启动页？

既然启动页不可避免，那么就应该设计好它，给用户尽量好的体验。在这里要强调一句，从某种意义上说启动页是一种不得已的选择。

我比较推崇的设计原则是：

①在应用设计时，让启动页展现的时间要尽可能地短，始终记住启动页只是一个过渡，过渡就意味着应该快。

②使用应用logo和slogan作为主元素，简单有效地传递品牌信息。每一次启动都是一次印象的加深，都是增加粘性的机会。

以下是几种常见的启动页设计模式：

①设计与主界面相似的图片，给用户快速启动的感觉。（Apple推荐的做法）

Instagram

这是新版的Instagram，它的启动页面就是首页的框架，去掉了里面所有的内容，除了标题。这样就好像是用户进入了应用，它已经在加载，感觉非常快速的启动了，让用户觉得应用性能好，速度快。这就是IOS官方给出的关于启动页的定义展示方式，总结来说就是两点：

一是内容尽量的少

二是展现时间尽可能的短

这样做的目的也已经很明确，就是改善用户体验度。你可能会觉得官方的这些准则会让启动页看起来显得乏味无趣。但他们就是这么想的，在他们看来，启动页不是让你展示什么品牌艺术，而是增强用户使用产品的感知度。但是慢慢的，大多数人认为如果不把这种绝妙的位置利用起来，都觉得对不起祖国的栽培。

②使用应用logo和slogan作为主元素，传递品牌信息。

淘宝

其实在MD的官方定义中，是允许用户展示具有品牌特色的启动页的，但是在IOS中明确说明是不允许的，但是，谁管他呢，哈哈哈。通常来说，这类启动页会包括LOGO、品牌名称、Slogan（Slogan更多的是国内的APP会加入）这三个元素。淘宝在品牌推广这块做的还是相当好的，从启动页就可以看出确实花了不少心思。这种启动页面对于产品而言，可以提高它们的知名度，很好的起到了宣传的作用。

在做这类页面时，要注意风格的搭配，不要太突兀，影响了产品整体的视觉效果。虽然这只是一个过渡的页面，但是它毕竟是用户打开产品之后看到的第一个画面，所以还是值得花点心思做的。

我的建议是，如果没有商业需求，有品牌名称和LOGO就足够了，代入感也强，不会犯错。

③使用意境化启动页，引起情感上的共鸣

启动页的情感共鸣个人理解主要是品牌情感和社会情感的共鸣。

品牌情感：传递软件的一种核心理念，一种情感的表现

微信

引用知乎找到的一段话：

微信的启动画面就是用了这张“蓝色弹珠”，人类最近一次在太空中远眺母星的景象。作为一种人际沟通工具，没有第二张图能更好地表达出人类内心的孤独，以及地球家园的美好。所以，整个画面有一种孤清中的淡淡暖意，给人的感觉是文艺到死。等你知道了背后的故事，又会觉得闷骚到死。

社会情感：启动页并不是一沉不变的，而是随着社会上发生的大事件，或者特殊的节日而改变的，这样更能体现出一个企业的社会责任感，同时让用户最快了解到一些信息（比如今天是母亲节）

QQ

这种模式的重点在于情感共鸣，其实设计难度是最大的，既要考虑到图片的含义，深层含义，同时也要软件的精神相契合。是一种很有高度的设计。

④使用广告图片，赚钱或宣传其他。

网易新闻

随着移动互联网的发展，逐渐出现了启动页广告和首发标语的需求，市场需求部分引导产品需求的倾斜。例如，网易新闻，默认启动页上方是空白，底部是启动页三要素：logo、品牌名称、slogan。如果后台配置了广告则上方空白处显示要推广的广告，默认展示的时间默认为5秒，但后台可对这个时间进行调整（无须升级客户端），并提供“跳过”功能，用户点“跳过”则直接进入APP首页。

其实，事实是他们真的可以不用等，但是由于某些原因（广告主要求、广告SDK要求、首发市场要求），不得不拖那么久，你有时候甚至可以看到倒计时，我也是醉了...说白了就是流量变现。

四、启动页后台配置

方案一：简单做。对启动页要求不高的话，将其写死在前端。一张图片即可，展示时间1-3秒。

注意：图片jpg文件大小最好在150kb内；考虑安卓和ios各屏幕兼容问题，一般建议设计两种尺寸图片以匹配大部分机型：大图720*1280、小图480*800.

方案二：后台运营。运营启动页即是要频繁更换启动页图片，一般需要为运营同学配置一个启动页后台管理。当然页面上也需要做一些配合。

后台管理提供以下配置：

1、配置：支持分渠道、分省份

2、内容维度：图片、图片+URL

3、展示时段：后台配置的闪屏时间段内展示

4、客户端闪屏展示时间：3秒，3秒后自动进入应用

5、无闪屏处理：使用本地启动页

6、如配置闪屏带链接，则跳转至应用内浏览器查看

注意：

启动页运营图片也需要考虑方案一的问题图片大小、屏幕适配。另外图片加载需要有一个缓存策略，毕竟图片100kb+不可能在启动过程中下载完马上显示出来。所以可以考虑给安装包内置一张默认启动页图片，第一次打开应用时显示默认启动图同时检测后台是否配置新运营图片，有就下载缓存下来。只有新的运营图片成功缓存下来后，下次进入app才显示新的运营图片；否则显示上次缓存的运营图片或默认图片。

五、启动页功能模块中，还需要考虑什么？

1.启动页显示的过程，其实就是完成首次客户端的加载的过程，达到平滑过渡

2.在启动页显示过程中，同时需要进行一些业务逻辑处理：

2.1 GPS信息检测

2.2 登录状态检查

2.3 麦克风授权检测

2.4 摄像头授权检测

2.5 陀螺头检测

2.6 闪屏业务检测

2.7 升级逻辑检测

2.8 APPstore评分检测

2.9 PUSH推送权限检测

ps：业务处理说明

业务判断及顺序（上面提及到的处理逻辑的顺序）

异常业务处理（网络异常、位置未开启无法定位等）

六、做启动页时要注意哪些事项

1.如果你的产品注重体验，暂时还没有商业需求也不需要做品牌推广，那墙裂推荐苹果推荐的做法。

2.如果用了品牌推广型启动页，那么一定不要频繁的更换，要用潜移默化的方式对用户产生影响，让用户深刻记住你的品牌形象。

3.如果你的启动页被商家购买来做广告了，那么一定要控制时间，多注意一些好的App是怎么处理的，比如腾讯，在右上角做了跳过广告。这样不仅做了广告，也适当提升了用户体验。

4.启动页最好是在产品开启的时候才出现，某吧录歌软件每次在录完歌之后切换到其他应用后，再跳转回来就会出现启动页然后再跳转到你之前的页面，这样的体验其实很不好。

随着互联网的发展越来越成熟，相信以后会有更多的展示方式，产品同学不仅要站在自己的角度看待问题，还要学会审视一切可能改变结果的因素。确保将商业需求和用户体验限定在可控范围内，为产品和用户做一个更好的沟通桥梁。