中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

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

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

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

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

本篇文章大綱如下所示：

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

01 Loading 加載

1. 全屏加載

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

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

用途：

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

使用說明：

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

組件樣式：

2. 上拉加載

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

用途：

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

使用說明：

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

組件樣式：

3. 下拉加載

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

用途：

方便用戶刷新當前界面，獲取最新數據。

使用說明：

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

組件樣式：

4. 占位符加載

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

當加載的頁面內容有固定的框架時，可以先加載框架，再加載框架內的內容。

用途：

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

使用說明：

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

組件樣式：

02 Default pages 缺省頁

1. 空數據

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

用途：

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

使用說明：

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

樣式：

2. 網絡異常

當移動設備網絡異常時，導致無法上傳和下載數據，從而無法正常的使用產品。這時候會出現(xiàn)網絡異常場景設計提示用戶。

用途：

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

使用說明：

1. 插畫視覺一般比較輕，僅提供裝飾作用，強化下方的文字
2. 對于網絡異常，提供用戶去設置

樣式：

3. 服務器異常

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

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

當服務器異常時，且用戶進入下級頁面時，則通過缺省頁面提示給用戶。

用途：

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

使用說明：

服務器異常，非頁面跳轉，常見的通過對話框提示。跳轉頁面通常通過缺省頁面提示

樣式：

4. 內容被刪除

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

用途：

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

使用說明：

常見的設計是用戶進入新頁面出現(xiàn)對應的插畫和標題提示。

樣式：

5. 暫無權限

不符合查看/操作規(guī)則，導致無權限。

常見的一般為非同一組織架構的員工無權限觀看，這種情況，用戶點擊進入一般給出對應的提示。

用途：

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

使用說明：

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

樣式：

03 Toast吐司

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

用途：

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

使用說明：

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

組件樣式：

04 Alert警示對話框

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

用途：

1. 重要信息的提示
2. 二次確認
3. 提交內容

使用說明：

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

組件樣式：

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

在做交互文檔時，將全局組件進行匯總，在需要使用全局組件時，只需要在交互標注上進行標注即可。

如下圖所示，單獨一個站點地圖匯總全局組件說明。并將組件標上對應的序號方便查找核對。

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

以上就是關于全局組件在交互文檔的用法。

#專欄作家#

UX，人人都是產品經理專欄作家。前美團點評高級交互設計師。微信公眾號：Echo的設計筆記，后臺回復：全局，獲取文中的全局組件的axure源文件。

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

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