APP設(shè)計(jì)之路(二)——APP引導(dǎo)頁(yè)

上篇我們討論了APP啟動(dòng)頁(yè),今天小編就帶大家說(shuō)說(shuō)引導(dǎo)頁(yè)的那些事。什么是引導(dǎo)頁(yè)呢?當(dāng)我們打開(kāi)APP閃屏過(guò)后的那幾張頁(yè)面就是我們今天要說(shuō)的引導(dǎo)頁(yè)了(大家應(yīng)該都知道吧,大神跳過(guò)),它的出現(xiàn)通常是一組頁(yè)面,一般是3~4張,最少不少于3張。引導(dǎo)頁(yè)這塊風(fēng)水寶地已經(jīng)被各大商業(yè)大佬看作是搶奪市場(chǎng)先機(jī)的咽喉要塞,它可以用來(lái)闡述APP的功能或者是引導(dǎo)用戶如何操作APP,又或者是版本迭代后全新功能、視覺(jué)界面體驗(yàn)的載體,所以每個(gè)公司都在極力想法設(shè)法的把這塊做好,怎么做才會(huì)引人入勝,過(guò)目不忘呢?這是值得大家思考的問(wèn)題。好了,廢話不多說(shuō),下面就讓我們談?wù)勥@個(gè)讓人欲罷不能的引導(dǎo)頁(yè)思密達(dá)。


一、分類

根據(jù)所要表達(dá)的目的和出發(fā)點(diǎn)的不同,我們可以把引導(dǎo)頁(yè)分為5大類:

1.功能介紹類

這個(gè)類型也是最為普遍的一種,被各大公司所使用著,這種類型的設(shè)計(jì)旨在用戶進(jìn)入首頁(yè)之前向用戶展示APP的核心功能。一般采用圖文結(jié)合的表現(xiàn)形式。以下是這類APP的截圖:

京東


2.品牌強(qiáng)化類

這類引導(dǎo)頁(yè)除了向用戶展示APP的功能外,還會(huì)帶有品牌的傳遞,設(shè)計(jì)者更多的是要表達(dá)產(chǎn)品的態(tài)度和做產(chǎn)品的情懷。所以這類引導(dǎo)頁(yè)對(duì)設(shè)計(jì)者有一點(diǎn)難度,你必須精準(zhǔn)定位你的配色、布局、頁(yè)面元素的空間比例和大小比例,必須確保你的頁(yè)面風(fēng)格和主題風(fēng)格一致。要不然心猿意馬的設(shè)計(jì)只會(huì)是南轅北轍的下場(chǎng)。以下是這類APP的截圖:

網(wǎng)易云音樂(lè)
航旅縱橫


3.問(wèn)題解決類

這類引導(dǎo)頁(yè)一般會(huì)以上“?文字+界面”的形式呈現(xiàn)出來(lái),告訴用戶這東西怎么用。這類設(shè)計(jì)一定要簡(jiǎn)潔、干凈,突出主要表達(dá)的思想就行,讓人看了一目了然,切不可胡亂設(shè)計(jì),畫蛇添足。有些APP會(huì)在第一次進(jìn)入時(shí)也會(huì)出現(xiàn)指引頁(yè)(我習(xí)慣叫它內(nèi)部指引頁(yè)),這種指引頁(yè)會(huì)以蒙版加透明度作為背景,“文字+圖案”或者,“文字+小插畫”的形式呈現(xiàn),內(nèi)容顏色一般為白色,具體設(shè)計(jì)還是以產(chǎn)品為導(dǎo)向進(jìn)行。以下是這類APP的截圖:

螞蟻聚寶



4.版本迭代類

這類引導(dǎo)頁(yè)也是最為常見(jiàn)的一種,它頁(yè)面承載的內(nèi)容也很簡(jiǎn)單直觀,就是像用戶說(shuō)明新版本中有什么新功能加入或者是界面的改版等等。以下是這類APP的截圖:


二、表現(xiàn)形式

1.文字+界面

這類頁(yè)面以文字(大標(biāo)題+小標(biāo)題)+功能界面的形式呈現(xiàn)出來(lái),通常用于功能介紹類和版本迭代類。雖然設(shè)計(jì)形式上簡(jiǎn)單粗暴,但是它也是有弊端的,由于使用了頁(yè)面的界面來(lái)呈現(xiàn),是的整體看起來(lái)太過(guò)于板塊化,太呆板。以下是這類APP的截圖:

十六番


2.文字+插畫

這類表現(xiàn)手法會(huì)使得頁(yè)面看起來(lái)生動(dòng)活潑,好的設(shè)計(jì)可以讓用戶駐足觀賞。以下是這類APP的截圖:

小豆苗


