移動端APP界面設(shè)計之引導(dǎo)頁UI設(shè)計技巧

小伙伴們,你們在設(shè)計APP引導(dǎo)頁面的時候,你們到底了解多少關(guān)于引導(dǎo)頁的知識呢?

為什么要設(shè)計引導(dǎo)頁呢?那我們先來看看不同的引導(dǎo)頁設(shè)計作品

20130809154551597

通俗點來講引導(dǎo)是帶領(lǐng)用戶更快速更愉悅地達(dá)到目標(biāo)的過程,能在用戶使用產(chǎn)品遇到障礙之前給予及時的幫助。在移動互聯(lián)網(wǎng)的產(chǎn)品的設(shè)計中,新手引導(dǎo)的設(shè)計則是在用戶初次使用該移動產(chǎn)品時,給予的一些必須性的幫助以使得用戶能快速愉悅地了解這個產(chǎn)品的功能與具體操作方式。為了完成不同的引導(dǎo)內(nèi)容和引導(dǎo)的目標(biāo),移動端的引導(dǎo)設(shè)計會根據(jù)需求進(jìn)行不同的多樣化處理。

根據(jù)引導(dǎo)出現(xiàn)的時機(jī),可以分為前置型的引導(dǎo)與過程中的引導(dǎo)。

1、前置型的引導(dǎo):

在用戶還沒有正式開始使用這個產(chǎn)品時給出的一系列幫助內(nèi)容。主要的設(shè)計方式為引導(dǎo)頁的設(shè)計。

2、過程中的引導(dǎo):

在用戶使用產(chǎn)品的過程中給出的一系列幫助內(nèi)容。主要的設(shè)計方式有空白頁的內(nèi)容引導(dǎo),loading等等待狀態(tài)中的引導(dǎo),拆分包袱的逐步引導(dǎo),巧設(shè)默認(rèn)值的功能引導(dǎo),tips引導(dǎo),浮點引導(dǎo),遮罩聚焦式引導(dǎo),觸發(fā)式引導(dǎo),任務(wù)演練式引導(dǎo)等。

20130809154607105

3、引導(dǎo)頁的設(shè)計探究

引導(dǎo)頁作為前置型引導(dǎo),必然具備前置型引導(dǎo)的特征。用戶是在使用前看到引導(dǎo)頁的內(nèi)容,此時用戶對這個產(chǎn)品的了解并不多,對于如產(chǎn)品的功能/頁面布局/具體使用等還沒有建立起完整的認(rèn)知。所以引導(dǎo)頁更適合闡述產(chǎn)品的概況內(nèi)容(如具有產(chǎn)品的概念,產(chǎn)品的核心功能,具有競爭力的功能點或用戶痛點,以及會影響到初次使用的操作方式的內(nèi)容),建立起用戶對產(chǎn)品的大致認(rèn)知;而不太適用于闡述過于細(xì)節(jié)的產(chǎn)品內(nèi)容,因為此時用戶還無法進(jìn)行相應(yīng)的信息匹配,細(xì)節(jié)內(nèi)容會不容易理解。

雖然引導(dǎo)頁有上述的限制,但是由于它具備的很多優(yōu)點,讓它作為一種非常常見的方式來使用。

具體的優(yōu)點:1)篇幅設(shè)置可自由設(shè)定,在一定范圍內(nèi)可多可少;2)全屏或幾乎全屏的信息呈現(xiàn)的方式,使得信息的可承載量多;3)內(nèi)容的編排自由,設(shè)計師可以自由發(fā)揮。

所以引導(dǎo)頁是一種在設(shè)計上較靈活自由的方式。但是在實際的使用中,我們還是常常會發(fā)現(xiàn)設(shè)計的效果并不容易達(dá)不到預(yù)期。用戶常常不會仔細(xì)瀏覽這些引導(dǎo)的信息,對于引導(dǎo)的內(nèi)容信息的接收程度會打折扣,很難全部吸收;還有不少情況下用戶會跳過引導(dǎo),忽略引導(dǎo)想提供的幫助信息。那么,如何做能讓我們設(shè)計的引導(dǎo)才能引起用戶的興趣,讓他們花費(fèi)一點精力去吸收引導(dǎo)的內(nèi)容信息,這需要一些技巧。

20130809155006868

最核心的技巧有4點:

1、精簡與合理使用

A、設(shè)計師需要把控引導(dǎo)的內(nèi)容

B、突顯競爭力的或有吸引力的內(nèi)容點的介紹

C 抓住目標(biāo)用戶群剛需吸引點來設(shè)計

2、細(xì)致編排 ?生動而有趣

一種方式:講故事的方式,使引導(dǎo)具有情景化,由于一次靜態(tài)的微電影!

講故事的主要手法有:故事可以是以情動人,痛點渲染,角色榜樣類比等方式

 

3、有效的注意力 突顯記憶點

我們都知道注意力是記憶力的基礎(chǔ),記憶力是注意力的結(jié)果。沒有良好的注意力就沒有良好的記憶力,良好的記憶力是建立在良好的注意力基礎(chǔ)上的。

A、聚焦

B、優(yōu)化圖片所傳達(dá)的信息

C、除了靜態(tài)的視覺畫面,我們還可以增加用戶對于引導(dǎo)內(nèi)容的注意力

D、用合適的屏與屏之間切換的交互方式

E、能有效傳達(dá)的文案內(nèi)容

20130809154819616

4、構(gòu)建APP獨特的特色。增強(qiáng)記憶點

很多的引導(dǎo)頁在設(shè)計上同質(zhì)化問題嚴(yán)重,極度相似的設(shè)計手法、設(shè)計風(fēng)格、排版風(fēng)格、相似的文案內(nèi)容、讓用戶很難記憶或引起關(guān)注。構(gòu)建產(chǎn)品引導(dǎo)頁的特色是區(qū)別于其他產(chǎn)品的好方式,特色可以讓引導(dǎo)頁脫穎而出。

A.從設(shè)計方式上進(jìn)行特色構(gòu)建

B.系列化引導(dǎo)設(shè)計的特色構(gòu)建

 

這些都是優(yōu)秀APP設(shè)計總結(jié)出來的技巧和經(jīng)驗!值得我們大家分享!

詳細(xì)內(nèi)容和來源:http://isux.tencent.com/user-guide-design-01.html

每天更新,
全站高品質(zhì)素材免費(fèi)下載!