在設(shè)計過程中，組件能幫助我們節(jié)省因重復(fù)設(shè)計產(chǎn)生的工作時間，讓我們更專注于用戶體驗和對產(chǎn)品的創(chuàng)新。本篇文章對設(shè)計師常使用的全局組件進(jìn)行了梳理總結(jié)，供大家一同學(xué)習(xí)和參考。

繪制交互流程原型時，會出現(xiàn)一些組件被頻繁使用的情況。

如果每次都將這些組件在原型上面展示出來，會給交互文檔帶來冗余，不夠簡潔，且增加交互和視覺的工作量。解決這些問題的方法就是使用全局組件。這樣可以減少文檔的冗余，提升文檔的簡潔度，減少交互設(shè)計師/產(chǎn)品經(jīng)理的工作量。

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

本篇文章大綱如下所示：

1. Loading 加載；
2. Default pages 缺省頁；
3. Toast 吐司；
4. Alert 對話框；
5. 全局組件在交互文檔使用

01 Loading 加載

1. 全屏加載

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

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

用途：

1. 從上一級界面進(jìn)入到下一級界面時使用。
2. 在等待過程中，給用戶提供頁面加載動畫的反饋，防止用戶以為界面卡住出bug了。
3. 能保證內(nèi)容的整體性，全部加載完才能夠閱讀和操作。

使用說明：

1. 原生界面，多使用toast樣式的加載loading，左右居中對齊。
2. 非原生，H5界面，使用進(jìn)度條的樣式展示，位置處于導(dǎo)航欄下方。

組件樣式：

2. 上拉加載

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

用途：

把用戶代入無盡瀏覽模式，讓用戶一直向下滾動，不需要手動點擊加載，效率高。

使用說明：

1. 對于布局相同的布局，可使用上拉加載模式加載數(shù)據(jù)。
2. 需要設(shè)置默認(rèn)一次性加載多少條，可根據(jù)實際情況設(shè)定，一般常見的是20條。加載過多浪費流量，加載過少，需要頻繁加載。

組件樣式：

3. 下拉加載

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

用途：

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

使用說明：

1. Loading展示動畫，一般停留1-3s。
2. 現(xiàn)在很多的產(chǎn)品重新設(shè)計loading加載動畫，使得加載過程更加具有情感化，人性化和品牌化。
3. 因業(yè)務(wù)需求，有時候加載完畢后，會通過toast告知用戶更新多少條內(nèi)容。

組件樣式：

4. 占位符加載

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

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

用途：

1. 通過先加載頁面框架，設(shè)計占位符等形式可以提前讓用戶知道整個界面的架構(gòu)，提高產(chǎn)品的體驗感。
2. 這種加載給用戶感知，加載穩(wěn)定且速度快。

使用說明：

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

組件樣式：

02 Default pages 缺省頁

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

由于產(chǎn)品處于初始狀態(tài)或者因為操作刪除而清空狀態(tài)產(chǎn)生的空數(shù)據(jù)。

用途：

1. 提示用戶無法正常展示內(nèi)容的原因
2. 提供一個入口，給用戶可以去其他地方的入口

使用說明：

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

樣式：

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

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

用途：

1. 告知用戶當(dāng)前界面出現(xiàn)異常的原因
2. 提供解決當(dāng)前界面的異常的方案

使用說明：

1. 插畫視覺一般比較輕，僅提供裝飾作用，強(qiáng)化下方的文字
2. 對于網(wǎng)絡(luò)異常，提供用戶去設(shè)置

樣式：

3. 服務(wù)器異常

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

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

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

用途：

告知用戶當(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ìn)入新頁面出現(xiàn)對應(yīng)的插畫和標(biāo)題提示。

樣式：

5. 暫無權(quán)限

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

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

用途：

1. 提示用戶無法正常展示的原因
2. 給予對應(yīng)的解決方案

使用說明：

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

樣式：

03 Toast吐司

用于對用戶的輕量級提示，一般出現(xiàn)1.5s到2s后消失。通過反饋告知用戶。

用途：

1. 對于用戶操作后給予的即時反饋
2. 對應(yīng)用當(dāng)前存在的狀態(tài)反饋，多用于斷網(wǎng)情況下。

使用說明：

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

組件樣式：

04 Alert警示對話框

通過對話框提示用戶，需要用戶進(jìn)行二次確認(rèn)、選擇或輸入信息的彈窗。

用途：

1. 重要信息的提示
2. 二次確認(rèn)
3. 提交內(nèi)容

使用說明：

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

組件樣式：

05 全局組件在交互文檔使用

在做交互文檔時，將全局組件進(jìn)行匯總，在需要使用全局組件時，只需要在交互標(biāo)注上進(jìn)行標(biāo)注即可。

如下圖所示，單獨一個站點地圖匯總?cè)纸M件說明。并將組件標(biāo)上對應(yīng)的序號方便查找核對。

在交互文檔中，通過標(biāo)注說明出現(xiàn)的組件序號和對應(yīng)的文案。如下圖所示。并且點擊標(biāo)注上的組件名稱跳轉(zhuǎn)到對應(yīng)的站點地圖頁面。

以上就是關(guān)于全局組件在交互文檔的用法。

#專欄作家#

UX，人人都是產(chǎn)品經(jīng)理專欄作家。前美團(tuán)點評高級交互設(shè)計師。微信公眾號：Echo的設(shè)計筆記，后臺回復(fù)：全局，獲取文中的全局組件的axure源文件。

本文原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載。

題圖來自 Unsplash，基于 CC0 協(xié)議