APP的優(yōu)雅開場——啟動頁面
Photoshop CC啟動頁面
Adobe的每個(gè)版本的升級,新產(chǎn)品的啟動畫面都會加強(qiáng)版的升級。手機(jī)APP同樣具有啟動界面,手機(jī)每次啟動一款A(yù)PP時(shí),T都會出現(xiàn),不管你看沒看到。啟動界面的存在原因很簡單,就是讓程序有一個(gè)“優(yōu)雅的出場”。不管是電腦軟件還是手機(jī)應(yīng)用,程序的啟動都需要有一定的時(shí)間,或長或短。應(yīng)用在加載,要給用戶以暗示和反饋:
- 我的啟動操作是有效的;
- 軟件在啟動過程中。
此處插句話:啟動頁面與引導(dǎo)頁面的區(qū)別:
這個(gè)問題在這里首先要說說清楚,啟動頁面和引導(dǎo)頁面是不同的。發(fā)現(xiàn)有很多人會把引導(dǎo)頁面叫做啟動頁面,這可能是因?yàn)閱禹撁娴摹皶一ㄒ滑F(xiàn)”,用戶更多的注意到引導(dǎo)頁面。其實(shí)區(qū)分他們并不難:
- 啟動頁面可以是無意義的,哪怕是一張白色圖片。而引導(dǎo)頁面勢必要起到引導(dǎo)的作用,可能是產(chǎn)品特色的展示,或者關(guān)鍵功能的引導(dǎo),也或者是新功能迭代的展示等。
- 啟動界面是自動消失的,而且一般是越快越好。(在啟動界面添加廣告的鏈接會有倒計(jì)時(shí),還要我們點(diǎn)跳過,有木有!好吧,待會再聊這個(gè)…)。而引導(dǎo)頁面一般要“逼”用戶一一拜讀完畢,才不情愿的離開。
- 這個(gè)是最明顯的:啟動頁面會伴隨每一次APP啟動時(shí)都會出現(xiàn)。而啟動頁面一般只在新版本打開的第一次才會出現(xiàn)。
- 啟動頁面一般只有一張。(好吧,有時(shí)候不是一張,這個(gè)也待會再說…),而引導(dǎo)頁面往往是一組,一組,一組。
那么,怎樣的啟動頁面算是一個(gè)好的設(shè)計(jì)呢?
來,先看看蘋果怎么說:
iOS5設(shè)計(jì)規(guī)范:“為了增強(qiáng)應(yīng)用程序啟動時(shí)的用戶體驗(yàn),您應(yīng)該提供一個(gè)啟動圖像。啟動圖像與應(yīng)用程序的首屏幕看起來非常相似。當(dāng)用戶在主屏幕上點(diǎn)擊您的應(yīng)用程序圖標(biāo)時(shí),APP會立即顯示這個(gè)啟動圖像。一旦準(zhǔn)備就緒,您的應(yīng)用程序就會顯示它的首屏幕,來替換掉這個(gè)啟動占位圖像。請記住,啟動圖像并不是為您提供機(jī)會進(jìn)行藝術(shù)展示;它完全是為了增強(qiáng)用戶對應(yīng)用程序能夠快速啟動并立即投入使用的感知度?!?/p>
iOS7設(shè)計(jì)規(guī)范:“盡可能地避免使用無意義的啟動畫面(歡迎畫面)或其他類似的啟動體驗(yàn)。最好讓用戶在啟動你的應(yīng)用之后可以立刻開始使用?!?/p>
來,再看看現(xiàn)在都有什么類型的啟動頁面:
在即合理,小哈把現(xiàn)有啟動界面歸為如圖示的五大類:假裝沒有型,隨便搞搞型,氣氛營造型,信息強(qiáng)調(diào)型,以及擴(kuò)展定制型。下面即分別對這五類進(jìn)行一一介紹,以及對應(yīng)的要注意的一些設(shè)計(jì)細(xì)節(jié)。
1、假裝沒有型
正如iOS9中建議那樣,盡量讓用戶不去感知啟動頁面的存在,“無縫”進(jìn)入到應(yīng)用中去。由于智能手機(jī)性能的不斷提升,當(dāng)APP本身體量很小的時(shí)候,基本可以瞬間啟動完成。但是啟動頁面是仍然存在的,至少對于iOS系統(tǒng)來說是這樣的,實(shí)現(xiàn)這種“沒有感知”的效果,一般是把用APP首頁背景作為圖作為啟動頁面,或者是首頁中首先加載的部分狀態(tài)圖作為啟動頁面。從啟動頁面到首頁的轉(zhuǎn)換實(shí)現(xiàn)無縫轉(zhuǎn)接。下圖分別為:Safari,天氣,APP Store的啟動頁面。
采用此類啟動頁面的APP要注意兩個(gè)細(xì)節(jié):a,評估好APP自身的體量,保證啟動的流暢、快速。b,啟動界面的選取上,要配合首頁的加載機(jī)制,選取合適的加載狀態(tài)截圖,以保證與啟動后首頁頁面的銜接。
2、隨便搞搞型
LOGO+背景圖+Slogan(+版本號),這種最常見的啟動界面的設(shè)計(jì)模式。當(dāng)然,很多頁面的設(shè)計(jì)可謂簡約而不簡單,小哈之所以稱這種為隨便搞搞型,是因?yàn)檫@樣的啟動頁面顯然是最省心的,不用太多的考慮,話說可以達(dá)到增強(qiáng)品牌認(rèn)知的效果。然而,啟動界面一閃而過,既沒有對用戶進(jìn)行品牌教育,也沒有達(dá)到讓用戶有“無縫啟動”的感覺。
采用這種模式的,其實(shí)務(wù)必要好好搞搞。個(gè)人建議:
- 最背景主題的選取一要承上啟下:及要與APP圖標(biāo)顏色,等風(fēng)格等保持協(xié)調(diào),也要與應(yīng)用主頁保持一致。(如何設(shè)計(jì)App桌面圖標(biāo)?:http://www.jianshu.com/p/5c3958a8fd87)
- 要注意頁面的大小,圖片質(zhì)量保證的前提下,越小越好。
- 背景圖或者底紋一定要與APP主題想匹配,且不可只顧好看,隨便搞搞。
3、氣氛營造型
當(dāng)我們在各種假期,各種節(jié)日,當(dāng)然也可能是某應(yīng)用的生日的時(shí)候,我們會看到手機(jī)中APP的節(jié)日氛圍,比現(xiàn)實(shí)生活中要濃厚幾百倍。不多解釋,直接看實(shí)例:
此類啟動界面熱鬧就好,不過要是能把節(jié)日與自家APP特點(diǎn)結(jié)合下,那就更好啦。
4、信息強(qiáng)調(diào)型
信息強(qiáng)調(diào)型頁面與上面兩種有點(diǎn)類似,不同的是信息強(qiáng)調(diào)型不是單純的放上自己的LOGO,Slogan等,會更加有“氛圍”。與氣氛營造型比起來,會更加注重APP自身的宣傳,一般為某一功能或特點(diǎn)的認(rèn)知加強(qiáng)。PS:請忽略下圖中被玩壞的微信啟動頁面~
此類啟動界面?zhèn)€人認(rèn)為要注意的一點(diǎn)就是把握好尺度,不能因?yàn)樾畔⒌恼故径绊憜禹撁嫱A魰r(shí)間,短時(shí)間內(nèi)信息量不能太多。
5、擴(kuò)展定制型
人類在進(jìn)步,科技在發(fā)展。各大廠商在簡單的啟動界面上玩出了新花招。通過對啟動界面的定制擴(kuò)展,作出新的功能點(diǎn)。一般常規(guī)的做法就是在APP啟動界面出現(xiàn)之后,再次疊上一張頁面,而第二張頁面是比較容易被控制的,通過對第二張頁面的定制達(dá)到想要的效果。而用戶有時(shí)很容易誤會是一個(gè)頁面。
兩個(gè)例子對比(如下圖):左側(cè)新浪微博的啟動頁面中加入廣告時(shí),會順暢的過度。相反網(wǎng)易云音樂則會給人”閃屏”,廣告頁很突兀的跳出來。支付寶,同花順等同樣采用微博的做法。
該種模式玩出的新花樣舉例:
1,釘釘為企業(yè)定制屬于企業(yè)自己的啟動頁面。2,豆瓣:“每天一次遇見你”。
小結(jié)
合適的才是最好的,根據(jù)自己APP實(shí)際情況,選擇合適的啟動界面,給她一個(gè)優(yōu)雅的開場吧。
本文由 @HelloApp 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理?,未經(jīng)許可,禁止轉(zhuǎn)載。
測試用例,不用回復(fù)