章：啟動頁/閃屏/引導頁-你還傻傻分不清？

文章來源于公眾號：泡芙喵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 協議