設(shè)計(jì)模式對(duì)于啟發(fā)和教育設(shè)計(jì)師來(lái)說(shuō)是絕好的資源。但通常的做法并不等于最好的做法。在這篇文章中，我們將要審視為什么很多常見(jiàn)引導(dǎo)界面中的模式是無(wú)效的，以及如何利用游戲的設(shè)計(jì)原則來(lái)提升用戶的參與度。

在《移動(dòng)應(yīng)用UI設(shè)計(jì)模式》第一版問(wèn)世之后，Intuit讓我跟這個(gè)移動(dòng)團(tuán)隊(duì)對(duì)話。我曾經(jīng)在不同行業(yè)（服裝、建筑、軟件等等）以高水平談?wù)撛O(shè)計(jì)模式的價(jià)值，以及它們?yōu)楹文艹蔀橛杏玫慕虒W(xué)工具。

Alissa Briggs，Intuit的一位高級(jí)UX經(jīng)理，作為從Snap Payrol學(xué)習(xí)的案例而跟隨了我的談話。想象一下，當(dāng)她看過(guò)我書（Dialog，How It Works，Tour and Transparency）中每一個(gè)“邀請(qǐng)”模式，并指出它們是如何沒(méi)能有效留住用戶的時(shí)候，我是有多么驚訝。用戶因?yàn)檫@些額外的“有幫助的”頁(yè)面而感到困惑或沮喪（或者兩者兼有）。

一些Intuit公司的Snap Payroll引導(dǎo)中的測(cè)試概念（來(lái)自“Dialog, How It Works, Transparency and Tour”）

不久之后，我和RetailMeNot共事，測(cè)試iOS和安卓應(yīng)用的引導(dǎo)界面。這個(gè)產(chǎn)品團(tuán)隊(duì)希望能夠確保用戶了解這個(gè)工具的價(jià)值主張，并知道從哪里訪問(wèn)特定操作（收藏商店、保存優(yōu)惠券等等）。

我們認(rèn)為非常簡(jiǎn)短的導(dǎo)引（三步走）或者一個(gè)視頻指導(dǎo)應(yīng)該會(huì)有所建樹(shù)。一些利益相關(guān)者喜歡那些半透明的想法，所以我們也測(cè)試了這種。但這些都沒(méi)有吸引到用戶，它們只是讓用戶感到灰心喪氣。

其中一位RetailMeNot測(cè)試的參與者說(shuō)：

“我只是想要進(jìn)入app然后開(kāi)始探索?！?/p>

總之，用戶測(cè)試表明，用戶跳過(guò)或以其它方式忽略對(duì)話框、導(dǎo)引、視頻指導(dǎo)和半透明的層。最好的情況里，用戶只發(fā)現(xiàn)一點(diǎn)小小的不便。最糟糕的時(shí)候，這個(gè)模式嚴(yán)重阻止了那些想要進(jìn)入應(yīng)用的新用戶。

部分RetailMeNot的引導(dǎo)界面概念：半透明、視頻指導(dǎo)、三步導(dǎo)引(大圖)

為什么這些模式?jīng)]用？

那么，為什么這些模式?jīng)]用？我轉(zhuǎn)而在游戲設(shè)計(jì)中尋找答案。游戲設(shè)計(jì)者一直都知道你不能把新玩家丟到戰(zhàn)場(chǎng)中央還期待他們會(huì)喜歡這種體驗(yàn)。大部分玩家都會(huì)在搞清楚如何開(kāi)火并回?fù)糁熬退赖袅恕?/p>

在游戲設(shè)計(jì)中，一些深層次的銜接方法更加有效。這同樣適用移動(dòng)應(yīng)用。雖然賭注不一定是（虛擬的）生命或死亡，但令人無(wú)奈的是，當(dāng)用戶感覺(jué)自己無(wú)所適從的時(shí)候，其體驗(yàn)是一樣的。當(dāng)這種事總是發(fā)生在你用戶身上的時(shí)候，你的應(yīng)用就game over了。

傳送門（Portal）在推進(jìn)游戲時(shí)，為玩家提供了一個(gè)安全的環(huán)境來(lái)學(xué)習(xí)如何控制。

