第一印象很重要！訪問網(wǎng)站或應(yīng)用程序的訪問者根據(jù)應(yīng)用程序/網(wǎng)站的初始外觀判斷他們是否可以信任其背后的公司。

我們的大腦有助于做出快速判斷。只需十分之一秒即可形成關(guān)于某人的第一印象，而應(yīng)用和網(wǎng)站也不例外。谷歌的一項(xiàng)研究發(fā)現(xiàn)，用戶需要大約50毫秒（即0.05秒）來形成對(duì)您網(wǎng)站的意見，以確定他們是留下還是離開。

對(duì)于原生移動(dòng)應(yīng)用程序來說，Web的真實(shí)情況也是如此。移動(dòng)應(yīng)用程序沒有很多機(jī)會(huì)來保留和吸引用戶。事實(shí)上，下載應(yīng)用程序的人中有80％在最初幾天后消失并不罕見。

那你如何解決創(chuàng)造快速感知的問題呢？

讓我們來看看其他藝術(shù)形式如何處理它們?nèi)绾螒?yīng)對(duì)感知挑戰(zhàn)。Saul Bass是一位革命性的電影信用設(shè)計(jì)師，他談到了起點(diǎn)學(xué)分如何對(duì)電影和電視節(jié)目至關(guān)重要。

“我有一段時(shí)間感覺觀眾參與電影應(yīng)該從第一幀開始。在那之前，標(biāo)題往往是無聊信用的列表，大多數(shù)被忽略，忍受或用作爆米花時(shí)間。

似乎有一個(gè)真正的機(jī)會(huì)以一種新的方式使用標(biāo)題 - 實(shí)際上為即將展開的故事創(chuàng)造了一個(gè)氣氛?！?-? Saul Bass

與Saul一樣，用戶對(duì)應(yīng)用程序的介入應(yīng)從第一幀開始（在我們的案例中為應(yīng)用程序圖標(biāo)），并繼續(xù)直到真實(shí)內(nèi)容加載，即 啟動(dòng)體驗(yàn)，為我們的故事展開創(chuàng)造完美的環(huán)境。

如果您想了解更多有關(guān)音樂行業(yè)如何使用專輯封面創(chuàng)造初步感知的信息，請(qǐng)查看此視頻，了解甲殼蟲樂隊(duì)如何通過使用創(chuàng)新的專輯封面來改變音樂行業(yè)，從而徹底改變“發(fā)布體驗(yàn)”。

移動(dòng)應(yīng)用程序，特別是新創(chuàng)公司，必須考慮他們對(duì)用戶的第一印象。速度，正確的消息傳遞和極具吸引力的價(jià)值主張，以及出色的入職培訓(xùn)是這種印象的關(guān)鍵考慮因素。

在這篇文章中，我們將只關(guān)注由移動(dòng)應(yīng)用程序啟動(dòng)體驗(yàn)創(chuàng)建的第一印象創(chuàng)建的視覺感知。正確的發(fā)布體驗(yàn)吸引并處理用戶潛意識(shí)，并幫助創(chuàng)建正確的感知，有望幫助您保留和吸引合適的用戶。

有關(guān)使用發(fā)布體驗(yàn)的分步指南，可為您的移動(dòng)應(yīng)用創(chuàng)建良好的第一印象

在深入探討設(shè)計(jì)策略之前，讓我們先了解一下發(fā)布體驗(yàn)和啟動(dòng)畫面的基礎(chǔ)知識(shí)。

什么是發(fā)布體驗(yàn)？

啟動(dòng)體驗(yàn)是一組移動(dòng)設(shè)計(jì)模式，有助于創(chuàng)建一個(gè)緊密的體驗(yàn)，從用戶點(diǎn)擊應(yīng)用程序圖標(biāo)到內(nèi)容加載到屏幕上。

破解時(shí)，發(fā)布經(jīng)驗(yàn)通常包含這些組件 -

應(yīng)用圖標(biāo)

Zenly App圖標(biāo)

2.啟動(dòng)畫面

Wonder App的啟動(dòng)畫面

