产品经理入门：快速掌握App设计基本方法之启动页

本文对于从业1年以上的移动端产品经理营养接近于0，但是对于0-1岁之间的产品新人，营养价值较高。所以，请适合人群阅读。

前面，我用两篇文章分别介绍了App界面设计和注册登录的基础知识。按照之前的约定，这次我会再向大家介绍一下App的启动页相关知识，帮助大家知道启动页的前世今生和设计基本方法或原则。闲言碎语不多讲，直入主题：

一、什么是启动页

打开喜马拉雅，看到的logo界面，打开京东看到的广告界面，打开“赢+”看到的slogan界面都是启动页。如果非要下个定义的话，启动页就是“打开App后，在进入App首页之前的界面，都属于启动页”。

喜马拉雅启动页

二、为什么有启动页

任何一款应用，都需要关注用户体验问题，所有设计的出发点都无法脱离用户体验（当然有些设计最后被证明并不利于用户体验，但是出发点肯定是提升用户体验）。所以，启动页的存在最开始也同样是为了提升用户体验，只不过后来被运营方赋予了商业价值，将之价值进行了放大。

一款应用中的数据（比如视频、文字、图片等）都存储在运营方的服务器中，当打开应用时，应用需要从服务器请求获取数据，然后加载展示出来（具体什么机器语言转为二进制语言吧啦吧啦之类不深讲，既非我擅长，也没有太大必要）。大家应该明白，这是一个过程，既然是过程就需要时间。这个时间是多久呢？不固定，受手机性能、网络性能等因素影响，正常情况是在毫秒级，慢一点也就一两秒。总之，用户是能够感知这个过程的存在。为了降低用户在等待期间的不良体验，不知从何时起开始出现了启动页。

所以，就一句话：启动页是为了降低用户等待期间不良体验而存在的。

三、启动页有哪些类型

通过上面的介绍，大家已经知道什么是启动页了，那么在讲第三个问题之前，大家先回想一下你看到的启动页都有哪些类型，或者现在就打开手机中的App，多看几款应用的启动页，有什么区别。（等待30秒）

看完了，再讲启动页类型，相信会更易于接受。

1. 品牌型

这是当前用的比较多的类型，即打开App，首先看到的是代表着机构品牌或者应用品牌的界面，类似微信的“地球人”，“赢+”的slogan界面，VIPKID的logo界面等。

微信启动页

赢+启动页

一般品牌型的启动页由“品牌名称+logo+slogan”三者的任意组合构成，或者类似微信由深入人心的图片（虽然并没有显示名称、logo等信息）代替。这样的好处是，用户一打开首先看到的是运营方的信息，不知不觉中就会形成品牌效应。

2. 广告型

前面提到，启动页一开始并没有广告，单纯就是为了降低用户在等待进入首页这个过程中的不良体验。但是，随着运营方对App商业化价值的深入研究，发现启动页是一款App中曝光率最高的位置，不管是谁，只要打开App都能够看到它，这比banner的曝光度还要高的多，这不正好是一个广告宣传的好地方吗？剩下的大家都知道了。

广告型又分为两种小类型：

（1）先品牌界面，后广告界面

即打开App，先看到App的品牌界面，然后品牌界面消失，紧接着出现一个广告界面。也有人把品牌界面叫做启动页，将广告界面叫做广告页。

（2）品牌+广告同界面

这种启动页一般是上下结构，界面上方是广告，底部是品牌。

智联招聘上下结构广告型启动业

并不是所有应用的启动页都适合加广告，尤其是商业广告。我个人认为至少需要有两个前提：一个前提是App用户量，尤其是活跃用户量够大，这才能保证看到广告的用户基数；另一个前提是App的忠实用户够多，即你的App上有用户不得不用的功能或内容，那么用户才能容忍你的广告，如果不是忠实用户，本身就很反感广告，那还不立刻卸载。

3. 个性化

这类启动页我们也常常看到，但是它不像前两种类型，能够持续性展示。比如，一款幼教类应用，会在六一儿童节的时候，将启动页设计成“节日祝福”的风格，天气预报类应用，会在重要节日或节气的时候，将启动页设计为对应节日或节气的风格等。

就是根据某些时间点，专门设计用于临时展示的启动页，当过了这个时间点（段），又会恢复为原来默认的样式。

四、启动页设计原则

1. 启动页格式多样化，可以是静态图、动态图、短视频、H5页面，可添加链接，具体采用何种格式，根据产品需求，并不是格式越丰富越好，设计何种样式、风格，建议在设计时也可以多听听UI和开发人员的建议。

2. 启动页需要设定显示时间，对于非广告启动页，一般显示1秒左右即可。广告型启动页，也不要超过5秒，为什么是5秒上限呢？因为时间太短，对广告感兴趣的用户无法获取有效信息，太长则会导致用户反感。

3. 广告型启动页要添加“跳过”控制按钮，即让用户可以自行控制何时跳过广告界面，这样相当于做了个中和，运营方即实现了商业目的，也不至于太让用户反感。比如，现在广告型启动页上都显示倒计时和“跳过”按钮，让用户知道我最多需要等多久，同时也掌握有广告的“生杀大权”。

知乎启动页广告倒计时+跳过

4. 需要注意启动页尺寸匹配机型，用图片格式的启动页举个栗子，如果只设计了一种尺寸的图片作为启动页，那么在不同的手机屏幕上，该启动页可能会出现变形的情况，比如拉伸或者变宽，如果条件允许（比如UI时间宽裕），最好是针对目前市场上常见不同比例的屏幕尺寸，设计一整套启动页，建议和开发人员、UI设计多沟通。

按照习惯，我最后都喜欢帮大家总结一下，本文介绍了如下内容：

（1）启动页的概念，其实就是打开应用到进入首页之间的页面；

（2）启动页的价值，其实就是为了降低用户在进入首页前等待的不良体验；

（3）启动页的类型，品牌型、广告型（分两种）、个性化；

（4）启动页的原则，支持多样化但要慎选，启动页需要设定显示时间，广告界面要有“跳过”控制按钮，启动页尺寸要和不同机型匹配。

用户都习惯掌控，而不是被掌控，喜欢提前预知，而不是不知所措，所以，按照惯例，我提前透露一下，下一篇我们一起看《产品经理入门：快速掌握App设计基本方法之提示框》，需要的同学记得及时关注。

致谢：

一直有一颗写写产品心得的想法，但因为觉得自己很多知识掌握的还不够系统，或想的不够清楚，迟迟未敢下笔。直至自认为对App基础知识想的还算系统，同时结合自己当初转行的痛楚，遂下决心写一些东西，以期能够对0-1岁产品新人有所帮助。语言私以为不够精炼，措辞不够专业，校对不够仔细，不求宽容，但求多提建议。

前两篇文章，得到了大家的肯定，也收到了细心朋友的建议（《产品经理入门：快速掌握App设计基本方法之界面》中，细心同仁发现我错将京东首页用作淘宝首页展示），在此，我特向大家表示发自内心的感谢，既然都是同路人，愿一起进步，一起探索，祝好。

相关阅读

产品经理入门：快速掌握App设计基本方法之界面

产品经理入门：快速掌握App设计基本方法之注册登录

本文素材来自互联网