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

淺析如何設(shè)計(jì)交互缺省頁

2020-5-10    ui設(shè)計(jì)分享達(dá)人

大綱



1 哪些狀態(tài)需要缺省頁  
2 缺省頁的表現(xiàn)形式
3 缺省頁的設(shè)計(jì)技巧

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


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

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



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


缺省狀態(tài)包括：系統(tǒng)層、信息層、空白層。
系統(tǒng)層：指當(dāng)用戶請求服務(wù)器時(shí)，返回提示請求提交失敗，并檢測到失敗原因時(shí)呈現(xiàn)的頁面；例如：加載失敗、服務(wù)器異常、無網(wǎng)絡(luò)等；頁面一般會有重新請求的快捷按鈕。文案上可做失敗原因的細(xì)分描述，也可節(jié)約成本使用網(wǎng)絡(luò)異常的統(tǒng)一文案。

                    


                                               
信息層：請求服務(wù)器數(shù)據(jù)成功，但返回的數(shù)據(jù)異常的頁面；例如：內(nèi)容已刪除、內(nèi)容已下架、內(nèi)容不存在；文案內(nèi)容以提示數(shù)據(jù)類型的缺失為主。顯示形式除了常有的全屏缺省圖，還會出現(xiàn)在數(shù)據(jù)列表下單一內(nèi)容缺失的缺省模塊化的情況，例如：單一作品在書架上顯示已下架。





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



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


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

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



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

2-1視覺圖案+文案

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



               
2-2 視覺圖案+文案+引導(dǎo)

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

 



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

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

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

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




3-2 使用緩存

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

3-3 情感化表達(dá)

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



3-4 提供新任務(wù)

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



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

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


轉(zhuǎn)自：ui中國-騰訊動漫TCD

日歷

鏈接

個(gè)人資料

存檔