作为一名"伪全栈工程师"，曾经也做过一些UI、UE的工作，不过最近两年这在方面就做的很少了，这几天整理过去的资料，翻到了些过去的总结，今天结合现在的经验重新整理一下，供大家参考。
1. Loading是什么？
Loading一词原意为：装载、装填。
在UE设计中，Loading是指可包含图像、声音、视频、游戏等元素的加载动画，不过我更习惯于称它为“过门”，因为我觉得戏曲中的过门更形象的解释了Loading的意义。
Loading的出现和网络状况、设备性能、程序性能等都有关系，我觉得得感谢第一个想到它的设计师。
许多研究都表明，用户能够忍受的最长等待的时间在6-8秒之间，简单说8秒是一个等待的临界值，如果一个页面或功能打开速度在8秒以上，那么大部分访问者都会离之而去；如果等待12秒以上网页还是没有载入，那么99%以上的用户会选择关闭。但是如果在等待载入期间，网站能够向用户显示反馈消息，比如一个进度条，那么用户可以忍受的时间就会延长到38秒，由此Loading出现了。
从UED（用户体验设计）的角度来看，Loading设计则是一个充满趣味性、凝聚创意的工作，本文将从UED的角度进行探讨分析。
2. Loading的应用场景
随着计算机软件对用户体验的重视，Loading已被广泛应用于各种B/S、C/S、APP系统中，甚至是操作系统，总之Loading的身影随处可见。从Loading的应用场景上区分，大致有以下类别：
2.1. 初始化Loading
当用户在首次打开应用或网站时出现的Loading，通常我们说到的启动画面其实就属于这一类。这类的Loading通常比较醒目、突出，设计师在设计此类Loading时往往会格外动一番脑筋，既要新颖以避免平淡，又要考虑与主页面的联系，甚至要暗示出主页面的艺术效果。有的初始Loading设计形式新颖，让浏览者满怀期待。也有的Loading设计平实单纯，却也能让浏览者静心等待。
这类loading也可以巧妙的植入广告或者理念。
2.2. 切换Loading
指一个页面切换到另一个页面时相互链接过程中的Loading，也称作跳转Loading，此类Loading往往是贯穿相邻几个页面，一般设计得比初始化Loading要简洁，讲究与页面间动画效果的呼应连贯。
2.3. 加载Loading
指在同一页面内部对图片、视频、数据等内容进行加载过程中出现的Loading。此类Loading宜小巧精致，不必太花哨。常见的几种设计是：细长的进度条，宽大的色块，以及沿圆周运动的渐变色带等。
2.4. 动作Loading
在一个页面内触发了一个需等待的动作，这个过程中使用到的Loading称为动作Loading。比如进行文件上传时的进度条，比如进行保存时的等待框。
这类设计需要醒目提示，让用户清楚动作已经触发，请等待，不要多次操作。可以有效的避免二次提交。
3. Loading的表现形式
3.1. 抽象表现
此类Loading设计以抽象的加载数据和进度条为设计元素进行设计，视觉效果简洁而直观。常见的形式是一根进度条，它的上方配以数据百分比显示加载进度。此类Loading是在常规Loading形式的基础上，对数字的字体形式以及图形效果进行设计变化。
3.2. 具象表现形式
此类Loading多用GIF动画图片实现，目前也比较流行，在加载过程中循环播放动画。动画形象往往以卡通物体、人物、动物。这类形式新颖、有趣，可以在短时间内吸引用户，特别是年轻用户的注意力。如在可口可乐的一个产品网站中，Loading动画设计为一个胖呼呼的卡通人物在不停地转着呼拉圈，人物的动作姿态生动而有趣，富有活力。而在另一个设计公司的网站里，首先进入我们视野的是一个小巧的机器人形象，它从页面左侧跳出来，推动着纤细的边框一直到最右边，在这个过程中Loading其后的动画页面，该网站利用卡通角色设计的Loading别具创意，富有吸引力。
4. Loading的设计规范
优秀的Loading设计是独具匠心的，而不仅仅是Loading代码的拷贝，只注重页面效果而忽略细节设计的设计师不能算是优秀的。
一般来说Loading设计应符合以下几点。
4.1. 进度清晰、明了
进度清晰的Loading，可以帮助用户预估等待时间，帮助他们保持耐心，以免出现在页面加载完成的前一秒转换频道的情况。值得一提的是，统计数字表明，互联网用户可以接受的等待时间一般在30秒以内。这就需要设计师在Loading设计中充分考虑用户心理，或是以数字显示进程，或是以图像形式显示进度，从而方便用户估计时间，耐心等待。
4.2. 形式新颖、有趣
Loading动画如果设计得新颖、有趣，可以吸引用户的目光，消磨等待时间。常规的Loading设计往往是套用代码，生成的只是普通的进度条伸展动画，缺乏特色，久视易导致视觉疲劳。而有创意的Loading设计，则往往将进度条的伸展变为各具特色的动画，使原本枯燥乏味的等待变成了值得期待的观赏活动。
4.3. 与页面整体视觉风格统一
Loading设计是用户界面整体设计中十分重要的一环，Loading不仅是主页面的开场白，也是各页面之间联系的桥梁。在设计时既要考虑效果突出，同时也要兼顾整体页面风格，相互联系，保证视觉风格的统一。
5. Loading的问题
5.1. 文件大小
受设备、网速等因素的限制，Loading的设计有着许多限制。这主要体现在文件的大小上。因此，Loading作为一个预加载动画，其自身的动画只能简化，从而减小文件量，节约时间。
5.2. 提高真正的速度
Loading虽然在某个程度上可以缓解用户等待时间过长的问题，但这不是一个根本的解决办法，要让用户获得更好的体验，就需要从根入手，真正解决程序设计、网络速度、服务器性能等多方面的问题，从而使用户能够快速得到相应而不是Loading。
Loading不是万能的，也不适合大量使用，在恰当的地方偶尔使用会形成更好的用户体验，但这个度，就需要你自己总结经验了。
祝工作顺利！
