隨著ui設(shè)計(jì)的不斷發(fā)展，引導(dǎo)頁(yè)的形式也在隨著變化，根據(jù)不同產(chǎn)品的特性，其作用與意義也不盡相同。本文將分別從“靜態(tài)引導(dǎo)頁(yè)”與“動(dòng)態(tài)引導(dǎo)頁(yè)”兩種形式與大家分享我對(duì)于“引導(dǎo)頁(yè)”的一些認(rèn)識(shí)。

狹義上，我們一般認(rèn)為在初次打開應(yīng)用時(shí)跳出的幾張介紹應(yīng)用功能的頁(yè)面叫做引導(dǎo)頁(yè)；從廣義上來說，在用戶使用某個(gè)功能前就達(dá)到幫助用戶理解和使用，降低用戶學(xué)習(xí)成本功能的頁(yè)面或存在引導(dǎo)屬性彈窗的頁(yè)面都可以稱為引導(dǎo)頁(yè)。

一、靜態(tài)引導(dǎo)頁(yè)

好奇心日?qǐng)?bào)是一款商業(yè)資訊類的app，在引導(dǎo)頁(yè)上選擇了以大圖作為背景的形式，四張圖片為用戶營(yíng)造了一種偏商務(wù)、商業(yè)風(fēng)格的場(chǎng)景。

從配色上設(shè)計(jì)者選擇了白色與app識(shí)別色－黃色，當(dāng)用戶在瀏覽完引導(dǎo)頁(yè)之后進(jìn)入主界面時(shí)不會(huì)有視覺上太大的落差，識(shí)別色也給用戶留下了相對(duì)深的印象，容易讓用戶記住產(chǎn)品。設(shè)計(jì)者將文字內(nèi)容分為兩級(jí)，我們可以清晰的看到粗體被放大的標(biāo)題型文字與細(xì)小的描述型文字。標(biāo)題型文字將應(yīng)用的內(nèi)容重點(diǎn)提煉展示，描述型文字為其作補(bǔ)充，為用戶展示“好奇心日?qǐng)?bào)”這款應(yīng)用的內(nèi)容。

頁(yè)面的切換方式為橫向切換，這也是我們常規(guī)的切換方式，那么下面我們來看一款不一樣的切換方式。

這是一款為用戶提供旅行攻略的應(yīng)用，首先設(shè)計(jì)者選擇了一種扁平化的風(fēng)格，用圓點(diǎn)連接每一張頁(yè)面，以屏間交互的方式引導(dǎo)用戶展示應(yīng)用的內(nèi)容。

同樣作為內(nèi)容展示的作用，下面為大家介紹360Camera的設(shè)計(jì)風(fēng)格。

360Camera點(diǎn)設(shè)計(jì)者采用漸變背景搭配輕擬物的風(fēng)格為用戶展示了應(yīng)用包含的“攝像”、“掃一掃”、“圖片編輯”等功能內(nèi)容。

文案上，用紅色放大的字體將這三個(gè)內(nèi)容強(qiáng)化，讓用戶能夠一目了然。

淘寶

計(jì)步器

這兩款應(yīng)用采用了明暗突出的形式，相比之下，淘寶采用了比較風(fēng)格化的形式，但他們同樣起到了操作指引的作用。

qq采用了萌系的卡通風(fēng)格，以用戶熟知的吉祥物作為主角對(duì)本次更新的功能進(jìn)行描述。

同樣以功能更新說明作為目的還有36氪。

36氪采用了一種比較特殊的彈窗風(fēng)格，當(dāng)用戶觸發(fā)模塊時(shí)才會(huì)彈出該模塊本次的更新，這是一種用戶體驗(yàn)的提升，對(duì)用戶來說只有“我”關(guān)注的才是“有用的”，產(chǎn)品設(shè)計(jì)者以這一方式幫助用戶屏蔽“無用的”信息。

