国产亚洲精_丰满老熟好大的大bbb_男男激情做爰视频免费观看_欧美一区二区三区精品国产

如何設(shè)計(jì)交互缺省頁(yè)?

2020-4-11    資深UI設(shè)計(jì)者

缺省頁(yè)指頁(yè)面的信息內(nèi)容為空或信息響應(yīng)異常的狀態(tài);設(shè)計(jì)缺省狀態(tài)的作用不僅是引導(dǎo)用戶(hù)在異常邊界狀態(tài)的操作提示,同時(shí)也是安撫用戶(hù)體驗(yàn)情緒的重要場(chǎng)景;更重要的是為邊界場(chǎng)景營(yíng)造出良好用戶(hù)體驗(yàn)。通過(guò)分析缺省狀態(tài)產(chǎn)生的原理,從而更為準(zhǔn)確地把握交互缺省頁(yè)的設(shè)計(jì)原則。

哪些狀態(tài)需要缺省頁(yè)

談到缺省頁(yè)面可能是設(shè)計(jì)師最容易忽略輸出的范圍,可能直到對(duì)接的開(kāi)發(fā)同學(xué)提出來(lái),「這個(gè)頁(yè)面,如果沒(méi)有數(shù)據(jù)的時(shí)候,該怎么顯示???」。為了更好地把控設(shè)計(jì)缺省頁(yè)交互狀態(tài),首先要了解缺省頁(yè)出現(xiàn)的原理。App 頁(yè)面內(nèi)容(包括圖片、文字、數(shù)據(jù)字段等等)都是請(qǐng)求服務(wù)器數(shù)據(jù),順利返回后,正常顯示到客戶(hù)端頁(yè)面。在了解清楚基礎(chǔ)實(shí)現(xiàn)邏輯后,就可以開(kāi)始梳理、整理缺省狀態(tài)的設(shè)計(jì)思路。

△ 圖1 缺省狀態(tài)的場(chǎng)景梳理圖

缺省狀態(tài)包括:系統(tǒng)層、信息層、空白層。

系統(tǒng)層:指當(dāng)用戶(hù)請(qǐng)求服務(wù)器時(shí),返回提示請(qǐng)求提交失敗,并檢測(cè)到失敗原因時(shí)呈現(xiàn)的頁(yè)面;例如:加載失敗、服務(wù)器異常、無(wú)網(wǎng)絡(luò)等;頁(yè)面一般會(huì)有重新請(qǐng)求的快捷按鈕。文案上可做失敗原因的細(xì)分描述,也可節(jié)約成本使用網(wǎng)絡(luò)異常的統(tǒng)一文案。

信息層:請(qǐng)求服務(wù)器數(shù)據(jù)成功,但返回的數(shù)據(jù)異常的頁(yè)面;例如:內(nèi)容已刪除、內(nèi)容已下架、內(nèi)容不存在;文案內(nèi)容以提示數(shù)據(jù)類(lèi)型的缺失為主。顯示形式除了常有的全屏缺省圖,還會(huì)出現(xiàn)在數(shù)據(jù)列表下單一內(nèi)容缺失的缺省模塊化的情況,例如:?jiǎn)我蛔髌吩跁?shū)架上顯示已下架。

空白層:請(qǐng)求服務(wù)器數(shù)據(jù)成功,但顯示無(wú)數(shù)據(jù);內(nèi)容頁(yè)在無(wú)數(shù)據(jù)時(shí)需要缺省狀態(tài)進(jìn)行表達(dá);例如:頁(yè)面空數(shù)據(jù)、搜索無(wú)結(jié)果等??瞻醉?yè)面屬于正常網(wǎng)絡(luò)顯示場(chǎng)景,所以一般會(huì)在缺省頁(yè)附帶有相似屬性模塊的用戶(hù)引導(dǎo),爭(zhēng)取用戶(hù)重復(fù)消費(fèi)的目標(biāo),滿(mǎn)足用戶(hù)的操作的訴求。

最后根據(jù)每個(gè)不同的缺省狀態(tài),梳理產(chǎn)品相對(duì)應(yīng)的場(chǎng)景。逐一根據(jù)場(chǎng)景特點(diǎn)來(lái)設(shè)計(jì)頁(yè)面內(nèi)容。那缺省頁(yè)的設(shè)計(jì)有哪些表現(xiàn)形式呢?

缺省頁(yè)的表現(xiàn)形式