3.啟動(dòng)屏幕到應(yīng)用程序數(shù)據(jù)轉(zhuǎn)換

優(yōu)步App發(fā)布經(jīng)驗(yàn)

4.使用骨架屏幕啟動(dòng)屏幕

Slack在發(fā)布體驗(yàn)中使用了骷髏屏幕

5.當(dāng)數(shù)據(jù)太多時(shí)內(nèi)容加載動(dòng)畫

食用

啟動(dòng)畫面與啟動(dòng)畫面

在Apple的生態(tài)系統(tǒng)中，啟動(dòng)屏幕是一個(gè)在您啟動(dòng)應(yīng)用程序時(shí)立即顯示的圖像。開發(fā)人員在他們的XCode項(xiàng)目中定義此圖像。Apple建議使用應(yīng)用主窗口的屏幕截圖，以便您的應(yīng)用啟動(dòng)速度更快。

啟動(dòng)畫面的一個(gè)示例是手機(jī)游戲使用的屏幕，您可以在其中查看品牌和其他信息。

以下是Apple關(guān)于使用Splash Screen的說法。

設(shè)計(jì)一個(gè)與應(yīng)用程序的第一個(gè)屏幕幾乎相同的啟動(dòng)屏幕。如果您在應(yīng)用程序完成啟動(dòng)時(shí)包含看起來不同的元素，則人們可能會(huì)在啟動(dòng)屏幕和應(yīng)用程序的第一個(gè)屏幕之間遇到令人不快的閃光。

不要做廣告。發(fā)布屏幕不是品牌推廣機(jī)會(huì)。不要設(shè)計(jì)看起來像啟動(dòng)畫面或“關(guān)于”窗口的入口體驗(yàn)。不要包含徽標(biāo)或其他品牌元素，除非它們是應(yīng)用程序第一個(gè)屏幕的靜態(tài)部分。

相反，Android將這兩種類型的屏幕視為啟動(dòng)屏幕， Google實(shí)際上與Apple有不同的視角。

您可能會(huì)驚訝地聽到谷歌推薦使用閃屏，他們稱之為“品牌發(fā)布”。您可以在材料設(shè)計(jì)規(guī)范中閱讀更多相關(guān)信息。情況并非總是如此; 谷歌曾經(jīng)主張反對(duì)啟動(dòng)畫面，甚至稱它為反模式。

那么設(shè)計(jì)師在面對(duì)沖突的指導(dǎo)方針時(shí)應(yīng)該使用什么？

啟動(dòng)畫面是應(yīng)用程序體驗(yàn)的入口。通過模擬更快的加載時(shí)間和創(chuàng)建無縫的啟動(dòng)體驗(yàn)，Splash屏幕可以改善用戶體驗(yàn)。創(chuàng)意使用時(shí)，啟動(dòng)屏幕還有助于設(shè)置用戶的心情并為即將到來的內(nèi)容做好準(zhǔn)備。因此，請(qǐng)記住這些事項(xiàng)，我們建議使用Splash屏幕。

設(shè)計(jì)不是它的外觀，而是它的工作方式并解決了特定的用戶問題。那么，發(fā)布經(jīng)驗(yàn)解決了什么？

他們對(duì)潛意識(shí)的用戶說話并設(shè)定對(duì)即將到來的期望。

它們通過隱藏加載過程來減少感知的等待時(shí)間。

他們向用戶介紹應(yīng)用程序和您的品牌的用途。

它們?yōu)橛脩籼峁┝擞淇斓捏w驗(yàn)。

我們?cè)趹?yīng)用程序商店中經(jīng)歷了超過1,000個(gè)應(yīng)用程序，發(fā)現(xiàn)有些應(yīng)用程序通過使用啟動(dòng)畫面構(gòu)建了驚人的啟動(dòng)體驗(yàn)。

這使我們的列表縮小到5種設(shè)計(jì)出色的發(fā)布體驗(yàn)的方法，有效地吸引了我們的注意力：

