收藏起來!超實用的引導頁設計基礎手冊

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

什麼是引導頁?

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

引導頁的三個基本功能

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

問候

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

傳遞信息

這是引導頁對於用戶來說最重要的一項功能,優秀的引導頁用戶瀏覽後會對這款App的核心功能有一個大致的了解,此外引導頁要起到操作說明書的作用,告訴用戶如何快速上手操作,這會降低用戶首次使用時的學習負擔。
當然「用戶的時間是有限的」,用戶對於引導頁更多的是一瞥而過,不會投入過多的精力。短時間內用戶能從引導頁中獲取的信息是極其有限的,這意味著我們必須對引導頁的內容做一個優先順序篩選,只有真正重要的內容才能放到引導頁中。

提升參與度

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

引導頁設計要素

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

圖片

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

簡單的iocn類插畫圖片

 

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

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

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

跳過選項要根據對目標用戶群的調查和分析圖

總結

這是一個內容為王的時代,用戶真正關注的是頁面中的內容,這款App究竟能給我解決什麼樣難題,我通過使用這款App會帶來哪些便利。用戶對於界面樣式的關注度不是很高,淘寶客戶端更新了,採用了最新潮的漸變色,但是很少有用戶在網購的時候會注意到這些。

所以客觀條件決定了設計師在內容頁面中無法進行更多的改進與創新,引導頁因為其巨大的包容性成為設計師發揮他們天馬行空想象力的舞台,也是產品彰顯其獨特魅力的渠道。

 


Also published on Medium.

GogoShark 小編主要分享: 網頁設計, 數位行銷, SEO, 品牌策略...等領域。是你的數位行銷解決方案專家。提供數位行銷知識、分析工具、解決方案與資源夥伴;精準蒐羅數位網路行銷懶人包、關鍵字行銷、社群行銷、內容行銷等。GogoShark 是間位於台北的網頁設計公司

客服支援

您的問題,由我們來解決 - 位於台北的專業網頁設計服務 GogoShark 可協助您拓展事業版圖,透過更加簡單快速的方法將一切數位化