藍(lán)藍(lán)設(shè)計(jì)( sillybuy.com )是一家專注而深入的界面設(shè)計(jì)公司，為期望卓越的國(guó)內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)、BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

每一個(gè)扁平化界面設(shè)計(jì)，都是我們的心靈碰撞致力于最棒的 metro ui 設(shè)計(jì)

來(lái)源：莫貝網(wǎng)

 如果您想訂閱本博客內(nèi)容，每天自動(dòng)發(fā)到您的郵箱中，請(qǐng)點(diǎn)這里

前言

在接觸一款新應(yīng)用的時(shí)候用戶常常會(huì)看到一些引導(dǎo)頁(yè)，但在操作的時(shí)候直接當(dāng)透明的就快速滑過(guò)或跳過(guò)了，這種時(shí)候，大家一定會(huì)有“這些引導(dǎo)好無(wú)用啊”的無(wú)力感，目前甚至有著“如果一個(gè)產(chǎn)品需要引導(dǎo)，說(shuō)明該產(chǎn)品缺乏友好的元素”這樣的說(shuō)法，看似有理， 但我覺(jué)得這并不能一概而論，在不少的app中，除了引導(dǎo)用戶操作，引導(dǎo)還影響用戶對(duì)產(chǎn)品第一印象的好壞，只要這引導(dǎo)設(shè)計(jì)得好，人見(jiàn)人愛(ài)之余，還對(duì)整個(gè) app中的體驗(yàn)感受能起到巨大作用！“來(lái)電”是一款基于語(yǔ)音溝通的應(yīng)用，作為一款不斷探索并創(chuàng)新的應(yīng)用，也有不少需要用到引導(dǎo)的地方，接下來(lái)我們通過(guò)一些 案例并結(jié)合來(lái)電的引導(dǎo)來(lái)告訴你如何煉成人見(jiàn)人愛(ài)的好引導(dǎo)。

好的APP引導(dǎo)是怎樣的？

現(xiàn)在，引導(dǎo)的種類形式隨著硬件和系統(tǒng)的拓寬有了更多的表現(xiàn)空間，引導(dǎo)頁(yè)、缺省引導(dǎo)、視頻引導(dǎo)、H5引導(dǎo)等都能起到引導(dǎo)用戶認(rèn)識(shí)或者使用新應(yīng)用的作 用。一方面從產(chǎn)品的角度考慮，產(chǎn)品希望用戶能夠方便得理解產(chǎn)品的特性，減少對(duì)產(chǎn)品的陌生感；另一方面，從用戶角度來(lái)看，一個(gè)應(yīng)用里好的引導(dǎo)不僅能使他們對(duì) 一個(gè)應(yīng)用有好感，也可能更容易得留住他們。但不論什么形式的引導(dǎo)，好的引導(dǎo)都能夠讓用戶對(duì)產(chǎn)品有一定的認(rèn)知并拉近用戶與產(chǎn)品的聯(lián)系，通過(guò)對(duì)不少做得好的引 導(dǎo)（這里主要討論的是頁(yè)面形式的引導(dǎo)和H5）進(jìn)行分析，我們發(fā)現(xiàn)大家喜歡的app引導(dǎo)都會(huì)有一些共性，通過(guò)歸總提煉，得出以下幾個(gè)用戶看了都喜歡的原則：

通俗易懂

一個(gè)APP的引導(dǎo)不論什么類型，它們的目的都是為了讓用戶更好得去使用APP，就好比一個(gè)貼心的管家或者朋友，給你介紹或者教你使用一個(gè)新事物，減 低認(rèn)知和摸索學(xué)習(xí)的門檻。但如果這個(gè)朋友說(shuō)得太多太雜，你可能就會(huì)記不住他說(shuō)了什么；而如果這個(gè)朋友為了想更凸顯這個(gè)新事物的逼格而形容得“深不可測(cè)” （自嗨型引導(dǎo)），那么就很可能讓你因?yàn)槁牪欢ヅd趣了解下去。簡(jiǎn)單不復(fù)雜、信息表達(dá)通俗易懂的引導(dǎo)可以讓用戶抓取到我們想傳達(dá)的信息并更容易理解 APP的特性或操作，比如以下的案例：

