国外亚洲成av人片在线观看,热99re久久精品这里都是精品,天堂网在线最新版www,国产成人av区一区二区三,51久久成人国产精品麻豆

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

目錄

• 第一部分：什么是加載
• 第二部分：模態(tài)加載與非模態(tài)加載
• 第三部分：加載的設(shè)計(jì)樣式
• 第四部分：加載方式

一、什么是加載

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

簡單的說就是用戶與產(chǎn)品的每次互動(dòng)時(shí)的等待時(shí)間。

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

二、模態(tài)加載與非模態(tài)加載

1. 模態(tài)加載

模態(tài)加載會(huì)阻斷用戶的其他操作，在加載時(shí)，用戶只能等待加載完成才能繼續(xù)操作，或者返回或者關(guān)閉正在加載的界面。通常用在關(guān)鍵的場(chǎng)景下使用，避免用戶反復(fù)操作。例如：付款，注冊(cè)，提交信息等，多以Toast彈窗的形式出現(xiàn)。

但對(duì)于用戶而已體驗(yàn)不是就不是那么友好了——等同于和喜歡拍照的朋友去吃飯，要等菜上齊了，拍張照才能吃一樣的心情。

2. 非模態(tài)加載

非模態(tài)加載就比較友好了，及時(shí)正在加載，也不會(huì)影響用戶對(duì)產(chǎn)品的使用，用戶也可以一邊看內(nèi)容，一邊等待加載的完成。非模態(tài)加載通常用于下拉刷新、上拉加載、圖片文字加載等。

加載提醒可以放在狀態(tài)欄、導(dǎo)航欄、操作欄等，位置很靈活。

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

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

通常是系統(tǒng)默認(rèn)的配置加載樣式。

使用場(chǎng)景：網(wǎng)路信號(hào)不好使，手機(jī)頂部便會(huì)出現(xiàn)加載樣式。

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

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

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

3. 下拉刷新加載

下拉刷新已經(jīng)在App中被普遍應(yīng)用，保證了用戶即可以看到本地的內(nèi)容，也可以選擇主動(dòng)下拉對(duì)當(dāng)前內(nèi)容進(jìn)行更新，加載的樣式也可以做出進(jìn)一步的設(shè)計(jì)，例如美團(tuán)的效果，運(yùn)用了產(chǎn)品形象作為刷新的樣式，即增加了品牌形象的宣傳，使得家在過程更具情感化，人性化，品牌化，還有新版的美團(tuán)外賣加入了紅綠燈的小動(dòng)效，時(shí)刻提醒人們紅燈停，綠燈行。

使用場(chǎng)景：界面信息可以刷新加載時(shí)使用，多用于含有列表界面當(dāng)中。

4. 上拉加載

最常用的加載，當(dāng)用戶想查看新的數(shù)據(jù)時(shí)，通過上拉界面后，自動(dòng)加載出的數(shù)據(jù)的過程為上拉加載。

上拉加載的設(shè)計(jì)樣式越簡單越好，因?yàn)橛脩粼诳串?dāng)前界面內(nèi)容時(shí)，下面未顯示的部分內(nèi)容已加載完畢，會(huì)很快消失，所以不必設(shè)計(jì)過于復(fù)雜的樣式。

使用場(chǎng)景：適用于瀑布流、列表等情況。

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

如果加載時(shí)間的過程過較長，就需要用進(jìn)度條加載樣式來告知用戶需要等待的時(shí)間進(jìn)度，讓用戶有一定的心理預(yù)期。

使用場(chǎng)景：多見于瀏覽器，包括PC端和移動(dòng)端瀏覽器，App中的頁面如果用H5形式做的，多數(shù)也會(huì)采用進(jìn)度條進(jìn)行加載。

6. Toast加載

當(dāng)用戶執(zhí)行某個(gè)操作時(shí)，為了防止用戶繼續(xù)操作導(dǎo)致數(shù)據(jù)加載失敗，則用Toast的樣式來提示正在加載，同時(shí)在這段期間內(nèi)用戶的操作將受到限制。

這種情況用戶一般只能執(zhí)行返回到上一級(jí)的操作，其他都被禁用。

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

7. 白屏加載

當(dāng)前頁面內(nèi)容比較單一，需要一次加載完成才能顯示，則采用白屏加載模式。

這種加載方式在完全加載完成之前是看不到任何內(nèi)容的，所以一旦超過時(shí)間太久一定要提示用戶什么原因加載失?。梢耘浜蟭osat彈窗提示），而不是一直的加載。也可以像美團(tuán)外賣一樣做的更有趣味性，減輕用戶的等待焦慮。

使用場(chǎng)景：通過點(diǎn)擊頁面跳轉(zhuǎn)時(shí)，用白屏加載。

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

加載時(shí)，為了不讓加載出的布局顯得太空，會(huì)用LOGO或者預(yù)設(shè)圖片來填充，加深用戶對(duì)品牌的認(rèn)知。

可能有的同學(xué)會(huì)有疑問，為什么同樣是圖片加載不直接用展示圖，而先用預(yù)設(shè)定的圖片呢？

那是因?yàn)轭A(yù)設(shè)圖通常是由前段代碼寫的，調(diào)用起來會(huì)比較快，而產(chǎn)品圖是需要從后臺(tái)數(shù)據(jù)庫調(diào)用的比較慢，再有就是為了提升品牌的認(rèn)知度。

使用場(chǎng)景：當(dāng)頁面的布局固定時(shí)，采用這種刷新樣式，即先加載布局的數(shù)據(jù)，多用于圖片布局多的界面。

9. 色塊加載

首先我們要知道同樣大小的色塊加載要比圖片快很多，因?yàn)榧兩珘K是可以直接用代碼寫出來的，調(diào)取一段代碼的的速度一定要比調(diào)取一張圖片的速度快很多，所以在圖片刷新的過程中，將未加載出來的內(nèi)容區(qū)域用灰色的色塊填充，在加載過程中有很好的連貫性。

當(dāng)然運(yùn)用這種形式的加載是有條件的，需要內(nèi)容框架是固定的。

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

10. 模糊加載

通過把預(yù)加載出來的圖片進(jìn)行高斯模糊處理，通常人們對(duì)這類似有似無的圖片都會(huì)給予極大的耐心去等待的，這種方案成功的勾起了用戶的好奇心，減緩用戶的等待焦慮。

使用場(chǎng)景：通常用在多圖的界面中。

四、加載方式

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)容的多少以及圖片的大小，所以我們?cè)谔峁﹫D片時(shí)都會(huì)進(jìn)行一定的壓縮，來加快加載的速度。

3. 智能加載

根據(jù)不同的網(wǎng)絡(luò)狀況選擇不同的數(shù)據(jù)加載，通常用在3G/4G/Wi-Fi的網(wǎng)絡(luò)切換上，為了既讓用戶使用流暢，也不浪費(fèi)沒必要的流量，所以當(dāng)使用網(wǎng)絡(luò)發(fā)生變化時(shí)，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加載，只能默默地等待加載的過程，所謂的大眼瞪小眼也就是如此吧。

總結(jié)

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

作者：小溜Epik，公眾號(hào)：海鹽社

本文由 @小溜Epik 原創(chuàng)發(fā)布于人人都是產(chǎn)品經(jīng)理。未經(jīng)許可，禁止轉(zhuǎn)載

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