[產(chǎn)品設(shè)計] [用戶體驗]
封面用研整編文章
如同Jesse James Garrett在《用戶體驗要素》提出最底層的架構(gòu)是用戶需求和網(wǎng)站目標(biāo)一樣，推動新用戶引導(dǎo)設(shè)計（Onboarding）的原因也有兩個：用戶需求和產(chǎn)品目標(biāo)。
對于新手引導(dǎo)來說缩幸，用戶需求是快速、愉悅地學(xué)習(xí)使用產(chǎn)品潘飘，產(chǎn)品目標(biāo)是將新手用戶快速轉(zhuǎn)化為活躍度高、黏著度高的忠實用戶测柠。用戶需求和產(chǎn)品目標(biāo)出發(fā)的角度會不一樣七嫌，有時候會存在著沖突，但并不是不可調(diào)和的矛盾腹缩，所以新手引導(dǎo)設(shè)計就是要平衡處理好用戶需求和產(chǎn)品目標(biāo)，實現(xiàn)雙贏的局面空扎。
為了不破壞用戶正常使用產(chǎn)品原有的功能和操作藏鹊，需要在引導(dǎo)力和對正常用戶使用的干擾上做出平衡。不妨多反問自己幾個問題：這個功能真的很必要引導(dǎo)和提醒用戶嗎转锈？這個功能是需要讓所有用戶都知道還是某一類用戶知道就可以了盘寡？這個提醒是需要所有場景都提示，還是到某一類特定場景才來提示呢撮慨？下面我們來梳理各類引導(dǎo)設(shè)計模式：
一. 初次使用說明引導(dǎo)
1. 滑動展示引導(dǎo)頁
如今市場上大多數(shù)APP都會在初次登錄的時候提供一系列滑動展示型引導(dǎo)頁竿痰，介紹應(yīng)用功能或演示交互。這種形式的缺陷在于它橫亙在用戶和APP之間砌溺，即使頁面設(shè)計得足夠精美有趣影涉，用戶也很難充滿耐心地仔細閱讀完。因為絕大多數(shù)的用戶還是傾向于自己探索APP规伐，即使教程對他們有所助益蟹倾，但是這本身是偏離用戶初衷的。
2. 使用說明書引導(dǎo)
“Welcome Board”是用戶打開Trello的任務(wù)管理面板的時候鲜棠，能看到的第一個的界面，其中涵蓋了預(yù)填充的代辦事項列表培慌，說明了程序中不同控件的交互和功能豁陆，這種方式可以讓用戶更有效地學(xué)習(xí)產(chǎn)品的功能。
App Store的精華產(chǎn)品Paper吵护，作為繪圖軟件它的交互建立在很多特殊手勢之上盒音，還定義了一些帶有品牌特色的操作規(guī)范。要知道用戶沒有多少時間和耐心去摸索一個完全陌生的產(chǎn)品馅而，因此Paper為用戶使用初期做了大量的引導(dǎo)祥诽。
二. 場景式引導(dǎo)
符合場景的用戶引導(dǎo)是在特定的界面、場景和時刻用爪，或者說特定的用戶歷程的節(jié)點原押，給用戶提供必要的說明。
1. 遮罩式提示
遮罩式提示為一種強引導(dǎo)偎血，通過直接蓋住界面來強調(diào)當(dāng)前需要引導(dǎo)的內(nèi)容诸衔。這種提示讓用戶將注意力集中到某個特定的主要交互上盯漂，最大限度的減少說明的信息量。引導(dǎo)內(nèi)容以圖層的形式疊加到對應(yīng)的UI控件上笨农，通常出現(xiàn)在用戶首次操作的時候就缆，并且一次只顯示一個。它要求用戶必須看到提示內(nèi)容并且執(zhí)行相應(yīng)操作或觸碰點擊x按鈕才會消失谒亦，這和app的彈窗邏輯有點類似竭宰，但不同之處在于彈窗通常都是警示或者確認是否執(zhí)行操作的提醒。
雖然沒有相關(guān)的統(tǒng)計數(shù)據(jù)份招，但用戶直接關(guān)閉蒙灰提醒不看內(nèi)容的行為是非常普遍的切揭，使用此類提示建議設(shè)計簡潔有力，文案盡量少锁摔。
2. 臨時框提示
臨時框可以分為兩大類，一類稱為模態(tài)臨時框谐腰，另一類稱為非模態(tài)臨時框孕豹。模態(tài)臨時框需要用戶必須選擇一項操作后才會消失，比如 Alert 確認等十气；而非模態(tài)臨時框并不需要用戶必須選擇一項操作才會消失励背，比如頁面上彈出的 Toast 提示。
模態(tài)臨時框：
A. 警告視圖 Alert View
Alert View是iOS中的概念砸西，官方定義是：警告框用于告知用戶一些會影響到他們使用 app 或設(shè)備的重要信息叶眉。與之對應(yīng)的臨時框，在Android系統(tǒng)中被稱為dialog籍胯，翻譯為對話框竟闪。
回想一下，當(dāng)聽到一個令人震驚消息時你的反應(yīng)是杖狼？大部分人的反應(yīng)是“什么？”或者“你說什么妖爷？”你潛意識要求對方再說一遍蝶涩。為什么？因為這個信息太出人意外了絮识，所以你要再次確認下是不是真的绿聘！同理，當(dāng)你觸發(fā)了刪除按鈕時次舌，App是什么反應(yīng)熄攘？刪除的操作太敏感了，所以需要讓再次確認彼念，這里用到的便是警告視圖Alert View挪圾。App要獲取位置信息浅萧；訪問相冊和相機；詢問是否升級App等等哲思，這些都需要用到警告視圖洼畅。
除此之外帝簇，警告視圖還能作為運營活動的入口或者引導(dǎo)頁。
從上圖可以看到靠益，警告視圖包括三個部分：標(biāo)題丧肴；正文；按鈕胧后。有些簡單的警告視圖只有標(biāo)題和按鈕芋浮，不需要正文來說明；另外一些可能會沒有按鈕绩卤，點擊臨時框外部區(qū)域臨時框會消失途样。
B. 操作菜單 Action Sheet
iOS中Action Sheet中文翻譯為操作菜單，對應(yīng)Android中的Bottom Sheets濒憋，中文翻譯為底部動作條何暇。使用某音樂App聽一首歌，看著播放界面凛驮，這時候你想要查看歌手信息裆站，專輯信息，還想要收藏這首歌...黔夭，在當(dāng)前頁面要滿足這這么多需求宏胯，就要用到操作列表Action Sheet。針對當(dāng)前頁面本姥，用戶想要執(zhí)行的操作太多了肩袍，不可能把這些操作都放出來，這樣頁面上全都是密密麻麻的icon婚惫、button氛赐。用操作列表的形式把這些按鈕都放在一個臨時框里就完美的解決了這個問題。
上面兩張圖先舷，看起來完全不一樣艰管，但是原理是我上面所說的，萬變不離其中蒋川，只不過換了個UI樣式牲芋。它們都屬于操作菜單類臨時框。該類臨時框還有一類變種，不在底部彈出缸浦，而是在用戶觸發(fā)操作的區(qū)域附近彈出夕冲，如下圖：
C. 全局模態(tài) Modal View
全局模態(tài)屬于一種很特殊的臨時框，因為它的區(qū)域會占據(jù)整個屏幕餐济。但在iOS的設(shè)計規(guī)范中耘擂，全局模態(tài)被放在了臨時框中。官方定義是：一個以模態(tài)形式展現(xiàn)的視圖絮姆，它為當(dāng)前任務(wù)或當(dāng)前工作流程提供獨立的醉冤、自包含的(self-contained)功能。
全局模態(tài)有一下幾個特點（對照上面iOS自帶的郵件APP的圖會更容易理解）：①占據(jù)整個屏幕篙悯，或者占據(jù)整個父視圖的區(qū)域蚁阳。②包含完成當(dāng)前任務(wù)所需的文字和控件。③通常也包含一個完成任務(wù)的按鈕鸽照，和一個取消按鈕螺捐。
非模態(tài)臨時框：
A. Toast
Toast是Android平臺的設(shè)計形式，iOS規(guī)范中并沒有規(guī)定這種形式矮燎，但是由于Toast能很好的起到輕量級反饋的作用定血，現(xiàn)在很多iOS的APP也在使用這種臨時框。Toast屬于一種輕量級的反饋诞外，常常以小彈框的形式出現(xiàn)在屏幕上中下任意位置澜沟，但同個產(chǎn)品會模塊盡量使用同一位置，讓用戶產(chǎn)生統(tǒng)一認知峡谊。
關(guān)于Toast的顯示時間茫虽，Android自帶的兩種時間屬性分別為2秒和3.5秒，但是一般會自定義為1.5秒和2.5秒既们。Toast中的文本超過10個字符用2.5秒濒析，少于10個字符用1.5秒。因此不要將其用作重要對象的引導(dǎo)形式啥纸，大多是可有可無或是會反復(fù)出現(xiàn)的号杏，其次語言精練也是必要的。在樣式上斯棒，盡量和產(chǎn)品整體風(fēng)格保持一致馒索，這樣會更和諧，不至于突兀名船。
B. Snackbar
同Toast，SnackBar同樣是Android特有的臨時框旨怠。SnackBar繼承了Toast的所有特性渠驼，即：為小彈窗的形式，會自動消失鉴腻。有三個差異化：①可以出現(xiàn)0到1個操作迷扇，不包含取消按鈕百揭；②點擊SnackBar以外的區(qū)域，SnackBar會消失蜓席；③一般只出現(xiàn)在屏幕底部器一。在實際的產(chǎn)品設(shè)計中，很少看到SnackBar這種形式厨内，以下放了兩張MD規(guī)范中的圖祈秕。
舉個可以采用SnackBar臨時框的場景：當(dāng)刪除某張照片時，可以在屏幕底部出現(xiàn)Snackbar雏胃，提示“照片成功刪除”请毛，并附帶撤銷操作，當(dāng)用戶點擊撤銷時瞭亮，照片可恢復(fù)方仿。用戶不進行操作Snackbar則消失，照片刪除成功统翩。
C. 氣泡／浮層
氣泡/浮層式是一種量級輕但是目的性很強的引導(dǎo)方式仙蚜，一般是半透明浮層結(jié)合文案的設(shè)計模式。大部分浮層模式帶有指向性的箭頭厂汗，可以用來提示重要功能或者隱藏操作委粉。通常是非模態(tài)的，顯示3-5秒后自動消失面徽，對用戶的干擾較小艳丛。
3. 嵌入式（局部嵌入/整體嵌入）
嵌入式引導(dǎo)分為局部嵌入和整體嵌入趟紊。局部嵌入就是在當(dāng)前頁面內(nèi)容上增加引導(dǎo)提示氮双。為了保證對象不埋沒在信息流中，有效地引起用戶注意霎匈，需要從視覺上做處理戴差。整體嵌入則是將引導(dǎo)做為一個整體代替頁面內(nèi)容的顯示，多使用在“空狀態(tài)”的情況下铛嘱。
三. 互動式引導(dǎo)
1. 互動提示
是用戶在使用過程中暖释，進入特定的環(huán)節(jié)、進度的時候才會被觸發(fā)的一種提示墨吓，它不會按照一定的順序出現(xiàn)球匕，所以不同的用戶碰到這些提示的時間、場景不盡相同帖烘。Duolingo 這一語言學(xué)習(xí)APP 就非常了解人們語言學(xué)習(xí)的規(guī)律亮曹，在實戰(zhàn)中學(xué)習(xí)語言是最為有效的方式，所以它會在用戶不斷同APP進行交互的過程中提供交互式的提示。
2. 操作示意
操作示意較常采用簡短的動畫向用戶展示操作方法照卦，也不乏靜態(tài)圖片配以描述的方式式矫。這種方法的好處是很直觀，用輕松淺顯的手法役耕，就能傳達給用戶新鮮的功能和趣味的用法采转，比生硬的文字來得體貼。
還有一種操作示意比較隱蔽瞬痘，是在用戶與產(chǎn)品之間互動的過程中引導(dǎo)用戶完成操作故慈。常見的如下拉刷新、底部上拉等手勢互動图云，也經(jīng)常發(fā)生在語音操作中惯悠。例如用戶使用麥克風(fēng)的過程中，界面隨著用戶的聲音的輸入而產(chǎn)生互動竣况。
四. 引導(dǎo)的強弱及觸發(fā)
1. 引導(dǎo)的強弱
根據(jù)出現(xiàn)時是否有阻斷克婶、消失時是否需要操作，我們可以劃分出不同強弱的引導(dǎo)提示丹泉。弱提示通常情況下它的出現(xiàn)不一定能讓每一個用戶都注意情萤，或者不需要讓所有用戶都完整的了解，這樣的提示不會阻礙用戶當(dāng)前的閱讀和操作行為摹恨，還可以自動消失筋岛；強提示需要用戶一定注意到的，它會阻斷用戶當(dāng)前的使用且需要有明確的指定操作才能消失晒哄。
2. 引導(dǎo)觸發(fā)點的選擇
用戶引導(dǎo)的觸發(fā)點睁宰，就是在什么地方觸發(fā)引導(dǎo)。是用戶打開程序時觸發(fā)寝凌？到達特定頁面后觸發(fā)柒傻？操作了指定功能后觸發(fā)？到了某個時間點觸發(fā)较木？它們都是在原有產(chǎn)品的基礎(chǔ)上附加的一個東西红符，往往不是用戶有心理預(yù)期出現(xiàn)的東西。
方式一：已經(jīng)明確針對什么用戶伐债，就要結(jié)合場景考慮预侯，此類用戶的共性是什么，哪些頁面是此類用戶經(jīng)常訪問的頁面峰锁？基于用戶共性和訪問最多的頁面萎馅，把觸發(fā)點放在此處，對于目標(biāo)用戶影響面會是最大的虹蒋，對于非目標(biāo)用戶的影響也會是最小的校坑。
方式二：有時候引導(dǎo)的內(nèi)容會限制觸發(fā)點拣技，比如功能性引導(dǎo)，用戶第一次瀏覽到功能所在頁面耍目，即觸發(fā)引導(dǎo)，這個應(yīng)該算是針對新功能的一個普遍的操作方式了徐绑。此時邪驮，最好逆向思考，本頁面的用戶是否大部分需要引導(dǎo)傲茄？如果是毅访，如何才能降低對非目標(biāo)用戶的干擾；如果不是盘榨，此時就要反思喻粹，這個功能放在此處是否恰當(dāng)？
3. 引導(dǎo)觸發(fā)的頻率
是指單位時間內(nèi)完成周期性變化的次數(shù)草巡。是確定了引導(dǎo)的觸發(fā)點和類型后守呜，另一個不可忽視的思考要素。引導(dǎo)的形式太強會干擾用戶當(dāng)前操作山憨，太弱又可能被忽略查乒，需要把握好它出現(xiàn)的頻率，尤其是類似toast郁竟、浮層這種很容易被忽略的引導(dǎo)玛迄。下圖為網(wǎng)易云音樂的截屏分享功能。雖然分享浮層出現(xiàn)后3秒會自動消失棚亩，但為了防止每次截屏都出現(xiàn)浮層給用戶帶來干擾蓖议，在設(shè)置頁里加入了功能開關(guān)。
那么如何告訴用戶有開關(guān)這個事情呢讥蟆？做法是：功能上線后針對所有用戶勒虾，首次手動取消浮層時（點擊浮層右上角的“×”、點擊半透明遮罩）即toast提示“可在設(shè)置中取消截屏分享提示”攻询，之后每累計手動取消3次提示一次从撼。
五. 引導(dǎo)效果衡量
當(dāng)你設(shè)計好了新用戶引導(dǎo)的流程之后，需要不斷的根據(jù)用戶反饋的數(shù)據(jù)和信息來衡量用戶是否真正的“Onboarding”了钧栖。這個衡量的指標(biāo)是至關(guān)重要的拯杠，應(yīng)該設(shè)定一個值，嚴格的跟蹤數(shù)據(jù)的變化雄妥，并且根據(jù)成功率和用戶的反應(yīng)老厌，敏銳地調(diào)整枝秤。在開始任何新項目之前淀弹，你都應(yīng)該問自己一個問題：“這個項目要如何衡量新用戶引導(dǎo)成功率？”
