• <tbody id="9brb1"><pre id="9brb1"></pre></tbody>

    <em id="9brb1"></em>

  • <th id="9brb1"></th>

  • <tbody id="9brb1"><pre id="9brb1"></pre></tbody>
  • <button id="9brb1"><acronym id="9brb1"><input id="9brb1"></input></acronym></button>
      <tbody id="9brb1"><pre id="9brb1"></pre></tbody>
        更多課程 選擇中心


        UI培訓

        400-111-8989

        淺談設計中的加載

        • 發布:UI培訓
        • 來源:UI教程
        • 時間:2018-04-17 14:19

        什么是加載?

        加載在互聯網環境中可以理解為等待數據呈現的過程,也是一種反饋的狀態。當用戶對媒介進行交互行為之后觸發的一種等待反饋。

        換個說法:你去飯店點菜,等待后廚上菜的過程,就是加載。

        ____

        加載的邏輯

        我們再以圖示幫助大家更好的理解,數據是如何通過一些列復雜的流轉最終呈現給用戶的。用戶在客戶端中進行操作,觸發一個事件,例如點擊外賣商品列表。然后客戶端向服務端發送一個信號:“用戶要一只烤雞、一只燒鵝、一盤豬大腸”。

        淺談設計中的加載

        這時服務端收到了這個信號,并開始尋找材料(數據),對材料進行烹飪(整理數據打包)。再之后服務端需要對最后的成果進行擺盤(美化/渲染)最終送到用戶的手中。

        但實際上,用戶在出發事件到最后看到呈現的內容這一段時間都是在等待,也就是在等待加載完成。而客戶端和服務端的數據交互都需要一定的時間來完成。

        數據的發送和接受取決于網絡的好差,數據的查找和整合取決于服務端的性能和容量,最后呈現給用戶的渲染取決于客戶端的性能,高端手機和低端手機在顯示內容的質量及快慢都有不同的差距。

        所以,我們希望能減少用戶等待的時間,對每個步驟進行優化,針對數據信息類型的不同采取不同的加載方式,以滿足用戶的心里預期和更好的體驗。

        ____

        加載的類型和使用場景

        1.模態加載

        模態加載比較暴力,當用戶出發事件后模態加載將會獨占客戶端,意思就是我正在幫你做菜,并且我要全部做完才能給你,這時你只能等待。這種體驗并不是很好,如果數據相當龐大,那么大部分用戶會失去耐心。除非是不完整加載出來就會導致嚴重失誤的場景,否則盡量不使用模態加載。

        淺談設計中的加載

        當我們需要一起讓用戶顯示但是減少用戶內容焦慮的時候,我們通常會采用占位圖布局預先加載的展示樣式以及情感化動效/插畫。例如豆瓣,在點擊首頁列表中的內容后跳轉到詳情,此時由于數據還未返回,他使用了一張資源較小的圖片來展示給用戶,告訴了用戶即將加載出來的信息大致的布局和輪廓,讓用戶提前有心理預期。但是需要注意的是,如果該頁面會有多種變化時就不要用該方法。

        淺談設計中的加載

        2.非模態加載

        非模態加載相對來說就友好很多了,采用非模態加載能夠在用戶等待獲取數據的同時允許用戶對當前頁面其他的內容進行操作。

        淺談設計中的加載

        一、分步加載(懶加載/分頁加載)

        懶加載是我們通常會使用到的加載,舉個例子,用戶點完餐之后,通常所有菜一起烹飪完再交給用戶需要10分鐘,但是一般飯館都是做一道菜就交給了用戶,這樣不會使用戶等待時間太久而產生負面情緒或流失。所以,懶加載通常還會有以下幾種不同的選擇方式:

        1.先加載文字等較小的資源,再加載圖片、視頻等較大的資源。

        2.根據用戶的瀏覽行為來逐漸加載內容,當用戶瀏覽到該區域再進行加載。

        3.當用戶的行為滿足某些條件之后再進行加載。

        所以這樣加載的好處就是減少用戶的等待時間,以及提高信息渲染的效率。

        分頁加載可以理解為當前獲取到100條數據,但是將100條數據分別拆成5頁每頁20條數據提供給用戶,這樣也可以讓用戶減少等待時間。

        淺談設計中的加載

        二、預加載

        我們發現懶加載還是不能滿足用戶的需求,當用戶瀏覽未加載的內容時依然要等待。所以這里又出現了一個加載方式-預加載。

        預加載可以理解為當用戶在瀏覽內容A的時候,系統預先判斷他接下來會進行的操作行為,并對這部分內容進行提前的請求。他并不能解決網絡請求緩慢的問題,而只是提前發起網絡請求,緩解問題。

        但是預加載的邏輯會更加復雜,比如如何判斷何時進行預加載,以及預加載呈現的時間。需要考慮用戶在當前頁面的核心場景考慮使用不同的加載方式。例如咨詢類app,會在用戶瀏覽資訊列表時,對當前或者某一部分列表的詳情內容進行文字加載,以及判斷列表頁面滾動的占比來觸發接下來內容的機制。

        但是列表預加載嚴格上來說不屬于預加載,只是當用戶滑動頁面到一定條件觸發了下一部分內容的加載。

        淺談設計中的加載
        淺談設計中的加載

        三、智能加載

        在不同網絡環境下,某些客戶端會采用加載不同的資源,不同的渲染效果來給用戶進行視覺呈現,例如在4g網絡下用戶瀏覽視頻,會默認采用質量最低的視頻資源提供給用戶。另外在wifi環境下客戶端會自動加載后續內容。

        淺談設計中的加載

        總結

        加載的方式多種多樣,但是我們在選擇使用時,需要考慮用戶具體的場景而定,所有加載方式都有其優缺點,并沒有最優的方式。一旦選對了合適的加載方式以及優化加載的過程之后,用戶體驗必定會有所提升。

        感謝大家閱讀由UI教程分享的“淺談設計中的加載”希望對大家有所幫助,更多精彩內容請關注UI培訓機構官網

        免責聲明:本文由小編轉載自網絡,旨在分享提供閱讀,版權歸原作者所有,如有侵權請聯系我們進行刪除

        預約申請免費試聽課

        填寫下面表單即可預約申請免費試聽!怕錢不夠?可就業掙錢后再付學費! 怕學不會?助教全程陪讀,隨時解惑!擔心就業?一地學習,可全國推薦就業!

        上一篇:平面設計中的印刷知識與印刷尺寸
        下一篇:快速摳圖技巧復雜的背景圖也能一鍵換背影

        淺談設計中的加載

        平面設計中的印刷知識與印刷尺寸

        教你如何把手機里的自拍照片轉成手繪照

        如何將品牌基因融入到產品設計中?

        • 掃碼領取資料

          回復關鍵字:視頻資料

          免費領取 達內課程視頻學習資料

        • 視頻學習QQ群

          添加QQ群:1143617948

          免費領取達內課程視頻學習資料

        Copyright ? 2021 Tedu.cn All Rights Reserved 京ICP備08000853號-56 京公網安備 11010802029508號 達內時代科技集團有限公司 版權所有

        選擇城市和中心
        貴州省

        廣西省

        海南省

        2019最新在线国产自拍,2019最新国产在线观看_久久爱久久高清视频 百度 好搜 搜狗
        <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <蜘蛛词>| <文本链> <文本链> <文本链> <文本链> <文本链> <文本链>