app空白頁(yè)面設(shè)計(jì)指南

前言大家可能覺(jué)得空白頁(yè)只是 app 附加頁(yè)面,不必花費(fèi)過(guò)得精力去做。但其實(shí)并不是這樣的,因?yàn)楹玫目瞻醉?yè)能在空數(shù)據(jù)或者意外情況下挽留用戶,提高產(chǎn)品的留存率。接下來(lái)我們從設(shè)計(jì)和功能的角度來(lái)判定一個(gè)優(yōu)秀的空白頁(yè)到底具備哪些品質(zhì)?文末有空白頁(yè)素材下載。

?

01空狀態(tài)頁(yè)的定義

空狀態(tài),顧名思義就是空白的狀態(tài)。出現(xiàn)這種狀況的兩大原因是:數(shù)據(jù)缺失+網(wǎng)路異常。
這兩個(gè)狀態(tài)基本都是災(zāi)難性。就好比用戶褲子都脫了,你卻給他個(gè)空白頁(yè)面,用戶難免會(huì)感到失望,情緒低落。
用戶無(wú)法接受的原因有兩種,首先是不符合自己的預(yù)期,當(dāng)用戶熱情高漲的時(shí)候,你潑了一盆涼水,造成了極大的心里落差。其次是網(wǎng)路異常,原則上不是產(chǎn)品的錯(cuò),但是用戶不會(huì)透過(guò)現(xiàn)象看本質(zhì),心神領(lǐng)會(huì)的想這里可能沒(méi)信號(hào)或者自己手機(jī)問(wèn)題,用戶這個(gè)時(shí)候多半會(huì)被“簡(jiǎn)單歸因”的想法所左右,主管的批評(píng)產(chǎn)品并且潛意識(shí)里將其貼上不靠譜的標(biāo)簽。
但是好的空白頁(yè)卻能幫助你解決這些問(wèn)題,空白頁(yè)最大的作用就是緩解用戶的焦慮的情緒,避免負(fù)面情緒的產(chǎn)生,進(jìn)而減少對(duì)產(chǎn)品的產(chǎn)品負(fù)面形象的評(píng)價(jià)。并在功能上指導(dǎo)教育用戶完成當(dāng)前任務(wù),能夠順利執(zhí)行之后的操作,更好的服務(wù)用戶。
由此我們可以看出一個(gè)合格的空白頁(yè)是多么重要,接下來(lái)我們就來(lái)探究一下怎樣才是一個(gè)合格的空白頁(yè),我們從會(huì)從設(shè)計(jì)和功能的角度進(jìn)行分析。

02空白頁(yè)設(shè)計(jì)的4大要素

一個(gè)好的空白頁(yè)設(shè)計(jì)并不是天馬行空的想象,而是在一定約束下的最佳表現(xiàn)。好的空白頁(yè)設(shè)計(jì)一定是符合以下四項(xiàng)設(shè)計(jì)需求,如下圖所示例:
A.品牌品牌具有戰(zhàn)略意義,所以說(shuō)品牌設(shè)計(jì)會(huì)始終貫穿如意。我們作為設(shè)計(jì)師的最終目的服務(wù)于產(chǎn)品和公司,所以我們的設(shè)計(jì)必須遵循公司的品牌調(diào)性。

品牌的設(shè)計(jì)是貫穿一個(gè)產(chǎn)品的始終,是對(duì)產(chǎn)品標(biāo)準(zhǔn)化、規(guī)則化的基礎(chǔ),品牌設(shè)計(jì)使我們看到產(chǎn)品的第一印象。例如我們?cè)谏钪校ㄟ^(guò)的品牌規(guī)范的設(shè)計(jì)語(yǔ)言就能得知這是什么品牌的產(chǎn)品。我們舉一個(gè)工業(yè)設(shè)計(jì)的例子,以寶馬汽車為例:

