本文為我的原創(chuàng)譯文，原文作者：Nick Babich
原文地址：https://www.smashingmagazine.com/2017/02/user-onboarding-empty-states-mobile-apps/#comments
用戶是根據(jù)打開APP后首先看到的幾個(gè)頁(yè)面來(lái)建立對(duì)這個(gè)產(chǎn)品的期望近她。為了避免他們?cè)谟眠^(guò)一次后娩贷，就把你的APP刪掉弥咪，你應(yīng)該告訴他們?nèi)绾稳ネ瓿申P(guān)鍵任務(wù)义黎，激勵(lì)他們以后再次使用冷尉。也就是說(shuō)，你需要在用戶最初與產(chǎn)品互動(dòng)時(shí)力细，就成功引導(dǎo)并吸引他們睬澡。
引導(dǎo)過(guò)程（onboarding process）是讓用戶成功使用產(chǎn)品的關(guān)鍵。畢竟眠蚂，第一印象相當(dāng)重要煞聪。在此文中，我們將會(huì)介紹如何運(yùn)用“空狀態(tài)”的來(lái)引導(dǎo)用戶逝慧。
什么是空狀態(tài)昔脯？
對(duì)大多數(shù)APP來(lái)說(shuō)，不管是新聞?dòng)嗛喌殉肌⑷蝿?wù)管理云稚，或系統(tǒng)監(jiān)控等等，內(nèi)容都是它們的核心價(jià)值沈堡。因此如何設(shè)計(jì)“空狀態(tài)”——在用戶初次使用時(shí)静陈，還沒有生成內(nèi)容或數(shù)據(jù)的頁(yè)面——就尤為重要。
默認(rèn)狀態(tài)為空白诞丽，需要用戶通過(guò)一步或幾步操作來(lái)生成數(shù)據(jù)的頁(yè)面鲸拥，非常適合作為引導(dǎo)頁(yè)面。除了讓用戶知道這里將會(huì)有什么內(nèi)容僧免，空狀態(tài)還能向用戶介紹如何使用這個(gè)APP刑赶。即使引導(dǎo)過(guò)程只有一步，適當(dāng)?shù)奶崾救匀荒茏層脩舸_信他們的操作是正確的懂衩。
空狀態(tài)在引導(dǎo)過(guò)程中的價(jià)值
空狀態(tài)是緊密結(jié)合的引導(dǎo)過(guò)程的一部分撞叨，你可以利用它來(lái)指導(dǎo)和吸引用戶金踪，讓用戶通過(guò)操作來(lái)產(chǎn)生內(nèi)容。
教育用戶
首先谒所，空狀態(tài)應(yīng)該幫助用戶理解上下文热康。通常，用戶知道了即將發(fā)生什么劣领，才會(huì)覺得舒服姐军。最好的方式是“展示或告知”：向用戶展示有了內(nèi)容后的頁(yè)面是什么樣的，或用清晰的文字說(shuō)明來(lái)告知他們尖淘。
引導(dǎo)操作
大多數(shù)空狀態(tài)會(huì)告訴用戶它們是什么奕锌，為什么存在。但是村生，有效的空狀態(tài)會(huì)更進(jìn)一步引導(dǎo)用戶：接下來(lái)能做什么惊暴。教育用戶是很重要的，但好的空狀態(tài)要能夠成功引導(dǎo)用戶行動(dòng)趁桃。將空狀態(tài)看作一個(gè)起始點(diǎn)辽话，并利用它來(lái)激發(fā)用戶的操作。
創(chuàng)造愉悅的用戶體驗(yàn)
你的APP不僅要實(shí)用（能為用戶解決某個(gè)問(wèn)題）卫病、好用（容易學(xué)習(xí)和使用）油啤，也應(yīng)該令人愉悅◇翱粒空狀態(tài)是與用戶建立良好關(guān)系益咬，并讓他們了解你的APP個(gè)性的絕佳機(jī)會(huì)。
如何設(shè)計(jì)一個(gè)好的空狀態(tài)
雖然空狀態(tài)能夠吸引用戶帜平，但在設(shè)計(jì)和開發(fā)過(guò)程中幽告，它卻往往被忽略。因?yàn)槲覀兺ǔＡ?xí)慣于設(shè)計(jì)一個(gè)內(nèi)容充分的頁(yè)面裆甩，一切都被安排的井然有序冗锁。然而，當(dāng)用戶還沒有完成必要的操作來(lái)產(chǎn)生內(nèi)容時(shí)嗤栓，我們?cè)撊绾卧O(shè)計(jì)界面蒿讥？空狀態(tài)恰恰是一個(gè)體現(xiàn)創(chuàng)意和可用性的好機(jī)會(huì)。
避免讓用戶陷入死胡同
對(duì)一個(gè)空狀態(tài)頁(yè)面來(lái)說(shuō)抛腕，最糟糕的設(shè)計(jì)是讓用戶陷入了死胡同芋绸。這會(huì)給用戶帶來(lái)困惑，并增加不必要的點(diǎn)擊担敌。比較一下Modspot的這兩張圖片：第一張是Modspot目前的空狀態(tài)頁(yè)面摔敛，設(shè)計(jì)的很巧妙，能引導(dǎo)新手用戶進(jìn)行下一步的操作全封，讓使用體驗(yàn)更流暢马昙。
第二張圖是我針對(duì)同一個(gè)頁(yè)面所設(shè)計(jì)的假版本桃犬，來(lái)說(shuō)明如果缺乏有效引導(dǎo)，空狀態(tài)頁(yè)面會(huì)讓用戶陷入死胡同行楞，無(wú)從知道接下來(lái)該做什么攒暇。
保持空狀態(tài)的簡(jiǎn)潔
美觀的空狀態(tài)通常是簡(jiǎn)潔的。你應(yīng)該運(yùn)用極簡(jiǎn)主義的設(shè)計(jì)方法子房，凸顯最重要的內(nèi)容形用，盡可能減少額外的干擾。你需要精心編寫文字证杭，讓它一目了然田度，并配上簡(jiǎn)明精美的圖形。
讓空狀態(tài)直觀易懂
但是別忘了解愤，空狀態(tài)可不只是好看就行了镇饺。它要能幫助用戶理解上下文。即便它只是一個(gè)暫時(shí)的引導(dǎo)步驟送讲，設(shè)計(jì)師也應(yīng)該最大化它的溝通價(jià)值奸笤，引導(dǎo)用戶進(jìn)一步的操作。
讓我們來(lái)看看Google Photos的空狀態(tài)頁(yè)面哼鬓。視覺上揭保，它看起來(lái)很棒：布局得體，圖形美觀魄宏。也提供了引導(dǎo)，告訴用戶如何創(chuàng)建“Collection”存筏。
張揚(yáng)產(chǎn)品個(gè)性
想給用戶留下好的第一印象宠互，光有可用性是不夠的，產(chǎn)品個(gè)性也很重要椭坚。它能讓你的APP帶來(lái)愉悅的體驗(yàn)予跌，令人難忘。如果你的空狀態(tài)不同于競(jìng)爭(zhēng)產(chǎn)品善茎，你的用戶就會(huì)注意到券册，并期待你整體的產(chǎn)品體驗(yàn)也獨(dú)樹一幟。下圖顯示了Khaylo Workout如何利用空狀態(tài)來(lái)展現(xiàn)個(gè)性垂涯，圖形和文字的語(yǔ)氣都很特別烁焙。
鼓勵(lì)用戶操作
在空狀態(tài)頁(yè)面，你的首要目標(biāo)是說(shuō)服用戶盡快去做些什么耕赘，來(lái)消除空狀態(tài)骄蝇。這不僅需要告訴用戶利用APP會(huì)得到什么好處，也要引導(dǎo)用戶去完成相應(yīng)的操作操骡。
來(lái)看看Facebook Messenger的安裝頁(yè)面九火。當(dāng)用戶進(jìn)入這一頁(yè)時(shí)赚窃，會(huì)看到鼓勵(lì)的文字——既介紹了Messenger的優(yōu)點(diǎn)（可以用來(lái)拍照或錄像），也顯示了用戶有多少Facebook好友正在使用它岔激±占“Install”按鈕則將用戶順理成章地引導(dǎo)到了下一步。
可能的話虑鼎，提供個(gè)性化的內(nèi)容
當(dāng)你將APP變的個(gè)性化時(shí)辱匿，你能更快地向用戶展示它的價(jià)值。個(gè)性化的主要目的是APP主動(dòng)展示滿足特定用戶需求或興趣的內(nèi)容震叙。它根據(jù)所掌握的用戶信息掀鹅，來(lái)調(diào)整內(nèi)容，給出個(gè)性化的空狀態(tài)頁(yè)面媒楼。
可以提供啟動(dòng)內(nèi)容乐尊，讓用戶能立即開始瀏覽你的APP。比如划址，一個(gè)閱讀APP可以基于用戶信息扔嵌，為他推薦幾本可能感興趣的書。
在用戶界面中融入情感
空狀態(tài)能展示你業(yè)務(wù)或產(chǎn)品人性化的一面夺颤。正面的情感刺激能激發(fā)用戶參與痢缎。至于空狀態(tài)傳遞哪種情緒，取悅于你產(chǎn)品的目的世澜。下圖Google Hangouts的空狀態(tài)独旷，就展現(xiàn)了情感化的一面，能激勵(lì)用戶在Hangouts上獲得邀請(qǐng)寥裂。
當(dāng)然嵌洼，像這樣去展示情感是有一定風(fēng)險(xiǎn)的——有些用戶可能理解不了，甚至?xí)拹悍馇 ２贿^(guò)也沒什么麻养，用戶能對(duì)你的設(shè)計(jì)產(chǎn)生情緒反應(yīng)，總比顯得無(wú)動(dòng)于衷要好诺舔。
展示成功狀態(tài)
當(dāng)新手用戶完成了一個(gè)重要任務(wù)鳖昌，是你在用戶與產(chǎn)品間建立積極情感聯(lián)結(jié)的好機(jī)會(huì)。承認(rèn)用戶的進(jìn)步低飒，并向他們的成功表示祝賀许昨，能讓用戶知道他們做的很好。
成功狀態(tài)是慶祝用戶順利完成任務(wù)褥赊，并提示他們進(jìn)行進(jìn)一步操作的絕佳機(jī)會(huì)车要。例如，對(duì)Writeupp的用戶來(lái)說(shuō)崭倘，完成任務(wù)列表顯然是一項(xiàng)成就翼岁。此時(shí)类垫，APP給出祝賀語(yǔ)：“干的好！”琅坡，就是一種正強(qiáng)化悉患。這樣的成功狀態(tài)能讓用戶覺得開心，而給出接下來(lái)的操作提示榆俺，則能讓用戶繼續(xù)使用這個(gè)產(chǎn)品售躁。
進(jìn)一步探索
下面是更多學(xué)習(xí)資源，感興趣的話可以去看看：
· Useronboard上有很多引導(dǎo)體驗(yàn)的案例和詳細(xì)解讀
· Uxarchive也是一個(gè)非常好的網(wǎng)站茴晋，包含了許多熱門APP的引導(dǎo)頁(yè)面
·?Ui-patterns收集了許多Web-APP的用戶引導(dǎo)界面
· Emptystat.es是用戶提交的各種空狀態(tài)頁(yè)面合集
總結(jié)
空狀態(tài)絕不應(yīng)該是空空如也陪捷。不要讓用戶在初次打開一個(gè)APP時(shí)，面對(duì)一個(gè)空白的界面诺擅。好好去設(shè)計(jì)空狀態(tài)市袖，因?yàn)樗⒉皇怯脩趔w驗(yàn)中一個(gè)暫時(shí)或微不足道的部分。事實(shí)上烁涌，它和其他部分一樣重要苍碟，在驅(qū)動(dòng)用戶參與，帶給用戶愉悅上扮演了重要角色撮执。
