APP新手引導(dǎo)頁設(shè)計(jì)經(jīng)驗(yàn)總結(jié)

2018-05-22 3225 0
APP新手引導(dǎo)頁設(shè)計(jì)是設(shè)計(jì)師必備的常規(guī)技能,今天分享的就是關(guān)于這方面的設(shè)計(jì)技巧,這篇文章可以讓你再這方面有一些清晰的思路,希望對(duì)您有用!

 

一、定義

Onboarding英文入職指引,個(gè)人翻譯成——新用戶歡迎頁(新手引導(dǎo)頁),指的是啟動(dòng)App的啟動(dòng)頁(Launch Screen)之后的歡迎頁面,是用戶對(duì)產(chǎn)品的第一印象。

Google Material design定義的使用場景僅限于新用戶在應(yīng)用商店下載完成,第一次運(yùn)行App的體驗(yàn)。

Apple Human Interface Guidelines定義的場景還包括于重返A(chǔ)pp的用戶建立聯(lián)系。

歡迎頁/新手引導(dǎo)頁設(shè)計(jì):建立良好的產(chǎn)品第一印象歡迎頁面

二、作用

吸引急切體驗(yàn)的新用戶熟悉界面,歡迎用戶,幫助用戶明確了解App的用途,激勵(lì)用戶使用,提高參與度和留存率。

三、模式

Material design定義了三種模式

1. 自主選擇模式——允許用戶自定義體驗(yàn)

使用情景:UI可以根據(jù)用戶個(gè)性化定義,App有設(shè)置和需要用戶同意的請(qǐng)求;此處不適宜傳達(dá)App正在解決一個(gè)新的挑戰(zhàn)或者提供一種新的益處、用途,也不要通過此處告知用戶主要UI的變化

優(yōu)點(diǎn):暗示用戶如何與UI交互,個(gè)性化定制給了用戶控制感,并讓用戶感興趣,期待后續(xù)內(nèi)容

注意:

  • 為用戶提供對(duì)優(yōu)化體驗(yàn)有意義的,影響顯著的選擇;
  • 請(qǐng)求無法通過正常使用獲得用戶信息和偏好;
  • 保持選擇項(xiàng)簡潔,每個(gè)屏幕不超過10項(xiàng),盡量控制在一屏上或者讓多屏幕看起來相互連接

歡迎頁/新手引導(dǎo)頁設(shè)計(jì):建立良好的產(chǎn)品第一印象自選設(shè)計(jì)模式1

歡迎頁/新手引導(dǎo)頁設(shè)計(jì):建立良好的產(chǎn)品第一印象自選設(shè)計(jì)模式2

歡迎頁/新手引導(dǎo)頁設(shè)計(jì):建立良好的產(chǎn)品第一印象自選設(shè)計(jì)模式3

2. 快速入門模式——介紹設(shè)置,直接讓用戶開始體驗(yàn)

使用情景:App已經(jīng)設(shè)計(jì)好了促進(jìn)用戶參與和留存的使用行為;不適用于處理新挑戰(zhàn)和提供新服務(wù)的場景 優(yōu)點(diǎn):快速啟動(dòng)核心功能

注意:

  • 激勵(lì)用戶操作,避免出現(xiàn)空白頁
  • 提供幫助和指導(dǎo),通過UI提示,為用戶提供學(xué)習(xí)如何使用App的機(jī)會(huì)
  • 優(yōu)先呈現(xiàn)最關(guān)鍵的操作,突出與用戶參與度最密切相關(guān)的操作,或者以提示的形式向用戶介紹核心功能。

歡迎頁/新手引導(dǎo)頁設(shè)計(jì):建立良好的產(chǎn)品第一印象核心操作

3. 最佳福利最大益處模式——簡潔的輪播卡或動(dòng)畫突出顯示應(yīng)用的好處

使用場景:處理新挑戰(zhàn)和提供新服務(wù),告知用戶主要UI的變化;不適用于大眾已非常熟悉的界面、益處以及使用模式 優(yōu)點(diǎn):突出顯示使用App的三個(gè)主要的益處

