歡迎頁/新手引導頁設計:建立良好的產品第一印象
歡迎頁/新手引導頁如何設計,才能建立良好的產品第一印象呢?
一、定義
Onboarding英文入職指引,個人翻譯成——新用戶歡迎頁(新手引導頁),指的是啟動App的啟動頁(Launch Screen)之后的歡迎頁面,是用戶對產品的第一印象。
Google Material design定義的使用場景僅限于新用戶在應用商店下載完成,第一次運行App的體驗。
Apple Human Interface Guidelines定義的場景還包括于重返App的用戶建立聯系。
歡迎頁面
二、作用
吸引急切體驗的新用戶熟悉界面,歡迎用戶,幫助用戶明確了解App的用途,激勵用戶使用,提高參與度和留存率。
三、模式
Material design定義了三種模式
1. 自主選擇模式——允許用戶自定義體驗
使用情景:UI可以根據用戶個性化定義,App有設置和需要用戶同意的請求;此處不適宜傳達App正在解決一個新的挑戰或者提供一種新的益處、用途,也不要通過此處告知用戶主要UI的變化
優點:暗示用戶如何與UI交互,個性化定制給了用戶控制感,并讓用戶感興趣,期待后續內容
注意:
- 為用戶提供對優化體驗有意義的,影響顯著的選擇;
- 請求無法通過正常使用獲得用戶信息和偏好;
- 保持選擇項簡潔,每個屏幕不超過10項,盡量控制在一屏上或者讓多屏幕看起來相互連接
自選設計模式1
自選設計模式2
自選設計模式3
2. 快速入門模式——介紹設置,直接讓用戶開始體驗
使用情景:App已經設計好了促進用戶參與和留存的使用行為;不適用于處理新挑戰和提供新服務的場景
優點:快速啟動核心功能
注意:
- 激勵用戶操作,避免出現空白頁
- 提供幫助和指導,通過UI提示,為用戶提供學習如何使用App的機會
- 優先呈現最關鍵的操作,突出與用戶參與度最密切相關的操作,或者以提示的形式向用戶介紹核心功能。
核心操作
3. 最佳福利\最大益處模式——簡潔的輪播卡或動畫突出顯示應用的好處
使用場景:處理新挑戰和提供新服務,告知用戶主要UI的變化;不適用于大眾已非常熟悉的界面、益處以及使用模式
優點:突出顯示使用App的三個主要的益處
注意:
- 選擇正確的與個人相關的利益點,而不是單純描述功能,陳述App可以解決的問題,創造的主要益處,常用特性
- 采用自動切換頁面,旋轉木馬卡片樣式每2s或3s自動切換3張,再加上分頁導航,用戶便清楚歡迎頁不是單一屏幕,當用戶觸控頁面時,自動切換應該停止;
- 屏幕可向前后滑動,提供開啟或開始體驗按鈕
- 視頻內容只包括一個開始按鈕,沒有分頁點
- 保持視覺的連續性,在角色、風格、排版、和按鈕顏色等方面注重保持視覺連續性
- 盡量使用插畫和直觀的場景,不要呈現UI界面
旋轉木馬卡片
四、設計指南
1. 考慮承接的上一屏頁面和下一屏頁面
在歡迎頁之前提供啟動頁(launch screen),具體可參見啟動頁設計指南
避免在歡迎頁之前要求設置信息,盡可能從設備設置、默認設置中獲取,或者通過同步服務獲取。如果必須要請求設置信息,可以首次提示,讓用戶后期在設置中修改。
通常歡迎頁之后會連接到登陸,用戶很容易按照剛剛學到的內容進行操作。
2. 快速響應
避免閃屏、菜單和指令影響啟動速度,讓用戶快速到達內容,開始使用App。
如果有教程和介紹,提供跳過的方法,不要向重返用戶提供這些內容。
3. 預料用戶的幫助需求
主動尋找可能遇到困難的用戶并提供幫助。比如進入游戲加載中或暫停游戲時,可以提示有用的操作。
4. 教程內容不能偏離要點
為新用戶提供指導,保證應用的直觀是最首要的,指導過多的程序設計需要重新考量。
5. 允許用戶重看教程
提供回放教程入口,以防第一次錯過某些信息。
6. 讓學習變得有趣味性和可發現性
建議使用動畫和交互方式。
7. 重啟程序時恢復先前狀態
保存并恢復程序, 幫助用戶回到原位置、原狀態。
8. 確定呈現方向(橫屏/豎屏)
在當前屏幕方向呈現歡迎頁,如果App同時支持豎屏和橫屏模式;
如果只能在一個屏幕方向上呈現,就始終保持該方向;有必要的話可以引導用戶旋轉設備。
9. 避免顯示應用內許可協議和免責聲明
在應用下載之前,應用商店呈現協議和免責聲明。
10. 確保一致性和可識別性
保持頁面布局在所有平臺和屏幕上的一致性,確保文字和背景顏色符合最小可識別的對比度。
參考來源:
https://material.io/guidelines/growth-communications/onboarding.html#onboarding-top-user-benefits
https://developer.apple.com/ios/human-interface-guidelines/app-architecture/onboarding/
作者:Meowmaid
來源:https://www.jianshu.com/p/c50200ac0f7b
本文由 @Meowmaid 授權發布于人人都是產品經理,未經作者許可,禁止轉載。
題圖來自unsplash,基于CC0協議
收啦
不錯,不錯。 是不是少了 skip 。
開始按鈕就是SKIP吧
對于有選擇困難癥的用戶用第一種類型的產品真的很頭疼。比如我
哈哈哈,我也是,不過如果改成圖,視覺效果可接受,也許就沒那么難了
可憐的豆豆 ??
感覺你的簽名點醒了我,哈哈哈 ??
哈哈 ??