用戶交互_缺省
缺省頁指頁面信息的異常反饋雄妥;缺省頁是設(shè)計(jì)過程中最容易忽略的地方,它的作用不僅是提醒用戶盈咳,安撫情緒蘑斧;更重要的通過觸發(fā)某操作用“異常頁面”反饋用戶的操作行為靖秩,營造良好用戶體驗(yàn)。
一竖瘾、缺省頁的設(shè)計(jì)原則
1沟突、明確指示該頁面會出現(xiàn)的數(shù)據(jù),嘗試讓用戶體驗(yàn)樣本捕传,可體現(xiàn)在icon設(shè)計(jì)上惠拭;
2、在沒有內(nèi)容時乐横,鼓勵用戶去創(chuàng)建內(nèi)容求橄;
3、明確的引導(dǎo)空頁面的走向葡公;
二罐农、缺省頁的表現(xiàn)形式
2.1、圖形+文案
圖形:是一些可以表示“空白”隱喻的圖案或者是logo相關(guān)的icon設(shè)計(jì)催什;
文字:通常為“標(biāo)題”或“標(biāo)題+描述”結(jié)構(gòu)涵亏;
? ? ? ? 標(biāo)題通常是解釋此處空白的原因;如“無消息”、“網(wǎng)絡(luò)出問題啦”等气筋;
? ? ? ? 說明則解釋出現(xiàn)此狀況的原因和解決辦法拆内,如“您還沒有任何消息,您可“+”發(fā)布新消息”宠默、“請檢測網(wǎng)絡(luò)狀況后再次嘗試”
? ? ? ? 注:“標(biāo)題”和“說明”非必配項(xiàng)麸恍,可根據(jù)需要選擇;“標(biāo)題”和“說明”至少保留一項(xiàng)搀矫。
2.2抹沪、圖形+文案+引導(dǎo)
圖形:是一些可以表示“空白”隱喻的圖案或者是logo相關(guān)的icon設(shè)計(jì);
文字:通常為“標(biāo)題”或“標(biāo)題+描述”結(jié)構(gòu)瓤球;
? ? ? ? 標(biāo)題通常是解釋此處空白的原因融欧;如“無消息”、“網(wǎng)絡(luò)出問題啦”等卦羡;
? ? ? ? 說明則解釋出現(xiàn)此狀況的原因和解決辦法噪馏,如“您還沒有任何消息,您可“+”發(fā)布新消息”绿饵、“請檢測網(wǎng)絡(luò)狀況后再次嘗試”
? ? ? ? 注:“標(biāo)題”和“說明”非必配項(xiàng)欠肾,可根據(jù)需要選擇;“標(biāo)題”和“說明”至少保留一項(xiàng)拟赊。
引導(dǎo):引導(dǎo)用于“信息層”和“空白層”董济,但是結(jié)合缺省頁面,加入引導(dǎo)要门,用戶進(jìn)行某項(xiàng)行為或者感知某些信息,對于功能的教學(xué)和使用頻率的提升有著重要作用廓啊。
三欢搜、缺省頁類型
系統(tǒng)層:本地請求異常;如:無網(wǎng)絡(luò)谴轮、服務(wù)器異常等
信息層:請求成功炒瘟,數(shù)據(jù)異常;如內(nèi)容已刪除第步、已下架等疮装;
空白層:請求成功,無數(shù)據(jù)粘都;最常見的空頁面或空狀態(tài)廓推;
3.1、系統(tǒng)層缺省頁
系統(tǒng)層缺省頁是指當(dāng)用戶請求服務(wù)器時翩隧,請求提交失敗樊展,并檢測到失敗原因時呈現(xiàn)的落地頁;常用的系統(tǒng)層缺省頁如網(wǎng)絡(luò)異常、服務(wù)器異常专缠,請求失敗等…
3.2雷酪、信息層缺省頁
信息層缺省頁是指用戶請求服務(wù)器成功,返回?cái)?shù)據(jù)異常時檢測到數(shù)據(jù)異常的落地頁面涝婉;常用的信息層缺省頁如內(nèi)容已刪除哥力、商品已下架等…
3.3、空白層缺省頁
空白層缺省頁是指用戶請求服務(wù)器成功墩弯,返回?cái)?shù)據(jù)正常且無內(nèi)容的落地頁面吩跋;內(nèi)容頁在無數(shù)據(jù)時需要缺省狀態(tài)進(jìn)行表達(dá);常用的空白層缺省頁游無訂單最住、無優(yōu)惠券钞澳、無消息等…
總結(jié)
以上為本次針對“加載、刷新涨缚、反饋”做出的歸類和總結(jié)轧粟;
在整理公司移動端交互規(guī)范指南時,突發(fā)奇想發(fā)篇文章與大家進(jìn)行交流脓魏;如有不足兰吟,還請各位看官加以指正;
后續(xù)小編將持續(xù)更新關(guān)于交互設(shè)計(jì)指南用戶交互章節(jié)的相關(guān)設(shè)計(jì)要點(diǎn)茂翔。
注:圖片資源來源于網(wǎng)絡(luò)混蔼,設(shè)計(jì)資料內(nèi)容來自于個人的相關(guān)看法及一些相關(guān)資料的總結(jié)。