注意:

  • 選擇正確的與個(gè)人相關(guān)的利益點(diǎn),而不是單純描述功能,陳述App可以解決的問題,創(chuàng)造的主要益處,常用特性
  • 采用自動(dòng)切換頁面,旋轉(zhuǎn)木馬卡片樣式每2s或3s自動(dòng)切換3張,再加上分頁導(dǎo)航,用戶便清楚歡迎頁不是單一屏幕,當(dāng)用戶觸控頁面時(shí),自動(dòng)切換應(yīng)該停止;
  • 屏幕可向前后滑動(dòng),提供開啟或開始體驗(yàn)按鈕
  • 視頻內(nèi)容只包括一個(gè)開始按鈕,沒有分頁點(diǎn)
  • 保持視覺的連續(xù)性,在角色、風(fēng)格、排版、和按鈕顏色等方面注重保持視覺連續(xù)性
  • 盡量使用插畫和直觀的場景,不要呈現(xiàn)UI界面

歡迎頁/新手引導(dǎo)頁設(shè)計(jì):建立良好的產(chǎn)品第一印象旋轉(zhuǎn)木馬卡片

四、設(shè)計(jì)指南 1. 考慮承接的上一屏頁面和下一屏頁面

在歡迎頁之前提供啟動(dòng)頁(launch screen),具體可參見啟動(dòng)頁設(shè)計(jì)指南

避免在歡迎頁之前要求設(shè)置信息,盡可能從設(shè)備設(shè)置、默認(rèn)設(shè)置中獲取,或者通過同步服務(wù)獲取。如果必須要請(qǐng)求設(shè)置信息,可以首次提示,讓用戶后期在設(shè)置中修改。

通常歡迎頁之后會(huì)連接到登陸,用戶很容易按照剛剛學(xué)到的內(nèi)容進(jìn)行操作。

2. 快速響應(yīng)

避免閃屏、菜單和指令影響啟動(dòng)速度,讓用戶快速到達(dá)內(nèi)容,開始使用App。

如果有教程和介紹,提供跳過的方法,不要向重返用戶提供這些內(nèi)容。

3. 預(yù)料用戶的幫助需求

主動(dòng)尋找可能遇到困難的用戶并提供幫助。比如進(jìn)入游戲加載中或暫停游戲時(shí),可以提示有用的操作。

4. 教程內(nèi)容不能偏離要點(diǎn)

為新用戶提供指導(dǎo),保證應(yīng)用的直觀是最首要的,指導(dǎo)過多的程序設(shè)計(jì)需要重新考量。

5. 允許用戶重看教程

提供回放教程入口,以防第一次錯(cuò)過某些信息。

6. 讓學(xué)習(xí)變得有趣味性和可發(fā)現(xiàn)性

建議使用動(dòng)畫和交互方式。

7. 重啟程序時(shí)恢復(fù)先前狀態(tài)

保存并恢復(fù)程序, 幫助用戶回到原位置、原狀態(tài)。

8. 確定呈現(xiàn)方向(橫屏/豎屏)

在當(dāng)前屏幕方向呈現(xiàn)歡迎頁,如果App同時(shí)支持豎屏和橫屏模式;

如果只能在一個(gè)屏幕方向上呈現(xiàn),就始終保持該方向;有必要的話可以引導(dǎo)用戶旋轉(zhuǎn)設(shè)備。

9. 避免顯示應(yīng)用內(nèi)許可協(xié)議和免責(zé)聲明

在應(yīng)用下載之前,應(yīng)用商店呈現(xiàn)協(xié)議和免責(zé)聲明。

10. 確保一致性和可識(shí)別性

保持頁面布局在所有平臺(tái)和屏幕上的一致性,確保文字和背景顏色符合最小可識(shí)別的對(duì)比度。
 


24
評(píng)論區(qū)(0)
正在加載評(píng)論...