## 頁面加載遮罩效果 > UI就是交互，它一定是向用戶傳達了某種信息的，而遮罩加載的效果就給用戶傳達了一種 系統正在，或是需要， 加載/初始化/渲染什么的東西才能進行下一步工作之類的，它表示出了系統當前的狀態，在干什么，這是人們長期使用一些軟件產品/工具所培養產生的用戶習慣和思維邏輯，已經是根深蒂固的了，好的設計能說話，是能讓用戶感受到設計者的用意。遮罩加載的效果無疑是最重要的，用戶害怕這樣的操作，因為他不知道接下來會怎么樣，剛才發生了什么，現在是什么情況，當前在干嘛，用戶心里沒有安全感，每個人都害怕不確定的事情，他不知道要加載多久，要等待多久，如果操作流暢，他心里就會感受到舒服，雖然普通用戶不懂設計，不懂程序代碼，但軟件的每一步的流程，為什么要加載，為什么要初始化，這些用戶還是能感覺體會到的，如果沒有加載的狀態和效果，那么很多東西會顯得很突兀，比如用戶點擊消息按鈕，結果沒反應，他以為沒點到，結果一兩秒之后消息列表突然彈出來，把他嚇一跳，他都搞不懂出了什么狀況了，甚至擔心自己是不是把哪里搞壞了，嚇得他趕緊關掉再也不敢玩了，但是有了加載效果就不一樣了，有了這些交互之后，用戶就知道系統當前是在做什么，以及發生了什么，這些用戶是能夠感受到的，這就是人性化，而人性是相通。 ### 加載狀態設計的技巧 還有一個技巧就是：“隱藏加載”，即盡量讓 `加載中` 到 `加載完成` 的轉變過度得自然一些，甚至一致，這樣不會顯得突兀，甚至感覺不到它加載了。 --- [材料動效 - 動效 - Material design 中文文檔，指南，翻譯](https://www.mdui.org/design/motion/material-motion.html) ~~~ 加載反饋注意事項 - 若載入時間較長,應提供取消操作,并使用進度條顯示載入的進度。 - 載入過程中,應保持動畫效果 ; **無動畫效果的加載很容易讓人產生該界面已經卡死的錯覺。** - 不要在同一個頁面同時使用超過1個加載動畫。 [微信小程序設計指南 · 小程序](https://developers.weixin.qq.com/miniprogram/design/#減少等待，反饋及時) ~~~ **所以設計要以人為本，要關心用戶的心靈，多體貼，關懷，用戶是能夠感受到你對他的愛的。** > 交互必須是有反饋的，回饋是體驗感的，否則就不叫交互了。（比如滑動刪除，拖動清除未讀的小紅點等等，都能感受到生動的交互效果） >[danger] 動畫不能太復雜了，要與操作有相關性，能相得益彰，與之呼應，不能追求沒有價值的花哨會轉移用戶注意力，對產品有害而無益。任何時候都要保持簡潔，要以實現無負擔體驗為目標。 * * * * * ### 聚劃算手機頁面加載遮罩效果例子 很多網站都有這樣的效果，尤其是手機端的網頁，頁面一打開時，顯示的是加載的效果，然后在把頁面顯示出來，比如這些網頁：  注意這是禁用了js執行，否則這個加載效果可能時間很短。 [聚劃算 - 商品頁](https://ju.taobao.com/m/jusp/alone/detailwap/mtp.htm?item_id=529735266808&ju_id=10000033783380#__cce3d5ffa1) 我們看一下它這個加載效果的關鍵代碼： ~~~ …… // 加載的CSS里面定義了加載效果的樣式 …… </head> …… <bady> <div class="resboxmask J_resboxmask"> <div class="loading"> <div class="loading-icon"></div> </div> </div> …… ~~~ 注意上面這種結構，CSS的位置，遮罩HTML的位置，這些很關鍵。遮罩層必須保證最先遮住頁面，這是一個成功的加載效果所必須的最基本的要求。（上面是一種結構，其實還有很多方法能實現滿足“遮罩的基本要求”，比如給要顯示的內容加個`style="display:none;"`內聯樣式，當然還有很多方法，只要達到這樣的效果就可以了。） 遮罩這是第一步。 等**“頁面加載渲染完成后”**，就會用js清除或者隱藏加載效果了，比如可能這樣 ~~~ $(".J_resBox, .J_resboxmask").remove() ~~~ 當然也有的是通過給遮罩層設置css屬性來隱藏加載效果，不管通過什么方法，只要能讓不顯示加載，表現出加載完成的效果就可以了。 上面的**“頁面加載渲染完成后”**打了一個引號，這個是值得我們去思考的，一般我們是讓頁面一打開就被遮罩層遮住，顯示加載的效果，可是什么時候才是加載渲染完成呢，或者說我們到底在加載什么呢，我們要這個加載效果是用來什么的呢，只是看別人網站好像都用了，我們也刷一下存在感嗎，這個時候我們就要考慮，我們為什么需要加載效果？ 這個問題我們稍后討論。 其實我們也經常在頁面底部看到這樣的代碼： ~~~ $(function(){ $("load").hide(); }); ~~~ 顯然這是最簡單的一種形式，表示等頁面元素加載完成后（`ready事件`）就隱藏加載效果。 這是刷一下存在感嗎，假的加載效果，騙人的，用和沒用有區別嗎？ 其實這可能有一些用，比如頁面加載的時候可能希望加載完整的視圖后才能讓用戶操作，比如加載編輯器，編輯器等待被加載的內容，加載時需要把編輯區域遮住禁用等等情況，或者擔心某些東西沒加載完擔心效果不正常等情況，這些情況用遮罩加載效果就有用了。總之它不只是花瓶。 總之有點用，哪怕是只是故意刷存在感的，裝一下高大上那也有用（**不知道為什么有這樣的感覺，感覺有加載狀態的網站看起來就是要高檔一些，哪怕那個效果是假的，反正用戶又不知道**），騙一下你，當你看到它一閃而過的時候，那就是它的效果，它的作用。（甚至有的加載狀態用的是百分比，其實前端如果不是flash，根本就做不出來真正的加載百分比，圖片上傳進度條不算，加載跟網絡有關，所以假的百分比也是這個作用，給用戶一個心理作用，暗示當前正在拼命地加載，提升用戶體驗的，不然用戶才沒耐心等呢） >[danger] 其實這有一個最直白的好處就是，現在網頁都是DIV布局了，DIV布局的特點就是網頁不用等到頁面元素全部加載完成才能顯示，而是可以由上而下地一邊加載一邊渲染，在網速特別慢的時候能感覺到這一點，能看到頁面會一點一點的顯示出來的效果，利用這個特性，假如我們將遮罩加載的元素放在文檔最上面（包括樣式，樣式放在頭部就可以了），那么即使網速很慢的時候，用戶也不會看到白屏或者一點一點顯示的丑陋效果，而是最先看到加載的狀態，如果網速快的話那么這個加載遮罩層就一閃而過了，利用這個特性實現加載的效果是最簡單易用的，但是能很大程度地提升用戶體驗，幾乎所有頁面都可以利用這個特性，而不需要經過特殊的改造，性價比很高，值得使用。 其實它還有復雜的場景，比如AngularJS , reactjs這些渲染視圖的時候就可以先用遮罩加載擋一下了，不能直接顯示未渲染的頁面給用戶，還有比如需要加載一些資源，一些復雜的加載之類的，比如上面聚劃算就是的，可能還要經過一下復雜的事情，最終來決定什么是加載完成，什么時候關閉加載狀態，不同情況具體實現都不同，這完全是取決于你的應用需求和想要達到的效果了。 總之這就是頁面加載效果的常規做法與用處，如果你在其他地方看到了這些頁面加載效果，請留心觀察一下它是怎么做的，以及分析一下用處。你應該會發現它們盡管效果各種各樣，還有的不用遮罩層，但是實現原理應該都差不多的。 希望你每次發現的一些就來記錄下來，當成例子，例子多了，分析就全面了。 last update：2016-11-11 03:35:34 * * * * * ### 遮罩的意義 **遮罩常常和加載效果一起使用，但是有的時候只用加載效果而沒有遮罩，有的時候遮罩和加載是一起使用的，你想過這是為什么沒有，或者說為什么，什么情況需要使用遮罩，什么時候不需要使用遮罩？** 加載的效果不言而喻，是UI設計中的重要部分，而遮罩呢，要回答這個問題，得先看遮罩的作用，和形式，先分析它的展現形式和特性，有透明的，有允許滾動的，有不能滾動的，但是共同的特點都是阻斷了用戶對頁面的操作，看了這些特性就明白了它的作用了，在一些需要加載過后才能進行操作和看到正常效果的頁面，我們可以使用遮罩，不然體驗就不好了，并且可以根據實際情況來決定透明度和是否允許滾動，總之根據實際情況使用，平時多留意一些這些效果的用法和細節。 * * * * * ### 拼多多手機頁面加載遮罩效果例子 例子：http://sc.yangkeduo.com/goods.html?goods_id=605965&refer_page_name=index&is_spike=0&ts=1481008672516 ```css .ms-controller, .ms-important, [ms-controller], [ms-important] { visibility: hidden; } ``` 可以看到，初始頁面為渲染完成時，將主體隱藏了。 然后注意到還有這樣的代碼： ```javascript …… r = document.getElementById("pin-spinner"); e.exports = { loadingImg: d, showWithoutBg: function() { n.isModuleVersion ? o.callNative("JSUIControl", "showLoading") : (r.style.display = "block", m.style.display = "none") }, show: function() { n.isModuleVersion ? o.callNative("JSUIControl", "showLoading", { loading_style: "2" }) : (m.style.display = "block", r.style.display = "block") }, hide: function() { n.isModuleVersion ? o.callNative("JSUIControl", "hideLoading") : r.style.display = "none" } } …… ``` 這也就基本就猜測到它肯定是在某一時機去關閉遮罩了。當然這個時機可能是完成渲染的某個過程，也可能是其他事件完成的回調。 * * * * * ### 奈思設計官網的加載遮罩效果例子 [nicedesign奈思設計](http://www.niceui.cn/) 官網的頁面底部有這樣的代碼，可以看到它等待5毫秒然后去掉遮罩，其實也是一種假的加載效果，畢竟這樣的展示型官網，也沒有什么特別的東西需要去加載，渲染，初始化什么的。（它就是矯情，想提升一點逼格，裝一下高大上，哪怕是假的，反正別人有看不出來，都是虛榮心作祟啊，這個社會網站也有虛榮心了，一個網站的虛榮心，其實是人心啊）（其實它有點用，那么遮罩只是遮住半秒鐘也有用，是了如果沒有遮罩效果，那么會看到一瞬間的，一閃而過的幻燈閃動的丑效果，參考：[圖片加載問題](http://www.hmoore.net/xiak/quanduan/245428)） *（一般移動端的頁面用得比較多一點，現在PC端的也用了）* ``` <script> $('body').show(); $('.version').text(NProgress.version); NProgress.start(); setTimeout(function() { NProgress.done(); $('.fade').removeClass('out'); }, 5); //--></script> ``` ### 深入總結 經過一些實例我們已經知道了加載效果在應用中很重要，那么下面根據已有的一些知識我們總結下，有哪些情況有加載效果： 1. 瀏覽器加載初探里面已經提到過的：尋址，加載基本DOM 2. DOM拿到后要獲取頁面所需的數據 3. 數據獲取后可能還有渲染等操作，以及那些部分需要渲染，都應該有加載的效果 其實利用瀏覽器的特性，在當前頁面跳轉鏈接的特性，我們可以模擬做出尋址的加載效果，瀏覽器的特性是，點擊當前頁面打開的鏈接，并不會理解跳轉，如果網很慢的時候你就能感受到了，會有一個尋址的過程，此時當前頁面還沒有變化，還可以繼續操作，利用這個特性，我們可以給被點擊的鏈接統一綁定一個事件（點擊鏈接后來個加載效果），實現尋址加載的效果，但是要注意，這個加載最好是使用頂部加載條狀態效果，因為不要阻擋用戶操作，而那些需要獲取數據來渲染頁面的加載，在加載完成前是要根據實際情況，來阻擋用戶操作的，也就是要遮罩層。 * * * * * ### 實踐嘗試 ```html <body> <script> // 如果存在框架打開的情況，可能需要處理框架的加載狀態 // 如果當前是在iframe中被打開（比如被layer打開的），并且頁面有加載效果那么去掉那個加載 // layer iframe load效果 是靠這個 class="layui-layer-load" onload="this.className='';" 實現的 // 但是onload方式并不好，可能會出現我們兩種加載重疊出現了，這里處理一下就過渡自然，銜接上了，所以這才是完美的做法 if (window.top != window.self && window.className.indexOf('load') !== -1) { window.className = ''; } // 像上面一樣，同理要去掉 尋址的加載哦 // $('#page-progress').addClass('progress-complete'); // 顯示本頁加載狀態（當前頁面加載數據，渲染頁面要做一些準備） var loadIndex = layer.load(2, {shade: [0.8,'#fff']}); </script> …… <script> // 表單等數據渲染前用加載遮罩層遮住比較好（數據渲染前不能讓用戶能夠操作），比較科學，不管從用戶體驗，還是各方面來說都應該這樣做 layer.close(loadIndex); </script> ``` * * * * * ### 擴展/資料 - [jquery $(document).ready() 與window.onload的區別 jquery 腳本之家](http://www.jb51.net/article/21628.htm) window.onload事件是在DOM結構完全加載，并且**html標簽中直接引用的** 所有圖片，Flash等資源/媒體也加載完畢后才執行，而非其他，請注意這句話中加粗體的部分。 $(document).ready()事件是只要**DOM結構加載完畢**后執行，而不論其它資源是否也加載完畢了。（注意這里的 DOM結構加載完畢 ，請先了解瀏覽器的渲染工作機制，對于遇到js css資源加載時會阻斷頁面的加載渲染，所以這里嚴格表達的意思其實不僅“dom加載完”而已，而是DOM中**直接引用的css js文件**也加載完畢） [為什么優秀的程序員喜歡命令行？](http://mp.weixin.qq.com/s/4g8wZ3YuhccA5B8gDvn6hQ) >[info] 這種更強調交互過程的設計初衷使得自動化變得非常困難。另一方面，由于GUI是為交互而設計的，它的響應就不能太快，至少要留給操作者反應時間（**甚至有些用戶操作需要人為的加入一些延遲，以提升用戶體驗**）。 GUI交互就是以人為本啊，看來做產品心理學也很重要啊，要買一本心理學的書看啊。 可以參考：[微信小程序設計規范](https://mp.weixin.qq.com/debug/wxadoc/design/index.html?t=2017327) * * * * * [沒錯：或許這是一組能讓你大飽眼福的UI動效圖標設計](https://www.toutiao.com/i6479707686098174477/?tt_from=weixin&utm_campaign=client_share&app=news_article&utm_source=weixin&iid=12619555732&utm_medium=toutiao_android&wxshare_count=1) > 動態界面使人更容易理解交互層級關系，減輕了人們的認知負擔。 * * * * * update：2017-10-30 21:25:35