UI設(shè)計(jì)中移動(dòng)端加載功能超全面總結(jié)

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

　　01
 

　　加載是什么
 

　　...
 

　　用戶在移動(dòng)端界面進(jìn)行操作，發(fā)送請求到服務(wù)器，服務(wù)器處理請求，返回?cái)?shù)據(jù)并顯示給用戶，這一過程稱為加載，簡而言之就是用戶和產(chǎn)品之間互動(dòng)的等待時(shí)間。
 

　　另外說明一點(diǎn)，加載和緩存是有區(qū)別的，加載是被動(dòng)的，緩存是主動(dòng)的。
 

　　02
 

　　加載的設(shè)計(jì)樣式
 

　　...
 

　　1. 狀態(tài)欄加載
 

　　狀態(tài)欄加載是系統(tǒng)默認(rèn)的配置樣式。網(wǎng)絡(luò)不好的時(shí)候，手機(jī)頂部會(huì)出現(xiàn)這種加載樣式，如下圖所示，

 

　　2. 導(dǎo)航欄加載
 

　　將導(dǎo)航欄標(biāo)題臨時(shí)變成加載信息的文字提醒。收取消息時(shí)，標(biāo)題導(dǎo)航欄變成“收取中”等正在加載提示，加載成功提示消失，若因?yàn)榫W(wǎng)絡(luò)錯(cuò)誤未連接服務(wù)器，則在標(biāo)題欄顯示未連接狀態(tài)，如下圖所示，

 

　　使用場景：多用于社交類的產(chǎn)品，這類信息的收取不需要獲取用戶的視覺焦點(diǎn)。
 

　　3. 下拉刷新加載
 

　　下拉刷新運(yùn)用就比較廣泛了，既能保證用戶能看到本地的內(nèi)容，也可以主動(dòng)選擇下拉對當(dāng)前頁面進(jìn)行更新。
 

　　加載的樣式也可以進(jìn)一步設(shè)計(jì)，例如增加品牌宣傳，之前美團(tuán)外賣的下拉會(huì)有騎手騎著車突突的跑，這樣的加載會(huì)更加情感化、人性化、品牌化。

 

　　4. 上拉加載
 

　　這也是比較常見的加載了，用戶想看到新的數(shù)據(jù)時(shí)，可以上拉界面自動(dòng)加載數(shù)據(jù)。
 

　　上拉加載設(shè)計(jì)越簡單越好，因?yàn)楫?dāng)用戶看到當(dāng)前頁面內(nèi)容時(shí)，未顯示的內(nèi)容已經(jīng)加載完畢，上拉加載提示會(huì)很快消失，所以不必要設(shè)計(jì)太復(fù)雜的樣式，如下圖，

 

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

　　5. 進(jìn)度條加載
 

　　如果加載耗時(shí)比較久，可以選用進(jìn)度條加載來告知用戶需要等待的時(shí)間，讓用戶有一定的心理準(zhǔn)備，如下圖，

 

　　使用場景：多見于瀏覽器，包括PC端和移動(dòng)端瀏覽器，很多的app里面的h5頁面也會(huì)采用這種樣式。
 

　　6. Toast加載
 

　　用戶執(zhí)行了某個(gè)操作，為了防止用戶繼續(xù)操作導(dǎo)致數(shù)據(jù)加載失敗，采用toast這種樣式提示正在加載，這段時(shí)間用戶只能“返回”上一步，其他的操作多會(huì)受到限制，如圖所示，

 

　　使用場景：關(guān)鍵性場景中，防止用戶進(jìn)行多余的操作。例如登錄、注冊、提交信息、支付等。
 

　　7. 白屏加載
 

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

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

 

　　使用場景：頁面跳轉(zhuǎn)時(shí)，可以用白屏加載。
 

　　8. 預(yù)設(shè)圖片加載
 

　　加載時(shí)為了不讓頁面太空，可以用預(yù)設(shè)的圖片來填充，也可以logo來加強(qiáng)用戶對品牌的認(rèn)知。
 

　　有的小伙伴就要問了，預(yù)設(shè)圖片也是圖片，也需要加載，為什么不直接加載產(chǎn)品圖呢?其實(shí)預(yù)設(shè)圖是前段代碼寫的，調(diào)用會(huì)很快，而產(chǎn)品圖需要從后臺數(shù)據(jù)庫調(diào)用，比較慢，如下圖，

 

　　使用場景：當(dāng)頁面的布局固定時(shí)，常采用這種刷新樣式，也多用于圖片多的界面。
 

　　9. 色塊加載
 

　　和預(yù)設(shè)圖加載一樣，色塊也是用代碼寫出來的，調(diào)取色塊要快很多，所以將未加載出來的圖片用色塊填充，加載過程中就有很好的連貫性。
 

　　但運(yùn)用這種形式的加載是有條件的，需要內(nèi)容的框架是固定的，花瓣app的加載就是用的五顏六色的色塊。

 

　　使用場景：內(nèi)容框架固定的前提下使用。
 

　　10. 模糊加載
 

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

　　03
 

　　加載方式
 

　　...
 

　　1. 預(yù)加載
 

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

　　2. 懶加載
 

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

　　3. 智能加載
 

　　根據(jù)不同的網(wǎng)絡(luò)狀況選擇不同的數(shù)據(jù)加載，通常用在3G/4G/Wi-Fi可切換的網(wǎng)絡(luò)上。為了既讓用戶使用流暢，也不浪費(fèi)沒必要的流量，當(dāng)Wi-Fi條件下，會(huì)優(yōu)先選擇高清視頻或者高質(zhì)量的音樂進(jìn)行播放;當(dāng)4G條件下，有些下載和更新的內(nèi)容會(huì)被終止;而在網(wǎng)絡(luò)不通的時(shí)候，視頻質(zhì)量會(huì)被降到最低。其實(shí)最終的目的就是為了保證用戶使用時(shí)的流暢度。
 

　　4. 分步加載
 

　　當(dāng)界面中圖文同時(shí)存在時(shí)，會(huì)選擇優(yōu)先加載文字，圖片則用其他的方式占位，最終等待圖片加載完成。分步加載的好處是在等待加載的時(shí)間里用戶可以看到相關(guān)的文字內(nèi)容，不會(huì)像白屏加載或者Toast加載，用戶只能默默地等待加載的過程。
 

　　04
 

　　劃重點(diǎn)
 

　　...
 

　　1、加載的定義：用戶在客戶端的界面上進(jìn)行操作，客戶端發(fā)送請求到服務(wù)器，服務(wù)器處理請求，返回?cái)?shù)據(jù)并顯示給用戶。這一過程稱之為加載。
 

　　2、加載的設(shè)計(jì)樣式：狀態(tài)欄加載、導(dǎo)航欄加載、下拉刷新加載、上拉加載、進(jìn)度條加載、Toast加載、白屏加載、預(yù)設(shè)圖片加載、色塊加載、模糊加載。
 

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

　　希望這篇文章能對大家有所幫助～因此，您現(xiàn)在已經(jīng)了解了與UI設(shè)計(jì)師的工作相關(guān)的主要技能。如果您想了解更多信息，請?jiān)L問AAA教育，包含有關(guān)在該領(lǐng)域工作的更多相關(guān)文章。