章：启动页/闪屏/引导页-你还傻傻分不清？

文章来源于公众号：泡芙喵F设计教室

今天一起来认识一下开屏三姐妹：启动页/闪屏/引导页。通常三姐妹出场顺序如下：

下面我们来深入认识一下这三姐妹：

1、启动页

定义： 启动页是应用每次冷启动过程中展示给用户的一个过渡页面，用于缓减用户打开应用时等待过程的焦虑情绪。设计思路：用一句话告诉用户产品定位是什么（我是谁？我是做什么的？）。设计时运用品牌元素（logo、产品名称、slogan、IP形象等）强化用户对产品的认知。闪屏设计多数较为精简，不宜内容太多太过复杂，也不宜经常更换，打断用户对品牌的认知记忆。交互方式：无法进行交互，不可点击也不可跳过，展示时间不可控。常见的设计类型：

1、极简类

这种形式是最常规的，由品牌色+logo+名称+slogan组成，这类闪屏占大多数。

2、插画类

插画类容易引起用户共鸣，更具有亲和力，插画手法用的比较多的是肌理插画、手绘插画、2.5D插画、渐变插画等。想要了解插画类型的可以看我的7种常见插画风格总结这篇文章。

3、动图&小视频类

有一些App用动图或者小视频作为启动页， 优点是视觉效果突出，缺点是对网络环境有要求，有可能会出现卡顿的情况。实现难度较大，而且用户每次打开应用都会看一次，时间久了也会失去新鲜感。

4、和产品调性相关的图片类

为了和用户产生情感上的共鸣，有些App会使用和产品调性相匹配的图片，最熟悉的就是微信了。

2、闪屏

定义：闪屏形似启动页，通常用于展示营销活动广告图，并引导用户点击。

设计思路：需要考虑到平滑过度，设计时预留固定广告位置和品牌位置，这样启动页和闪屏会顺滑过渡。如下图每日瑜伽的处理方式。

交互方式：有交互行为，可点击进入，可点击跳过。有读取秒数，一般为3～5秒。

▲ 2.1闪屏的常见类型

一、广告闪屏

广告闪屏就是产品为了流量变现给一些商家打广告或者进行合作设计的一类图片。如下图所示：

很多用户看到这类闪屏是比较反感的，至少对我来说，我是很少会点击进这类闪屏的，除非闪屏设计得非常出彩，我愿意点进去看一下，不然的话我就会立刻把它关掉，毕竟感觉这内容对自己没什么用，还耽误我用APP的时间。

所以这类闪屏通常会加上倒计时和跳过，方便用户快速进入APP。这类闪屏最好只在用户每天第一次打开App时出现，避免让用户厌烦。在商业利益和用户体验之间要保持一个平衡，不然容易流失用户。

二、活动闪屏

活动闪屏和广告闪屏有点类似，它起到活动宣传的作用，有助于产品的运营推广，每年的618、双十一、双十二等节日期间，各大电商App都会有活动闪屏亮相。如下图所示：

三、节日闪屏 节日闪屏就是每逢节假日会放出节日当天相关的主题内容图。如母亲节、父亲节、二十四节气等，如下图所示：

使用节日闪屏的好处有：

1、长期看常规闪屏，用户容易审美疲劳，节日闪屏会给用户一种新鲜感，提升用户的对产品的好感度。

2、可以蹭着节日热点提升产品的品牌调性。

3、在节日给用户问候与关怀，和用户在情感上产生共鸣，从而更好地连接用户和产品。

3、引导页

定义：用户安装或更新后首次启动时展示的数个页面，常用于介绍产品的核心功能，使用场景，版本更新等。

设计思想：宣传产品的核心功能与优势（我该怎么使用？我有什么亮点？）。为了降低用户反感程度，最好有“跳过”按钮，引导页数通常为3～5个。 文案内容尽量简洁。

交互方式：可交互，左右滑动切换页面，最后一页有进入按钮。如下图所示：

、源码描述

这是一款动漫风的引导页面，背景图片有淡入切换特效，支持在线打开QQ聊天窗口。

二、源码截图

三、源码下载

动页是启动时用户看到的页面，可静态可动态，停留时间短，容易被忽略，也有将启动页称为闪屏。本文从三个方面分析，如何去设置APP的启动页。

本文大纲：

1. APP启动页的设计初衷；
2. APP启动页的分类；
3. APP启动页的设计方法和原则

一、为什么要做启动页

1.1 什么是启动页

是启动时用户看到的页面，可静态可动态，停留时间短，容易被忽略。也有将启动页称为闪屏。

注：引导页和启动页不一样。

1.2 启动页初衷

PC软件的传承

PC软件启动页实例：Photoshop每次启动都会出现一个启动页面，而且还需要等待几秒的时间。

苹果官方，从IOS5就有启动页的设计规范。苹果认为启动页本意并不是为了展示 APP UI设计艺术，而是为了解决用户等待时间，保证用户使用流畅。

PC时代并不是所有软件都有启动页，往往是大型软件或大型网游才有启动页，PC时代保持着苹果对于启动页设计的初衷。

对用户的暗示和反馈

