UI设计闪屏/启动页/引导页制作技巧

2018-8-2    博博

UI设计闪屏/启动页/引导页制作技巧

云和数据西安中心 2018-07-02 14:19:10

如果您想订阅本博客内容,每天自动发到您的邮箱中, 请点这里

需要做一个“开屏页”

“哪个开屏页”

“带跳过的哪个”

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

“滑动的”

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

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

UI设计闪屏/启动页/引导页制作技巧

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

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

宝们表示很委屈。

UI设计闪屏/启动页/引导页制作技巧

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

01 闪屏 Splash Screen

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

UI设计闪屏/启动页/引导页制作技巧
UI设计闪屏/启动页/引导页制作技巧

交互方式:闪屏通常是一张背景图片,无法进行交互,无法点击也无法跳转

劣势:无法跳转,只能进行展示作用,无法很好的承载营销需求

优势:展示时间不可控

使用建议:

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

不用过去吸引用户的注意(干扰用户的本来目的)

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

02 启动页Launch Screen

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

使用示例:常用与展示营销活动广告图片并引导用户点击

UI设计闪屏/启动页/引导页制作技巧

交互方式:

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

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

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

03 引导页Onboarding Screen

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

使用示例:

UI设计闪屏/启动页/引导页制作技巧

交互方式:

1、左右滑动可以切换

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

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

使用建议:

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

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

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

4.每页的文案不要超过9个字,如果有更多内容可以用小号文字进行辅助说明

(根据爱尔兰哲学家汉密尔顿观察发现的7±2效应,一个人的短时记忆至少能回忆出5个字,最多回忆9个,即7±2个。因此展示的文案要控制在9个字以内,超过后用户容易遗忘、出现记忆偏差。)

劣势:

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

04常规的启动流程

通常来说:开屏三兄弟顺序如下:

UI设计闪屏/启动页/引导页制作技巧

流程仅是建议的常规流程,通常来说闪屏是基本都有的,而启动页和引导页,如果产品需要,三个流程都走一遍也不是不可以,不过还是要尽量考虑到用户的忍耐度,不要让用户在漫长的“走流程”中失去了最初的兴趣。

小结

Appe曾经在《iOS人机交互手册》里建议:尽量不要展示闪屏或其它启动流程,避免干扰用户注意力然而,在马桶盖、地板砖甚至是美女身上都能打广告的今天,启动页/闪屏/引导页这三兄弟自带的“广告位”光环,让产品、运营们对其欲罢不能,几乎已经成为APP的启动标配,一起组成了现在常见的启动流程。它们共同承担起展示品牌性格,广告营销入口,功能介绍与引导的大任。

这让我想到最近看的一个段子,放出来给大家看看,仅做娱乐。

UI设计闪屏/启动页/引导页制作技巧

不过,正所谓存在即合理,既然市面上的启动流程都是“全套服务”,说明这么做定是符合特定阶段的市场需求的,所以作为产品设计师的我们在调侃过之后,还是要做好我们的本职工作:用专业知识解决实际问题。看过这篇文章后,相信

你又重新认识了开屏三兄弟,并且能更好地利用他们各自的特性好好服侍各位产品、品牌、运营大佬了~


蓝蓝设计www.lanlanwork.com )是一家专注而深入的界面设计公司,为期望卓越的国内外企业提供卓越的UI界面设计、BS界面设计 、 cs界面设计 、 ipad界面设计 、 包装设计 、 图标定制 、 用户体验 、交互设计、 网站建设 平面设计服务



日历

链接

个人资料

蓝蓝设计的小编 http://www.lanlanwork.com

存档