1.更改應(yīng)用程序的圖標(biāo)以個(gè)性化每個(gè)用戶的啟動(dòng)體驗(yàn)

從iOS 10開始，開發(fā)人員可以為個(gè)性化設(shè)置預(yù)定義的應(yīng)用程序圖標(biāo)。正如您所看到的，MLB應(yīng)用程序允許用戶選擇他們團(tuán)隊(duì)的圖標(biāo)，Bear允許用戶根據(jù)他們的主題顏色更改顏色，而Pedometer ++允許用戶以輪椅作為圖標(biāo)。

熊App圖標(biāo)定制

這些應(yīng)用程序允許用戶自定義其應(yīng)用程序圖標(biāo)

以下是Zenly應(yīng)用程序如何使用應(yīng)用程序圖標(biāo)個(gè)性化向其應(yīng)用程序添加游戲化元素。每個(gè)級(jí)別的新應(yīng)用程序圖標(biāo)都可以為該用戶解鎖，然后他可以自定義應(yīng)用程序體驗(yàn)。

2.通過品牌推廣和直接價(jià)值主張來傳達(dá)屏幕，傳達(dá)信息

您的移動(dòng)應(yīng)用程序的啟動(dòng)屏幕可視為您的營(yíng)銷活動(dòng)的延續(xù)。因此，只要用戶打開應(yīng)用程序，它就會(huì)強(qiáng)化應(yīng)用程序的品牌。

如果您的應(yīng)用程序未知，您還可以在啟動(dòng)畫面中使用直接價(jià)值主張，因?yàn)樗谝曈X上強(qiáng)調(diào)了應(yīng)用程序的用途。這些類型的閃屏通常具有漂亮的圖像，有助于設(shè)置用戶的期望。

您可以看到Estate.ly，Lily Pulitzer和應(yīng)用程序如何使用Splash屏幕直接將用戶的品牌信息強(qiáng)制執(zhí)行。圖像會(huì)立即提供有關(guān)應(yīng)用程序內(nèi)容的背景信息。

在這里，History，DocuSign和Ted Applications正在使用Splash屏幕強(qiáng)化其價(jià)值主張。

Calm擁有最好的閃屏之一，可以延續(xù)其價(jià)值主張并為用戶樹立心情。

3.使用交互設(shè)計(jì)從啟動(dòng)畫面到應(yīng)用數(shù)據(jù)的無縫體驗(yàn)

飛濺屏幕是好地方持有人。那之后呢？

在顯示靜態(tài)屏幕時(shí)啟動(dòng)應(yīng)用程序會(huì)增加其感知的加載時(shí)間。如果您可以合并動(dòng)畫，那么您可以幫助設(shè)定即將到來的情緒。

了解Ticketmaster，Uber和Twitter如何利用交互設(shè)計(jì)在啟動(dòng)畫面與應(yīng)用內(nèi)容之間建立無縫橋梁。

Google，TinyFax和Cinamatic應(yīng)用程序使用動(dòng)畫將徽標(biāo)輕微轉(zhuǎn)換為內(nèi)容。

類似地，Turo，StumbleUpon和Soundhound使用不那么微妙的動(dòng)畫來從啟動(dòng)畫面轉(zhuǎn)換到內(nèi)容。

然而，22Tracks，RoambiAnalytics和Carrot保持簡(jiǎn)單。這些應(yīng)用程序?qū)⑵浠諛?biāo)用作閃存屏幕的主要品牌技術(shù)。

Chick-fil-A One通過動(dòng)畫和其用戶的儀表板為他們的啟動(dòng)畫面增添了幾分。

4.啟動(dòng)屏幕與Skeleton屏幕相結(jié)合，以避免反饋循環(huán)空虛

對(duì)于許多應(yīng)用程序，使用帶有骨架屏幕的空啟動(dòng)屏幕更有意義。這些應(yīng)用程序通常很輕，負(fù)載非常快。我們建議將骨架屏幕與這些應(yīng)用程序混合，以獲得無縫體驗(yàn)。

