<address id="ttjl9"></address>

      <noframes id="ttjl9"><address id="ttjl9"><nobr id="ttjl9"></nobr></address>
      <form id="ttjl9"></form>
        <em id="ttjl9"><span id="ttjl9"></span></em>
        <address id="ttjl9"></address>

          <noframes id="ttjl9"><form id="ttjl9"></form>

          設計模式丨加載提示:如何讓用戶看到任務執行進度?

          2021-12-28    seo達人



          What 是什么

          簡介:「加載提示」是用戶在提交操作之后,程序響應結果前顯示的動畫和指示。

          加載提示通常是儀表或溫度計式的動畫,用于顯示某項耗時較長的任務的關鍵數據。例如,上傳大型文件或圖像,或者在移動設備上加載移動應用程序時的動畫,表示當前的狀態以及完成任務剩余的時間。

          例子: 使用 Ant Design 組件-加載中 搭建的kitchen頁面加載時的效果

           

          Why 為什么

          「加載提示」可以讓用戶通過一個指示器看到系統正在積極進行響應,讓用戶感受到當下的交互反饋是實時的,使用戶有耐心保持在等待的狀態,不離開當前頁面。特別是當一個頁面其他部分都不能操作的時候,更應該加上加載提示,這樣用戶在等待的時候會更有耐心。

           

          When 什么時候使用

          當一個耗時的操作會打斷用戶繼續操作,或需要在背后運行,耗時超過一秒時就可以應用此模式。

          原因為:

          • 不到十分之一秒時,用戶會感覺他們在與界面進行“實時”交互,軟件的響應讓用戶感覺是即時的,沒有感覺到延遲。
          • 在十分之一秒到一秒之間,用戶會感受到略有延遲,但他們會等待并立即繼續。
          • 超過一秒時,用戶可能會認為他的操作對任務推進不起作用,導致其可能放棄當前任務。此時若使用使用加載指示,用戶就能明確知道系統正在工作,他可以選擇繼續等待或者在此期間進行其他活動。

          使用條件

          • 當前的操作系統需要一秒以上時間處理
          • 為了讓用戶明確知道當前系統正在運行
          • 想讓用戶留在當前頁面等待

           

          How 如何使用

          在頁面中放置一個文字或者圖形的指示器,指示當前已經完成的進度。告訴用戶:

          • 當前正在做什么;
          • 已經完成了多少比例;
          • 還需要多少時間才能完成;
          • 如何停止這項任務。

          有時加載提示的時間不一定十分精準,但是只需要保證出錯時能很快回到準確的時間就可以了。當一個用戶界面無法推斷耗費時長時,可以使用加載提示告訴用戶當前系統的處理狀態。

           

          Example 案例

          案例一:Apple 音樂 APP啟動頁面

          用戶需求:選擇在線音樂聽歌

          在用戶進入APP時使用了加載提示動畫,通常應用于輕微等待的場景下。目的是讓用戶知道“系統正在工作,請稍等”。

          undefined

           

          案例二:語雀和釘釘郵箱上傳附件

          用戶需求:上傳文件

          在上傳大文件時,等待的時間可能比較久,此時的進度條可以讓用戶知道當前的上傳進度,用戶能夠預估大概還需要多久才能傳完。

          undefined

          undefined

           

          案例三:安卓端Google Play 商店

          用戶需求:下載軟件

          Google Play商店中將軟件下載到用戶的安卓設備上時會顯示加載指示條,將文件大小,進度提示等信息都顯示在上面,可以讓用戶知道需要多長時間,并可以等待、取消或做其他事情,稍后再回來。

          undefined

           

          案例四:Adobe Creative Cloud desktop manager

          用戶需求:下載軟件

          Adobe 在其macOS桌面的 Creative Cloud 應用程序中使用了加載指示。 在頁面中放入了進度條,讓用戶知道安裝進度。

          undefined

           


          原文地址:Ant_Design(站酷)

          作者: 六六

          轉載請注明:學UI網》設計模式丨加載提示:如何讓用戶看到任務執行進度?

          藍藍設計建立了UI設計分享群,每天會分享國內外的一些優秀設計,如果有興趣的話,可以進入一起成長學習,請掃碼藍小助,報下信息,藍小助會請您入群。歡迎您加入噢~~希望得到建議咨詢、商務合作,也請與我們聯系。

          截屏2021-05-13 上午11.41.03.png

          分享此文一切功德,皆悉回向給文章原作者及眾讀者.
          免責聲明:藍藍設計尊重原作者,文章的版權歸原作者。如涉及版權問題,請及時與我們取得聯系,我們立即更正或刪除。

          藍藍設計www.syprn.cn )是一家專注而深入的界面設計公司,為期望卓越的國內外企業提供卓越的UI界面設計、BS界面設計 、 cs界面設計 、 ipad界面設計 、 包裝設計 、 圖標定制 、 用戶體驗 、交互設計、 網站建設 、平面設計服務


          日歷

          鏈接

          個人資料

          藍藍設計的小編 http://www.syprn.cn

          存檔

          亚洲va欧美va天堂v国产综合