3個(gè)方面分析:如何設(shè)計(jì)APP啟動頁

1 評論 16767 瀏覽 74 收藏 9 分鐘

啟動頁是啟動時(shí)用戶看到的頁面,可靜態(tài)可動態(tài),停留時(shí)間短,容易被忽略,也有將啟動頁稱為閃屏。本文從三個(gè)方面分析,如何去設(shè)置APP的啟動頁。

本文大綱:

  1. APP啟動頁的設(shè)計(jì)初衷;
  2. APP啟動頁的分類;
  3. APP啟動頁的設(shè)計(jì)方法和原則

一、為什么要做啟動頁

1.1 什么是啟動頁

是啟動時(shí)用戶看到的頁面,可靜態(tài)可動態(tài),停留時(shí)間短,容易被忽略。也有將啟動頁稱為閃屏。

注:引導(dǎo)頁和啟動頁不一樣。

1.2 啟動頁初衷

PC軟件的傳承

PC軟件啟動頁實(shí)例:Photoshop每次啟動都會出現(xiàn)一個(gè)啟動頁面,而且還需要等待幾秒的時(shí)間。

蘋果官方,從IOS5就有啟動頁的設(shè)計(jì)規(guī)范。蘋果認(rèn)為啟動頁本意并不是為了展示 APP UI設(shè)計(jì)藝術(shù),而是為了解決用戶等待時(shí)間,保證用戶使用流暢。

PC時(shí)代并不是所有軟件都有啟動頁,往往是大型軟件或大型網(wǎng)游才有啟動頁,PC時(shí)代保持著蘋果對于啟動頁設(shè)計(jì)的初衷。

對用戶的暗示和反饋

并不是所有軟件都能快速啟動,給用戶以暗示和反饋:我的啟動操作是有效的,軟件在啟動過程中。

1.3 啟動頁現(xiàn)狀

啟動過程中,大多app都需要啟動時(shí)間,特別是大型的app,或因?yàn)槭謾C(jī)本身內(nèi)存及速度限制。為了避免給用戶卡死等錯誤感知,啟動頁是合理的存在。

二、APP啟動頁的類型及設(shè)計(jì)方法

2.1 快速啟動型

快速啟動型遵循ios建議,盡量讓用戶不去感知頁面的存在,“無縫”進(jìn)入到應(yīng)用中去,有兩個(gè)方法:

  1. 把APP首頁背景圖作為啟動頁面;
  2. 把首頁首先加載狀態(tài)圖作為啟動頁面。

不過,這種設(shè)計(jì)非常少,尤其國內(nèi)基本不可見。

快速啟動型實(shí)例:ibook

當(dāng)在主屏幕上點(diǎn)擊ibook圖標(biāo)時(shí)會立即顯示啟動圖像,真正啟動后界面會把書顯示出來。

快速啟動型實(shí)例:Safari、天氣、APP Store

可見,快速啟動型國內(nèi)應(yīng)用很少,而國外也主要是蘋果內(nèi)置軟件。

采用此類啟動頁面的APP要注意兩個(gè)細(xì)節(jié):

  1. 評估好APP自身的體量,保證啟動的流暢、快捷
  2. 啟動頁面的選取上,要配合首頁的加載機(jī)制,選取合適的加載狀態(tài)截圖,以保證與啟動后首頁頁面的銜接。

2.2 品牌展示型

利用品牌性質(zhì),傳達(dá)應(yīng)用格調(diào)、內(nèi)涵、功能、使用場景等,加強(qiáng)用戶對品牌的直觀印象,拉近與應(yīng)用與用戶之間的距離。

包含三大要素:Logo、品牌名稱、Slogan。部分還會展示應(yīng)用的開發(fā)者、首發(fā)渠道等。

品牌展示型實(shí)例:蟬游記、pockte、美柚、QQ音樂、貓眼電影、知乎日報(bào)。

采用這種模式的,要注意以下幾點(diǎn):

  1. 主題背景的選取一定要承上啟下:要與APP圖標(biāo)、顏色、風(fēng)格保持協(xié)調(diào),與首頁的保持一致;
  2. 要注意頁面的大小,圖片質(zhì)量保證的前提下,越小越好;
  3. 背景圖或者底紋一定要與APP相匹配,不能光顧好看。

2.3 氛圍營造型

常常出現(xiàn)在各種節(jié)假日中以及生日中,此類啟動界面普遍比較熱鬧,如果可以把節(jié)日與自家APP特點(diǎn)結(jié)合下,那就更加完美了。

2.4 信息強(qiáng)調(diào)型

