淺談引導頁設計
淺談引導頁設計-移動閱讀二維碼

老子曾經說過,“千里之行,始于足下”,這句話告訴了我們一個再簡單不過的道理:再遠的路只要一步步的去走,終會有到達的那一天。兩千多年過去了,這句話同樣適用于當前的互聯網行業。

作為設計師,我們一直希望自己的產品可以給用戶提供最好的用戶體驗。拿app來說,他們對這款產品的第一印象起始于引導頁。第一印象產生的時間極短,但是它所帶來的影響卻要長遠的多。如果說給用戶構建一個完美的用戶體驗體系是我們的“千里”,那么引導頁就是我們“足下”的第一步。所以一款app的引導頁對于用戶和產品之間紐帶的建立是十分重要的。

 

什么是引導頁?

引導頁英文Onboarding原文意為新員工的入職培訓。這與我們使用一款新app相類似,人們嘗試新事物過程中會產生緊張與不安,引導頁的作用就是短時間內讓用戶對這款產品有一個大概的了解,緩解用戶的焦慮與不安,讓用戶更快的進入使用環境。

Image title

 

引導頁的三個基本功能

引導頁可以做的很簡單,也可以做的很復雜。但是再簡單的的引導頁也必須有三個功能:問候、傳遞信息和提升參與度。

 

問候

引導頁是用戶和這款app的第一次接觸,她的作用相當于向用戶進行自我介紹和問候。當然問候不意味著我們要真正寫一個“Hi”或者“用戶,您好”,有的時候一個吉祥物形象或者字符也能向用戶傳遞問候。問候和介紹要盡量的簡短,不要分散用戶過多的注意力。

 

傳遞信息

這是引導頁對于用戶來說最重要的一項功能。優秀的引導頁用戶瀏覽后會對這款app的核心功能有一個大致的了解。此外引導頁要起到操作說明書的作用,告訴用戶如何快速上手操作,這會降低用戶首次使用時的學習負擔。

當然“用戶的時間是有限的”,用戶對于引導頁更多的是一瞥而過,不會投入過多的精力。短時間內用戶能從引導頁中獲取的信息是極其有限的,這意味著我們必須對引導頁的內容做一個優先級篩選。只有真正重要的內容才能放到引導頁中。

 

提升參與度

我們不僅要了解用戶,也要讓用戶了解我們,要建立用戶對于產品的依賴度。引導頁通過展示產品的價值和功能,可以在用戶心中建立對于產品的一個高期望值,而這高期望值會抵消首次使用時可能出現的負面情緒,保障用戶不會在短時間內把你卸載。另外出彩的引導頁會極大的提升新用戶對于產品的好感,人類畢竟都是視覺動物。

 

引導頁設計要素

不同的app有著不同核心功能和目標用戶群,其引導頁的框架與內容也是不一樣的。但是每一款app的用戶體驗立足點卻是相同的:用戶需求、用戶期望、產品性質、經營目標。引導頁作為用戶使用app的出發點,我們的目標是以一種動態的,易懂的和有吸引力的方式告訴用戶這款app的基本信息。

引導頁一般有3-4頁,主要有圖片、文字和動畫組成。

 

圖片

大多數人對圖片的感知速度要比文字來得快。無論是拍攝的照片還是手繪的插畫都可以充分的完成傳遞信息的功能。所以引導頁中圖片的合理使用會幫助用戶在短時間內充分的獲取信息。當然引導頁中對于插畫的要求不是很高,簡單的iocn類插畫也同樣出彩。插畫對于低年齡段用戶來說有著巨大的吸引力。特別是對于青少年來說,他們很喜歡帶有插畫的引導頁。

有趣的插圖

 

文字

對于引導頁來說,文字是占主導地位的。引導頁中文字要足夠的簡明扼要,降低用戶的閱讀時間。有的時候將一個長句子縮寫成一個短句是比直接寫一個長句要更加困難的,因為你必須學會從長句子中提取重要的信息。用戶不會在引導圖上花費很多時間,他們不可能一字一句去讀,所以文字要盡量短小精悍。

文字要簡潔

 

動畫

引導頁用戶雖然不會給予過多的注意力,但是這并不意味著我們可以降低對引導頁的視覺審美要求。引導頁也要做的足夠用心,要好看并且有吸引力。動畫的應用可以給界面注入生命力,增加界面活力。有趣的動畫可以很好的娛樂用戶,這會提升他們對這款app的期望值。引導頁中有些信息是比較重要的,采用動畫我們可以將用戶的注意力吸引過來。但是動畫另一方面意味著更多的加載負擔,更長的等待時間。所以對于動畫的應用,設計師應該和開發進行深入的溝通務必達到最優的實現效果。

出彩的動畫效果

 

跳過選項

另一個我們需要考慮的要素就是是否要給用戶選擇跳過引導頁的選項,因為不是每一個用戶都愿意看這些引導圖,即使是第一次使用的新用戶。當然是否給用戶跳過選項要根據對目標用戶群的調查和分析才能做出決定。

跳過選項

 

總結

這是一個內容為王的時代,用戶真正關注的是頁面中的內容,這款app究竟能給我解決什么樣難題,我通過使用這款app會帶來哪些便利。用戶對于界面樣式的關注度不是很高,淘寶客戶端更新了,采用了最新潮的漸變色,但是很少有用戶在網購的時候會注意到這些。所以客觀條件決定了設計師在內容頁面中無法進行更多的改進與創新,引導頁因為其巨大的包容性成為設計師發揮他們天馬行空想象力的舞臺,也是產品彰顯其獨特魅力的渠道。

相關專題:《設計眼前一亮的APP引導頁

 

作者:王M爭
原文地址:ui.cn

本文鏈接:http://www.casaleticia.com/introduction-to-guide-page-design.html
本文標簽: , , ,