引導(dǎo)頁設(shè)計(jì)淺析

2019-11-4    ui設(shè)計(jì)分享達(dá)人

APP中的閃屏、啟動頁、引導(dǎo)頁的區(qū)別,設(shè)計(jì)方法,個(gè)人案例分析,以及品牌解讀

【什么是閃屏 / 引導(dǎo)頁與閃屏的關(guān)系】

(部分引用觀點(diǎn))



引導(dǎo)頁是閃屏的其中一種,一般出現(xiàn)在版本分布或大版本升級時(shí)。

我們先整體看一下閃屏頁的大致類型:

(聲明:以下圖片來源于應(yīng)用截圖,僅作為學(xué)習(xí)交流使用)









一、常規(guī)閃屏


為什么叫常規(guī)閃屏?

因?yàn)檫@類閃屏比較普通,我沒有想到什么更專業(yè)的詞匯,暫且就叫常規(guī)閃屏吧。這類閃屏的使用國內(nèi)的和國外有點(diǎn)不同,因?yàn)?strong style="outline:0px;margin:0px;padding:0px;">按照蘋果官方的說法是,用戶打開應(yīng)用能立即使用是最好的體驗(yàn),例如:系統(tǒng)自帶的一些應(yīng)用,是沒有閃屏的。再甚者閃屏最好就是讓用戶感覺不到,和首頁能有一個(gè)完美的融合和過渡。

這種體驗(yàn)也很棒,國外的instagram、facebook等就是使用這種設(shè)計(jì),閃屏長得很像首頁,更像是一張加載類的占位符








當(dāng)然,因地制宜,國內(nèi)的我們已經(jīng)習(xí)慣了閃屏作為App品牌的宣傳和推廣手段,一般由logo+名稱+slogan+品牌色組成,界面還是相對簡潔明了的,但還是很明顯的違背了蘋果官方的指導(dǎo)說法,但是沒辦法,這就是商業(yè)需要。


這樣設(shè)計(jì)也有利處,可以減少用戶在打開App時(shí)的焦慮感,也可以讓用戶更直觀的了解品牌,傳遞一些情懷、理念,多看一次閃屏,也是讓用戶強(qiáng)化品牌記憶的過程,只是不知道是好的記憶點(diǎn)還是壞的,就要我們自己斟酌了。








二、廣告閃屏


廣告閃屏,顧名思義就是產(chǎn)品本身為了進(jìn)行流量變現(xiàn)從而獲得盈利,給一些商家打廣告或者進(jìn)行合作設(shè)計(jì)的一類閃屏,這是無可厚非的。不過廣告閃屏自帶被“嫌棄”屬性,應(yīng)該很多用戶看到這類閃屏的心理是比較排斥的。

至少對我來說,我是很少關(guān)注這類閃屏,除非閃屏設(shè)計(jì)的非常的酷炫,我愿意多看一下,否則的話我就想立刻把它關(guān)掉,所以在這類閃屏上加上“倒計(jì)時(shí)(loading)和跳過”就顯得很必要,并且“跳過”的位置也要方便用戶點(diǎn)擊。

這類閃屏最好只出現(xiàn)每天第一次打開App時(shí),避免讓用戶厭煩。不管出于何種目的,都需要在商業(yè)利益和用戶體驗(yàn)之間保持一個(gè)平衡,不然用戶會流失的很快,用戶流失了,何談盈利呢?

另外廣告閃屏和下面要說的活動閃屏一樣,會有一個(gè)模板:底部是閃屏圖片,上面蓋上一層logo模板。

App啟動時(shí)會從服務(wù)器拉取閃屏數(shù)據(jù),本地會保存logo模板。如果服務(wù)器更新了閃屏數(shù)據(jù)會拉取數(shù)據(jù)進(jìn)行展示,如果沒有更新或是網(wǎng)絡(luò)不佳,就會默認(rèn)展示緩存的閃屏數(shù)據(jù),以免發(fā)生卡頓現(xiàn)象,以保證流暢的用戶體驗(yàn)。







三、活動閃屏


活動閃屏和廣告閃屏有點(diǎn)類似,出于產(chǎn)品運(yùn)營方面的需要,它起到活動宣傳的作用,每年的雙十一、雙十二期間,各大電商App的閃屏都會用到活動閃屏,還有一些商家自己造的一些節(jié)日:品牌周、年貨節(jié)、會員日、狂歡周…相信大家已經(jīng)見怪不怪了。


