長城上的貓

小編:今天分享下日常提高效率的全局組件,底下有下載的資源鏈接,不要忘記哦~

繪制交互流程原型時,會出現一些組件被頻繁使用的情況。
如果每次都將這些組件在原型上面展示出來,會給交互文檔帶來冗余,不夠簡潔,且增加交互和視覺的工作量。

解決這些問題的方法就是使用全局組件。這樣可以減少文檔的冗余,提升文檔的簡潔度,減少交互設計師/產品經理的工作量。

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

本篇文章大綱如下所示:

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

Loading 加載

1、全屏加載

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

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

 

用途:

1.從上一級界面進入到下一級界面時使用。

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

3.能保證內容的整體性,全部加載完才能夠閱讀和操作。

 

使用說明:

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

2.非原生,H5界面,使用進度條的樣式展示,位置處于導航欄下方。

 

組件樣式:

?

2、上拉加載

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

 

用途:

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

 

使用說明:

1.對于布局相同的布局,可使用上拉加載模式加載數據。

2.需要設置默認一次性加載多少條,可根據實際情況設定,一般常見的是20條。加載過多浪費流量,加載過少,需要頻繁加載。

 

組件樣式:

?

3、下拉加載

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

 

用途:

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

 

使用說明:

1.Loading展示動畫,一般停留1-3s。

2.現在很多的產品重新設計loading加載動畫,使得加載過程更加具有情感化,人性化和品牌化。

3.因業務需求,有時候加載完畢后,會通過toast告知用戶更新多少條內容。

 

組件樣式:

?

4、占位符加載

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

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

 

用途:

1.通過先加載頁面框架,設計占位符等形式可以提前讓用戶知道整個界面的架構,提高產品的體驗感。

2.這種加載給用戶感知,加載穩定且速度快。

 

使用說明:

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

 

組件樣式:

?

Default pages 缺省頁

1、空數據

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

 

用途:

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

2.提供一個入口,給用戶可以去其他地方的入口

 

使用說明:

是否提供其他入口,可根據具體業務情況來定。

 

樣式:

?

2、網絡異常

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

 

用途:

1.告知用戶當前界面出現異常的原因

2.提供解決當前界面的異常的方案

 

使用說明:

1.插畫視覺一般比較輕,僅提供裝飾作用,強化下方的文字

2.對于網絡異常,提供用戶去設置

 

樣式:

?

3、服務器異常

服務器異常是小概率事件,但是也偶爾發生。

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

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

 

用途:

告知用戶當前界面出現異常的原因,提供用戶刷新操作。

 

使用說明:

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

 

樣式:

?

4、內容被刪除

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

 

用途:

用于提示用戶,出現當前異常頁面的原因。

 

使用說明:

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

 

樣式:

?

5、暫無權限

不符合查看/操作規則,導致無權限。

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

 

用途:

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

2.給予對應的解決方案

 

使用說明:

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

 

樣式:

?

Toast?吐司

用于對用戶的輕量級提示,一般出現1.5s到2s后消失。通過反饋告知用戶。
?
用途:

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

2.對應用當前存在的狀態反饋,多用于斷網情況下。

 

使用說明:

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

 

組件樣式:

??

Alert?警示對話框

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

 

用途:

1.重要信息的提示

2.二次確認

3.提交內容

 

使用說明:

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

 

組件樣式:

全局組件在交互文檔使用

在做交互文檔時,將全局組件進行匯總,在需要使用全局組件時,只需要在交互標注上進行標注即可。
?
如下圖所示,單獨一個站點地圖匯總全局組件說明。并將組件標上對應的序號方便查找核對。
?
?
?
在交互文檔中,通過標注說明出現的組件序號和對應的文案。如下圖所示。并且點擊標注上的組件名稱跳轉到對應的站點地圖頁面。

以上就是關于全局組件在交互文檔的用法??梢渣c擊Download,獲取文中的全局組件的axure源件,密碼3w99 ?。?
?

 
 

原文地址:Echo的設計筆記(公眾號)
作者:Echo?

轉載請注明:學UI網 » 一篇文章搞定全局組件在交互文檔的使用

登錄收藏
 
你可能喜歡的:
設計師必須要知道的五大交互心理學設計師必須要知道的五大交互心理學
PRD分享:「網易云音樂-登錄/注冊模塊」產品需求文檔PRD分享:「網易云音樂-登錄/注冊模塊」產品需求文檔
你對信息架構圖了解多少?你對信息架構圖了解多少?
一款APP的交互文檔從撰寫到交付③一款APP的交互文檔從撰寫到交付③
拇指驅動產品設計 | 手勢交互拇指驅動產品設計 | 手勢交互
如何做出好的“卡片”設計?8種方法大分享如何做出好的“卡片”設計?8種方法大分享
騰訊工作心得:原型該畫到什么程度?騰訊工作心得:原型該畫到什么程度?
Apple 的設計哲學 · 交互篇Apple 的設計哲學 · 交互篇
規范流程下的原型設計——你的原型真的有價值嗎?規范流程下的原型設計——你的原型真的有價值嗎?
9款原型設計工具與Sketch的強強組合,輕松構建交互原型!9款原型設計工具與Sketch的強強組合,輕松構建交互原型!
?
天津十一选五app