淺析App啟動(dòng)頁(yè)分類設(shè)計(jì)

2022-06-17    分類: 網(wǎng)站建設(shè)

啟動(dòng)頁(yè)的作用很多,在緩解用戶等待焦慮的同時(shí),也能夠通過(guò)啟動(dòng)頁(yè)來(lái)奠定品牌的基調(diào)或者實(shí)現(xiàn)商業(yè)價(jià)值,其重要性可見(jiàn)一斑。

首先簡(jiǎn)要的概括一下什么是啟動(dòng)頁(yè):每次喚起一個(gè)app的時(shí)候,在進(jìn)入app首頁(yè)之前的等待頁(yè)面。

文章目錄如下:

啟動(dòng)頁(yè)設(shè)計(jì)目的

啟動(dòng)頁(yè)分類及樣式

啟動(dòng)頁(yè)邏輯及細(xì)節(jié)

一、啟動(dòng)頁(yè)設(shè)計(jì)目的

當(dāng)用戶點(diǎn)開app時(shí),需要對(duì)于app內(nèi)的素材進(jìn)行加載,比如說(shuō)加載圖片信息等等,為了給用戶呈現(xiàn)一個(gè)完整友好的app界面,這個(gè)加載素材的過(guò)程需要一定的時(shí)間,為了讓用戶在等待這一小段時(shí)間的時(shí)候減少一些困惑,啟動(dòng)頁(yè)這個(gè)模塊就應(yīng)然而生了。

剛才提到的困惑會(huì)有很多種,比如說(shuō)用戶在知道app啟動(dòng)需要等待時(shí)間的情況下,啟動(dòng)頁(yè)可以減少用戶因?yàn)榈却龁?dòng)時(shí)間而產(chǎn)生的無(wú)聊的情緒;用戶也極有可能不知道app啟動(dòng)需要等待時(shí)間,如果沒(méi)有啟動(dòng)頁(yè)這樣一個(gè)模塊,會(huì)讓用戶產(chǎn)生很大的困惑,我的手機(jī)卡死了嗎?還是這個(gè)app有問(wèn)題?等等…

二、啟動(dòng)頁(yè)分類及樣式

啟動(dòng)頁(yè)大致可以分為以下四類:


第一類:品牌展示

這類是最常見(jiàn)的,在啟動(dòng)頁(yè)展示的信息包括app名稱、icon及slogan,界面簡(jiǎn)單清晰,加深用戶對(duì)于品牌的認(rèn)知,整體的顏色風(fēng)格也遵從app界面的設(shè)計(jì)風(fēng)格,讓用戶提前熟悉app的樣式風(fēng)格。

第二類:廣告展示、活動(dòng)展示

這一類中包含廣告展示和活動(dòng)展示兩個(gè)小類,廣告展示對(duì)外,app與廣告商家談好合作,在app的啟動(dòng)頁(yè)展示廣告商家的廣告信息,當(dāng)此app積累下來(lái)的流量已經(jīng)形成一定的規(guī)模,足夠進(jìn)行分發(fā)的時(shí)候,可以用這種廣告展示的方法進(jìn)行流量的變現(xiàn),通常使用這類啟動(dòng)頁(yè)方式的app為通過(guò)廣告作為變現(xiàn)的一種方式的app。常見(jiàn)的如網(wǎng)易系列的產(chǎn)品?;顒?dòng)展示對(duì)內(nèi),如app內(nèi)一些運(yùn)營(yíng)的活動(dòng)需要進(jìn)行推廣,app啟動(dòng)頁(yè)就承擔(dān)了這個(gè)職責(zé),在用戶第一時(shí)間進(jìn)入這個(gè)app的時(shí)候就能看見(jiàn)app的活動(dòng)有哪些。

第三類:內(nèi)容展示

