【什么是閃屏 / 引導(dǎo)頁與閃屏的關(guān)系】
(部分引用觀點)
引導(dǎo)頁是閃屏的其中一種,一般出現(xiàn)在版本分布或大版本升級時。
我們先整體看一下閃屏頁的大致類型:
(聲明:以下圖片來源于應(yīng)用截圖,僅作為學(xué)習(xí)交流使用)
一、常規(guī)閃屏
為什么叫常規(guī)閃屏?
因為這類閃屏比較普通,我沒有想到什么更專業(yè)的詞匯,暫且就叫常規(guī)閃屏吧。這類閃屏的使用國內(nèi)的和國外有點不同,因為按照蘋果官方的說法是,用戶打開應(yīng)用能立即使用是最好的體驗,例如:系統(tǒng)自帶的一些應(yīng)用,是沒有閃屏的。再甚者閃屏最好就是讓用戶感覺不到,和首頁能有一個完美的融合和過渡。
這種體驗也很棒,國外的instagram、facebook等就是使用這種設(shè)計,閃屏長得很像首頁,更像是一張加載類的占位符。
當(dāng)然,因地制宜,國內(nèi)的我們已經(jīng)習(xí)慣了閃屏作為App品牌的宣傳和推廣手段,一般由logo+名稱+slogan+品牌色組成,界面還是相對簡潔明了的,但還是很明顯的違背了蘋果官方的指導(dǎo)說法,但是沒辦法,這就是商業(yè)需要。
這樣設(shè)計也有利處,可以減少用戶在打開App時的焦慮感,也可以讓用戶更直觀的了解品牌,傳遞一些情懷、理念,多看一次閃屏,也是讓用戶強(qiáng)化品牌記憶的過程,只是不知道是好的記憶點還是壞的,就要我們自己斟酌了。
二、廣告閃屏
廣告閃屏,顧名思義就是產(chǎn)品本身為了進(jìn)行流量變現(xiàn)從而獲得盈利,給一些商家打廣告或者進(jìn)行合作設(shè)計的一類閃屏,這是無可厚非的。不過廣告閃屏自帶被“嫌棄”屬性,應(yīng)該很多用戶看到這類閃屏的心理是比較排斥的。
至少對我來說,我是很少關(guān)注這類閃屏,除非閃屏設(shè)計的非常的酷炫,我愿意多看一下,否則的話我就想立刻把它關(guān)掉,所以在這類閃屏上加上“倒計時(loading)和跳過”就顯得很必要,并且“跳過”的位置也要方便用戶點擊。
這類閃屏最好只出現(xiàn)每天第一次打開App時,避免讓用戶厭煩。不管出于何種目的,都需要在商業(yè)利益和用戶體驗之間保持一個平衡,不然用戶會流失的很快,用戶流失了,何談盈利呢?
另外廣告閃屏和下面要說的活動閃屏一樣,會有一個模板:底部是閃屏圖片,上面蓋上一層logo模板。
App啟動時會從服務(wù)器拉取閃屏數(shù)據(jù),本地會保存logo模板。如果服務(wù)器更新了閃屏數(shù)據(jù)會拉取數(shù)據(jù)進(jìn)行展示,如果沒有更新或是網(wǎng)絡(luò)不佳,就會默認(rèn)展示緩存的閃屏數(shù)據(jù),以免發(fā)生卡頓現(xiàn)象,以保證流暢的用戶體驗。
三、活動閃屏
活動閃屏和廣告閃屏有點類似,出于產(chǎn)品運(yùn)營方面的需要,它起到活動宣傳的作用,每年的雙十一、雙十二期間,各大電商App的閃屏都會用到活動閃屏,還有一些商家自己造的一些節(jié)日:品牌周、年貨節(jié)、會員日、狂歡周…相信大家已經(jīng)見怪不怪了。
近期我留意到一個問題,就是我們在使用App時,經(jīng)常會在應(yīng)用之間進(jìn)行切換使用。如果我們從其他應(yīng)用再次返回時,最好不要再加載一次閃屏,會給用戶很不好的用戶體驗。目前使用下來,淘寶、天貓等這類主流應(yīng)用都有這種問題,但是我想這應(yīng)該他們有意為之。
四、節(jié)日閃屏
每逢一些節(jié)假日,各大品牌都會推出一些當(dāng)日的閃屏,那么為什么要設(shè)計節(jié)日閃屏?
我覺得有幾點原因:
長期看常規(guī)閃屏,用戶很容易會有視覺上的一種疲勞,節(jié)日閃屏?xí)o用戶一種不經(jīng)意的驚喜和新鮮感;
可以蹭一蹭節(jié)日的熱點,提升產(chǎn)品本身的品牌調(diào)性;
在節(jié)日給用戶以問候和關(guān)懷,和用戶在情感上產(chǎn)生共鳴,從而更好的連接用戶和產(chǎn)品,我想這應(yīng)該是最重要的原因。
節(jié)日閃屏比較吸引用戶的注意力,它不像廣告類閃屏,我看見這類閃屏就會忍不住的多瞅幾眼,所以設(shè)計這類閃屏的時候要非常重視,因為用戶愿意等待,這是非常求之不得的,這就需要設(shè)計師具有比較強(qiáng)的表現(xiàn)能力了。
我們在設(shè)計的時候可以先進(jìn)行思維上的發(fā)散,或者是逆向思維之類的,比如:春節(jié)將近,我們可以聯(lián)想到是什么,理清一個思緒,要有節(jié)日的氛圍,可以活潑、可愛、夸張…切忌呆板。
五、大版本升級閃屏(引導(dǎo)頁)
在App進(jìn)行了大版本升級后,要向用戶展示產(chǎn)品新功能的操作方法。這類閃屏也可以稱為引導(dǎo)頁,頁面數(shù)量控制在3-5頁,每一頁都有一個對應(yīng)的主題,主題要精簡,切忌文字過多。
而且每一頁設(shè)計形式要類似,否則會給用戶一種視覺落差感。頁面上要加上“跳過”功能,因為用戶更希望盡快體驗新版本,而不是看你的這些教導(dǎo),在最后一頁要加上類似“立即體驗”的button。
——分割線【品牌傳達(dá)力】——
啟動頁面告訴用戶“我是誰”“我是做什么的”,開頭跟用戶做了自我介紹,引導(dǎo)頁的目的主要是告訴用戶:“我該怎么使用”或者是“我有什么亮點”(重點宣傳的功能),借用男女相親例子,雙方介紹完自己之后,開始展示自己有什么優(yōu)勢,好的引導(dǎo)頁設(shè)計直接關(guān)系到用戶是否“對你有興趣”想一進(jìn)“了解你”。
從上圖可以看到,引導(dǎo)頁在品牌傳達(dá)力上居首位,其次應(yīng)用市場說明圖。
【引導(dǎo)頁展示目的】
以下盡量列舉了金融相關(guān)app截圖,僅供學(xué)習(xí)使用
引導(dǎo)頁定義比較廣,往小了講,我們一般會認(rèn)為在用戶初次打開應(yīng)用時跳出的幾張介紹應(yīng)用功能的頁面就叫做引導(dǎo)頁;那往大了說,在用戶使用某個功能前就能幫助用戶降低學(xué)習(xí)成本的頁面或存在引導(dǎo)屬性的彈窗都可以稱為引導(dǎo)頁。
先從引導(dǎo)頁展示的目的出發(fā),再結(jié)合實際app情況去確定宣傳標(biāo)題,最后結(jié)合不同的設(shè)計展示方式以及動效。
一、產(chǎn)品特色介紹
多數(shù)時候,我們初次打開應(yīng)用會看到下面這樣的引導(dǎo)頁:
可以看到一個共通點——即頁面呈現(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è)計得當(dāng)?shù)拿砂嬉龑?dǎo)不僅可以與其他引導(dǎo)相輔相成,同時也能夠增加用戶對產(chǎn)品的好感度。
它的好處就是清晰明了,直接讓用戶知道你想表達(dá)什么。它的實際效果會比純內(nèi)容引導(dǎo)頁好很多,但同時也會有一個問題,即打擾用戶操作。
這樣的方式已經(jīng)解決了內(nèi)容操作引導(dǎo)的問題,但其實這種方法也會使用戶厭倦,所以內(nèi)容不易過多。
三、理念傳達(dá)
以傳達(dá)態(tài)度理念,生活方式等為主,比較概念和意義上的東西,吸引用戶達(dá)到某種程度的共鳴,從而產(chǎn)生吸引力。
四、側(cè)面實力烘托
多用于有實力/特色的產(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è)計上達(dá)到統(tǒng)一。
【引導(dǎo)頁設(shè)計方法】
在確定了引導(dǎo)頁展示目的之后,下面整理了在引導(dǎo)頁設(shè)計過程中的方法。
目前比較常見的幾類引導(dǎo)頁的類型(電商除外),根據(jù)產(chǎn)品的特點來確定設(shè)計風(fēng)格,總體沒有固定規(guī)則。
一、圖文結(jié)合
使用有關(guān)聯(lián)性的圖片,同種版式,優(yōu)點是感情表達(dá)直觀簡單,畫面沖擊感強(qiáng),缺點是泛表達(dá),不能表達(dá)內(nèi)容。
二、產(chǎn)品界面描述型
功能描述型,使用app畫面說明,通常在版本更新時用來對新功能進(jìn)行重點描述,是目前比較常見的引導(dǎo)頁表達(dá)方法之一,比較通用。
三、模擬應(yīng)用場景
通常用插畫方式表現(xiàn),通過圖文結(jié)合的方式全方位闡述中心思想,插畫風(fēng)格具有豐富的多樣性,同時又能貼切表達(dá)主題,所以在app中出現(xiàn)頻率越來越高。
以下列舉了百度金融的版本引導(dǎo)頁,通過系列插圖表現(xiàn)貼心、安心、用心、省心、隨心,插畫緊密契合主題,完美使用排比句的形式。
四、吉祥物的運(yùn)用
一個成熟的app通常會吉祥物來表現(xiàn),啟動頁是用戶打開app第一眼看到的地方,吉祥物可以讓用戶在2-3秒時間內(nèi)深刻體會到產(chǎn)品的核心價值觀。
五、代交互 動效的
這類啟動頁通常是在頁面切換中加入一些動效果的設(shè)計,使得在交互體驗上更加突出,與靜態(tài)頁面間的切換顯得更加生動有趣。
動畫呈現(xiàn)方式趣味性更高一些,開發(fā)成本相對也會高一些。
六、視頻類/動畫類
這類的理論上不叫啟動頁,叫開篇動畫更貼切,打開app通常為一小段視頻或動畫引入頁面
【實際案例分析】
閃屏/引導(dǎo)頁的設(shè)計方法很多,但要在設(shè)計之前充分考慮到產(chǎn)品定位和應(yīng)用場景。
下面引用我自己的案例分析,因為對產(chǎn)品理解不夠到位,設(shè)計過程比較坎坷,經(jīng)歷了幾個版本的優(yōu)化。
【引申思考】
對晉盈匯app來說:
1.用戶層面上,在不同版本的情況下需要緊跟不同的用戶引導(dǎo)頁,尤其這類理財類等APP,使用操作都是比較繁瑣,因此需要用戶引導(dǎo)幫助用戶玩好APP;
2.品牌形象上,可以深化品牌價值,比如提煉產(chǎn)品slogon,吉祥物等,啟動頁是用戶打開app,第一眼看到的地方,需要讓用戶深刻體會到產(chǎn)品的核心價值觀。
3.商業(yè)用途上,可以利用啟動頁配合營銷事件,實現(xiàn)商業(yè)價值。
4.從技術(shù)層面,程序可以利用啟動頁的2~3秒內(nèi),預(yù)加載一些東西,使得后面的用戶體驗更好。
啟動頁更多的是在啟動過程中的2~3秒內(nèi),體現(xiàn)app的核心的品牌價值,而品牌價值通常體現(xiàn)在產(chǎn)品的情感化設(shè)計上。
情感化設(shè)計基于三個基本層次水平:本能水平的設(shè)計、行為水平的設(shè)計、反思水平的設(shè)計。
本能水平的設(shè)計——外形(UI界面,整體視覺感受);
行為水平的設(shè)計——使用的樂趣和效率(把完成目標(biāo)前的過程樂趣化,如何最便捷的觸達(dá)相應(yīng)功能,或達(dá)成某結(jié)果);
反思水平的設(shè)計——自我形象、個人滿意、記憶(強(qiáng)化品牌傳播,構(gòu)建品牌形象,讓品牌成為一種文化)。
情感化設(shè)計點:登陸界面、啟動頁、引導(dǎo)頁、節(jié)日閃屏、404、刷新加載...
強(qiáng)化品牌標(biāo)識,有利于品牌傳播
上圖是美團(tuán)外賣的閃屏,以插畫這種具有親和力的表現(xiàn)手法去搭建一個場景,講一個小故事隱喻一個情感。然后傳遞給用戶一個主題。而插畫下方,則是美團(tuán)的品牌標(biāo)識:袋鼠LOGO、文案“美團(tuán)外賣,送啥都快”。
當(dāng)你聽到電腦發(fā)出“滴滴滴”的時候,你就知道這是QQ來消息了,聲音也是一種品牌標(biāo)識。
彌補(bǔ)產(chǎn)品在用戶使用過程中發(fā)生的意外
上圖是ofo共享單車在用戶退押金時的三個提示頁面,分別是告訴用戶ofo的作用是讓你便捷輕松出行,退押金后損失的優(yōu)惠,最后是用利益誘惑你。從三個層面去打用戶的痛點。不過確切來說只有第一個界面算是與用戶情感化交流,后兩個算是再利用人的貪欲。
關(guān)于文案的情感化設(shè)計要分情況,根據(jù)APP所分領(lǐng)域、調(diào)性和目標(biāo)用戶人群的特性而定。