這些應(yīng)用程序的啟動(dòng)畫面具有某種形式的主加載屏幕骨架。呼吸應(yīng)用程序使用類似于其主要內(nèi)容屏幕的彩色骨架。Transit應(yīng)用程序使用地圖的骨架作為其啟動(dòng)畫面，以便在用戶點(diǎn)按應(yīng)用程序圖標(biāo)時(shí)立即創(chuàng)建應(yīng)用已加載的展示。

Apple自己的Compass應(yīng)用程序，F(xiàn)oursquare和Epicurious應(yīng)用程序使用Skeletons和動(dòng)畫來購(gòu)買時(shí)間，同時(shí)給人一種“即將來臨”的印象。

Snow App，Dribbble和Launch Pro使用最少的骨架。

5.加載動(dòng)畫以便在創(chuàng)造有趣體驗(yàn)的同時(shí)為您節(jié)省時(shí)間

除了游戲，還有其他需要大量加載時(shí)間的應(yīng)用程序。例如，某些應(yīng)用需要加載大量數(shù)據(jù)，如視頻，音頻，甚至刷新整個(gè)內(nèi)容。對(duì)于這些類型的應(yīng)用程序，更長(zhǎng)的動(dòng)畫更有意義。隨著數(shù)據(jù)緩存和加載時(shí)間變短，此動(dòng)畫可以變得越來越短。

Vogue Runway，Pandora和Zova在這里使用加載動(dòng)畫來加載數(shù)據(jù)，這樣用戶就不會(huì)感受到等待時(shí)間。裝載機(jī)已經(jīng)在網(wǎng)絡(luò)應(yīng)用程序中使用了很長(zhǎng)時(shí)間，但對(duì)于移動(dòng)設(shè)備而言，它最近才開始流行。

Clashem，Tumbleweed和Chefsfeed使用有趣的動(dòng)畫來繼續(xù)他們的品牌體驗(yàn)，同時(shí)應(yīng)用程序加載他們的數(shù)據(jù)。

Vogue，History Vault和Dollarshave俱樂部應(yīng)用程序再次創(chuàng)造性地使用動(dòng)畫，似乎等待時(shí)間更短。不可否認(rèn)，Dollarshaveclub的應(yīng)用程序似乎沒有那么多數(shù)據(jù)可以在動(dòng)畫上花費(fèi)這么多時(shí)間。

來自15s，Zocdoc和Vimo的更多示例使用無縫加載動(dòng)畫來創(chuàng)建有趣的體驗(yàn)。

最大的收獲：

你應(yīng)該多長(zhǎng)時(shí)間顯示閃屏？確切地說，應(yīng)用程序配置自身并加載數(shù)據(jù)所需的時(shí)間。

根據(jù)您認(rèn)為適合不同使用時(shí)間和用戶的情況自定義啟動(dòng)體驗(yàn)。

您還可以根據(jù)用戶生命周期的不同階段使用不同的啟動(dòng)體驗(yàn)（初始屏幕，營(yíng)銷信息，動(dòng)畫）。例如，對(duì)于正在入職的用戶使用不同的感知和消息，并為高度敬業(yè)的人使用不同的發(fā)布體驗(yàn)。

不同類型的數(shù)據(jù)繁重的應(yīng)用需要不同類型的發(fā)布體驗(yàn)。如果應(yīng)用程序大小較輕且可以更快地啟動(dòng)，則使用帶有骨架屏幕的啟動(dòng)屏幕。

相反，您有很多選項(xiàng)可以自定義整個(gè)啟動(dòng)體驗(yàn)。喜歡使用：

傳達(dá)目的的圖像。

動(dòng)畫使發(fā)射體驗(yàn)成為一個(gè)門戶。

盡可能使用獨(dú)特的應(yīng)用圖標(biāo)來強(qiáng)制執(zhí)行品牌宣傳。

在你離開之前 - 這是給你的獎(jiǎng)金！在Mobile Patterns上查看免費(fèi)精心挑選的iOS和Android應(yīng)用程序的靈感Splash Screens ?- 一個(gè)設(shè)計(jì)中關(guān)鍵玩家的模式庫(kù)。