近期我留意到一個(gè)問題,就是我們在使用App時(shí),經(jīng)常會在應(yīng)用之間進(jìn)行切換使用。如果我們從其他應(yīng)用再次返回時(shí),最好不要再加載一次閃屏,會給用戶很不好的用戶體驗(yàn)。目前使用下來,淘寶、天貓等這類主流應(yīng)用都有這種問題,但是我想這應(yīng)該他們有意為之。







四、節(jié)日閃屏


每逢一些節(jié)假日,各大品牌都會推出一些當(dāng)日的閃屏,那么為什么要設(shè)計(jì)節(jié)日閃屏?

我覺得有幾點(diǎn)原因:

       長期看常規(guī)閃屏,用戶很容易會有視覺上的一種疲勞,節(jié)日閃屏?xí)o用戶一種不經(jīng)意的驚喜和新鮮感;

       可以蹭一蹭節(jié)日的熱點(diǎn),提升產(chǎn)品本身的品牌調(diào)性;

       在節(jié)日給用戶以問候和關(guān)懷,和用戶在情感上產(chǎn)生共鳴,從而更好的連接用戶和產(chǎn)品,我想這應(yīng)該是最重要的原因。


節(jié)日閃屏比較吸引用戶的注意力,它不像廣告類閃屏,我看見這類閃屏就會忍不住的多瞅幾眼,所以設(shè)計(jì)這類閃屏的時(shí)候要非常重視,因?yàn)橛脩粼敢獾却@是非常求之不得的,這就需要設(shè)計(jì)師具有比較強(qiáng)的表現(xiàn)能力了。

我們在設(shè)計(jì)的時(shí)候可以先進(jìn)行思維上的發(fā)散,或者是逆向思維之類的,比如:春節(jié)將近,我們可以聯(lián)想到是什么,理清一個(gè)思緒,要有節(jié)日的氛圍,可以活潑、可愛、夸張…切忌呆板。

 







五、大版本升級閃屏(引導(dǎo)頁)


在App進(jìn)行了大版本升級后,要向用戶展示產(chǎn)品新功能的操作方法。這類閃屏也可以稱為引導(dǎo)頁,頁面數(shù)量控制在3-5頁,每一頁都有一個(gè)對應(yīng)的主題,主題要精簡,切忌文字過多。


而且每一頁設(shè)計(jì)形式要類似,否則會給用戶一種視覺落差感。頁面上要加上“跳過”功能,因?yàn)橛脩舾MM快體驗(yàn)新版本,而不是看你的這些教導(dǎo),在最后一頁要加上類似“立即體驗(yàn)”的button。







——分割線【品牌傳達(dá)力】——










啟動頁面告訴用戶“我是誰”“我是做什么的”,開頭跟用戶做了自我介紹,引導(dǎo)頁的目的主要是告訴用戶:“我該怎么使用”或者是“我有什么亮點(diǎn)”(重點(diǎn)宣傳的功能),借用男女相親例子,雙方介紹完自己之后,開始展示自己有什么優(yōu)勢,好的引導(dǎo)頁設(shè)計(jì)直接關(guān)系到用戶是否“對你有興趣”想一進(jìn)“了解你”。

從上圖可以看到,引導(dǎo)頁在品牌傳達(dá)力上居首位,其次應(yīng)用市場說明圖。








【引導(dǎo)頁展示目的】

以下盡量列舉了金融相關(guān)app截圖,僅供學(xué)習(xí)使用



引導(dǎo)頁定義比較廣,往小了講,我們一般會認(rèn)為在用戶初次打開應(yīng)用時(shí)跳出的幾張介紹應(yīng)用功能的頁面就叫做引導(dǎo)頁;那往大了說,在用戶使用某個(gè)功能前就能幫助用戶降低學(xué)習(xí)成本的頁面或存在引導(dǎo)屬性的彈窗都可以稱為引導(dǎo)頁。

先從引導(dǎo)頁展示的目的出發(fā),再結(jié)合實(shí)際app情況去確定宣傳標(biāo)題,最后結(jié)合不同的設(shè)計(jì)展示方式以及動效。







一、產(chǎn)品特色介紹


