輕松看懂規(guī)范！詳解組件控件結(jié)構(gòu)系統(tǒng)之加載類

設(shè)計(jì)師在進(jìn)行APP設(shè)計(jì)時(shí)，每每會(huì)更加專注于界面的布局、界面和界面之間怎么跳轉(zhuǎn)、操作反饋，卻每每忽略掉一個(gè)比較緊張的環(huán)節(jié)，就是APP數(shù)據(jù)加載中的設(shè)計(jì)。那么我們怎么處理好界面交互中的加載設(shè)計(jì)，保證體驗(yàn)無縫銜接，保證用戶沒有漫長的等待感呢？

系列文章： 

仍舊附上一張腦圖，組件控件分類（假如單純通過組件控件，難以知足功能劃分的需求，所以我將這個(gè)范圍擴(kuò)大，分類里面不僅僅含有組件和控件，所以請不要在意細(xì)節(jié)。）

什么是加載？

用戶在客戶端的界面上進(jìn)行操作，客戶端發(fā)送請求到服務(wù)器，服務(wù)器處理請求，返回?cái)?shù)據(jù)給客戶端，并表現(xiàn)給用戶。這一過程成為加載。區(qū)別于緩存，緩存是自動(dòng)的，加載為被動(dòng)的。

全屏加載

這種加載比較簡單，一樣平常運(yùn)用在網(wǎng)頁內(nèi)容比較單一的情況下，所以直接一次性加載完所稀有據(jù)后再表現(xiàn)內(nèi)容。

1.好處

能保證內(nèi)容的團(tuán)體性，悉數(shù)加載完才能夠體系化的閱讀。

2.瑕玷

比較顯明，就是有特別很是強(qiáng)烈的等待感，3s以上會(huì)產(chǎn)生焦躁情緒。所以，在地鐵等旌旗燈號(hào)不好的地方，使用手機(jī)頁面獲取內(nèi)容實(shí)在是比較災(zāi)禍的一件事情。

3.使用場景

• 常見的是從上一級(jí)界面進(jìn)入下一級(jí)界面；或者H5中常使用。
• 一樣平常這種情況會(huì)配合有明確進(jìn)度標(biāo)識(shí)的加載loading。

分步加載

當(dāng)有筆墨和圖片時(shí)，圖片會(huì)比筆墨加載的慢，這個(gè)時(shí)候每每筆墨先加載出來，圖片在加載過程中使用占位符，直到圖片加載成功。當(dāng)加載的網(wǎng)頁內(nèi)容有固定的框架時(shí)，可以先加載框架，再加載框架內(nèi)的內(nèi)容。通過先加載網(wǎng)頁框架，設(shè)計(jì)占位符等情勢可以提前讓用戶知道整個(gè)界面的架構(gòu)，進(jìn)步產(chǎn)品的體驗(yàn)感。

1.好處

可以幫助用戶快速了解整個(gè)界面的信息布局。

2.瑕玷

開始瞬間會(huì)丟失掉緊張的關(guān)鍵信息，用戶初次感知會(huì)認(rèn)為產(chǎn)品出題目了。

3.使用場景

適用于多圖片布局的界面。比較消費(fèi)流量的界。

下拉加載

用戶下拉時(shí)，出現(xiàn)loading動(dòng)畫，對整個(gè)網(wǎng)頁的重新加載刷新。如今許多的產(chǎn)品重新設(shè)計(jì)loading加載動(dòng)畫，使得加載過程更加具有情感化，人性化和品牌化。

1.好處

方便用戶刷新當(dāng)前界面，獲取新數(shù)據(jù)。

2.瑕玷

非首屏?xí)r，無法進(jìn)行該手勢操作。

3.使用場景

界面信息可以刷新加載時(shí)使用。

上拉加載

用戶在欣賞界面的過程中，對于未加載的信息，上拉過程中主動(dòng)加載。

1.好處

把用戶代入無盡欣賞模式，讓用戶一向向下滾動(dòng)，不必要手動(dòng)點(diǎn)擊下一頁。

2.瑕玷

沒有終點(diǎn)，容易迷失，不方便快速索引定位到某個(gè)內(nèi)容。

3.使用場景

適用于瀑布流、長列表、商品列表等情況。

預(yù)加載

當(dāng)用戶在停頓一個(gè)界面時(shí)候，將對應(yīng)當(dāng)前界面通向下一界面的所有信息都加載出來。使用這個(gè)加載體例會(huì)使得使用過程中很快削減時(shí)間等待。

1.好處

用戶進(jìn)入下一級(jí)網(wǎng)頁無需加載過程，使用給用戶流暢之感。

2.瑕玷

在非WiFi情況下，虛耗用戶流量。

3.使用場景

信息必要即時(shí)刷新，同時(shí)預(yù)加載后消費(fèi)流量較少的場景，例如IM或郵件。這種加載機(jī)制的益處就是進(jìn)入下一頁無需加載，使用流程。

智能加載

根據(jù)用戶的網(wǎng)絡(luò)情況，加載不同質(zhì)量的圖片內(nèi)容。例如在WiFi情況下，加載出來的圖片是高清，在非WiFi情況下加載出來的圖片是標(biāo)清的。

1.好處

是根據(jù)詳細(xì)場景來控制流量和加載速度。

2.瑕玷

不肯定是真實(shí)有用的命中用戶需求。

3.使用場景

適用于有大量圖片或視頻的APP，如電商類或在線視頻類APP。

上述一共將加載劃分為6種類型。6種類型適用于不同的場景，各有優(yōu)瑕玷。設(shè)計(jì)師在設(shè)計(jì)時(shí)，可以根據(jù)用戶的使用場景和環(huán)境設(shè)計(jì)適合的加載。

迎接關(guān)注作者的微信公眾號(hào)：「UEDC」