一個(gè)優(yōu)秀的App引導(dǎo)頁(yè)，能夠最迅速地抓住app用戶的眼球，讓他們快速了解App的價(jià)值和功能，起到很好地潤(rùn)滑和引導(dǎo)作用。俗話說(shuō)的好，好的ui視覺(jué)界面可以造就App的點(diǎn)擊率。點(diǎn)擊率是啥——是錢(qián)呀! ? 請(qǐng)?jiān)试S25學(xué)堂的小編俗一次哈!

 

第一部分：app引導(dǎo)頁(yè)設(shè)計(jì)知識(shí)和理論詮釋

簡(jiǎn)單的說(shuō)，APP引導(dǎo)頁(yè)無(wú)外乎三種：

一、功能介紹型 ? ? ? ?二、情感帶入型 ? ? 三、搞笑耍寶賣萌型 ??

下面就跟隨25學(xué)堂跟大家一起來(lái)看看如何去設(shè)計(jì)這三種類型的APP引導(dǎo)頁(yè)。

 

1、功能介紹型 ? (設(shè)計(jì)基礎(chǔ)期)

這是設(shè)計(jì)app啟動(dòng)頁(yè)最最基礎(chǔ)的方式，也是app設(shè)計(jì)新手必須學(xué)會(huì)的一種方式。

就是有啥說(shuō)啥。誤區(qū)是，說(shuō)話羅嗦，表達(dá)不清。

 

用戶需要的一針見(jiàn)血，在這樣一個(gè)移動(dòng)網(wǎng)絡(luò)化、碎片化的時(shí)代，人們停留的時(shí)間越來(lái)越短，瀏覽你app界面的時(shí)間不會(huì)超過(guò)3秒，在這寶貴的3秒里，你要用簡(jiǎn)要明白、通俗易懂的文案和界面來(lái)呈現(xiàn)，突出重點(diǎn)就可以了。

——————————————記住這句話：用戶需求就是你的文案——————————-——

功能型的APP界面設(shè)計(jì)案例很多。如下面這些：

　　原創(chuàng)實(shí)例：小逗考典app

2、情感帶入型(上升期)

走腎還是走心是個(gè)問(wèn)題，得要用戶順著你走。這時(shí)候需要抒發(fā)你設(shè)計(jì)師的情感與情懷！

通過(guò)文案和配圖，引導(dǎo)用于去思考這個(gè)App的價(jià)值，把用戶需求透過(guò)某種情感表現(xiàn)出來(lái)，更加形象化、生動(dòng)化、立體化，加強(qiáng)產(chǎn)品的預(yù)熱，讓用戶有種驚喜感，我在這套設(shè)計(jì)主題色為黑色，凸顯產(chǎn)品的穩(wěn)重和安全性，直接用圖標(biāo)來(lái)表達(dá)我想闡述的情景，用更為纖細(xì)的線來(lái)體現(xiàn)產(chǎn)品推出的內(nèi)容的精致性。

是不是覺(jué)得說(shuō)的有點(diǎn)理論化哈，下面我們繼續(xù)來(lái)看個(gè)APP設(shè)計(jì)案例，加深體會(huì)和理解。

　

支付寶的app引導(dǎo)頁(yè)設(shè)計(jì)欣賞

3、搞笑耍寶賣萌型

化腐朽為神奇，綜合運(yùn)用擬人化、交互化表達(dá)方式，要學(xué)會(huì)扮角色、講故事，根據(jù)目標(biāo)用戶特點(diǎn)來(lái)選擇。讓用戶身臨其境，最后使用戶心情愉悅，這種類型的閱讀量最高，拼的是設(shè)計(jì)效果(或動(dòng)畫(huà)流程效果)，屬于app界面設(shè)計(jì)高級(jí)階段。

上面是一款非常漂亮的APP引導(dǎo)頁(yè)界面設(shè)計(jì)

立體化的app引導(dǎo)頁(yè)設(shè)計(jì)欣賞

聊到這里，我們已經(jīng)給大家闡述了3種最常見(jiàn)的APP引導(dǎo)頁(yè)設(shè)計(jì)方案，這個(gè)時(shí)候你是否會(huì)覺(jué)得app引導(dǎo)頁(yè)有那么重要嗎?

有些人說(shuō)沒(méi)人看沒(méi)啥用，有些人覺(jué)得有比沒(méi)有好，有產(chǎn)品覺(jué)得很重要，那是產(chǎn)品的面子。哈哈～其實(shí)做好了還是有點(diǎn)用的，我感覺(jué)有兩個(gè)基本目的，預(yù)熱和好玩開(kāi)心。同時(shí)也是一種用戶體驗(yàn)的表現(xiàn)。

我們移動(dòng)app設(shè)計(jì)師就是要做到用戶真正去看，不然要我們還有何用啊。你們說(shuō)對(duì)嗎？

如果我們?cè)O(shè)計(jì)app引導(dǎo)頁(yè)，得不到用戶的青睞或是點(diǎn)贊，那表明我們的設(shè)計(jì)的app引導(dǎo)頁(yè)是失敗的。還需繼續(xù)閉關(guān)修煉！呵呵