寶馬汽車將品牌的設(shè)計(jì)語(yǔ)言在所有產(chǎn)品上始終貫穿如一,即使不同類型的汽車,我們?nèi)钥梢酝ㄟ^(guò)設(shè)計(jì)語(yǔ)言看出品牌的調(diào)性,即使摘掉 logo 我們?nèi)钥梢砸谎劭闯鲞@是寶馬的產(chǎn)品。
我們?cè)u(píng)判一個(gè)好的空白頁(yè)首先就是看到整體設(shè)計(jì)是否符合其產(chǎn)品的品牌設(shè)計(jì)。如果不符合品牌設(shè)計(jì)的基礎(chǔ)調(diào)性,會(huì)讓用戶感到迷茫,心想這是???所以符合品牌設(shè)計(jì)是我們?cè)O(shè)計(jì)的空白頁(yè)的基礎(chǔ),我們以騰訊動(dòng)漫為例:
騰訊動(dòng)漫是的logo是一個(gè)卡通人物(鵝娘)。在空白頁(yè)中同樣也是通過(guò)對(duì)卡通人物的形象延展展,通過(guò)塑造卡通任務(wù)驚訝的表情來(lái)詮釋空白頁(yè)中的內(nèi)容缺失。值得夸贊的是騰訊動(dòng)漫整體空白頁(yè)都保持了高度的一致的品牌性,鵝娘的形象充分運(yùn)用到了所用空白頁(yè)中。
B.創(chuàng)意空白頁(yè)是設(shè)計(jì)師充分發(fā)揮創(chuàng)意的地方,好的創(chuàng)意是幫助用戶趕走的枯燥的利器,能讓用戶感到耳目一新的感覺(jué)。使原本枯燥無(wú)味的空白頁(yè)顯得生動(dòng)有趣,讓用戶更加有動(dòng)力去執(zhí)行之后的操作。甚至有一點(diǎn)忍不住截圖分享的沖動(dòng)。

這里我們以 Google 瀏覽器的網(wǎng)絡(luò)異常的空頁(yè)面為例:

Google 瀏覽器網(wǎng)絡(luò)異常的空頁(yè)面,是一個(gè)迷路的灰色像素小恐龍。畫面好像在講“我迷失在網(wǎng)絡(luò)的世界,找不到有效的數(shù)據(jù)而變得灰暗,需要你的幫助,讓我回到我的世界。”通過(guò)簡(jiǎn)單的創(chuàng)意來(lái)引發(fā)用戶的思考,讓用戶主動(dòng)去參與網(wǎng)絡(luò)異常的修復(fù)。C.情感

由于空白的本身內(nèi)容的確實(shí)會(huì)給用戶造成情緒上焦慮,所以說(shuō)情感的設(shè)計(jì)是空白頁(yè)必備的元素之一。

好的情感設(shè)計(jì)能夠有效撫慰用戶的焦躁的心情,減少用戶的負(fù)面情緒,并能讓用戶的轉(zhuǎn)移到當(dāng)前操作上,避免用戶因?yàn)榍榫w的不滿而放棄操作。我們以嗶哩嗶哩為例:

嗶哩嗶哩的默認(rèn)收藏夾的空白頁(yè)以自身的卡通 IP 形象進(jìn)行延展設(shè)計(jì),加以情緒化的表達(dá)。如上圖通過(guò)類比營(yíng)造一個(gè)收作業(yè)的場(chǎng)景,因?yàn)椴荒芗皶r(shí)上交作業(yè)的而感到悲傷哭泣,比喻數(shù)據(jù)缺失的狀態(tài)。通過(guò)哭泣的表情讓用戶產(chǎn)生同情心,并且企圖幫助她,這樣有效的減少了用戶負(fù)面的情緒。
D.規(guī)則規(guī)則是為了保證產(chǎn)品的一致性,特別是平臺(tái)性質(zhì)的產(chǎn)品,需要保持每一個(gè)模塊和頁(yè)面的統(tǒng)一性,空頁(yè)面屬于產(chǎn)品的一部分,一個(gè)優(yōu)秀的空白頁(yè)必定是遵循產(chǎn)品的設(shè)計(jì)規(guī)則。通過(guò)設(shè)計(jì)規(guī)則可以將用戶可以在設(shè)計(jì)形式做到高度統(tǒng)一,以及可以將設(shè)計(jì)語(yǔ)言貫穿始終,并減少用戶的認(rèn)知壓力。我們以same為例:

通過(guò)圖例我們可以看出,same 在不同內(nèi)容的空白頁(yè)高度遵循產(chǎn)品設(shè)計(jì)的規(guī)則,使用相同的圖形插畫和組合形式,通過(guò)這種形式可以有效的減少用戶的認(rèn)知壓力,用戶能夠迅速識(shí)別頁(yè)面的狀態(tài),從而進(jìn)行下一步的操作。

03空白頁(yè)的作用

空狀態(tài)就好像一粒緩沖劑,當(dāng)頁(yè)面沒(méi)有內(nèi)容或者出現(xiàn)異常的時(shí)候,空白頁(yè)需要想盡各種辦法挽留用戶,讓用戶留下來(lái),并能指導(dǎo)用戶解決問(wèn)題。接下來(lái)我們看看的空白頁(yè)具備哪些主要功能才是合格的!空白頁(yè)的主要作用是:教育用戶、取悅用戶、引導(dǎo)用戶。