這里我們看到這是微信引起行業(yè)內(nèi)熱烈討論的幾個(gè)版本之一，黑色底配上文字加手繪，整個(gè)頁(yè)面看起來很簡(jiǎn)單，但細(xì)細(xì)品讀卻又引發(fā)思考。將即時(shí)聊天做到相對(duì)完美的程度之后，微信針對(duì)“朋友圈”又做了一次精彩的內(nèi)容運(yùn)營(yíng)。

說到微信就不得不說支付寶，支付寶9.9更新也在業(yè)內(nèi)激起浪潮，紛紛揣測(cè)支付寶是不是要做社交，這里不做展開，但是不得不說這一版的引導(dǎo)頁(yè)讓我眼前一亮。

支付寶作為一款與“錢”掛鉤的應(yīng)用，用戶關(guān)注的重點(diǎn)也一定是“安全”，首先設(shè)計(jì)者采用了工業(yè)設(shè)計(jì)圖的風(fēng)格對(duì)圖案進(jìn)行設(shè)計(jì)，眾所周知工業(yè)設(shè)計(jì)圖必須保證精準(zhǔn)性，這樣的圖案給用戶一種“嚴(yán)謹(jǐn)”的心理暗示，讓用戶對(duì)支付寶產(chǎn)生信任感。

文案上，支付寶將自己與蒸汽機(jī)、電燈、自行車、飛機(jī)作類比，用“異想天開”、“天方夜譚”、“荒誕無稽”和“癡人說夢(mèng)”來描述當(dāng)時(shí)環(huán)境下這些發(fā)明在世人眼中的形象。將支付寶形象拔高，向用戶展現(xiàn)情懷，達(dá)到品牌營(yíng)銷的目的。

如果要給支付寶9.9版的引導(dǎo)頁(yè)找缺陷，那么我認(rèn)為是用戶場(chǎng)景考慮不夠，頁(yè)面缺少“跳過”按鈕，工具類應(yīng)用就是為用戶解決問題，當(dāng)用戶處于一種急需支付的狀態(tài)打開應(yīng)用時(shí)，用戶需要?jiǎng)澾^五張對(duì)當(dāng)前狀況毫無幫助的頁(yè)面，反而對(duì)用戶是一種負(fù)擔(dān)。

二、動(dòng)態(tài)引導(dǎo)頁(yè)

隨著技術(shù)發(fā)展，各種各樣的展現(xiàn)形式被加入移動(dòng)端設(shè)計(jì)中，下面我們來看一看精彩的動(dòng)態(tài)引導(dǎo)頁(yè)設(shè)計(jì)。

格志引導(dǎo)頁(yè)效果預(yù)覽

格志選擇用線框動(dòng)效搭配文字來對(duì)功能進(jìn)行展現(xiàn)，同時(shí)也為用戶的操作提供引導(dǎo)和幫助。除了初次進(jìn)入應(yīng)用時(shí)可以觀看到動(dòng)畫，當(dāng)用戶不清楚操作時(shí)仍可以通過“設(shè)置”模塊再次觀看動(dòng)畫。

這是“什么值得買”早期的一版引導(dǎo)頁(yè)，采用了定格動(dòng)畫的形式，作為用戶，我在觀看的時(shí)候出了感覺形式新穎之外并沒有為我提供任何幫助或者讓我加深對(duì)這款應(yīng)用的認(rèn)識(shí)，當(dāng)然這只是我的個(gè)人感受，如有不同意見歡迎討論。

從截圖可以看出，貓弄的設(shè)計(jì)是比較風(fēng)格化的，打哈欠的貓咪嘴巴不斷張大從里面游出鯨魚，鯨魚帶起的浪花中又冒出奇怪的八抓魚……你永遠(yuǎn)不知道下一個(gè)會(huì)出現(xiàn)的是什么，最后頁(yè)面進(jìn)入一張“定制你感興趣的主題”頁(yè)面。

