<menuitem id="ddffh"></menuitem>
<span id="ddffh"></span><progress id="ddffh"><video id="ddffh"><span id="ddffh"></span></video></progress>
<span id="ddffh"><dl id="ddffh"><del id="ddffh"></del></dl></span>
<strike id="ddffh"></strike>
<span id="ddffh"><i id="ddffh"></i></span>
<strike id="ddffh"></strike>
<span id="ddffh"><video id="ddffh"></video></span>
<span id="ddffh"><dl id="ddffh"><ruby id="ddffh"></ruby></dl></span><span id="ddffh"></span>
<ruby id="ddffh"></ruby>
<span id="ddffh"></span>
<span id="ddffh"></span><strike id="ddffh"></strike>
<span id="ddffh"></span>
<span id="ddffh"><video id="ddffh"></video></span>
<span id="ddffh"><video id="ddffh"></video></span>
<span id="ddffh"></span>
<strike id="ddffh"></strike>
<span id="ddffh"></span><th id="ddffh"><video id="ddffh"></video></th>
旗下產業: A產業/ A實習/ A計劃
全國統一咨詢熱線:010-5367 2995
首頁 > 熱門文章 > UI設計 > UI設計中移動端加載功能超全面總結
UI設計中移動端加載功能超全面總結
時間:2020-09-16來源:www.biancheng38.icu點擊量:作者:Gella
時間:2020-09-16點擊量:作者:Gella

  設計師在進行APP設計時,往往會更加專注于界面的布局、界面和界面之間怎么跳轉、操作反饋,卻往往忽略掉一個比較重要的環節,就是APP數據加載中的設計。那么我們怎么處理好界面交互中的加載設計,保證體驗無縫銜接,保證用戶沒有漫長的等待感呢?今天AAA教育郭老師就針對移動端加載功能進行簡單的說明。
 

  01
 

  加載是什么
 

  ...
 

  用戶在移動端界面進行操作,發送請求到服務器,服務器處理請求,返回數據并顯示給用戶,這一過程稱為加載,簡而言之就是用戶和產品之間互動的等待時間。
 

  另外說明一點,加載和緩存是有區別的,加載是被動的,緩存是主動的。
 

  02
 

  加載的設計樣式
 

  ...
 

  1. 狀態欄加載
 

  狀態欄加載是系統默認的配置樣式。網絡不好的時候,手機頂部會出現這種加載樣式,如下圖所示,

 



 

  2. 導航欄加載
 

  將導航欄標題臨時變成加載信息的文字提醒。收取消息時,標題導航欄變成“收取中”等正在加載提示,加載成功提示消失,若因為網絡錯誤未連接服務器,則在標題欄顯示未連接狀態,如下圖所示,

 



 

  使用場景:多用于社交類的產品,這類信息的收取不需要獲取用戶的視覺焦點。
 

  3. 下拉刷新加載
 

  下拉刷新運用就比較廣泛了,既能保證用戶能看到本地的內容,也可以主動選擇下拉對當前頁面進行更新。
 

  加載的樣式也可以進一步設計,例如增加品牌宣傳,之前美團外賣的下拉會有騎手騎著車突突的跑,這樣的加載會更加情感化、人性化、品牌化。

 



 

  4. 上拉加載
 

  這也是比較常見的加載了,用戶想看到新的數據時,可以上拉界面自動加載數據。
 

  上拉加載設計越簡單越好,因為當用戶看到當前頁面內容時,未顯示的內容已經加載完畢,上拉加載提示會很快消失,所以不必要設計太復雜的樣式,如下圖,

 



 

  使用場景:瀑布流、列表等情況。
 

  5. 進度條加載
 

  如果加載耗時比較久,可以選用進度條加載來告知用戶需要等待的時間,讓用戶有一定的心理準備,如下圖,

 



 

  使用場景:多見于瀏覽器,包括PC端和移動端瀏覽器,很多的app里面的h5頁面也會采用這種樣式。
 

  6. Toast加載
 

  用戶執行了某個操作,為了防止用戶繼續操作導致數據加載失敗,采用toast這種樣式提示正在加載,這段時間用戶只能“返回”上一步,其他的操作多會受到限制,如圖所示,

 



 

  使用場景:關鍵性場景中,防止用戶進行多余的操作。例如登錄、注冊、提交信息、支付等。
 

  7. 白屏加載
 

  如果當前頁面的內容比較單一,必須加載完才能顯示,可以采用白屏加載。這種加載方式在沒有加載完成前是看不到任何內容的,所以加載太久需要提示用戶為什么加載失敗,可以配合toast彈窗進行提示,而不是一直加載。
 

  你也可以把等待的樣式做的更加有趣味性,減輕用戶等待時的焦慮,如下圖,

 



 

  使用場景:頁面跳轉時,可以用白屏加載。
 

  8. 預設圖片加載
 

  加載時為了不讓頁面太空,可以用預設的圖片來填充,也可以logo來加強用戶對品牌的認知。
 

  有的小伙伴就要問了,預設圖片也是圖片,也需要加載,為什么不直接加載產品圖呢?其實預設圖是前段代碼寫的,調用會很快,而產品圖需要從后臺數據庫調用,比較慢,如下圖,

 



 

  使用場景:當頁面的布局固定時,常采用這種刷新樣式,也多用于圖片多的界面。
 

  9. 色塊加載
 

  和預設圖加載一樣,色塊也是用代碼寫出來的,調取色塊要快很多,所以將未加載出來的圖片用色塊填充,加載過程中就有很好的連貫性。
 

  但運用這種形式的加載是有條件的,需要內容的框架是固定的,花瓣app的加載就是用的五顏六色的色塊。

 



 

  使用場景:內容框架固定的前提下使用。
 

  10. 模糊加載
 

  把預加載出來的產品圖進行高斯模糊處理,通常人們對這種似有似無的圖片都會給予極大的耐心去等待,這種方案成功引起了用戶的好奇心,減緩了用戶的等待焦慮。使用場景:多圖的界面中。
 

  03
 

  加載方式
 

  ...
 

  1. 預加載
 

  預加載就是當用戶在瀏覽A頁面時,加載并未停止,而是在悄悄地為用戶加載B頁面中的內容,當用戶繼續看B頁面時就體會不到加載的過程,用戶不存在等待的焦慮問題。當然凡事有利必有弊,如果服務器為用戶提前準備了將要看的內容,用戶卻看了其他界面或者退出了,那這次的加載既增加了服務器的壓力,又浪費了用戶的流量。
 

  2. 懶加載
 

  懶加載和預加載剛好相反,只加載用戶可以看到的內容,其他內容需要用戶主動進行操作,向服務器提供需求后,才會自動加載。懶加載通常用在上劃刷新和下拉刷新上。懶加載的速度要看界面中內容的多少以及圖片的大小,所以我們在提供圖片時都會進行一定的壓縮,來加快加載的速度。
 

  3. 智能加載
 

  根據不同的網絡狀況選擇不同的數據加載,通常用在3G/4G/Wi-Fi可切換的網絡上。為了既讓用戶使用流暢,也不浪費沒必要的流量,當Wi-Fi條件下,會優先選擇高清視頻或者高質量的音樂進行播放;當4G條件下,有些下載和更新的內容會被終止;而在網絡不通的時候,視頻質量會被降到最低。其實最終的目的就是為了保證用戶使用時的流暢度。
 

  4. 分步加載
 

  當界面中圖文同時存在時,會選擇優先加載文字,圖片則用其他的方式占位,最終等待圖片加載完成。分步加載的好處是在等待加載的時間里用戶可以看到相關的文字內容,不會像白屏加載或者Toast加載,用戶只能默默地等待加載的過程。
 

  04
 

  劃重點
 

  ...
 

  1、加載的定義:用戶在客戶端的界面上進行操作,客戶端發送請求到服務器,服務器處理請求,返回數據并顯示給用戶。這一過程稱之為加載。
 

  2、加載的設計樣式:狀態欄加載、導航欄加載、下拉刷新加載、上拉加載、進度條加載、Toast加載、白屏加載、預設圖片加載、色塊加載、模糊加載。
 

  3、加載方式:預加載、懶加載、智能加載、分步加載。深入了解加載的樣式和方式后,可以讓我們在設計和交互中改善那些不合理的加載,從而提升產品的舒適度;也可以利用加載來做更多的設計,讓加載變得更有趣味性,減少用戶因等待產生的焦慮感。
 

  希望這篇文章能對大家有所幫助~因此,您現在已經了解了與UI設計師的工作相關的主要技能。如果您想了解更多信息,請訪問AAA教育,包含有關在該領域工作的更多相關文章。


 

?2007-2019/北京漫動者教育科技有限公司版權所有
備案號:京ICP備12034770號

?2007-2019/ www.biancheng38.icu 北京漫動者教育科技有限公司 備案號:京ICP備12034770號 監督電話:010-62568622 郵箱:bjaaa@aaaedu.cc

俺也去俺也来五月丁香