與上面兩種有點(diǎn)類似,但不是單純放品牌Logo, Slogan,而是更加注重自身APP的宣傳,一般為某一功能或特點(diǎn)的認(rèn)知加強(qiáng)。

信息強(qiáng)調(diào)型實(shí)例:蜜芽寶貝(要么強(qiáng)調(diào)某項(xiàng)功能,要么強(qiáng)調(diào)某個(gè)活動)

2.5 情感共鳴型

使用意境化啟動頁,引起情感上的共鳴。這種模式的重點(diǎn)在于情感共鳴,設(shè)計(jì)難度大。所以這類啟動頁很少,做得好的更少。

情感共鳴型實(shí)例:微信、蘑菇街、蝦米音樂。

  • 微信:就是解決溝通,解決內(nèi)心孤獨(dú),啟動頁很有寓意,也可多種解讀。
  • 蘑菇街:目標(biāo)用戶是女生,女生都夢想有自己好看的衣服,衣櫥及水晶鞋,引發(fā)女性用戶的共鳴。
  • 蝦米音樂:音樂就要走情懷,用了專輯頭像,下面配上經(jīng)典歌詞,暗含音樂背后的力量。

2.6 推廣宣傳型

品牌+X,X=推薦活動或廣告,實(shí)質(zhì)是一種營銷方式,也叫做開屏廣告。

通常,這類啟動畫面多作為臨時(shí)使用,有明確的時(shí)效性。這類啟動頁目前用得比較多,原因:

  • 一是現(xiàn)在大家活動越來越多;
  • 二是大家都有變現(xiàn)及商業(yè)化的壓力。

這類啟動頁可能對用戶有負(fù)面影響,商業(yè)味濃重;好處是時(shí)效性,會經(jīng)常變化,有新鮮感。

2.7 擴(kuò)展定制型

推廣宣傳型的變招,普通啟動頁和推廣宣傳啟動頁的結(jié)合。

通常做法是在APP啟動界面出現(xiàn)后,再次疊加一張頁面,而第二張頁面是比較容易被控制的,通過對第二張頁面的定制達(dá)到想要的效果,而用戶有時(shí)會誤會是一個(gè)頁面。

擴(kuò)展定制型實(shí)例:微博(品牌型,或品牌+推廣宣傳型)。

擴(kuò)展定制型實(shí)例:釘釘、豆瓣。

  • 釘釘:為企業(yè)定制屬于企業(yè)自己的啟動頁面;
  • 豆瓣:“每天一次遇見你”。

2.8 動畫視頻型

用此類型的比較少,因?yàn)楹臅r(shí)和耗資源。

注意:不要長期讓用戶看同一個(gè)動畫或視頻,容易厭煩。好處是可以傳遞應(yīng)用的價(jià)值觀,可以更直觀和加深印象,生動,拉近與用戶關(guān)系,讓用戶進(jìn)入氛圍。

動畫視頻型實(shí)例:UBER。

UBER的啟動頁一直是一個(gè)轉(zhuǎn)圈圈的小動畫,這讓人又愛又恨。不落俗套,高大上,但它時(shí)間長,急需用車時(shí)一直看到轉(zhuǎn)圈圈。

三、啟動頁設(shè)計(jì)的注意事項(xiàng)

  • 時(shí)間短:初衷就是過度,不是展示產(chǎn)品功能的頁面,縮短時(shí)間,不要讓用戶看了兩三秒還進(jìn)入不了應(yīng)用。始終記住啟動頁就是一個(gè)過渡。
  • 簡潔:由于展現(xiàn)時(shí)間短,啟動頁的設(shè)計(jì)要盡可能的簡單,讓用戶看懂。
  • 刷品牌:使用應(yīng)用logo和slogan作為主元素,簡單有效地傳遞品牌信息。每一次啟動都是一次印象的加深,都是增加粘性的機(jī)會。

總結(jié)

啟動頁是APP的面子工程,如今是“拼顏值”的時(shí)代,應(yīng)該重視啟動頁,設(shè)計(jì)出適合自己產(chǎn)品的啟動頁。

 

作者:Tu_衛(wèi)佳

原文鏈接:https://www.jianshu.com/p/22936c402323

本文由 @Tu_衛(wèi)佳 授權(quán)發(fā)布于人人都是產(chǎn)品經(jīng)理,未經(jīng)作者許可,禁止轉(zhuǎn)載

題圖來自 Pexels,基于 CC0 協(xié)議

更多精彩內(nèi)容,請關(guān)注人人都是產(chǎn)品經(jīng)理微信公眾號或下載App
評論
評論請登錄
  1. 啟動頁廣告用視頻的還有一席

    來自黑龍江 回復(fù)