多數(shù)時(shí)候,我們初次打開應(yīng)用會看到下面這樣的引導(dǎo)頁:


可以看到一個(gè)共通點(diǎn)——即頁面呈現(xiàn)的內(nèi)容為該 App 的主功能或新功能推薦,或者是對剛迭代的功能做了哪些優(yōu)化的說明。

理想情況是:用戶能了解這次產(chǎn)品做了哪些優(yōu)化,幫助用戶更清晰地了解產(chǎn)品。







二、操作引導(dǎo)


這類引導(dǎo)會出現(xiàn)在內(nèi)容頁面,直接引導(dǎo)用戶去操作相關(guān)功能

蒙版引導(dǎo)通常緊貼著界面流程進(jìn)行而出現(xiàn),使用透明色間隔形式加上簡單指示性文字與圖形,總是能夠簡潔明了地告知用戶產(chǎn)品的功能或者使用方法,并且由于其輕量的屬性會大大減少用戶的閱讀時(shí)間。設(shè)計(jì)得當(dāng)?shù)拿砂嬉龑?dǎo)不僅可以與其他引導(dǎo)相輔相成,同時(shí)也能夠增加用戶對產(chǎn)品的好感度。

它的好處就是清晰明了,直接讓用戶知道你想表達(dá)什么。它的實(shí)際效果會比純內(nèi)容引導(dǎo)頁好很多,但同時(shí)也會有一個(gè)問題,即打擾用戶操作。

這樣的方式已經(jīng)解決了內(nèi)容操作引導(dǎo)的問題,但其實(shí)這種方法也會使用戶厭倦,所以內(nèi)容不易過多。







三、理念傳達(dá)


以傳達(dá)態(tài)度理念,生活方式等為主,比較概念和意義上的東西,吸引用戶達(dá)到某種程度的共鳴,從而產(chǎn)生吸引力。







四、側(cè)面實(shí)力烘托


多用于有實(shí)力/特色的產(chǎn)品或者企業(yè),展示自身優(yōu)勢,讓用戶對產(chǎn)品產(chǎn)生信賴感。










五、問題解決


指出用戶所面臨的問題,而你的產(chǎn)品正好可以解決。



結(jié)合自身app/企業(yè)所具有的優(yōu)勢;產(chǎn)品的功能特色;產(chǎn)品的定位;等相應(yīng)的展示目的。也存在混合展示,不過要把握好標(biāo)題的設(shè)定,在標(biāo)題與設(shè)計(jì)上達(dá)到統(tǒng)一。








【引導(dǎo)頁設(shè)計(jì)方法】


在確定了引導(dǎo)頁展示目的之后,下面整理了在引導(dǎo)頁設(shè)計(jì)過程中的方法。

目前比較常見的幾類引導(dǎo)頁的類型(電商除外),根據(jù)產(chǎn)品的特點(diǎn)來確定設(shè)計(jì)風(fēng)格,總體沒有固定規(guī)則。










一、圖文結(jié)合


使用有關(guān)聯(lián)性的圖片,同種版式,優(yōu)點(diǎn)是感情表達(dá)直觀簡單,畫面沖擊感強(qiáng),缺點(diǎn)是泛表達(dá),不能表達(dá)內(nèi)容。









二、產(chǎn)品界面描述型


功能描述型,使用app畫面說明,通常在版本更新時(shí)用來對新功能進(jìn)行重點(diǎn)描述,是目前比較常見的引導(dǎo)頁表達(dá)方法之一,比較通用。









三、模擬應(yīng)用場景


通常用插畫方式表現(xiàn),通過圖文結(jié)合的方式全方位闡述中心思想,插畫風(fēng)格具有豐富的多樣性,同時(shí)又能貼切表達(dá)主題,所以在app中出現(xiàn)頻率越來越高。

以下列舉了百度金融的版本引導(dǎo)頁,通過系列插圖表現(xiàn)貼心、安心、用心、省心、隨心,插畫緊密契合主題,完美使用排比句的形式。











四、吉祥物的運(yùn)用


一個(gè)成熟的app通常會吉祥物來表現(xiàn),啟動頁是用戶打開app第一眼看到的地方,吉祥物可以讓用戶在2-3秒時(shí)間內(nèi)深刻體會到產(chǎn)品的核心價(jià)值觀。












五、代交互 動效的


