中文字幕无码av不卡一区,亚洲综合AV永久无码精品一区二区,黑人巨大白妞出浆,黄色高清无码免费看,久久久久免费精品国产,久久无码人妻丰满熟妇区毛片,欧美日韩国产综合草草,久久福利网站,亚洲一区二区三区中文字幕在线,av国内精品久久久久影院

文章針對APP的幾類加載狀態展開分析，希望能夠對你有所幫助。

我們產品各模塊的加載樣式全部由開發自己定，結果是百花齊放，各有各的用法，前階段被領導噴了一頓。關于加載這一塊，交互規范恰好缺失，于是交互開始嘗試梳理相應規范。本文梳理時，我查看了相關文章，我們部門也組織了討論，但感覺并沒有完全解決我的疑惑，于是在其基礎上重新組織，擴展了一些，也咨詢了一些前后端同學，本文算是我階段性的梳理結果，拿出來和大家討論，期待完善。

加載是什么

加載是一種反饋狀態，常見樣式有菊花、進度條等。用戶與產品的每一次互動都需要反饋，用戶依賴反饋信息，才能順利完成連貫的操作。用戶在等待反饋結果時，焦急專注的盯著界面，這時，系統需要告訴用戶“hi，我還活著，正在努力干活呢，別走！” 下圖摘自 Ant Design ：

什么時候使用

“1s是對話中可以有的最長間隔，又因為交互系統的操作是一個對話的形式，所以交互系統應該避免自己一方的長時間間隔，否則用戶會懷疑發生了什么。系統有1s的時間去執行用戶要求做的任務或者標志出操作需要多少時間，要不然用戶會失去耐心”——摘自《認知與設計》

結合上面這句話，關于何時使用，我這么理解：如果系統1s內就能完成任務，可以不給加載圖標，如果系統1s內不能完成任務，則需要在1s內彈出加載中的提示。

加載的邏輯

討論加載類型前，先梳理一下加載的邏輯，這有利于我們理清楚各種加載的關系?？v軸為時間（請忽略圖的配色，盡力了?_?）

客戶端接收到用戶操作后，向服務端發送請求，服務端響應然后返回數據，客戶端把數據翻譯成用戶看的懂的元素。用戶從執行操作后就一直在等待結果。客戶端從發送到接收到數據這段時間在等待結果。比較耗時的是發送接收數據以及渲染展示的環節。服務器查找時間取決于服務器性能和存儲等；發送耗時受網絡影響；渲染展示時間取決于前端和機器性能，知道這些，就可以對癥下藥了，誰家的孩子，誰拎回去修理，交互能做的就是配和他們的方案，選擇合適的方式，做好對用戶的宣傳。

用戶等待時容易焦慮，用戶正看著屏幕呢，于是各種加載，各種轉移注意力就上場了，穩住用戶，別讓他離開。

• 第一件事：告訴用戶我在工作，沒有偷懶。
• 第二件事：轉移用戶注意力，減少用戶等待的焦慮感，可以看看漂亮有趣的加載動畫，或者瀏覽歷史的加載內容等。

模態加載與非模態加載

模態加載

模態加載屬獨占姿態，會阻斷用戶的其他操作，加載時，用戶只能眼睜睜等待。屬強勢女魔頭，老娘最美，看我；模態加載簡單粗暴，也最容易實現，但對用戶來說卻不友好。就像點餐一樣，服務員非要等到所有菜都做好了才給端上來，客人很可能直接走人了。

模態加載一般形式是浮在頁面上的旋轉菊花，也可以根據自己品牌設計具有特色和情調的加載樣式，我們就是因為樣式混亂被領導批。

何時使用

模態加載體驗不佳，但它有其合理性和不可替代性，我根據收集的頁面，粗略歸納了幾類，應該沒有覆蓋完全，關于技術方便的描述也不準確，歡迎留言補充和指正

1 加載的內容必須一起呈現出來，否則會出問題，可能是功能未準備完全，不能夠使用，少給開發哥哥找麻煩；也可能因為丑，必須色香味俱全加雕花都做好。具體細節還需要跟開發同學仔細溝通。

2 舊命令正在處理中，當前不允許你再修改請求。如圖2的微信發紅包，系統正在處理發1元紅包的請求，正在準備支付頁面。此時不允許你修改金額，否則我當前處理的1元怎么辦？我魚都給你紅燒了，你突然要清蒸。如果很多人都頻繁的修改、提交，系統的壓力應該會很大、也浪費了資源。這時候的模態是綜合考量后的合理處理方式。

3 初次加載，不知道結果去哪里，頁面長什么樣。如圖3，系統正在發送請求，還沒有收到服務器返回的數據，客戶端頁不知道最終傳來的是什么。此刻用戶面對空空的頁面也確實沒有其他的事可做，此刻的模態加載可以接受，但如果請求進行時，當前頁面有內容，且用戶操作不會對剛才請求造成影響時，需要使用非模態的加載。

