启动体验设计-闪屏,启动页,引导页

冷启动(cold start)

  • 冷启动是指应用尚未运行,系统创建进程并初始化应用。
  • 热启动是指应用已经运行但是在后台被挂起,从后台恢复应用。

冷启动时间稍微会长一点,在此期间可能会看到白屏或黑屏或感受到明显的启动延迟(背景设为透明)。
解决方法是优化初始化逻辑或使用闪屏。

闪屏(splash)

闪屏是应用每次冷启动过程中展示给用户的一个过渡页面。

用于减缓用户在打开应用时等待的焦虑情绪(欺骗用户以掩盖启动慢的事实)。

由于闪屏通常是一张背景图片,无法拥有交互,也不能动态修改,无法承载营销需求,所以需要启动页。

启动页(launch)

启动页(launch)是一个每次启动后展示的类似闪屏的页面,根据服务端展示不同的些营销活动广告图片并引导用户点击。

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

引导页(guide)

引导页是在用户安装或更新第一次启动后展示的数个页面。

通常用于介绍应用的 核心概念,功能玩法,使用场景,重大变更

为了降低用户反感程度,引导页数通常越少越好(< 5),并提供“跳过”按钮

启动页可以算是形似闪屏且只有一个页面的引导页。

启动流程

启动流程

虽然 Apple 也曾经在《iOS 人机交互手册》里建议尽量不要展示闪屏或其它启动体验。

尽量避免展示闪屏或其它启动体验,让用户能立即使用是最好的。
As much as possible, avoid displaying a splash screen or other startup experience. It’s best when users can begin using your app immediately.

然而,闪屏/启动页/引导页 现在已经成为应用标配,一起组成了现在常见的启动流程,同时用于展示品牌性格,广告营销入口

Android 实现闪屏

使用 android:windowBackground 实现闪屏

  1. 定义背景图 drawable/splash

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    <?xml version="1.0" encoding="utf-8"?>
    <layer-list xmlns:android="http://schemas.android.com/apk/res/android">
    <item
    android:drawable="@color/gray"/>
    <item>
    <bitmap
    android:gravity="center"
    android:src="@mipmap/ic_launcher"/>
    </item>
    </layer-list>
  2. 定义闪屏页主题 ThemeSplash

    1
    2
    3
    4
    5
    <resources>
    <style name="ThemeSplash" parent="Theme.AppCompat.NoActionBar">
    <item name="android:windowBackground">@drawable/splash</item>
    </style>
    </resources>
  3. 在闪屏页使用主题 ThemeSplash

    1
    2
    3
    4
    5
    6
    7
    8
    <activity
    android:name=".SplashActivity"
    android:theme="@style/ThemeSplash">
    <intent-filter>
    <action android:name="android.intent.action.MAIN" />
    <category android:name="android.intent.category.LAUNCHER" />
    </intent-filter>
    </activity>

注意:在有虚拟按键的手机上,闪屏底部会会被虚拟按键挡信,这点在设计时需要考虑到。

iOS 实现闪屏

有两种方式

  • 静态启动图集(static launch images),根据要支持的屏幕尺寸提供 Default.png 系列文件即可。
  • 启动图布局文件(launch screen file),只需要一个布局文件就可适配各种屏幕。

参考链接

app为什么要有启动页(Splash screen)
APP设计之一:启动页
APP设计之二:引导页
iOS开发时如何使用 Launch Screen Storyboard
Cold Start Times: An Analysis of Top Apps
Avoiding cold starts on Android
Facebook iOS App如何优化启动时间

欢迎打赏,谢谢支持~