建議收藏！全局交互的組件使用

解決這些問題的方法就是使用全局組件。這樣可以減少文檔的冗余，提升文檔的簡潔度，減少交互設(shè)計(jì)師/產(chǎn)品經(jīng)理的工作量。

全局組件大致有以下4種，分別為：Loading 加載、Default pages 缺省頁、Toast 吐司、Alert 對話框。

本篇文章大綱如下所示：

1、Loading 加載；

2、Default pages 缺省頁；

3、Toast 吐司；

4、Alert 對話框；

5、全局組件在交互文檔使用

1.Loading加載

1、全屏加載

這種加載比較簡單，一般使用在頁面內(nèi)容比較單一的情況下，所以一次性加載完所有數(shù)據(jù)后再顯示內(nèi)容。

但這種一次性加載完后，再展示出來，給用戶感覺加載時(shí)間較長。

用途：

1.從上一級界面進(jìn)入到下一級界面時(shí)使用。

2.在等待過程中，給用戶提供頁面加載動(dòng)畫的反饋，防止用戶以為界面卡住出bug了。

3.能保證內(nèi)容的整體性，全部加載完才能夠閱讀和操作。

使用說明：

1.原生界面，多使用toast樣式的加載loading，左右居中對齊。

2.非原生，H5界面，使用進(jìn)度條的樣式展示，位置處于導(dǎo)航欄下方。

組件樣式：

2、上拉加載

用戶在瀏覽界面的過程中，對于未加載的信息，通過手勢上拉，信息自動(dòng)加載。

用途：把用戶代入無盡瀏覽模式，讓用戶一直向下滾動(dòng)，不需要手動(dòng)點(diǎn)擊加載，效率高。

?

使用說明：

1.對于布局相同的布局，可使用上拉加載模式加載數(shù)據(jù)。

2.需要設(shè)置默認(rèn)一次性加載多少條，可根據(jù)實(shí)際情況設(shè)定，一般常見的是20條。加載過多浪費(fèi)流量，加載過少，需要頻繁加載。

組件樣式：

3、下拉加載

用戶下拉時(shí)，出現(xiàn)loading動(dòng)畫，對整個(gè)頁面重新加載刷新?，F(xiàn)在很多的產(chǎn)品重新設(shè)計(jì)loading加載動(dòng)畫，使得加載過程更加具有情感化，人性化和品牌化。

?

用途：

1.方便用戶刷新當(dāng)前界面，獲取最新數(shù)據(jù)。

?

使用說明：

1.Loading展示動(dòng)畫，一般停留1-3s。

2.現(xiàn)在很多的產(chǎn)品重新設(shè)計(jì)loading加載動(dòng)畫，使得加載過程更加具有情感化，人性化和品牌化。

3.因業(yè)務(wù)需求，有時(shí)候加載完畢后，會通過toast告知用戶更新多少條內(nèi)容。

?

組件樣式：

?

4、占位符加載

當(dāng)有文字和圖片時(shí)，圖片會比文字加載的慢，這個(gè)時(shí)候往往文字先加載出來，圖片在加載過程中使用占位符，直到圖片加載成功。

當(dāng)加載的頁面內(nèi)容有固定的框架時(shí)，可以先加載框架，再加載框架內(nèi)的內(nèi)容。

?

用途：

1.通過先加載頁面框架，設(shè)計(jì)占位符等形式可以提前讓用戶知道整個(gè)界面的架構(gòu)，提高產(chǎn)品的體驗(yàn)感。

2.這種加載給用戶感知，加載穩(wěn)定且速度快。

?

使用說明：

占位符加載最好讓占位符的樣式布局和真實(shí)加載數(shù)據(jù)布局保持相似或者相同。

?

組件樣式：

1、空數(shù)據(jù)

由于產(chǎn)品處于初始狀態(tài)或者因?yàn)椴僮鲃h除而清空狀態(tài)產(chǎn)生的空數(shù)據(jù)。

?

用途：

1.提示用戶無法正常展示內(nèi)容的原因

2.提供一個(gè)入口，給用戶可以去其他地方的入口

?

使用說明：

是否提供其他入口，可根據(jù)具體業(yè)務(wù)情況來定。

?

樣式：

2、網(wǎng)絡(luò)異常

當(dāng)移動(dòng)設(shè)備網(wǎng)絡(luò)異常時(shí)，導(dǎo)致無法上傳和下載數(shù)據(jù)，從而無法正常的使用產(chǎn)品。這時(shí)候會出現(xiàn)網(wǎng)絡(luò)異常場景設(shè)計(jì)提示用戶。

?

用途：

1.告知用戶當(dāng)前界面出現(xiàn)異常的原因

2.提供解決當(dāng)前界面的異常的方案

?

使用說明：

1.插畫視覺一般比較輕，僅提供裝飾作用，強(qiáng)化下方的文字

2.對于網(wǎng)絡(luò)異常，提供用戶去設(shè)置

?

樣式：

3、服務(wù)器異常

服務(wù)器異常是小概率事件，但是也偶爾發(fā)生。

當(dāng)服務(wù)器異常時(shí)，且用戶在操作過程中，出現(xiàn)這種情況，一般可設(shè)計(jì)為對話框提示，明確告知用戶，服務(wù)器出現(xiàn)問題，讓用戶稍后重試。

當(dāng)服務(wù)器異常時(shí)，且用戶進(jìn)入下級頁面時(shí)，則通過缺省頁面提示給用戶。

?

用途：

告知用戶當(dāng)前界面出現(xiàn)異常的原因，提供用戶刷新操作。

?

使用說明：

服務(wù)器異常，非頁面跳轉(zhuǎn)，常見的通過對話框提示。跳轉(zhuǎn)頁面通常通過缺省頁面提示

?

樣式：

4、內(nèi)容被刪除

文件或者頁面內(nèi)容被刪除，由于文件或者頁面內(nèi)容的上一級頁面有緩存亦或用戶獲取鏈接進(jìn)入，則會出現(xiàn)文章/文件被刪除的情況。

?

用途：

用于提示用戶，出現(xiàn)當(dāng)前異常頁面的原因。

?

使用說明：

常見的設(shè)計(jì)是用戶進(jìn)入新頁面出現(xiàn)對應(yīng)的插畫和標(biāo)題提示。

?

樣式：

5、暫無權(quán)限

不符合查看/操作規(guī)則，導(dǎo)致無權(quán)限。

常見的一般為非同一組織架構(gòu)的員工無權(quán)限觀看，這種情況，用戶點(diǎn)擊進(jìn)入一般給出對應(yīng)的提示。

?

用途：

1.提示用戶無法正常展示的原因

2.給予對應(yīng)的解決方案

?

使用說明：

最好的方案是在App上面過濾掉無法查看的內(nèi)容，但是存在員工間的轉(zhuǎn)發(fā)行為，這時(shí)候無權(quán)限的員工，點(diǎn)擊進(jìn)入，則顯示暫無權(quán)限查看的提示頁面。

?

樣式：

1. 對于用戶操作后給予的即時(shí)反饋

2.對應(yīng)用當(dāng)前存在的狀態(tài)反饋，多用于斷網(wǎng)情況下。

?

使用說明：

處于界面居中位置。根據(jù)不同狀態(tài)展示不同的toast樣式。

?

組件樣式：

?

用途：

1.重要信息的提示

2.二次確認(rèn)

3.提交內(nèi)容

?

使用說明：

用戶只能點(diǎn)擊對話框，對話框才消失。文案和按鈕都居中對齊。

?

組件樣式：