如上圖，空頁面第一次加載時，使用模態加載；頁面返回數據后，再次加載則使用了非模態，細分場景，體驗很舒服。

注意，如果模態加載時間較長，需要給出加載進度，長時間加載，用戶可能以為界面死了，不知道進度也會失去耐心

非模態加載

非模態加載，比較溫和，你繼續做你的事，同時我加載你要的東西，準備好了就給你。在某個角落，不干擾你做事，又不離開你視線，貼心小棉襖。讓用戶在等待的時候有事可做，不用干等，緩解用戶等待的焦慮。

何時使用

如上文提到的，當前頁面有數據，用戶有事可做，且用戶行為不會影響到原來的加載請求，這時候適合使用非模態加載。常見的有上拉加載、下拉加載。加載的提示信息可以放在頁內，狀態欄 、操作欄等，位置比較靈活

非模態的加載方式，一定成都減輕了在當前頁面有內容時，用戶的等待焦慮；在空頁面加載時效果不理想。還能再優化一些？程序員那里還有更高階的方法。為了減少用戶感知的等待時間，系統可以盡早的向用戶展示信息。

Skeleton Screen/加載占位圖

還是用點餐的例子，去餐廳點餐，你點的是套餐，這就很舒服了，服務員、廚師都套餐的流程，菜品都非常熟悉。菜還沒開始做，就可以先把紅酒、蠟燭、刀叉給你擺好了。頁面也是，當用戶請求的頁面布局，我們已知時，可以先在頁面加載占位圖，等到數據回來后再陸續的填進去，給用戶加載很快的感覺。

如下圖，餓了么h5，先加載頁面布局，這時候數據還沒有返回，界面已經開始響應。

何時使用

Skeleton Screen 適合內容排班比較固定或排版布局已知的頁面，先加載大致輪廓，再加載細節。使用競品時發現，有些產品發布了新版本，占位圖卻沒做更新，導致加載前后有閃屏的感覺。所以，布局未知，布局多變的頁面，不要使用。

懶加載

當用戶請求的頁面包含大量內容，如文本、圖片、音視頻等，全部渲染完成需要較長時間。懶加載就像餐廳服務員一樣，把菜一個一個的送給用戶，懶加載解決的是客戶端渲染展示給用戶這一環節。

從圖上看，懶加載進步一壓縮了用戶的等待時間，用戶不必等到頁面全部加載完成就可以開始閱讀（一些工具類頁面，懶加載過程不允許操作或操作無響應），減少用戶的等待焦慮。對客戶端而言，原來3s要加載完的內容可以拖到5s分批給，減輕了壓力。如果用戶不喜歡中途離開了，剩下的內容可以不用渲染，少干了不少活。

懶加載的實現方式（摘自http://www.jianshu.com/p/4876a4fe7731）

1. ?延遲加載，比如先加載文字再加載圖片
2. 條件加載 即符合某些條件，或者觸發了某些事件才開始異步下載
3. 可視區域加載，僅加載用戶可以看到的區域，不可見區域不加載，當該區域可見后再加載

如下圖示例，今日頭條先加載文字，后加載圖片；高德地圖可視區域外的區域等到用戶滑動屏幕時才加載，節省流量。

綜上，懶加載更像是打著緩解用戶等待焦慮的旗號，客戶端偷懶的方法。

預加載

懶加載將原來5秒全部加載完成優化到了2秒就可以提供部分內容，但用戶說別人家瞬間就加載完了，你還要拖拖拉拉，5s才能加載完！這又是什么黑科技。

再看這張圖，預加載是更貼心的小棉襖，會揣摩用戶的心思，偷偷提前做準備。用戶在看A頁面時，客戶端就在準備用戶可能會看的B頁面，用戶需要時，立刻給他，然后去準備C頁面，給用戶提供無縫鏈接的感覺，代價就是服務端、客戶端都累的夠嗆，耗費用戶更多的流量。預加載一直走在用戶前面，勤快、周到。懶加載一致等待用戶發號施令，是真的懶。

如下圖，刷新今日頭條列表，詳情頁就已經開始準備了。此刻切換飛行模式，點開文章詳情，能看到文字已經顯示在那里了，為什么沒有圖片？機智的程序員為了給用戶省流量，確認用戶點開后才開始請求圖片。

綜上，為了能讓頁面加載流暢，達到最好的使用體驗，需要結合產品和場景組合使用加載方式，文中舉例的產品都不止使用了一種加載手段。具體實現方案還需要結合自己的產品和場景來確定。

本文由 @m 原創發布于人人都是產品經理。未經許可，禁止轉載。