沒(méi)有用心設(shè)計(jì)的缺省頁(yè)無(wú)法給用戶(hù)帶來(lái)良好用戶(hù)體驗(yàn),并可能給用戶(hù)帶來(lái)困擾,如下圖:某小眾直播平臺(tái)的拉新邀請(qǐng)頁(yè)面,無(wú)邀請(qǐng)記錄狀態(tài)下沒(méi)有任何有效反饋信息,用戶(hù)不能明確得知到底是網(wǎng)絡(luò)問(wèn)題還是賬號(hào)同步出錯(cuò),亦或者是沒(méi)有一次邀請(qǐng)。正確的缺省頁(yè)設(shè)計(jì)內(nèi)容理應(yīng)明確表達(dá)出符合用戶(hù)心理預(yù)期的視覺(jué)場(chǎng)景表達(dá)(圖形);和使用易理解和語(yǔ)法恰當(dāng)?shù)乇磉_(dá)當(dāng)前的異常狀態(tài)(標(biāo)題)甚至于引導(dǎo)用戶(hù)解決問(wèn)題的文案描述。

△ 圖5 缺省頁(yè)的錯(cuò)誤示范

1. 視覺(jué)圖案+文案

此類(lèi)缺省設(shè)計(jì)形式一般應(yīng)用于表達(dá)系統(tǒng)性無(wú)響應(yīng)或初始空白態(tài)的缺省場(chǎng)景。視覺(jué)圖案一般使用 app 吉祥物或主色調(diào)延展出的 icon 或插畫(huà)來(lái)表示缺省狀態(tài);文字:通常為「標(biāo)題」或「標(biāo)題+描述」結(jié)構(gòu);標(biāo)題通常是表達(dá)出現(xiàn)缺省的原因;描述文案則說(shuō)明結(jié)束缺省狀態(tài)的解決辦法,如「請(qǐng)檢查網(wǎng)絡(luò)是否順暢」 等等。

2. 視覺(jué)圖案+文案+引導(dǎo)

此類(lèi)缺省設(shè)計(jì)形式一般運(yùn)用于需要用戶(hù)引導(dǎo)操作來(lái)達(dá)到業(yè)務(wù)目標(biāo)的缺省場(chǎng)景。在視覺(jué)圖案+文案的基礎(chǔ)上加入引導(dǎo)模塊,主要作用于避免用戶(hù)在數(shù)據(jù)邊界的狀態(tài)下,會(huì)因?yàn)闊o(wú)法達(dá)到操作目的而提高的跳出率。引導(dǎo)模塊的內(nèi)容包括:相似屬性?xún)?nèi)容,相似行為目標(biāo)按鈕或解決缺省狀態(tài)操作按鈕,加入引導(dǎo),用戶(hù)進(jìn)行某項(xiàng)行為或者感知某些信息,對(duì)于功能的教學(xué)和使用頻率的提升有著重要作用。引導(dǎo)模塊的形式也是日新月異,逐漸變成新用戶(hù)業(yè)務(wù)引導(dǎo)的作用,不僅限于頁(yè)面平鋪,也可以做成固定氣泡微動(dòng)效,例如:抖音的發(fā)布缺省頁(yè)。

缺省頁(yè)的設(shè)計(jì)技巧

缺省頁(yè)除了常規(guī)的提示型設(shè)計(jì)方法,還有許多其他的設(shè)計(jì)技巧,幫助用戶(hù)在遇到困難,更好地安撫用戶(hù)的情緒。這些設(shè)計(jì)技巧有些是替代原來(lái)的缺省內(nèi)容,讓用戶(hù)有更多的消費(fèi)空間與深度。有些是拓展缺省狀態(tài)的補(bǔ)充內(nèi)容,讓用戶(hù)不容易跳出頁(yè)面,增加用戶(hù)的消費(fèi)時(shí)長(zhǎng)。具體如下:

1. 使用推薦內(nèi)容

缺省狀態(tài)中的空白層非常影響邊界情況的用戶(hù)體驗(yàn),提出一種假設(shè),是否可以刻意推薦相同屬性的內(nèi)容呢?這樣的界面既不會(huì)顯得蒼白無(wú)力又可以留住用戶(hù)的注意力。相似性的內(nèi)容也可以解決用戶(hù)目標(biāo)的迫切性。所以說(shuō),這種方法非常適合內(nèi)容型產(chǎn)品中使用。例如:新用戶(hù)在打開(kāi)電商產(chǎn)品的購(gòu)物車(chē)時(shí)候,理應(yīng)是空白無(wú)消費(fèi)行為的操作記錄。那么平臺(tái)方通過(guò)用戶(hù)畫(huà)像與熱門(mén)排行算法推薦了一個(gè)商品流。這樣可以解決用戶(hù)無(wú)目標(biāo)性挑選的訴求,增加消費(fèi)時(shí)長(zhǎng)。至于產(chǎn)品如果確定用戶(hù)畫(huà)像的推薦算法,可以通過(guò)獲取第三方登錄的個(gè)人基本數(shù)據(jù)之后,才給我推薦了數(shù)據(jù)庫(kù)內(nèi)相對(duì)應(yīng)標(biāo)簽的熱門(mén)商品,這樣推薦的精準(zhǔn)度也會(huì)高些。