Extra Credits的在線視頻系列從一個(gè)局內(nèi)人的角度，周到地環(huán)視了游戲世界的各個(gè)方面?！癟utorials 101”是一個(gè)夢(mèng)幻般的視頻，就算是應(yīng)用設(shè)計(jì)者也會(huì)樂(lè)于觀看（跳過(guò)那些討厭的花栗鼠配音?-?這很值得）。

“Tutorials 101”列舉了一些起草有效游戲引導(dǎo)的基本規(guī)則，我們可以將其擴(kuò)展到移動(dòng)設(shè)計(jì)中：

1. 使用更少文字
2. 不要提前全說(shuō)
3. 讓它好玩點(diǎn)
4. 通過(guò)游戲加強(qiáng)學(xué)習(xí)
5. 傾聽(tīng)你的玩家

守則1：使用更少文字

當(dāng)我們想要解釋一件事，一般說(shuō)話是最常用的工具。但是當(dāng)我們想讓用戶學(xué)習(xí)某件事，書寫下來(lái)的文字變成了關(guān)鍵。“Tutorials 101,”說(shuō)我們應(yīng)該避免僅僅依靠文字因?yàn)椤八\殺步調(diào)、破壞沉浸感，而且經(jīng)常被那些最需要引導(dǎo)的玩家跳過(guò)。”

太多的文字變成了一種“說(shuō)出來(lái)而非展現(xiàn)出來(lái)”的方式，這削減了移動(dòng)應(yīng)用的優(yōu)點(diǎn)。實(shí)際上，引導(dǎo)應(yīng)該是“展現(xiàn)出來(lái)，而非說(shuō)出來(lái)”；它們應(yīng)該是可互動(dòng)的，讓用戶邊做邊學(xué)。當(dāng)一個(gè)人事先練習(xí)過(guò)某個(gè)動(dòng)作，和那些只是被告知應(yīng)該怎么做的用戶相比，在需要使用這個(gè)動(dòng)作的時(shí)候更容易想起來(lái)應(yīng)該怎么做。

這里是一些例子：

Boomerang vs. Mailbox

Boomerang?的安卓版文字太多了（參見(jiàn)規(guī)則:?“不要提前全說(shuō)”）。

Mailbox?的iOS引導(dǎo)文字鼓勵(lì)用戶邊做邊學(xué)。（觀看視頻）

DigiCal vs. Fantastical

In?DigiCal?的安卓版，描述活動(dòng)的文字太抽象了。

In?Fantastical?的iOS版，引導(dǎo)界面邀請(qǐng)用戶使用他們需要了解的手勢(shì)。（觀看視頻）

Catch（2013）vs. Clear

Catch的安卓版教程告訴用戶自己的特點(diǎn)和動(dòng)作，但是不讓用戶嘗試。

In?Clear for iOS，默認(rèn)視圖已經(jīng)預(yù)加載了一些任務(wù)，用戶可以邊做邊學(xué)。

有辦法展現(xiàn)并可以不說(shuō)的時(shí)候，按奈下使用文字的沖動(dòng)。使用文字提示“情況”，然后讓用戶通過(guò)操作查看“效果”。

守則2：不要提前全說(shuō)

“如果你前置加載了你的引導(dǎo)，并在一開(kāi)始就告訴你的玩家所有的事情，”Extra Credits在“Tutorials 101”中說(shuō)，“他們會(huì)被信息淹沒(méi)，而且缺乏參與”，把這句話中的“玩家”換成“用戶”，其對(duì)于應(yīng)用設(shè)計(jì)師的意義來(lái)說(shuō)顯而易見(jiàn)。

不要讓用戶被信息淹沒(méi)，反正在他們需要使用的時(shí)候，估計(jì)也沒(méi)人記得了。在用戶需要的時(shí)候，精確地提供簡(jiǎn)單易懂的信息塊。記住你是在制造第一印象。難道你寧愿給你用戶的第一印象是萬(wàn)念俱灰什么都不想要嗎？

Dooo vs. Todoist

Dooo的iOS版前置加載的信息洋洋灑灑11頁(yè)。