并不是所有软件都能快速启动，给用户以暗示和反馈：我的启动操作是有效的，软件在启动过程中。

1.3 启动页现状

启动过程中，大多app都需要启动时间，特别是大型的app，或因为手机本身内存及速度限制。为了避免给用户卡死等错误感知，启动页是合理的存在。

二、APP启动页的类型及设计方法

2.1 快速启动型

快速启动型遵循ios建议，尽量让用户不去感知页面的存在，“无缝”进入到应用中去，有两个方法：

1. 把APP首页背景图作为启动页面；
2. 把首页首先加载状态图作为启动页面。

不过，这种设计非常少，尤其国内基本不可见。

快速启动型实例：ibook

当在主屏幕上点击ibook图标时会立即显示启动图像，真正启动后界面会把书显示出来。

快速启动型实例：Safari、天气、APP Store

可见，快速启动型国内应用很少，而国外也主要是苹果内置软件。

采用此类启动页面的APP要注意两个细节：

1. 评估好APP自身的体量，保证启动的流畅、快捷
2. 启动页面的选取上，要配合首页的加载机制，选取合适的加载状态截图，以保证与启动后首页页面的衔接。

2.2 品牌展示型

利用品牌性质，传达应用格调、内涵、功能、使用场景等，加强用户对品牌的直观印象，拉近与应用与用户之间的距离。

包含三大要素：Logo、品牌名称、Slogan。部分还会展示应用的开发者、首发渠道等。

品牌展示型实例：蝉游记、pockte、美柚、QQ音乐、猫眼电影、知乎日报。

采用这种模式的，要注意以下几点：

1. 主题背景的选取一定要承上启下：要与APP图标、颜色、风格保持协调，与首页的保持一致；
2. 要注意页面的大小，图片质量保证的前提下，越小越好；
3. 背景图或者底纹一定要与APP相匹配，不能光顾好看。

2.3 氛围营造型

常常出现在各种节假日中以及生日中，此类启动界面普遍比较热闹，如果可以把节日与自家APP特点结合下，那就更加完美了。

2.4 信息强调型

与上面两种有点类似，但不是单纯放品牌Logo, Slogan，而是更加注重自身APP的宣传，一般为某一功能或特点的认知加强。

信息强调型实例：蜜芽宝贝（要么强调某项功能，要么强调某个活动）

2.5 情感共鸣型

使用意境化启动页，引起情感上的共鸣。这种模式的重点在于情感共鸣，设计难度大。所以这类启动页很少，做得好的更少。

情感共鸣型实例：微信、蘑菇街、虾米音乐。

• 微信：就是解决沟通，解决内心孤独，启动页很有寓意，也可多种解读。
• 蘑菇街：目标用户是女生，女生都梦想有自己好看的衣服，衣橱及水晶鞋，引发女性用户的共鸣。
• 虾米音乐：音乐就要走情怀，用了专辑头像，下面配上经典歌词，暗含音乐背后的力量。

2.6 推广宣传型

品牌+X，X=推荐活动或广告，实质是一种营销方式，也叫做开屏广告。

通常，这类启动画面多作为临时使用，有明确的时效性。这类启动页目前用得比较多，原因：

• 一是现在大家活动越来越多；
• 二是大家都有变现及商业化的压力。

这类启动页可能对用户有负面影响，商业味浓重；好处是时效性，会经常变化，有新鲜感。

2.7 扩展定制型

推广宣传型的变招，普通启动页和推广宣传启动页的结合。

通常做法是在APP启动界面出现后，再次叠加一张页面，而第二张页面是比较容易被控制的，通过对第二张页面的定制达到想要的效果，而用户有时会误会是一个页面。

扩展定制型实例：微博（品牌型，或品牌+推广宣传型）。

扩展定制型实例：钉钉、豆瓣。

• 钉钉：为企业定制属于企业自己的启动页面；
• 豆瓣：“每天一次遇见你”。

2.8 动画视频型

用此类型的比较少，因为耗时和耗资源。

注意：不要长期让用户看同一个动画或视频，容易厌烦。好处是可以传递应用的价值观，可以更直观和加深印象，生动，拉近与用户关系，让用户进入氛围。

动画视频型实例：UBER。

UBER的启动页一直是一个转圈圈的小动画，这让人又爱又恨。不落俗套，高大上，但它时间长，急需用车时一直看到转圈圈。

三、启动页设计的注意事项

• 时间短：初衷就是过度，不是展示产品功能的页面，缩短时间，不要让用户看了两三秒还进入不了应用。始终记住启动页就是一个过渡。
• 简洁：由于展现时间短，启动页的设计要尽可能的简单，让用户看懂。
• 刷品牌：使用应用logo和slogan作为主元素，简单有效地传递品牌信息。每一次启动都是一次印象的加深，都是增加粘性的机会。

总结

启动页是APP的面子工程，如今是“拼颜值”的时代，应该重视启动页，设计出适合自己产品的启动页。

作者：Tu_卫佳

原文链接：https://www.jianshu.com/p/22936c402323

本文由 @Tu_卫佳 授权发布于人人都是产品经理，未经作者许可，禁止转载

题图来自 Pexels，基于 CC0 协议