有的人不禁問這算什么引導(dǎo)？其實(shí)，貓弄是一款號(hào)稱“致力于抗擊無聊的高質(zhì)量文化社區(qū)”，打開應(yīng)用后不斷變化的動(dòng)畫就足夠吸睛，符合產(chǎn)品本來的調(diào)性，而貓弄本身涵蓋的主題是非常廣泛的。前面說到，對(duì)用戶來說，他們關(guān)心的才是有用的信息，那么這一行為正是幫助用戶從海量的內(nèi)容中去準(zhǔn)確定位到對(duì)自己“有用的”信息。

好贊選擇了用視頻的形式作為引導(dǎo)頁(yè)，這也是對(duì)新增的“短視頻”功能做一個(gè)展示，短視頻為用戶構(gòu)建了四種不同的使用場(chǎng)景，搭配好贊標(biāo)志性的“標(biāo)簽”特點(diǎn)，讓用戶覺得新穎有趣又牢牢的記住應(yīng)用的特色。

上文介紹了靜態(tài)引導(dǎo)頁(yè)和動(dòng)態(tài)引導(dǎo)頁(yè)的不同形式，下面給大家總結(jié)一下產(chǎn)品設(shè)計(jì)者所想要達(dá)到的目的或者說傳遞給用戶的信息：

在產(chǎn)品設(shè)計(jì)中，我們?nèi)绾稳ヅ袛嘧约寒a(chǎn)品需要達(dá)到怎么樣的效果，這里也是上文介紹中的一條“暗線”：

當(dāng)一個(gè)產(chǎn)品剛剛問世的時(shí)候，我們往往想要通過引導(dǎo)頁(yè)讓用戶了解產(chǎn)品本身的內(nèi)容和功能，在使用前為用戶提供幫助，那么我們會(huì)選擇以“內(nèi)容介紹”與“操作引導(dǎo)”作為引導(dǎo)頁(yè)的內(nèi)容；

隨著時(shí)間推移，產(chǎn)品經(jīng)過優(yōu)化之后，針對(duì)重大更新我們需要告知用戶并提供幫助，以免用戶產(chǎn)生陌生感，提高用戶學(xué)習(xí)成本，那么我們會(huì)選擇以“更新說明”作為引導(dǎo)頁(yè)的內(nèi)容；

像微信這樣當(dāng)他將即時(shí)聊天做到極致的狀態(tài)之后就會(huì)圍繞產(chǎn)品的另一功能進(jìn)行推廣以“內(nèi)容運(yùn)營(yíng)”作為引導(dǎo)頁(yè)的內(nèi)容；

產(chǎn)品經(jīng)過千錘百煉，達(dá)到一種相對(duì)完備的產(chǎn)品，像支付寶這樣用引導(dǎo)頁(yè)幫助品牌為用戶構(gòu)建一個(gè)安全、專業(yè)的使用場(chǎng)景，和用戶聊一聊情懷。

當(dāng)然，上面一條規(guī)律只是相對(duì)常規(guī)的考慮方式，根據(jù)不同產(chǎn)品還需要各位產(chǎn)品經(jīng)理仔細(xì)思考，例如貓弄、豆瓣這樣的產(chǎn)品更適合以“用戶信息定位”作為引導(dǎo)頁(yè)的內(nèi)容；

又如購(gòu)物類app，用戶在接觸許多同類型應(yīng)用后已經(jīng)對(duì)“購(gòu)物”的流程相對(duì)熟悉，再過多對(duì)功能進(jìn)行渲染反而成為使用上的負(fù)擔(dān)，很多購(gòu)物類產(chǎn)品會(huì)選擇以“品牌推廣”作為引導(dǎo)頁(yè)內(nèi)容，推廣品牌“優(yōu)質(zhì)”、“新鮮”、“低價(jià)”的特點(diǎn)，以讓用戶對(duì)品牌產(chǎn)生依賴感。

以上是個(gè)人對(duì)引導(dǎo)頁(yè)的一些分析與分享，歡迎討論，若有不對(duì)之處也歡迎批評(píng)指正。

作者：密斯徐，一個(gè)在產(chǎn)品路上爬行的產(chǎn)品狗，筆芯～

本文由 @密斯徐 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。