界面來(lái)自Dropbox

Dropbox的缺省引導(dǎo)是我比較喜歡的一組引導(dǎo)，在用戶一開始使用這個(gè)app的時(shí)候，通過(guò)在初始缺省頁(yè)（空白頁(yè)）上結(jié)合操作去引導(dǎo)用戶，大大避免 了一進(jìn)去空空如也的尷尬感。而且這組引導(dǎo)的文案不是生硬的功能講解，而是通過(guò)一些通俗易懂的語(yǔ)句配合與之相對(duì)應(yīng)有趣的圖示傳達(dá)相關(guān)的的信息，讓用戶在看和 操作的過(guò)程中感受輕松，而且這套引導(dǎo)整體風(fēng)格都保持一致，讓人對(duì)產(chǎn)品印象穩(wěn)固起來(lái)，倍顯親和。

具有一致性

好的引導(dǎo)在多個(gè)方面都是具有一致性的。視覺(jué)風(fēng)格的塑造、表達(dá)的產(chǎn)品理念和產(chǎn)品特點(diǎn)都應(yīng)該和它所屬的產(chǎn)品、定位與品牌相符合，這樣用戶在使用產(chǎn)品的時(shí) 候就會(huì)對(duì)產(chǎn)品有一個(gè)大致的基調(diào)認(rèn)識(shí)和感受。產(chǎn)品的定位會(huì)決定引導(dǎo)的方向和路線，以及最終引導(dǎo)的表現(xiàn)形式上，所以引導(dǎo)是最能體現(xiàn)產(chǎn)品基調(diào)和品牌性的地方。引 導(dǎo)的一致性除了保證了產(chǎn)品與使用體驗(yàn)相互一致，同時(shí)也能進(jìn)一步強(qiáng)化用戶對(duì)產(chǎn)品的認(rèn)知以及延續(xù)品牌印象。如下例：

界面來(lái)自Telegram

從一致性來(lái)看，Telegram的前置引導(dǎo)是我覺(jué)得比較有代表性的，這組引導(dǎo)頁(yè)面里，每一頁(yè)元素看似簡(jiǎn)單但是很有細(xì)節(jié)，圖示風(fēng)格統(tǒng)一，主標(biāo)題都是一 個(gè)詞，表達(dá)很干脆簡(jiǎn)練。這組引導(dǎo)頁(yè)整體與Telegram的產(chǎn)品所透露的特性一致，，干凈，這種傳達(dá)出來(lái)的氣質(zhì)貫通整個(gè)產(chǎn)品。特別是每個(gè)圖示都做了小 動(dòng)畫，讓用戶更加直觀得感受到它所傳達(dá)的信息，這種細(xì)節(jié)更容易觸動(dòng)到用戶，獲得用戶對(duì)產(chǎn)品品質(zhì)的認(rèn)可。

產(chǎn)生共鳴

前面有提到一個(gè)應(yīng)用里好的引導(dǎo)不僅能使他們對(duì)一個(gè)應(yīng)用有好感，也可能更容易得留住他們，而這里的關(guān)鍵就是能夠讓用戶產(chǎn)生共鳴。通過(guò)對(duì)產(chǎn)品自身的深刻 了解并洞察目標(biāo)用戶心理，結(jié)合產(chǎn)品特性與用戶的痛點(diǎn)，進(jìn)而以視覺(jué)和文案渲染出氛圍從而傳達(dá)出相關(guān)的理念，勾起用戶情感打動(dòng)用戶。讓用戶產(chǎn)生共鳴，有利于用 戶對(duì)產(chǎn)品在情感上的認(rèn)同，這種認(rèn)同感會(huì)增進(jìn)用戶對(duì)產(chǎn)品的進(jìn)一步使用和探索。如下面這例子：

界面來(lái)自【留白】

