編者按：匆匆而過的除了朱自清的指縫，還有APP上的引導(dǎo)頁。為了讓使用者能停留在引導(dǎo)頁上哪怕三秒鐘，設(shè)計師們各種詭譎奇招都用了個遍，今天@Micu設(shè)計同學就分享了他做APP引導(dǎo)頁的設(shè)計三部曲，過程詳盡，實戰(zhàn)好文一篇，右戳學習咯！

@Micu設(shè)計 ：大家原諒我健忘的大腦，一直想寫App經(jīng)驗總結(jié)，卻不知道從何說起，真是對不起群眾，對不起組織，對不起俺的一個好腎。這也不能完全怪俺，小學的時候語文就沒考過100分，害怕寫的淺了不疼不癢，浪費看官們 陪女朋友的時間；寫的太深了吧，咱又不是大老粗搞學術(shù)研究。

看官不要著急，咸淡結(jié)束，這就進入正題。

今天主講：如何做App安裝引導(dǎo)頁（心急的同學可以直接跳轉(zhuǎn)到第二部分）

一個好的App引導(dǎo)頁，能夠最迅速地抓住使用者的眼球，讓他們快速了解App的價值和功能，起到很好地潤滑和引導(dǎo)作用。一句話說的好，好的UI可以造就App的點擊率。點擊率是啥——是錢呀！

在做引導(dǎo)頁之前，首先要學會定位，知道這個app屬于哪個圈子，在當下這個時代，站錯隊是要吃大虧的（謹記）。 （別著急，下面有怎么設(shè)計攻略）

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

1. 功能介紹型
2. 情感帶入型
3. 搞笑耍寶賣萌型

頂尖設(shè)計案例右戳：《靈感爆棚！22個知名App啟動引導(dǎo)頁設(shè)計欣賞》

1. 功能介紹型（基初期）

是最基礎(chǔ)的，就是有啥說啥。誤區(qū)是，說話羅嗦，表達不清。

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

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

功能型的例子比比皆是。

原創(chuàng)實例：360家庭網(wǎng)管

2. 情感帶入型（上升期）

走腎還是走心是個問題，得要用戶順著你走。

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

說的有點理論化哈，下面看個例子，體會體會。

原創(chuàng)實例：錢生錢

3. 搞笑耍寶賣萌型

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

原創(chuàng)實例：內(nèi)涵段子

能耐著性子看到這里，不知道你有沒有這樣的疑問：

那個嘀咕一下，引導(dǎo)頁有那么重要嗎？

有些人說沒人看沒啥用，有些人覺得有比沒有好，有產(chǎn)品覺得很重要，那是產(chǎn)品的面子。哈哈～其實做好了還是有點用的，我感覺有兩個目的，預(yù)熱和好玩開心。我們設(shè)計師就是要做到用戶真正去看，不然要我們還有何用啊。

第二部分

怎么設(shè)計一個能讓用戶停留3秒的引導(dǎo)頁？

我就以最近做的這套內(nèi)涵段子引導(dǎo)為列吧，屬于有趣點加暴走點的設(shè)計。這樣看著可能輕松點。創(chuàng)作背景：這次任務(wù)是在內(nèi)涵段子3.1版基礎(chǔ)之上的升級，要求在3.12新版中呈現(xiàn)出三個新增功能。

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

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

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

具體設(shè)計過程：

1. 找素材

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

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

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

2. 構(gòu)圖+排版

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

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

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

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

3. 后期處理

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

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

大功告成，展示一下。

小結(jié)：

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

本月人氣最高PS教程好文揭榜！

第三名！iPhone 5S同款金色字體教程！
《PS教程！手把手教你創(chuàng)建璀璨的黃金鉆石字體》

第二名！好萊塢科幻大片御用字體教程！
《PS教程！教你繪制酷炫的炫藍科幻字體》

第一名！為什么白天能懂夜的黑？
《PS教程！如何簡單幾步將白天圖片轉(zhuǎn)換成夜景圖？》

投稿者：@Micu設(shè)計

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國內(nèi)人氣最高的網(wǎng)頁設(shè)計師學習平臺，專注分享網(wǎng)頁設(shè)計、無線端設(shè)計以及PS教程。
【特色推薦】
設(shè)計師需要讀的100本書：史上最全的設(shè)計師圖書導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計微博：擁有粉絲量85萬的人氣微博@優(yōu)秀網(wǎng)頁設(shè)計 ，歡迎關(guān)注獲取網(wǎng)頁設(shè)計資源、下載頂尖設(shè)計素材。
設(shè)計導(dǎo)航：全球頂尖設(shè)計網(wǎng)站推薦，設(shè)計師必備導(dǎo)航：http://hao.uisdc.com
———————————————————–
想在手機上、被窩里獲取設(shè)計教程、經(jīng)驗分享和各種意想不到的"福利"嗎？
添加 優(yōu)秀網(wǎng)頁設(shè)計 微信號：【youshege】優(yōu)設(shè)哥的全拼
您也可以通過掃描下方二維碼快速添加：