一個優(yōu)秀的App引導(dǎo)頁，能夠最迅速地抓住app用戶的眼球，讓他們快速了解App的價值和功能，起到很好地潤滑和引導(dǎo)作用。俗話說的好，好的ui視覺界面可以造就App的點擊率。點擊率是啥——是錢呀! ? 請允許25學(xué)堂的小編俗一次哈!

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

簡單的說，APP引導(dǎo)頁無外乎三種：

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

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

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

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

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

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

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

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

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

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

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

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

是不是覺得說的有點理論化哈，下面我們繼續(xù)來看個APP設(shè)計案例，加深體會和理解。

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

3、搞笑耍寶賣萌型

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

預(yù)計整個設(shè)計的周期為一天半，屬于正常加急的需求。時間不多，拿到文案后，我們怎么去理解和定位呢?

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

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

步驟一：找素材

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

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

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

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

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

初學(xué)者我建議建立三個psd，把需要突出的點講出來。這樣好一起打開進行對比，保證風(fēng)格的統(tǒng)一性。

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

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

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