- 设计理论 -

开屏三兄弟了解一下——闪屏/启动页/引导页

作者:阿肆Stella 原文出处:海盐社
2018-08-21

5.jpeg

“需要做一个开屏页”

“哪个开屏页?”

“带跳过的那个”

“带跳过的?是一页的那个还是可以滑动的?”

“滑动的”

...

上面这样的对话不知道你有没有很熟悉。

我们都知道APP在启动时会有一些页面先行展示例如这样:

WechatIMG11.jpeg

通常来说我们会简单的把它们统称为“开屏页”或者“启动页”

但实际上,这种统称就像是把下面这些都小可爱都叫做“熊”一样不严谨。“熊”宝宝们表示很委屈。

WechatIMG12.jpeg

这些“开屏页”的交互方式其实并不是完全一样的,因此也承载着完全不同的功能,有着不同的名字:闪屏Splash Screen、启动页Launch Screen、引导页Onboarding Screen。接下来我们就来走进它们的“内心世界”,了解一下它们的真正用法吧。

一、闪屏

定义

闪屏是应用每次冷启动过程中展示给用户的一个过渡页面,用于减缓用户在打开应用时等待的焦虑情绪。

用法与示例

WechatIMG13.jpeg

WechatIMG14.jpeg

交互方式

闪屏通常是一张背景图片,无法进行交互,不可点击也不可跳过

劣势

1. 无法跳转,只能进行展示作用,无法很好地承载营销需求

2. 展示时间不可控

使用建议

1.避免包含太多文字字符(阅读速度慢的话可能还没看完就关闭了)

2.不要过于吸引用户的注意(干扰用户的本来目的)

3.不要做广告(干扰,且不能点击)

二、启动页

定义

启动页形似闪屏但拥有交互功能,通常用于展示营销活动广告图片并引导用户点击。

用法与示例

WechatIMG15.jpeg

交互方式

1. 点击页面或按钮进入活动承载页;

2. 点击跳过,跳过启动页,进入首页;或N秒后自动消失

备注

由于加载时间不确定,启动图通常会缓存并在下次启动时使用。

三、引导页

定义

用户安装或更新后首次启动时展示的数个页面,常用于介绍应用的核心概念,功能玩法,使用场景,核心变更。

用法与示例

WechatIMG16.jpeg

交互方式

1. 左右滑动可以切换页面;

2. 最后一页页面可点击进入

使用建议

1. 轻易不要使用引导页,以免阻碍用户快速的使用体验

2. 为了降低用户反感程度,引导页数通常越少越好(< 5)

3. 尽量提供“跳过”按钮

4. 每页的文案不要超过9个字,如果有更多内容可以用小号文字进行辅助说明。(根据爱尔兰哲学家汉密尔顿观察发现的7±2效应,一个人的短时记忆至少能回忆出5个字,最多回忆9个,即7±2个。因此展示的文案要控制在9个字以内,超过后用户容易遗忘、出现记忆偏差。)

劣势

增加了用户进入产品的时间,用户翻页过多,可能会失去耐心、降低好感度

备注

首次打开才出现,之后就不再出现。清除用户数据,再次打开应用可以再次看到。

四、常规的启动流程

WechatIMG17.jpeg

屏幕快照 2018-08-21 上午11.24.43.png

总结

Apple 曾经在《iOS 人机交互手册》里建议:尽量不要展示闪屏或其它启动流程,避免干扰用户注意力。

然而,在马桶盖、地板砖甚至是美女身上都能打广告的今天,启动页/闪屏/引导页这三兄弟自带的“广告位”光环,让产品、运营们对其欲罢不能,几乎已经成为APP的启动标配,一起组成了现在常见的启动流程。它们共同承担起展示品牌性格,广告营销入口,功能介绍与引导的大任。

这让我想到最近看的一个段子,与大家分享一下,仅做娱乐~

WechatIMG18.jpeg

不过,正所谓存在即合理,既然市面上的启动流程都是“全套服务”,说明这么做一定是符合特定阶段的市场需求的,所以作为产品设计师的我们在调侃过之后,还是要做好我们的本职工作:用专业知识解决实际问题。看过这篇文章后,相信你又重新认识了开屏三兄弟,并且能更好地利用他们各自的特性好好服侍各位产品、品牌、运营大佬了~

参考链接

https://www.jianshu.com/p/77497c671f38 

APP 引导页设计4-怎样设计优秀的引导页

https://www.jianshu.com/p/4e4da58a0b0b  

开屏页 launch screen

 • end • 

6.jpeg

海盐社.jpeg

喜欢就分享
精选评论