In?Todoist的iOS版，一個(gè)小標(biāo)題邀請(qǐng)用戶添加第一個(gè)任務(wù)，然后出現(xiàn)另一個(gè)提示告介紹選項(xiàng)菜單。(大圖)

UserTesting的最近一篇文章“從Facebook的新應(yīng)用Paper中學(xué)到的6堂UX課。”也提到“用戶喜歡引導(dǎo)游覽”?—?“引導(dǎo)游覽”意味著在用戶初次使用時(shí)出現(xiàn)的一系列短小的交互提示。

Facebook的Paper應(yīng)用在內(nèi)容流中使用交互提示。

Facebook ?Paper還有很多值得稱道的地方呦：《最近這個(gè)超火！23個(gè)FACEBOOK PAPER中的設(shè)計(jì)細(xì)節(jié)》

不要在一開(kāi)始就把所有他們可能需要的信息都放出來(lái)。只是在他們需要的時(shí)候，給他們一個(gè)小小的塊。

守則3：讓它有好處

事實(shí)上，你可能還記得“Tutorials 101”的守則是“讓它好玩點(diǎn)”，當(dāng)然了，“好玩”并不適合所有應(yīng)用。但是視頻旁白說(shuō)，“你的引導(dǎo)應(yīng)該盡可能像游戲的其他部分一樣吸引人”，我們就可以發(fā)現(xiàn)在某種意義上說(shuō)，這條規(guī)則也適用于我們。

雖然我們不能讓學(xué)習(xí)應(yīng)用的過(guò)程變得有趣，但是還有辦法讓它變的有好處，并且令其無(wú)縫流動(dòng)到應(yīng)用的全局體驗(yàn)中去。其中一個(gè)很好的辦法就是允許用戶真正完成操作的交互性。這種方法可以增強(qiáng)用戶的學(xué)習(xí)。

盡管“好玩”并不能作為一個(gè)正確的基調(diào)，但是添加一些有趣的感覺(jué)還是可行的。我們來(lái)看看兩個(gè)在這方面截然不同的應(yīng)用，NBC News和Flipboard，后者例示了正確的方法。暫且不管那5個(gè)半透明界面上的“有趣”字體，NBC的引導(dǎo)看起來(lái)還是像個(gè)講座。而另一方面，F(xiàn)lipboard在一開(kāi)始給人感覺(jué)就完全不同。

沒(méi)有說(shuō)明文字，屏幕下半部分有趣地翻轉(zhuǎn)了一點(diǎn)，吸引你在翻轉(zhuǎn)之前去看一眼。之后它又重復(fù)了一次，你可能會(huì)知道你需要?jiǎng)潉?dòng)來(lái)打開(kāi)下面的內(nèi)容。但是如果你沒(méi)有的話，會(huì)有一個(gè)彈出式窗口提醒你“劃動(dòng)以繼續(xù)”。

每次翻轉(zhuǎn)漸變都強(qiáng)化劃動(dòng)手勢(shì)，新用戶借此學(xué)會(huì)了在Flipboard中探索內(nèi)容所必須的操作。有趣且有好處。

NBC News vs. Flipboard

NBC News的iOS版是有有趣的字體，但是這種長(zhǎng)篇大論一點(diǎn)好處都沒(méi)有。

Flipboard的Android版和iOS版嵌入了有趣的提示，加強(qiáng)導(dǎo)航應(yīng)用所需的關(guān)鍵手勢(shì)。

與你的應(yīng)用意義做更深入的融合，在適當(dāng)?shù)牡胤娇紤]添加有趣的元素，為用戶邊做邊學(xué)創(chuàng)造緊迫感。

守則4：通過(guò)使用加強(qiáng)學(xué)習(xí)

還記得當(dāng)你在科技課上通過(guò)一個(gè)簡(jiǎn)單的實(shí)驗(yàn)而明白了一個(gè)概念的驚喜瞬間嗎？這就是我們要說(shuō)的。當(dāng)然老師已經(jīng)向你解釋過(guò)那些概念了，但當(dāng)你做過(guò)實(shí)驗(yàn)之后，你才真正學(xué)到了。