這類啟動頁通常是在頁面切換中加入一些動效果的設(shè)計(jì),使得在交互體驗(yàn)上更加突出,與靜態(tài)頁面間的切換顯得更加生動有趣。

動畫呈現(xiàn)方式趣味性更高一些,開發(fā)成本相對也會高一些。











六、視頻類/動畫類


這類的理論上不叫啟動頁,叫開篇動畫更貼切,打開app通常為一小段視頻或動畫引入頁面











【實(shí)際案例分析】


閃屏/引導(dǎo)頁的設(shè)計(jì)方法很多,但要在設(shè)計(jì)之前充分考慮到產(chǎn)品定位和應(yīng)用場景。

下面引用我自己的案例分析,因?yàn)閷Ξa(chǎn)品理解不夠到位,設(shè)計(jì)過程比較坎坷,經(jīng)歷了幾個(gè)版本的優(yōu)化。








【引申思考】


對晉盈匯app來說:

1.用戶層面上,在不同版本的情況下需要緊跟不同的用戶引導(dǎo)頁,尤其這類理財(cái)類等APP,使用操作都是比較繁瑣,因此需要用戶引導(dǎo)幫助用戶玩好APP;

2.品牌形象上,可以深化品牌價(jià)值,比如提煉產(chǎn)品slogon,吉祥物等,啟動頁是用戶打開app,第一眼看到的地方,需要讓用戶深刻體會到產(chǎn)品的核心價(jià)值觀。

3.商業(yè)用途上,可以利用啟動頁配合營銷事件,實(shí)現(xiàn)商業(yè)價(jià)值。

4.從技術(shù)層面,程序可以利用啟動頁的2~3秒內(nèi),預(yù)加載一些東西,使得后面的用戶體驗(yàn)更好。


啟動頁更多的是在啟動過程中的2~3秒內(nèi),體現(xiàn)app的核心的品牌價(jià)值,而品牌價(jià)值通常體現(xiàn)在產(chǎn)品的情感化設(shè)計(jì)上。


情感化設(shè)計(jì)基于三個(gè)基本層次水平:本能水平的設(shè)計(jì)、行為水平的設(shè)計(jì)、反思水平的設(shè)計(jì)。

本能水平的設(shè)計(jì)——外形(UI界面,整體視覺感受);
行為水平的設(shè)計(jì)——使用的樂趣和效率(把完成目標(biāo)前的過程樂趣化,如何最便捷的觸達(dá)相應(yīng)功能,或達(dá)成某結(jié)果);
反思水平的設(shè)計(jì)——自我形象、個(gè)人滿意、記憶(強(qiáng)化品牌傳播,構(gòu)建品牌形象,讓品牌成為一種文化)。


情感化設(shè)計(jì)點(diǎn):登陸界面、啟動頁、引導(dǎo)頁、節(jié)日閃屏、404、刷新加載...




強(qiáng)化品牌標(biāo)識,有利于品牌傳播



上圖是美團(tuán)外賣的閃屏,以插畫這種具有親和力的表現(xiàn)手法去搭建一個(gè)場景,講一個(gè)小故事隱喻一個(gè)情感。然后傳遞給用戶一個(gè)主題。而插畫下方,則是美團(tuán)的品牌標(biāo)識:袋鼠LOGO、文案“美團(tuán)外賣,送啥都快”。


當(dāng)你聽到電腦發(fā)出“滴滴滴”的時(shí)候,你就知道這是QQ來消息了,聲音也是一種品牌標(biāo)識。



彌補(bǔ)產(chǎn)品在用戶使用過程中發(fā)生的意外



上圖是ofo共享單車在用戶退押金時(shí)的三個(gè)提示頁面,分別是告訴用戶ofo的作用是讓你便捷輕松出行,退押金后損失的優(yōu)惠,最后是用利益誘惑你。從三個(gè)層面去打用戶的痛點(diǎn)。不過確切來說只有第一個(gè)界面算是與用戶情感化交流,后兩個(gè)算是再利用人的貪欲。


關(guān)于文案的情感化設(shè)計(jì)要分情況,根據(jù)APP所分領(lǐng)域、調(diào)性和目標(biāo)用戶人群的特性而定。



轉(zhuǎn)自:站酷-嗚嗚吉良斯基

日歷

鏈接

個(gè)人資料

存檔