這一類較前兩種來(lái)說(shuō)比較少見(jiàn),啟動(dòng)頁(yè)的內(nèi)容與app的內(nèi)容相關(guān)聯(lián),不僅僅展示出app的活動(dòng),同時(shí)也會(huì)摻雜進(jìn)app自身的設(shè)計(jì)元素在里面。如圖蟲網(wǎng)app,一個(gè)攝影朋友圈,在啟動(dòng)頁(yè)的展示內(nèi)容就是用戶上傳的優(yōu)質(zhì)攝影,這樣不僅僅符合自身的攝影元素,同時(shí)保持了啟動(dòng)頁(yè)的格調(diào)美感,還向用戶提前展示了優(yōu)質(zhì)的原創(chuàng)內(nèi)容。

第四類:背景底色

這一類也是比較少見(jiàn),啟動(dòng)頁(yè)主體顏色樣式采用和app首頁(yè)相同的顏色樣式,目的是在于讓用戶提前熟悉一下app的頁(yè)面風(fēng)格,這種啟動(dòng)頁(yè)符合啟動(dòng)頁(yè)設(shè)計(jì)的初衷,既然最初啟動(dòng)頁(yè)的目的是為了讓用戶不那么無(wú)聊,那么就在這一小段時(shí)間里,提前讓用戶從視覺(jué)上熟悉了解一下app的框架。


在AppStore上排名前一百名的app里面,我人工的統(tǒng)計(jì)了一下每個(gè)app的啟動(dòng)頁(yè)樣式及分類,如上圖展示。

由此可以看出,品牌展示占了絕大多數(shù),現(xiàn)在主流的app都是以輸出自己的品牌文化為主,更加注重自己的風(fēng)格調(diào)性;其次是活動(dòng)廣告類,主要是以網(wǎng)易的產(chǎn)品為主,都是用的同樣的框架。

值得注意的一點(diǎn),有3款app沒(méi)有自己的啟動(dòng)頁(yè),這三款都是美化拍攝類的app,faceu、美顏相機(jī)等,這類APP的用戶打開應(yīng)用的主要目的是美妝自拍,更急迫的想直接使用app提供的功能,外加上首頁(yè)進(jìn)來(lái)就是自拍,都是本地的參數(shù),不需要去服務(wù)器調(diào)取參數(shù),所以就免去了啟動(dòng)頁(yè)的功能。

三、啟動(dòng)頁(yè)邏輯及細(xì)節(jié)

這里就列舉最常用的兩類啟動(dòng)頁(yè)類型:品牌展示、活動(dòng)廣告展示,這兩種。

品牌展示

在啟動(dòng)頁(yè)展示的信息包括app名稱、icon及slogan,屬于靜態(tài)的啟動(dòng)頁(yè),在一次版本迭代中,app的名稱、icon、slogan都是不會(huì)變的,若是上述三點(diǎn)有所改變,那一定會(huì)是一個(gè)新的版本迭代,所以品牌展示類型的啟動(dòng)頁(yè),就會(huì)是一張長(zhǎng)寬定好的圖片。在展示啟動(dòng)頁(yè)的過(guò)程中,app向服務(wù)器請(qǐng)求的是app的內(nèi)容,而與啟動(dòng)頁(yè)的內(nèi)容無(wú)關(guān)。

品牌展示類型的啟動(dòng)頁(yè)需要注重的細(xì)節(jié),就是視覺(jué)上的樣式問(wèn)題。UI設(shè)計(jì)的事情暫且不做太多討論。在產(chǎn)品上需要注重的細(xì)節(jié)問(wèn)題不多,這里想到的一點(diǎn)就是“跳過(guò)”按鈕。我們?cè)趩?dòng)頁(yè),都會(huì)看到有一個(gè)跳過(guò)的按鈕,這個(gè)按鈕的意義在于,對(duì)于用戶可以跳過(guò)自己不想看的啟動(dòng)頁(yè)內(nèi)容,對(duì)于app來(lái)說(shuō),首頁(yè)需要的參數(shù)信息已經(jīng)向服務(wù)器請(qǐng)求完畢,可以讓用戶自己選擇他們停留在啟動(dòng)頁(yè)的時(shí)長(zhǎng)。

活動(dòng)廣告展示