引導(dǎo)界面也是一樣。如果你遵從前面的三條手守則，這種加強(qiáng)手段會(huì)在很大程度上幫助到自己。它可以很簡(jiǎn)單，比如伴隨一點(diǎn)視覺(jué)或聽(tīng)覺(jué)反饋的操作示范引導(dǎo)。

然后，當(dāng)用戶進(jìn)行之后的操作，相同的反饋會(huì)加強(qiáng)他們所學(xué)。（如果你使用聲音反饋，提供關(guān)掉它的方法，這樣當(dāng)用戶熟悉應(yīng)用之后，這種提示也不會(huì)變成噪音）

這個(gè)規(guī)則是“不要提前全說(shuō)”的補(bǔ)充。不要試圖一次展現(xiàn)你的應(yīng)用的所有方面，精心安排讓用戶逐步深入到你的應(yīng)用中。隨著時(shí)間的推移或者意料之外的“好處”逐漸揭示更多的功能，這樣你就可以在用戶使用應(yīng)用的時(shí)候加強(qiáng)他們的認(rèn)識(shí)。

Polar在一些輪詢得到回答之后，會(huì)提供一個(gè)小提示來(lái)激勵(lì)用戶。Duolingo的用戶在掌握技能之后獲得獎(jiǎng)勵(lì)并升級(jí)。

Any.do在安卓首頁(yè)上放置了小插件，以鼓勵(lì)用戶參與并提供自發(fā)的獎(jiǎng)勵(lì)。

學(xué)習(xí)不是一蹴而就的。使用應(yīng)用應(yīng)該不斷強(qiáng)化引導(dǎo)所教，幫助用戶學(xué)習(xí)。

守則5：傾聽(tīng)你的用戶

考慮到你已經(jīng)深入建構(gòu)并完善你的應(yīng)用幾個(gè)月了，誰(shuí)是闡釋這個(gè)應(yīng)用的最佳人選？應(yīng)該不是你，根據(jù)“Tutorials 101”，旁白這么說(shuō)：

??“當(dāng)你作為一個(gè)在項(xiàng)目里勤勞耕耘一兩年的設(shè)計(jì)師，那些實(shí)際上完全不可理解的東西在你看來(lái)，也是直觀和明顯的?！?/p>

簡(jiǎn)單來(lái)說(shuō)，適當(dāng)?shù)剡M(jìn)行一些用戶測(cè)試就可以發(fā)現(xiàn)不少問(wèn)題。關(guān)注你的用戶是在哪里卡住的，以及在哪里遇到了問(wèn)題。傾聽(tīng)他們的意見(jiàn)，因?yàn)槭撬麄冊(cè)谟趹?yīng)用交互。不要到后來(lái)再問(wèn)他們，如果你在他們使用應(yīng)用的時(shí)候就問(wèn)他們，你會(huì)更容易引導(dǎo)他們自然而然地回答你想要知道的。

Snap Payroll的設(shè)計(jì)者通過(guò)用戶測(cè)試，最終發(fā)現(xiàn)引導(dǎo)體驗(yàn)、或者上下文提示，可以得到最佳的效果。在RetailMeNot上的四輪測(cè)試讓我們得到了相同的結(jié)果。

Snap Payroll的上下文提示測(cè)試對(duì)用戶非常好，RetailMeNot也是。

熟悉讓你不知道哪些是用戶需要學(xué)習(xí)的。讓用戶通過(guò)公正的用戶測(cè)試告訴你。

移動(dòng)引導(dǎo)頁(yè)設(shè)計(jì)好文合集！

先來(lái)一組靈感爆棚的引導(dǎo)頁(yè)！
《靈感爆棚！22個(gè)知名App啟動(dòng)引導(dǎo)頁(yè)設(shè)計(jì)欣賞》

超實(shí)用教程！從零開(kāi)始教你設(shè)計(jì)引導(dǎo)頁(yè)！
《超全面指南！如何設(shè)計(jì)移動(dòng)應(yīng)用引導(dǎo)頁(yè)》

百度MUX的移動(dòng)引導(dǎo)頁(yè)總結(jié)！
《百度MUX：引人入勝的引導(dǎo)頁(yè)設(shè)計(jì)》

原文地址：SMASHING MAGAZINE
優(yōu)設(shè)網(wǎng)翻譯：@阿布
【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

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