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