启动页/闪屏/引导页-你还傻傻分不清?

169天前发布

原创文章 / UI / 教程
泡芙喵F 原创,如需商业用途或转载请与泡芙喵F联系,谢谢配合。

今天就跟大家一起来认识一下开屏三姐妹:启动页/闪屏/引导页。

“小喵,需要做1个开屏页”


“哪个开屏页呀?”

“APP打开时的启动图”

“是首次打开APP时出现的那个还是后面的广告图呢?”

“广告图”

……

上面这样的对话不知道你们有没有遇到过,今天就跟大家一起来认识一下开屏三姐妹:启动页/闪屏/引导页。

通常三姐妹出场顺序如下:

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


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个。 尽量提供“跳过”按钮,文案内容尽量简洁。


交互方式:

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


好了,今天的分享就到这里了,现在是不是对开屏三姐妹有了一些新的认识呢!


图片素材来源于应用截图和网络,仅用于学习交流使用


-END-

感谢您的阅读,希望能对你的设计有些帮助。

更多精彩内容可以关注我的公众号【 泡芙喵F设计教室 】

56
- 位站酷推荐设计师推荐 -

声明:站酷(ZCOOL)内网友所发表的所有内容及言论仅代表其本人,并不反映任何站酷(ZCOOL)之意见及观点。

    文章信息

    • 文章标签

    没有新消息