這是“留白”APP的引導(dǎo)，之前這款應(yīng)用被稱為最美應(yīng)用之一，作為一款極具文藝范兒的應(yīng)用，它的引導(dǎo)也延續(xù)了它的文藝氣息。除了好看的圖和與之搭配的字體所渲染的氛圍，這組引導(dǎo)里面，文案占據(jù)了很重要的比重，也正是這些文案使得這組引導(dǎo)上了一個(gè)檔次，文案用的字詞通俗，讓用戶覺(jué)得不疏遠(yuǎn)，引導(dǎo)中不僅說(shuō)明了產(chǎn)品特性一邊強(qiáng)調(diào)了格調(diào)同時(shí)也宣揚(yáng)美好，十分走心，后面的文案更是帶起了情懷，讓人動(dòng)容。

根據(jù)上面所說(shuō)，可以大概得出好的APP引導(dǎo)應(yīng)該具有“通俗易懂、產(chǎn)生共鳴、具有一致性”這3個(gè)原則，這3個(gè)原則之間的關(guān)系如下圖。有這3個(gè)原則，引 導(dǎo)也就具備人見(jiàn)人愛(ài)的特性～當(dāng)然，這3個(gè)原則僅僅是個(gè)大概參考，應(yīng)用引導(dǎo)的好壞與否并不能一概而論，其中還有很多其它的影響因素，但是篇幅有限，在本文暫 不作細(xì)說(shuō)了。

來(lái)電的引導(dǎo)是怎么樣的？

通過(guò)上面得出的相關(guān)原則，我們回觀來(lái)電的引導(dǎo)是怎么做的。作為一款依然在不斷探索的應(yīng)用，來(lái)電經(jīng)歷了幾輪方向的變化和調(diào)整，產(chǎn)品的方向變化也影響著 來(lái)電的設(shè)計(jì)，由于這些原因，來(lái)電的引導(dǎo)設(shè)計(jì)在整體的一致性上面有所不足，但是在此之外，來(lái)電的引導(dǎo)遵循著另外2個(gè)原則（通俗易懂、產(chǎn)生共鳴），結(jié)合產(chǎn)品的 特性，并以此形成了它自身的特點(diǎn)，那就是直觀和具有情感。

這上面是來(lái)電的缺省頁(yè)引導(dǎo)。第一張是“無(wú)痕聊天”的缺省引導(dǎo)，“無(wú)痕聊天”（也就是閱后即焚）在國(guó)內(nèi)對(duì)不少用戶來(lái)說(shuō)還是個(gè)比較陌生而且略為抽象的概 念，為了讓用戶更易于理解這個(gè)概念，我們通過(guò)把這個(gè)概念細(xì)解，轉(zhuǎn)化發(fā)散，然后收攏成一個(gè)在大家認(rèn)知中較為熟悉的具象事物－碎紙機(jī)，使得用戶可以通過(guò)它對(duì) “無(wú)痕聊天”有個(gè)通感式的理解，達(dá)到直觀的效果，結(jié)合文案給了用戶使用后有什么好處的理由，使得激勵(lì)用戶去點(diǎn)擊“找朋友聊聊”進(jìn)行操作；第二張是來(lái)電 AIO內(nèi)的缺省引導(dǎo)，這里的主要作用是告知用戶可以調(diào)整無(wú)痕聊天內(nèi)容的消失時(shí)間，這里可以說(shuō)是對(duì)之前“無(wú)痕聊天”概念的補(bǔ)齊，初次使用進(jìn)到AIO，這個(gè)圖 會(huì)進(jìn)行動(dòng)畫縮小到左下角對(duì)應(yīng)的鐘表位置，告知用戶操作的位置，直觀得引導(dǎo)用戶進(jìn)行操作，讓用戶一看就明白。

這一組是引導(dǎo)用戶開放權(quán)限的引導(dǎo)頁(yè)。作為初始引導(dǎo)，因?yàn)殚_放權(quán)限有時(shí)候需要用戶多次反復(fù)操作，所以這是一個(gè)容易讓用戶感覺(jué)到厭煩甚至反感的地方，為 此在這組引導(dǎo)的設(shè)計(jì)上，我們創(chuàng)造了一個(gè)小雪人形象，結(jié)合產(chǎn)品的需求以及引導(dǎo)的目的，塑造出一些小場(chǎng)景讓這組引導(dǎo)更具有情感，加上目的清晰的文案，營(yíng)造出輕松的氛圍，讓用戶在看到頁(yè)面的時(shí)候具有共鳴感，以此感到親和，減少反復(fù)操作帶來(lái)的厭煩感。

