APP新手引導頁設計是設計師必備的常規技能，今天分享的就是關于這方面的設計技巧，這篇文章可以讓你再這方面有一些清晰的思路，希望對您有用！

 

一、定義

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. 確保一致性和可識別性

保持頁面布局在所有平臺和屏幕上的一致性，確保文字和背景顏色符合最小可識別的對比度。