Photoshop CC啟動(dòng)頁(yè)面

Adobe的每個(gè)版本的升級(jí)，新產(chǎn)品的啟動(dòng)畫(huà)面都會(huì)加強(qiáng)版的升級(jí)。手機(jī)APP同樣具有啟動(dòng)界面，手機(jī)每次啟動(dòng)一款A(yù)PP時(shí)，T都會(huì)出現(xiàn)，不管你看沒(méi)看到。啟動(dòng)界面的存在原因很簡(jiǎn)單，就是讓程序有一個(gè)“優(yōu)雅的出場(chǎng)”。不管是電腦軟件還是手機(jī)應(yīng)用，程序的啟動(dòng)都需要有一定的時(shí)間，或長(zhǎng)或短。應(yīng)用在加載，要給用戶(hù)以暗示和反饋：

1. 我的啟動(dòng)操作是有效的；
2. 軟件在啟動(dòng)過(guò)程中。

此處插句話：?jiǎn)?dòng)頁(yè)面與引導(dǎo)頁(yè)面的區(qū)別：

這個(gè)問(wèn)題在這里首先要說(shuō)說(shuō)清楚，啟動(dòng)頁(yè)面和引導(dǎo)頁(yè)面是不同的。發(fā)現(xiàn)有很多人會(huì)把引導(dǎo)頁(yè)面叫做啟動(dòng)頁(yè)面，這可能是因?yàn)閱?dòng)頁(yè)面的“曇花一現(xiàn)”，用戶(hù)更多的注意到引導(dǎo)頁(yè)面。其實(shí)區(qū)分他們并不難：

1. 啟動(dòng)頁(yè)面可以是無(wú)意義的，哪怕是一張白色圖片。而引導(dǎo)頁(yè)面勢(shì)必要起到引導(dǎo)的作用，可能是產(chǎn)品特色的展示，或者關(guān)鍵功能的引導(dǎo)，也或者是新功能迭代的展示等。
2. 啟動(dòng)界面是自動(dòng)消失的，而且一般是越快越好。（在啟動(dòng)界面添加廣告的鏈接會(huì)有倒計(jì)時(shí)，還要我們點(diǎn)跳過(guò)，有木有！好吧，待會(huì)再聊這個(gè)…）。而引導(dǎo)頁(yè)面一般要“逼”用戶(hù)一一拜讀完畢，才不情愿的離開(kāi)。
3. 這個(gè)是最明顯的：?jiǎn)?dòng)頁(yè)面會(huì)伴隨每一次APP啟動(dòng)時(shí)都會(huì)出現(xiàn)。而啟動(dòng)頁(yè)面一般只在新版本打開(kāi)的第一次才會(huì)出現(xiàn)。
4. 啟動(dòng)頁(yè)面一般只有一張。（好吧，有時(shí)候不是一張，這個(gè)也待會(huì)再說(shuō)…）,而引導(dǎo)頁(yè)面往往是一組，一組，一組。

那么，怎樣的啟動(dòng)頁(yè)面算是一個(gè)好的設(shè)計(jì)呢？

來(lái)，先看看蘋(píng)果怎么說(shuō)：

iOS5設(shè)計(jì)規(guī)范：“為了增強(qiáng)應(yīng)用程序啟動(dòng)時(shí)的用戶(hù)體驗(yàn)，您應(yīng)該提供一個(gè)啟動(dòng)圖像。啟動(dòng)圖像與應(yīng)用程序的首屏幕看起來(lái)非常相似。當(dāng)用戶(hù)在主屏幕上點(diǎn)擊您的應(yīng)用程序圖標(biāo)時(shí)，APP會(huì)立即顯示這個(gè)啟動(dòng)圖像。一旦準(zhǔn)備就緒，您的應(yīng)用程序就會(huì)顯示它的首屏幕，來(lái)替換掉這個(gè)啟動(dòng)占位圖像。請(qǐng)記住，啟動(dòng)圖像并不是為您提供機(jī)會(huì)進(jìn)行藝術(shù)展示；它完全是為了增強(qiáng)用戶(hù)對(duì)應(yīng)用程序能夠快速啟動(dòng)并立即投入使用的感知度?！?/p>

iOS7設(shè)計(jì)規(guī)范：“盡可能地避免使用無(wú)意義的啟動(dòng)畫(huà)面(歡迎畫(huà)面)或其他類(lèi)似的啟動(dòng)體驗(yàn)。最好讓用戶(hù)在啟動(dòng)你的應(yīng)用之后可以立刻開(kāi)始使用。”

來(lái)，再看看現(xiàn)在都有什么類(lèi)型的啟動(dòng)頁(yè)面：

在即合理，小哈把現(xiàn)有啟動(dòng)界面歸為如圖示的五大類(lèi)：假裝沒(méi)有型，隨便搞搞型，氣氛營(yíng)造型，信息強(qiáng)調(diào)型，以及擴(kuò)展定制型。下面即分別對(duì)這五類(lèi)進(jìn)行一一介紹，以及對(duì)應(yīng)的要注意的一些設(shè)計(jì)細(xì)節(jié)。

1、假裝沒(méi)有型