2. 使用緩存

是否使用緩存內(nèi)容代替缺省狀態(tài)?根據(jù)產(chǎn)品特性來(lái)判斷,工具類(lèi)、金融類(lèi)等同類(lèi)型產(chǎn)品不適合使用緩存;因?yàn)橛脩?hù)交互操作的數(shù)據(jù)必須保持實(shí)時(shí)性與真實(shí)性。而內(nèi)容型、電商類(lèi)等類(lèi)型產(chǎn)品適合使用緩存來(lái)代替缺省狀態(tài);理由:用戶(hù)消費(fèi)內(nèi)容的轉(zhuǎn)化路徑是先消費(fèi)后轉(zhuǎn)化的行為特點(diǎn),不存在系統(tǒng)操作門(mén)檻,且緩存內(nèi)容可以代替產(chǎn)品的缺省狀態(tài),安撫用戶(hù)操作失敗所帶來(lái)跳出率過(guò)高的風(fēng)險(xiǎn)。

3. 情感化表達(dá)

當(dāng)缺省頁(yè)給到用戶(hù)時(shí),通常省時(shí)省力的做法就是老老實(shí)實(shí)告訴用戶(hù)當(dāng)前的狀態(tài),最多配上一個(gè)具有通識(shí)性的灰色 icon。但是,秉持著以用戶(hù)體驗(yàn)為己任的時(shí)代,我們其實(shí)可以把缺省內(nèi)容表達(dá)得更加生動(dòng)形象一些。在這里會(huì)加入一些情感化的表達(dá),而不是僅僅只是做到準(zhǔn)確的目標(biāo)而已,比如加上活潑的插圖故事,或者把文案寫(xiě)得更加擬人化、戲劇化一些。這些配圖在讓用戶(hù)明白當(dāng)前的狀態(tài)的同時(shí),往往也能引發(fā)用戶(hù)會(huì)心一笑,從而彌補(bǔ)空白頁(yè)面帶來(lái)的失落感甚至可以帶給用戶(hù)一些正面的情感。如下圖:

4. 提供新任務(wù)

通常缺省頁(yè)的引導(dǎo)模塊都著眼于解決當(dāng)前任務(wù)。如果碰到?jīng)]有解決方案的情況(例如:404,服務(wù)器崩潰等)可以提供給用戶(hù)具有情感共情的新任務(wù),讓他們暫時(shí)忘記無(wú)法達(dá)到目標(biāo)的挫敗感,又有體諒的情懷。幫助建立正向積極的品牌價(jià)值觀。例如:訪(fǎng)問(wèn)騰訊網(wǎng)時(shí)訪(fǎng)問(wèn)失敗的時(shí)候,網(wǎng)頁(yè)除了顯示 404 狀態(tài)之外,還會(huì)顯示騰訊「寶貝回家」的公益尋人計(jì)劃。將缺省頁(yè)與公益內(nèi)容相結(jié)合,不僅改善到用戶(hù)缺省狀態(tài)。也貫徹騰訊價(jià)值觀「用戶(hù)為本,科技向善」的輸出。一個(gè)好的缺省頁(yè)也可以承擔(dān)社會(huì)責(zé)任,讓公益?zhèn)鞑サ矫總€(gè)角落。

△ 圖10 騰訊網(wǎng)404公益任務(wù)缺省頁(yè)

結(jié)語(yǔ):作為設(shè)計(jì)師有時(shí)會(huì)聽(tīng)到需求方表述「這種極少出現(xiàn)的情況,我們可以暫且不管它?!沟羌?xì)節(jié)見(jiàn)真章,所有優(yōu)秀的體驗(yàn)設(shè)計(jì)都必須照顧到方方面面的缺省情況。讓每個(gè)用戶(hù)的流量?jī)r(jià)值發(fā)揮到最大,產(chǎn)生相互信任的良好的品牌關(guān)系。這樣的平臺(tái)生態(tài)是良性的,這樣的產(chǎn)品會(huì)更有流量轉(zhuǎn)化的商業(yè)化價(jià)值。

文章來(lái)源:優(yōu)設(shè)    作者:騰訊動(dòng)漫TCD

日歷

鏈接

個(gè)人資料

存檔