A.教育用戶一個(gè)優(yōu)秀的空白頁(yè)的首要目的是教育用戶如何使用 App,理解當(dāng)前頁(yè)面的功能,引導(dǎo)用戶執(zhí)行下一步操作。并且必須符合3W原則:

何物(What):這個(gè)頁(yè)面在講什么何地(Where):告知用戶當(dāng)前的位置,以及接下來(lái)可以干什么

何時(shí)(When):解釋此處空白在什么情況下才能出現(xiàn)有效的數(shù)據(jù)

3W原則告訴用這個(gè)頁(yè)面在說(shuō)什么,以及用戶當(dāng)前所處的位置,并解釋在什么情況下會(huì)出現(xiàn)空白頁(yè)面。我們以滴答清單為例:

滴答清單日歷頁(yè)面告訴用戶的這是一個(gè)根據(jù)日程建立任務(wù)的頁(yè)面,現(xiàn)在處于任務(wù)的空白期可以通過(guò)右下角的“+”號(hào)來(lái)添加任務(wù),只有通過(guò)添加任務(wù)才能出現(xiàn)有效的數(shù)據(jù)。B.取悅用戶

優(yōu)秀的空白頁(yè)能夠取悅用戶,讓用戶的保持預(yù)約的心情。用戶的愉悅保證了產(chǎn)品的留存,即使在空狀態(tài)頁(yè)面的情況,用戶也愿意留下來(lái),根據(jù)信息指示完成任務(wù)操作。我們以嗶哩嗶哩為例:

嗶哩嗶哩通過(guò)取悅用戶通過(guò)使用自身的動(dòng)漫 IP 來(lái)引發(fā)用戶的情感共鳴,通過(guò)動(dòng)漫人物“好奇、可愛”的表情來(lái)感染用戶登陸。C.引導(dǎo)用戶

當(dāng)用戶進(jìn)入一個(gè)初始狀態(tài)的頁(yè)面的時(shí)候,需要用戶創(chuàng)建數(shù)據(jù)的時(shí)候,我們需要能夠快速引導(dǎo)用戶進(jìn)行操作,而不是用戶在一頓摸索之后最終放棄操作。

我們需要通過(guò)一下三種形式來(lái)引導(dǎo)用戶:激勵(lì)用戶、說(shuō)服用戶、指導(dǎo)用戶。

激勵(lì)用戶:用激勵(lì)化的語(yǔ)言和設(shè)計(jì)去推動(dòng)你的用戶。我們以貓頭鷹旅行為例:
貓頭鷹綠旅行通過(guò)激勵(lì)性的語(yǔ)言:探索并收藏您最愛的創(chuàng)意。來(lái)鼓勵(lì)用戶操作去“創(chuàng)建行程?!闭f(shuō)服用戶:提醒用戶他們使用您的產(chǎn)品時(shí)將會(huì)收到的好處。這里我們以ASOS為例:

ASOS 其中的英文翻譯是:“我公司免費(fèi)提供8次免費(fèi)送貨和退貨”。直接通過(guò)利益的吸引來(lái)誘導(dǎo)用戶參與。指導(dǎo)用戶:推薦并向他們展示開始使用的最佳方式。 提供指引性的按鈕,以指導(dǎo)用戶看到空白屏幕所需的操作,來(lái)獲得更有意義的內(nèi)容。這里我們以人人視頻為例:

人人視頻的視頻空頁(yè)面,通過(guò)蜘蛛俠的卡通形象下落的狀態(tài),配以文字和按鈕,來(lái)指導(dǎo)用戶點(diǎn)擊刷新。

04總結(jié)

通過(guò)上述內(nèi)容,我們了解到如何做一個(gè)合格的空白頁(yè),首先在設(shè)計(jì)層面上要滿足用戶“品牌、創(chuàng)意、情感、規(guī)則”的四要素,其次在功能上要“教育用戶”、“取悅用戶”、“引導(dǎo)用戶”,這樣才能成為一個(gè)合格的空白頁(yè)設(shè)計(jì)。我們需要在形式和功能上雙向滿足用戶。
 

如果您還是不知道如何入手,可下載空白頁(yè)面設(shè)計(jì)素材,讓您的設(shè)計(jì)一步到位。

 

 

文章來(lái)源:海鹽社

原作者:姜正

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