3.文字+明星

這類一般很少見(jiàn),因?yàn)檎?qǐng)明星代言代價(jià)也是不小的,只有一些大公司才會(huì)采取此方法,用明星效應(yīng)來(lái)打品牌知名度。這種做法一般會(huì)出現(xiàn)在一些重大活動(dòng)或者是在平臺(tái)聯(lián)合策劃一些專題,又或者是主打一項(xiàng)主功能。例如微博某次更新后的引導(dǎo)頁(yè):

新浪微博


4.文字+動(dòng)態(tài)圖

人類始終是視覺(jué)動(dòng)物,隨著社會(huì)文明的進(jìn)步,科技在進(jìn)步,人類的審美也在潛移默化的發(fā)生著改變。靜態(tài)的頁(yè)面已經(jīng)不能滿足人類的要求了,在這樣的局勢(shì)下,很多設(shè)計(jì)師開(kāi)始嘗試著做一些動(dòng)態(tài)圖來(lái)滿足人們的需求。這種引導(dǎo)頁(yè)雖然增加了頁(yè)面的趣味性,但是由于是動(dòng)態(tài)的,體積占比就比靜態(tài)的圖能大一點(diǎn),這樣對(duì)于頁(yè)面加載的時(shí)間就會(huì)延長(zhǎng),用戶等待時(shí)間也會(huì)隨著增加。如果網(wǎng)不好的話,用戶可能直接會(huì)退出APP,所以不推薦使用。以下是這類APP的截圖:

5.文字+短視頻

這種類型的引導(dǎo)頁(yè)和動(dòng)態(tài)圖得出差不多,這里就不過(guò)多贅述了。以下是這類APP的截圖:

以上就是小編對(duì)于引導(dǎo)頁(yè)的一些真知灼見(jiàn),還望廣大射雞獅多多包涵,小編不勝感激。

最后對(duì)于引導(dǎo)頁(yè)最一些總結(jié):

1.文案的處理

根據(jù)喬治米勒的研究,人類短期記憶一般一次只能記住5-9個(gè)事物。7+2原則,即由于人類大腦處理信息的能力有限,它會(huì)將復(fù)雜信息劃分成塊和小的單元。所以標(biāo)題文字盡量控制在9個(gè)字以內(nèi),如果標(biāo)題不足以說(shuō)明想要表達(dá)的主題思想,就加一段輔助文字作為補(bǔ)充說(shuō)明,文案的提煉一定要言簡(jiǎn)意賅,能減盡量減,能讓用戶一眼就看出來(lái)你要表達(dá)的東西,做到干凈不臃腫才是最好的。

2.圖片的搭配

不管是插畫還是動(dòng)態(tài)圖或者是短視頻,色調(diào)一定要和整體APP保持一致,不能隨心所欲。

3.布局的處理

文字和圖片一定要形成鮮明的對(duì)比。依據(jù)從上到下,從左到右的原則,在空間上給出一定的設(shè)計(jì)層次,讓用戶的視覺(jué)聚焦到你所要傳達(dá)的地方上去。一般采用中心擴(kuò)散的方法去實(shí)現(xiàn),中心區(qū)域視覺(jué)感最強(qiáng),然后向四周擴(kuò)散,邊緣最弱。

?感謝大家花費(fèi)時(shí)間來(lái)看小編寫的東西!2017,祝大家:行好運(yùn)!

最后編輯于
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

  • Android 自定義View的各種姿勢(shì)1 Activity的顯示之ViewRootImpl詳解 Activity...
    passiontim閱讀 179,057評(píng)論 25 709
  • 發(fā)現(xiàn) 關(guān)注 消息 iOS 第三方庫(kù)、插件、知名博客總結(jié) 作者大灰狼的小綿羊哥哥關(guān)注 2017.06.26 09:4...
    肇東周閱讀 15,358評(píng)論 4 61
  • 1 UI設(shè)計(jì)基礎(chǔ) 1.1 為iOS而設(shè)計(jì) 1.1.1 iOS包含以下3條設(shè)計(jì)原則: 遵從,UI應(yīng)該有助于人們理解內(nèi)...
    Willry閱讀 3,794評(píng)論 1 48
  • 2017年9月30日。母親很少一早打我電話,急促的鈴聲,不祥的預(yù)感。“趕緊回來(lái)吧!二伯早上摔了一跤,走了!”母親哽...
    周漠閱讀 979評(píng)論 6 0
  • 2017年2月8日 星期三 人生路上,只有奮斗才能給你安全感。不要輕易把夢(mèng)想寄托在某個(gè)人身上,也不要太在乎身旁的耳...
    zkishi閱讀 296評(píng)論 0 0

友情鏈接更多精彩內(nèi)容