案例分析

前面大概得講了好的app引導(dǎo)的一些原則以及來(lái)電的引導(dǎo)特點(diǎn)，接下來(lái)我們針對(duì)一個(gè)實(shí)踐案例來(lái)細(xì)說(shuō)來(lái)電引導(dǎo)的設(shè)計(jì)過(guò)程。這次的案例是叫“班級(jí)通訊錄”的h5引導(dǎo)，“班級(jí)通訊錄”是來(lái)電團(tuán)隊(duì)通訊錄功能的傳播式推廣引導(dǎo)，通過(guò)引導(dǎo)來(lái)電用戶發(fā)起，分享到微信、空間、QQ等平臺(tái)，讓來(lái)電用戶可以通過(guò)鏈接引導(dǎo)去了解并使用這個(gè)功能，非來(lái)電用戶則引導(dǎo)去下載達(dá)到拉新的目的。

定位

在之前，通過(guò)手機(jī)QQ平臺(tái)進(jìn)行了一輪大范圍推廣，直到9月份之后，來(lái)電的用戶進(jìn)度放緩，我們開始思考有沒(méi)有更好的推廣方式引導(dǎo)用戶去進(jìn)行新一輪的用 戶增長(zhǎng)。通過(guò)和產(chǎn)品童鞋的討論分析，我們也從大量的競(jìng)品中去挖掘一些其它的推廣方式，將目標(biāo)聚焦定位在熟人推廣這一塊。關(guān)于熟人，其中也能分出好幾塊人 群，由于這次的推廣需要通過(guò)熟人關(guān)系拉動(dòng)用戶參與，并且得拉起新用戶，那么這就需要熟人之間的信任度高并且這個(gè)人群的人數(shù)要多。對(duì)此我們對(duì)每個(gè)可 以想到的人群進(jìn)行了發(fā)散和分析：

通過(guò)分析，我們對(duì)每個(gè)人群的信任度還有人數(shù)進(jìn)行了對(duì)比（如上圖），可以看出在對(duì)比值中，“同學(xué)”是2者中都相對(duì)較高，落差最小的人群，加上推廣時(shí)間是在9月左右，正值開學(xué)的時(shí)間，因此我們就聚焦在“同學(xué)”這個(gè)人群里，延伸去拓展和設(shè)計(jì)。

設(shè)計(jì)方向

確定定位之后，我們開始進(jìn)入到設(shè)計(jì)前期。首先確定交互流程，通過(guò)發(fā)起分享、接受者進(jìn)行注冊(cè)參與形成閉環(huán)，如下（由于本文主要講訴引導(dǎo)部分，篇幅有限，流程部分不在此細(xì)講）：

這一套引導(dǎo)里面一個(gè)流程下來(lái)起到重要作用的就是發(fā)起頁(yè)和接受頁(yè)，這2個(gè)頁(yè)面一個(gè)需要引導(dǎo)用戶分享出去，另一個(gè)需要用戶參與并引導(dǎo)用戶去進(jìn)行接下來(lái)的操作。因?yàn)榫哂羞\(yùn)營(yíng)與功能結(jié)合的性質(zhì)，因此它比起一般的引導(dǎo)頁(yè)需要更多的包裝，以此來(lái)吸引用戶。

風(fēng)格包裝

我們對(duì)這套引導(dǎo)進(jìn)行主題包裝，使其富有情感特點(diǎn)，這是來(lái)電引導(dǎo)的特點(diǎn)之一，讓用戶具有情感的認(rèn)同。這一套引導(dǎo)是為了結(jié)合團(tuán)隊(duì)通訊錄這個(gè)功能來(lái)進(jìn)行推 廣的，而且加上“同學(xué)”這個(gè)人群，我們得出“班級(jí)通訊錄”這一個(gè)概念，針對(duì)這個(gè)概念，我們需要挖掘這個(gè)相關(guān)的特點(diǎn)與印象元素，發(fā)散后我們收攏出一個(gè)風(fēng)格主 題：Party。

