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

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

系列文章： 

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

什么是加載？

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

全屏加載

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

1.好處

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

2.瑕玷

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

3.使用場景

• 常見的是從上一級界面進入下一級界面；或者H5中常使用。
• 一樣平常這種情況會配合有明確進度標識的加載loading。

分步加載

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

1.好處

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

2.瑕玷

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

3.使用場景

適用于多圖片布局的界面。比較消費流量的界。

下拉加載

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

1.好處

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

2.瑕玷

非首屏時，無法進行該手勢操作。

3.使用場景

界面信息可以刷新加載時使用。

上拉加載

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

1.好處

把用戶代入無盡欣賞模式，讓用戶一向向下滾動，不必要手動點擊下一頁。

2.瑕玷

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

3.使用場景

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

預加載

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

1.好處

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

2.瑕玷

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

3.使用場景

信息必要即時刷新，同時預加載后消費流量較少的場景，例如IM或郵件。這種加載機制的益處就是進入下一頁無需加載，使用流程。

智能加載

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

1.好處

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

2.瑕玷

不肯定是真實有用的命中用戶需求。

3.使用場景

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

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

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