正如iOS9中建議那樣，盡量讓用戶(hù)不去感知啟動(dòng)頁(yè)面的存在，“無(wú)縫”進(jìn)入到應(yīng)用中去。由于智能手機(jī)性能的不斷提升，當(dāng)APP本身體量很小的時(shí)候，基本可以瞬間啟動(dòng)完成。但是啟動(dòng)頁(yè)面是仍然存在的，至少對(duì)于iOS系統(tǒng)來(lái)說(shuō)是這樣的，實(shí)現(xiàn)這種“沒(méi)有感知”的效果，一般是把用APP首頁(yè)背景作為圖作為啟動(dòng)頁(yè)面，或者是首頁(yè)中首先加載的部分狀態(tài)圖作為啟動(dòng)頁(yè)面。從啟動(dòng)頁(yè)面到首頁(yè)的轉(zhuǎn)換實(shí)現(xiàn)無(wú)縫轉(zhuǎn)接。下圖分別為：Safari,天氣，APP Store的啟動(dòng)頁(yè)面。

采用此類(lèi)啟動(dòng)頁(yè)面的APP要注意兩個(gè)細(xì)節(jié)：a，評(píng)估好APP自身的體量，保證啟動(dòng)的流暢、快速。b，啟動(dòng)界面的選取上，要配合首頁(yè)的加載機(jī)制，選取合適的加載狀態(tài)截圖，以保證與啟動(dòng)后首頁(yè)頁(yè)面的銜接。

2、隨便搞搞型

LOGO+背景圖+Slogan（+版本號(hào)），這種最常見(jiàn)的啟動(dòng)界面的設(shè)計(jì)模式。當(dāng)然，很多頁(yè)面的設(shè)計(jì)可謂簡(jiǎn)約而不簡(jiǎn)單，小哈之所以稱(chēng)這種為隨便搞搞型，是因?yàn)檫@樣的啟動(dòng)頁(yè)面顯然是最省心的，不用太多的考慮，話說(shuō)可以達(dá)到增強(qiáng)品牌認(rèn)知的效果。然而，啟動(dòng)界面一閃而過(guò)，既沒(méi)有對(duì)用戶(hù)進(jìn)行品牌教育，也沒(méi)有達(dá)到讓用戶(hù)有“無(wú)縫啟動(dòng)”的感覺(jué)。

采用這種模式的，其實(shí)務(wù)必要好好搞搞。個(gè)人建議：

1. 最背景主題的選取一要承上啟下：及要與APP圖標(biāo)顏色，等風(fēng)格等保持協(xié)調(diào)，也要與應(yīng)用主頁(yè)保持一致。（如何設(shè)計(jì)App桌面圖標(biāo)？：http://www.jianshu.com/p/5c3958a8fd87）
2. 要注意頁(yè)面的大小，圖片質(zhì)量保證的前提下，越小越好。
3. 背景圖或者底紋一定要與APP主題想匹配，且不可只顧好看，隨便搞搞。

3、氣氛營(yíng)造型

當(dāng)我們?cè)诟鞣N假期，各種節(jié)日，當(dāng)然也可能是某應(yīng)用的生日的時(shí)候，我們會(huì)看到手機(jī)中APP的節(jié)日氛圍，比現(xiàn)實(shí)生活中要濃厚幾百倍。不多解釋?zhuān)苯涌磳?shí)例：

此類(lèi)啟動(dòng)界面熱鬧就好，不過(guò)要是能把節(jié)日與自家APP特點(diǎn)結(jié)合下，那就更好啦。

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

信息強(qiáng)調(diào)型頁(yè)面與上面兩種有點(diǎn)類(lèi)似，不同的是信息強(qiáng)調(diào)型不是單純的放上自己的LOGO，Slogan等，會(huì)更加有“氛圍”。與氣氛營(yíng)造型比起來(lái)，會(huì)更加注重APP自身的宣傳，一般為某一功能或特點(diǎn)的認(rèn)知加強(qiáng)。PS：請(qǐng)忽略下圖中被玩壞的微信啟動(dòng)頁(yè)面~

此類(lèi)啟動(dòng)界面?zhèn)€人認(rèn)為要注意的一點(diǎn)就是把握好尺度，不能因?yàn)樾畔⒌恼故径绊憜?dòng)頁(yè)面停留時(shí)間，短時(shí)間內(nèi)信息量不能太多。

5、擴(kuò)展定制型

人類(lèi)在進(jìn)步，科技在發(fā)展。各大廠商在簡(jiǎn)單的啟動(dòng)界面上玩出了新花招。通過(guò)對(duì)啟動(dòng)界面的定制擴(kuò)展，作出新的功能點(diǎn)。一般常規(guī)的做法就是在APP啟動(dòng)界面出現(xiàn)之后，再次疊上一張頁(yè)面，而第二張頁(yè)面是比較容易被控制的，通過(guò)對(duì)第二張頁(yè)面的定制達(dá)到想要的效果。而用戶(hù)有時(shí)很容易誤會(huì)是一個(gè)頁(yè)面。

兩個(gè)例子對(duì)比（如下圖）：左側(cè)新浪微博的啟動(dòng)頁(yè)面中加入廣告時(shí)，會(huì)順暢的過(guò)度。相反網(wǎng)易云音樂(lè)則會(huì)給人”閃屏”，廣告頁(yè)很突兀的跳出來(lái)。支付寶，同花順等同樣采用微博的做法。

該種模式玩出的新花樣舉例：

1，釘釘為企業(yè)定制屬于企業(yè)自己的啟動(dòng)頁(yè)面。2，豆瓣：“每天一次遇見(jiàn)你”。

小結(jié)

合適的才是最好的，根據(jù)自己APP實(shí)際情況，選擇合適的啟動(dòng)界面，給她一個(gè)優(yōu)雅的開(kāi)場(chǎng)吧。

點(diǎn)我！點(diǎn)我！這里有海量啟動(dòng)頁(yè)面圖！

本文由 @HelloApp 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理?，未經(jīng)許可，禁止轉(zhuǎn)載。