本文大綱:
1)APP啟動(dòng)頁的設(shè)計(jì)初衷呀忧;
2)APP啟動(dòng)頁的分類;
3)APP啟動(dòng)頁的設(shè)計(jì)方法和原則
1 為什么要做啟動(dòng)頁
1.1 什么是啟動(dòng)頁
是啟動(dòng)時(shí)用戶看到的頁面溃睹,可靜態(tài)可動(dòng)態(tài)而账,停留時(shí)間短,容易被忽略因篇。也有將啟動(dòng)頁稱為閃屏泞辐。
注:引導(dǎo)頁和啟動(dòng)頁不一樣。
1.2 啟動(dòng)頁初衷
PC軟件的傳承
PC軟件啟動(dòng)頁實(shí)例:Photoshop每次啟動(dòng)都會(huì)出現(xiàn)一個(gè)啟動(dòng)頁面竞滓,而且還需要等待幾秒的時(shí)間咐吼。
蘋果官方,從IOS5就有啟動(dòng)頁的設(shè)計(jì)規(guī)范商佑。蘋果認(rèn)為啟動(dòng)頁本意并不是為了展示APPUI設(shè)計(jì)藝術(shù)锯茄;而是為了解決用戶等待時(shí)間,保證用戶使用流暢茶没。
PC時(shí)代并不是所有軟件都有啟動(dòng)頁肌幽,往往是大型軟件或大型網(wǎng)游才有啟動(dòng)頁,PC時(shí)代保持著蘋果對(duì)于啟動(dòng)頁設(shè)計(jì)的初衷抓半。
對(duì)用戶的暗示和反饋
并不是所有軟件都能快速啟動(dòng)喂急,給用戶以暗示和反饋:我的啟動(dòng)操作是有效的,軟件在啟動(dòng)過程中笛求。
1.3 啟動(dòng)頁現(xiàn)狀
啟動(dòng)過程中廊移,大多app都需要啟動(dòng)時(shí)間,特別是大型的app探入,或因?yàn)槭謾C(jī)本身內(nèi)存及速度限制狡孔。
為了避免給用戶卡死等錯(cuò)誤感知,啟動(dòng)頁是合理的存在
2 APP啟動(dòng)頁的類型及設(shè)計(jì)方法
2.1 快速啟動(dòng)型
快速啟動(dòng)型遵循ios建議蜂嗽,盡量讓用戶不去感知頁面的存在苗膝,“無縫”進(jìn)入到應(yīng)用中去,有兩個(gè)方法:
1)把APP首頁背景圖作為啟動(dòng)頁面
2)把首頁首先加載狀態(tài)圖作為啟動(dòng)頁面
不過徒爹,這種設(shè)計(jì)非常少荚醒,尤其國(guó)內(nèi)基本不可見芋类。
快速啟動(dòng)型實(shí)例:ibook
當(dāng)在主屏幕上點(diǎn)擊ibook圖標(biāo)時(shí)會(huì)立即顯示啟動(dòng)圖像隆嗅。真正啟動(dòng)后界面會(huì)把書顯示出來
快速啟動(dòng)型實(shí)例:Safari、天氣侯繁、APP Store
可見胖喳,快速啟動(dòng)型國(guó)內(nèi)應(yīng)用很少,而國(guó)外也主要是蘋果內(nèi)置軟件贮竟。
采用此類啟動(dòng)頁面的APP要注意兩個(gè)細(xì)節(jié):
1)評(píng)估好APP自身的體量丽焊,保證啟動(dòng)的流暢较剃、快捷
2)啟動(dòng)頁面的選取上,要配合首頁的加載機(jī)制技健,選取合適的加載狀態(tài)截圖写穴,以保證與啟動(dòng)后首頁頁面的銜接。
2.2 品牌展示型
利用品牌性質(zhì)雌贱,傳達(dá)應(yīng)用格調(diào)啊送、內(nèi)涵、功能欣孤、使用場(chǎng)景等馋没,加強(qiáng)用戶對(duì)品牌的直觀印象,拉近與應(yīng)用與用戶之間的距離降传。
包含三大要素:Logo篷朵、品牌名稱、Slogan婆排。部分還會(huì)展示應(yīng)用的開發(fā)者声旺、首發(fā)渠道等。
品牌展示型實(shí)例:蟬游記段只、pockte艾少、美柚、QQ音樂翼悴、貓眼電影缚够、知乎日?qǐng)?bào)
采用這種模式的,要注意以下幾點(diǎn):
1)主題背景的選取一定要承上啟下:要與APP圖標(biāo)鹦赎、顏色谍椅、風(fēng)格保持協(xié)調(diào),與首頁的保持一致
2)要注意頁面的大小古话,圖片質(zhì)量保證的前提下雏吭,越小越好
3)背景圖或者底紋一定要與APP相匹配,不能光顧好看
2.3 氛圍營(yíng)造型
常常出現(xiàn)在各種節(jié)假日中以及生日中陪踩。
此類啟動(dòng)界面普遍比較熱鬧杖们,如果可以把節(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è)活動(dòng))
2.5 情感共鳴型
使用意境化啟動(dòng)頁,引起情感上的共鳴谈飒。
這種模式的重點(diǎn)在于情感共鳴岂座,設(shè)計(jì)難度大。所以這類啟動(dòng)頁很少杭措,做得好的更少费什。
情感共鳴型實(shí)例:微信、蘑菇街手素、蝦米音樂
微信:就是解決溝通吕喘,解決內(nèi)心孤獨(dú),啟動(dòng)頁很有寓意刑桑,也可多種解讀氯质。
蘑菇街:目標(biāo)用戶是女生,女生都?jí)粝胗凶约汉每吹囊路舾聶患八挪欤l(fā)女性用戶的共鳴。
蝦米音樂:音樂就要走情懷琢锋,用了專輯頭像辕漂,下面配上經(jīng)典歌詞,暗含音樂背后的力量吴超。
2.6 推廣宣傳型
品牌+X钉嘹,X=推薦活動(dòng)或廣告,實(shí)質(zhì)是一種營(yíng)銷方式鲸阻,也叫做開屏廣告跋涣。
通常,這類啟動(dòng)畫面多作為臨時(shí)使用鸟悴,有明確的時(shí)效性陈辱。
這類啟動(dòng)頁目前用得比較多,原因一是現(xiàn)在大家活動(dòng)越來越多细诸,二是大家都有變現(xiàn)及商業(yè)化的壓力沛贪。
這類啟動(dòng)頁可能對(duì)用戶有負(fù)面影響,商業(yè)味濃重震贵;好處是時(shí)效性利赋,會(huì)經(jīng)常變化,有新鮮感猩系。
2.7 擴(kuò)展定制型
推廣宣傳型的變招媚送,普通啟動(dòng)頁和推廣宣傳啟動(dòng)頁的結(jié)合。
通常做法是在APP啟動(dòng)界面出現(xiàn)后蝙眶,再次疊加一張頁面季希,而第二張頁面是比較容易被控制的褪那,通過對(duì)第二張頁面的定制達(dá)到想要的效果幽纷。而用戶有時(shí)會(huì)誤會(huì)是一個(gè)頁面式塌。
擴(kuò)展定制型實(shí)例:微博(品牌型,或品牌+推廣宣傳型)
擴(kuò)展定制型實(shí)例:釘釘友浸、豆瓣
釘釘:為企業(yè)定制屬于企業(yè)自己的啟動(dòng)頁面
豆瓣:“每天一次遇見你”
2.8 動(dòng)畫視頻型
用此類型的比較少峰尝,因?yàn)楹臅r(shí)和耗資源。
注意收恢,不要長(zhǎng)期讓用戶看同一個(gè)動(dòng)畫或視頻武学,容易厭煩。好處是可以傳遞應(yīng)用的價(jià)值觀伦意,可以更直觀和加深印象火窒,生動(dòng),拉近與用戶關(guān)系,讓用戶進(jìn)入氛圍。
動(dòng)畫視頻型實(shí)例:UBER
UBER的啟動(dòng)頁一直是一個(gè)轉(zhuǎn)圈圈的小動(dòng)畫意述,這讓人又愛又恨忿薇。不落俗套,高大上陷遮,但它時(shí)間長(zhǎng),急需用車時(shí)一直看到轉(zhuǎn)圈圈。
3 啟動(dòng)頁設(shè)計(jì)的注意事項(xiàng)
時(shí)間短
初衷就是過度慧域,不是展示產(chǎn)品功能的頁面,縮短時(shí)間浪读,不要讓用戶看了兩三秒還進(jìn)入不了應(yīng)用昔榴。始終記住啟動(dòng)頁就是一個(gè)過渡。
簡(jiǎn)潔
由于展現(xiàn)時(shí)間短碘橘,啟動(dòng)頁的設(shè)計(jì)要盡可能的簡(jiǎn)單论泛,讓用戶看懂。
刷品牌
使用應(yīng)用logo和slogan作為主元素蛹屿,簡(jiǎn)單有效地傳遞品牌信息屁奏。每一次啟動(dòng)都是一次印象的加深,都是增加粘性的機(jī)會(huì)错负。
4 小結(jié)
啟動(dòng)頁是APP的面子工程坟瓢,如今是“拼顏值”的時(shí)代,應(yīng)該重視啟動(dòng)頁犹撒,設(shè)計(jì)出適合自己產(chǎn)品的啟動(dòng)頁折联。