2014-10-22 藍藍設(shè)計的小編
app的引導(dǎo)頁面是一個app的門面,給用戶的第一感覺。所以一個app的引導(dǎo)頁面的設(shè)計非常重要。
本系列是寫給新手開發(fā)者的UI/UX指南,幫助開發(fā)者提供一些基本的UX信息。本文主要通過實例分析哪些是優(yōu)秀的app引導(dǎo)頁面,哪些是糟糕的用戶引導(dǎo)頁面。
糟糕的引導(dǎo)頁面
開發(fā)者可使用引導(dǎo)頁來說明應(yīng)用的使用方法和特性,但不少應(yīng)用并沒有正確使用這一功能。
Life360的用戶引導(dǎo)頁
用戶引導(dǎo)頁除了可以教用戶怎么使用應(yīng)用程序外,也能在注冊之前告訴用戶這是一款什么樣的應(yīng)用。但是看看下邊這個引導(dǎo)頁,你還想知道它是一款什么應(yīng)用嗎?我看到的是connective, seamless, peace of mind以及一群女性的圖片。難道它是一個女性專用的app?仔細閱讀屏幕上的文本描述,它會告訴一點關(guān)于app的信息,但是沒有人喜歡去閱讀小字號文本。
Memoir 的引導(dǎo)頁
這個是Memoir,我在沒有任何信息幫助的情況下打開了應(yīng)用,結(jié)果是什么呢?仍然毫無頭緒。在閱讀了和圖片相關(guān)的描述后,我對這款應(yīng)用的理解仍不大清晰。我得返回到App Store查看截圖才能理解。
(免費聲明: 上述評論與應(yīng)用程序本身功能無關(guān),這兩款產(chǎn)品其實是很受好評的。)
有效的引導(dǎo)頁面
主要包括兩點:構(gòu)建情感體驗,并告知用戶何時使用應(yīng)用程序。
1) 構(gòu)建體驗
專注于極簡,并為產(chǎn)品賦予情感。
Human 的引導(dǎo)頁面
成就!雖然我還不知道它如何工作,但我知道需要去注冊一個賬戶。沒有任何描述,沒有動態(tài)的界面,沒有花哨的設(shè)計,但Human成功地構(gòu)建了app的情感體驗,這正是我想要的。
2) 告訴用戶何時使用應(yīng)用程序
對于一款產(chǎn)品來說,最重要的時刻是用戶再次打開的時候。
Everest 的引導(dǎo)頁面
除了有一個華麗的app icon外,Everest還有著完美的介紹引導(dǎo)頁面。
你什么時候會使用這款應(yīng)用?當你在冒險的旅程中。誰會過多關(guān)心它是干嘛用的?當你徒步旅行時、騎行時、滑雪時、潛水時以及在飛機上時,無論如何你都想試試這款應(yīng)用。
非常棒,你已經(jīng)吸引用戶下載了應(yīng)用。但是更重要的是你如何吸引用戶再次打開它。
PHHHOTO 的引導(dǎo)頁面
你何時會打開這款應(yīng)用?在你想捕捉美好快樂時光的時候。這是你首次打開應(yīng)用時候看到的,我制作的這個畫面有點“抽筋”,不過你可以下載體驗一下,看看你的第一感覺。用戶可以完全沉浸在這種非常酷的展示方式中,無需閱讀任何內(nèi)容或者與之進行交互。
預(yù)算有限/時間緊迫
以下是簡單且比較成功的引導(dǎo)頁面。
Beats Music 的引導(dǎo)頁
還能更簡單一點嗎?非常的介紹頁面。
TuneIn 的引導(dǎo)頁
視頻可能是最有效的引導(dǎo)方法。簡單四個字+一小段視頻剪輯,當然,TuneIn也有與產(chǎn)品相關(guān)的圖片。我可能不知道其他詳細信息,但我從中感受到了music、radio以及l(fā)ive shows。
Pinterest使用了漂亮的動畫來達到這種效果,但是你不一定非要這么做。Pinterest采用這種方法很地告訴用戶何時使用產(chǎn)品。對美食感興趣?喜歡收集?喜歡探索發(fā)現(xiàn)?那就用這款應(yīng)用吧。
小結(jié):
使用照片:在用戶清楚是否想要使用你的產(chǎn)品前,沒有人會喜歡讀一大段文字。
使用文本:清楚應(yīng)該何時使用文本??山梃b其他優(yōu)秀的示例,學習如何使用文本提升圖片。換句話說,開發(fā)者并不希望用戶閱讀文本描述。
如果可以請使用視頻:你可以使用一個視頻來取代你用代碼構(gòu)建的動畫。視頻可能花費高一點,但不是必需的。
專注于如何讓用戶再次使用產(chǎn)品:告訴用戶為什么他們需要再次使用應(yīng)用程序,何時會再次使用以及在什么樣的情景下使用等等。
藍藍設(shè)計的小編 http://tweetduck.com