“班級(jí)通訊錄”在我們看來(lái)就讓失去聯(lián)系或者久不聯(lián)系的同學(xué)再一次聯(lián)系回來(lái)的概念，因此我們希望營(yíng)造出一種聚會(huì)的氛圍感受，擺脫一般通訊錄干巴巴的冰冷感，讓用戶在感受上是歡快愉悅的，因此在設(shè)計(jì)的風(fēng)格上，我們傾向用一種歡快的party主題來(lái)表達(dá)，以此觸動(dòng)用戶情緒。

具體設(shè)計(jì)

有了方向和主題，接下來(lái)就是進(jìn)行更為具體的設(shè)計(jì)。在這之前，我們需要思考產(chǎn)品的目的以及這個(gè)頁(yè)面所要起到的作用，再結(jié)合上面提到的3個(gè)原則以及來(lái)電自身的特點(diǎn)，使得這組引導(dǎo)有來(lái)電的DNA并達(dá)到產(chǎn)品目的。首先從交互稿分析下我們是怎么考慮這2個(gè)引導(dǎo)的：

文案

首先要強(qiáng)調(diào)一點(diǎn)，在引導(dǎo)中，文案是特別重要的，因?yàn)樗侵苯荧@取引導(dǎo)信息的關(guān)鍵。發(fā)起頁(yè)的引導(dǎo)是要讓來(lái)電用戶去主動(dòng)發(fā)起邀請(qǐng)傳播，一方面我們要清楚告知用戶要做什么，引導(dǎo)用戶去操作，另一方面，我們通過(guò)一些獎(jiǎng)勵(lì)刺激用戶積極性，增加用戶參與率，所以我們把發(fā)起頁(yè)文案定 為“創(chuàng)建同學(xué)錄 領(lǐng)1000分鐘通話時(shí)長(zhǎng)”。而接收頁(yè)的目的是引導(dǎo)用戶接受邀請(qǐng)進(jìn)行下一步操作，那么，這需要用戶對(duì)這個(gè)頁(yè)面有足夠的信任，才會(huì)接受邀請(qǐng)， 因此這里的引導(dǎo)文案需要真實(shí)信息作為支撐，而這些真實(shí)信息來(lái)源于發(fā)起人通過(guò)引導(dǎo)所填寫的內(nèi)容，2者的結(jié)合使得這套引導(dǎo)完整流暢。

畫面

這一塊是最能體現(xiàn)情感化特點(diǎn)的地方，主題風(fēng)格的渲染也能帶動(dòng)用戶情感共鳴，這一塊決定了頁(yè)面能否在感覺(jué)上吸引用戶。根據(jù)party的主題，要突出的 是集體感以及歡快的氛圍，在發(fā)起頁(yè)面我們做成拍班級(jí)集體照一樣“排排站”的效果，凸顯同學(xué)會(huì)的感覺(jué)；在接受頁(yè)，我們則是做成有種開歡迎party的感覺(jué)， 歡迎同學(xué)的加入，整體營(yíng)造歡快感，小人和發(fā)起頁(yè)呼應(yīng)，產(chǎn)生聯(lián)系。發(fā)起頁(yè)在來(lái)電應(yīng)用發(fā)起，所以和顏色和來(lái)電app融合些，而接受頁(yè)則用來(lái)電自身品牌色為主體 來(lái)突出品牌感。設(shè)計(jì)過(guò)程中的草圖如下：

操作

最后是操作，在這組引導(dǎo)里面，操作的作用很關(guān)鍵，特別是在發(fā)起頁(yè)。發(fā)起頁(yè)里面的操作部分會(huì)直接影響到接收頁(yè)的被信任度，因此這里需要填寫學(xué)校班級(jí)信息的文案引導(dǎo)用戶填寫真實(shí)信息，這些真實(shí)信息會(huì)作為接收頁(yè)的文案顯示，關(guān)系到用戶看到這個(gè)頁(yè)面（接收頁(yè)）會(huì)不會(huì)接受邀請(qǐng)；而接收頁(yè)的操作則是以“我要加入”給予用戶代入感，刺激用戶點(diǎn)擊欲望，增加參與率。
通過(guò)上面幾個(gè)層面的考慮打磨，我們不斷的比較和考慮，從顏色、字體、元素等等對(duì)每一個(gè)細(xì)節(jié)都斟酌一輪并調(diào)整優(yōu)化，才有最終的輸出，如下。這就是這個(gè)案例的流程和思考。