25學(xué)堂之前分享的app引導(dǎo)頁(yè)設(shè)計(jì)知識(shí)：

1、APP引導(dǎo)頁(yè)設(shè)計(jì)的五種常見(jiàn)表現(xiàn)方式

2、App引導(dǎo)頁(yè)最佳設(shè)計(jì)之5個(gè)UI界面設(shè)計(jì)步驟

3、移動(dòng)端APP界面設(shè)計(jì)之引導(dǎo)頁(yè)UI設(shè)計(jì)技巧

 

第二部分：看完這三種APP引導(dǎo)頁(yè)設(shè)計(jì)的辦法之后，動(dòng)手設(shè)計(jì)吧！

怎么設(shè)計(jì)一個(gè)高大上的app引導(dǎo)頁(yè)呢?

app引導(dǎo)頁(yè)設(shè)計(jì)案例說(shuō)明：micu設(shè)計(jì)的原創(chuàng)設(shè)計(jì)作品。內(nèi)涵段子APP

就以最近做的這套內(nèi)涵段子引導(dǎo)為列吧，屬于有趣點(diǎn)加暴走點(diǎn)的設(shè)計(jì)。這樣看著可能輕松點(diǎn)。

☆ ?設(shè)計(jì)創(chuàng)作背景：

這次任務(wù)是在內(nèi)涵段子3.1版基礎(chǔ)之上的升級(jí)，要求在3.12新版中呈現(xiàn)出三個(gè)新增功能。

☆ ?設(shè)計(jì)思路理一理：

最開(kāi)始，我會(huì)努力體會(huì)目標(biāo)用戶的需求，把需求引導(dǎo)點(diǎn)列出來(lái)，根據(jù)產(chǎn)品定位想出不同的文案，到設(shè)計(jì)這邊已經(jīng)是定下來(lái)的文案了。

預(yù)計(jì)整個(gè)設(shè)計(jì)的周期為一天半，屬于正常加急的需求。時(shí)間不多，拿到文案后，我們?cè)趺慈ダ斫夂投ㄎ荒?

在設(shè)計(jì)過(guò)程中首先考慮風(fēng)格，本身就是娛樂(lè)性的產(chǎn)品，所以我選擇了講故事。在之前3.1版本的引導(dǎo)中也是用的比較夸張的表現(xiàn)但缺乏娛樂(lè)性，這次希望把故事的場(chǎng)景做的更濃重些，更有趣，大叔蘿莉都來(lái)吧!

 

☆ ?設(shè)計(jì)具體步驟：

步驟一：找素材

這是最為重要的一步，時(shí)間緊急，想清楚了再做。

找對(duì)是關(guān)鍵，做一個(gè)設(shè)計(jì)的搬運(yùn)工，融到自己的故事中。你也可以說(shuō)這是抄，但我只想毫無(wú)保留的把我做圖的過(guò)程告訴大家，怎么做一個(gè)靈活的設(shè)計(jì)師。

　　從花瓣來(lái)的素材很全，畫(huà)面已經(jīng)清晰的浮現(xiàn)在我的眼前。畫(huà)面中的場(chǎng)景，人物動(dòng)態(tài)，表情已經(jīng)都全了，現(xiàn)在可以開(kāi)始制作了。

 

步驟二：構(gòu)圖+排版

在設(shè)計(jì)中我采用了描線的表現(xiàn)方法，這樣感覺(jué)漫畫(huà)感腳更強(qiáng)，人物表情能更夸張。

第一步構(gòu)好圖，保證這套引導(dǎo)的統(tǒng)一，文字的大小。重點(diǎn)文字的區(qū)分形式等。

初學(xué)者我建議建立三個(gè)psd，把需要突出的點(diǎn)講出來(lái)。這樣好一起打開(kāi)進(jìn)行對(duì)比，保證風(fēng)格的統(tǒng)一性。

第二步將需要畫(huà)的場(chǎng)景已線圖的方式勾出來(lái)，在這我直接用鼠標(biāo)繪制路徑，個(gè)人習(xí)慣這樣制作，這樣處理出來(lái)的線條會(huì)比較順暢。手繪能力強(qiáng)的可以直接用數(shù)位板畫(huà)。

步驟三、后期處理

首先是處理色彩關(guān)系，整體顏色選擇了比較鮮明的顏色，每張的顏色飽和度一直，切換的時(shí)候?qū)Ρ葟?qiáng)烈。

　　其次，加強(qiáng)畫(huà)面氛圍感，第一張我用了閃電來(lái)突出瞬間變段子哥的感覺(jué)，并用縱深的黑線條加強(qiáng)了畫(huà)面的空間感。以此類推我也把這寫(xiě)元素翻到了另外兩張圖中，加強(qiáng)了一致性。

大功告成，展示一下。

APP引導(dǎo)頁(yè)設(shè)計(jì)小結(jié)：

設(shè)計(jì)方法很重要，靈活很重要。不同的需求不同的玩法，時(shí)間緊急一樣有辦法做出好的東西，水來(lái)土掩兵來(lái)將擋，UI沒(méi)有想象那么難。