## 页面加载遮罩效果 > 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.kancloud.cn/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