感想與小結(jié)

這一段時(shí)間，我除了運(yùn)營(yíng)和基礎(chǔ)之外，引導(dǎo)相關(guān)的設(shè)計(jì)還是做了不少的。雖然來(lái)電上線一段時(shí)間了，但一直在不斷得摸索前行，這其中碰撞出不少火花，也有 不少新的東西出現(xiàn)，也因此使得來(lái)電不少的地方需要引導(dǎo)。先不討論引導(dǎo)的實(shí)用與否，但就從設(shè)計(jì)的角度而言，每個(gè)細(xì)節(jié)都應(yīng)力求做到最好，并讓用戶可以感受到。 通過(guò)這段時(shí)間的工作，在做引導(dǎo)相關(guān)設(shè)計(jì)的時(shí)候，有些小經(jīng)驗(yàn)和感觸，和大家分享一下：

1. 要清楚確定產(chǎn)品的要求和引導(dǎo)的目的

引導(dǎo)的類型雖然不少，但是針對(duì)不同的產(chǎn)品要求和引導(dǎo)目的，選用的引導(dǎo)類型也不一樣，因此一定要清楚產(chǎn)品的需要，是為了展示產(chǎn)品、讓用戶學(xué)習(xí)操作、還 是為了推廣，只有清晰的方向才能選擇最合適的方式和風(fēng)格去進(jìn)行引導(dǎo)，產(chǎn)品方向的多變?nèi)菀鬃尞a(chǎn)品的引導(dǎo)變得不一致，不利于固化整個(gè)產(chǎn)品的具體印象，影響品牌 化。

2. 要多觀察生活的每個(gè)細(xì)節(jié)

能夠打動(dòng)用戶的設(shè)計(jì)一定是和生活、和身邊的人事物相關(guān)的，因?yàn)橄嚓P(guān)，所以才不突兀。好的引導(dǎo)是怎樣的，在前面已經(jīng)細(xì)說(shuō)，但起說(shuō)到底，它的核心還是做到自然。這個(gè)自然是通過(guò)它符合人對(duì)事物的常識(shí)理解、符合生活經(jīng)歷、符合內(nèi)心感受等共同作用的，因此，設(shè)計(jì)師需要對(duì)生活有敏感的洞察。

3. 文案！文案！文案！

重要的事情說(shuō)三次。在不少的文章中都已經(jīng)強(qiáng)調(diào)了文案的重要性，而在引導(dǎo)中，文案更是直接作用于用戶的操作和對(duì)整個(gè)產(chǎn)品的理解，對(duì)此，引導(dǎo)的文案一定要多打磨，好的文案可以省去不少事情。

4. 能不用引導(dǎo)的話就不用引導(dǎo)

雖然我認(rèn)為引導(dǎo)圖是有存在必要的，但是若一個(gè)app內(nèi)引導(dǎo)太多的話，用戶會(huì)對(duì)整個(gè)產(chǎn)品的體驗(yàn)有質(zhì)疑，另一方面也打擊用戶使用產(chǎn)品的積極性，物極必反。所以若非是新功能上線，大版本更改以及必要的缺省頁(yè)引導(dǎo)，能不做引導(dǎo)的話就不做。

好的app都是能夠善用引導(dǎo)這一塊利器，為用戶服務(wù)之余更是把品牌和產(chǎn)品的氣質(zhì)傳達(dá)給用戶，來(lái)電在這一塊也在不斷得思考，一方面保持自己的特點(diǎn)，另一方面也在學(xué)習(xí)并彌補(bǔ)自己的不足，更加得完善自身讓用戶有更好的體驗(yàn)。

原文地址：騰訊ISUX
作者：里奧