將廣告商家和自己活動(dòng)的信息展示在啟動(dòng)頁(yè)中,屬于動(dòng)態(tài)的啟動(dòng)頁(yè)。每天每時(shí)每刻,啟動(dòng)頁(yè)上展示的內(nèi)容都可能不一樣。在app啟動(dòng)的時(shí)候,不僅僅需要向服務(wù)器請(qǐng)求app首頁(yè)的參數(shù),同時(shí)需要向服務(wù)器請(qǐng)求啟動(dòng)頁(yè)的參數(shù)?,F(xiàn)在的活動(dòng)廣告展示,只占了一整個(gè)屏幕的一部分,我們舉個(gè)例子進(jìn)行說(shuō)明。


網(wǎng)易云音樂(lè)的啟動(dòng)頁(yè)樣式如上圖,下方的是本地默認(rèn)模板,在用戶下載apk包的時(shí)候自帶的。上方的組件是線上讀取廣告,從線上讀取廣告之后,緩存在本地中,每次啟動(dòng)app的時(shí)候展示出來(lái),下次再次啟動(dòng)app的時(shí)候,先向服務(wù)器調(diào)取參數(shù),看看線上有沒(méi)有更新廣告,如果有更新,則需要下載最新一版的,如果沒(méi)有更新,則展示本地緩存的廣告。

活動(dòng)廣告類型的啟動(dòng)頁(yè),需要注意的細(xì)節(jié)問(wèn)題就要比品牌展示類多得多。主要有兩塊細(xì)節(jié)問(wèn)題,弱網(wǎng)環(huán)境下的下載問(wèn)題、廣告CMS管理。

如果處于弱網(wǎng)或者斷網(wǎng)的情況下,app不能一直請(qǐng)求啟動(dòng)頁(yè)或者app的參數(shù),那樣會(huì)一直停留在啟動(dòng)頁(yè)上沒(méi)有其他的交互,用戶會(huì)認(rèn)為app卡死了或者手機(jī)出了什么問(wèn)題。所以會(huì)需要一個(gè)下載啟動(dòng)頁(yè)素材的時(shí)間,超過(guò)這段時(shí)間,就要默認(rèn)的播放本地的緩存,以免影響用戶體驗(yàn)。這樣一來(lái),啟動(dòng)頁(yè)的時(shí)間就被分成兩塊:一是下載素材、回調(diào)參數(shù)的時(shí)間,二是播放啟動(dòng)頁(yè)的時(shí)間。每段時(shí)間都要設(shè)置一個(gè)閾值上限。若超過(guò)這個(gè)閾值上限,就要自動(dòng)的跳過(guò)這個(gè)流程,這樣才能保證啟動(dòng)頁(yè)的流暢及友好的用戶體驗(yàn)。

第二塊需要注意的細(xì)節(jié)就是廣告CMS管理,我們都遇見(jiàn)過(guò)這個(gè)功能點(diǎn),在啟動(dòng)頁(yè)觀看廣告的時(shí)候,都會(huì)有一個(gè)“跳過(guò)”按鈕,點(diǎn)擊跳過(guò),進(jìn)入app首頁(yè)。淺顯的剖析一下“跳過(guò)”按鈕功能點(diǎn),我們可以快速的找到它的設(shè)計(jì)原因,用戶覺(jué)得廣告太過(guò)于枯燥,或者更想快速的使用app,就會(huì)點(diǎn)擊跳過(guò)。如果能對(duì)廣告商家提供的廣告搭建一個(gè)CMS管理中心,對(duì)廣告進(jìn)行打標(biāo)簽處理,再根據(jù)用戶畫像的分類,對(duì)不同的用戶進(jìn)行精準(zhǔn)投遞,通過(guò)這樣的方法延長(zhǎng)用戶觀看廣告的平均時(shí)長(zhǎng),使廣告的價(jià)值大化,對(duì)KPI也有很大的提升。

當(dāng)前標(biāo)題:淺析App啟動(dòng)頁(yè)分類設(shè)計(jì)
本文網(wǎng)址:http://www.bm7419.com/news24/168424.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供建站公司、網(wǎng)站設(shè)計(jì)公司、App設(shè)計(jì)網(wǎng)站策劃、用戶體驗(yàn)、網(wǎng)站導(dǎo)航

廣告

聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)

網(wǎng)站托管運(yùn)營(yíng)