页面加载贯穿用户的行为路径，从点击app启动图标的那刻开始，几乎用户任何一次点击、滑动的交互行为都会引发页面的信息加载。因此，良好的页面加载毋庸置疑是创造良好用户体验的关键一环。适合场景的加载策略可以给予用户及时有效的反馈，而恰当的视觉表现形式不仅可以填补用户的等待时间，缓解其因等待产生的焦虑情绪，而且通过一定的视觉设计甚至可以为企业带来商业价值。
什么是页面加载？
回忆一个APP使用场景：【在搜索框中输入关键词→点击搜索→页面呈现搜索结果】这个过程即为一次完整的页面信息加载。加载发生的原理是一致的，即用户在页面进行操作后，客户端将用户的操作转化为对应的指令，向服务器请求数据，服务器再将数据返回到客户端，并通过页面渲染呈现给用户。▼
其中涉及到“用户与客户端”之间和“客户端与服务端”之间的数据传输过程，数据传输需要一定的等待时间。一般在网络和服务器正常的情况下，页面会呈现加载过程以告知用户APP当前的状态，缓解用户因等待产生的焦虑。若在数据传输过程中遭遇网络不稳定或者服务器异常的情况，也需要告知用户，避免用户不知所措，导致用户体验降低。因此通过怎样的表现形式向用户提示页面加载过程中出现的情况，对于设计师来说也是一个值得思量的问题。
6种加载场景及表现形式
根据APP的使用流程来说，加载场景大致可归纳为：启动页加载、登录注册/提交表单类、下拉刷新、上拉加载更多、页面内的图片视频列表加载、跳转新页面。这些场景是提升产品体验的重要环节，不同的场景适合的表现形式也有所差异，设计师尤需慎重考量如何根据用户当前的场景设计合理的表现形式，在保持用户使用感受连续性的同时又能赋予加载场景一定的价值。01 启动页加载
APP启动时首先会有对首页素材进行加载的时间，启动页则相当于是加载过程中的一个“过渡页面”，其作用是尽量让用户忽略APP启动过程，降低用户在等待中的焦虑感。表现形式：大致可分为规范型、品牌推广型、商业需求型三种。设计遵循IOS和MD官方定义，启动页画面展示的内容简洁，且展示时间尽可能的短。例如B612相机把首先加载状态的画面作为启动页面，用户首先看到的是首页框架，APP真正启动后界面才会展示更多的信息，这样会使用户感觉当前已进入首页，给用户一种应用性能很好的体验感。▼
图为：B612相机的启动页及首页
这类启动页是在规范型的基础上稍做扩展，画面元素一般包含品牌名称、Logo、Slogan三种，例如下图中的几个常用的APP启动页设计。这种类型的启动页可加强用户对于品牌的认知。另外一般整体颜色和风格也遵从APP界面的设计风格，可以让用户提前熟悉APP的样式风格，是目前较为常见的一种类型。▼
从左到右：网易云音乐、优酷视频、百度网盘品牌推广型启动页
在app的启动页展示商家广告或线上活动，展示时间为3-5秒，画面中有“跳过”按钮以适当提升用户体验，并且一般会对画面框架进行统一设计。当app积累的流量已形成规模，足够进行流量分发时，此类型的启动页则可以起到对内进行活动推广，对外为企业实现一定的商业价值的作用。▼
从左到右：腾讯视频、饿了么启动页
02 登录注册/提交表单类
在进行注册登录以及提交编辑表单类的操作时，用户在页面中触发操作后，客户端需要在当前页进行数据判断和验证处理并完成加载，若加载失败则立即反馈给用户提示，整个过程有很强的上下步操作关联性，而且只在数据加载成功后才可进入下一个页面。
从左到右：Weico登录页、菜鸟裹裹新建地址页、网易新闻登录页
03 下拉刷新
页面下拉刷新是app中应用比较广泛的加载新数据操作，用户对页面进行下拉，在出现加载提示信息后释放页面，页面将获取新数据。简洁动效+文字的表现形式能使用户更关注内容本身，适合以微博、头条为代表的列表条目类APP。这类提示一般包含三个状态，以微博为例，分别为：下拉页面提示文字为“释放更新”；释放页面提示文字为“加载中”；结果显示提示文字为“更新成功（更新n条数据）”或“刷新失败”。而将下拉刷新提示设计为趣味动画，并加入符合产品属性和品牌调性的设计元素，一定程度上分散用户等待加载过程中的焦虑感，同时可以传达品牌信息，也是信息情感化传达的一种方式。▼
微博下拉刷新提示的三种状态
当当、京东到家下拉刷新提示
04 上拉加载更多
用户在浏览列表信息类目或商品列表时APP默认展示一定数量的内容，当用户划到展示信息最后面，需手动上拉或点击提示加载更多数据。表现形式：简洁的菊花旋转或向上箭头提示，部分页面也设计成类似前文提到的“下拉刷新”三种状态的动效提示。▼
从左到右：网易考拉上拉刷新、网易新闻上拉刷新
05 页面内的图片视频列表加载
当页面同时包含文本、图片和视频等多种类型的信息时，例如新闻或商品详情页面，文字会比图片和视频更快加载出来。且图片和视频在加载的过程中一般会使用默认占位图，以减少用户的心理等待时长，提升产品体验。表现形式：页面中的图片和视频使用色块或带有logo的默认图占位。例如：淘宝使用简洁的灰色块，，口碑使用带有logo的占位图，Pinterest使用色彩预置（Color Placeholde）的方式，预制区域的颜色采用与图片相似的色彩值，图片加载的过程会有一种渐入的效果。▼
从左到右：淘宝图片灰色块占位、口碑图片占位图
Pinterest色彩预置加载样式
06 跳转新页面
当页面信息较为单一时，页面往往一次性加载完全部数据后才显示，内容加载完成之前界面都会停留在白屏加载提示状态，多出现在h5页面。表现形式：进度条形式、白屏加动效形式和toast提示。进度条的形式使加载在视觉上被“量化”，且进度条多设置为先快后慢的非匀速动画，暗示用户加载速度很快。目前一些APP在白屏加载动效中植入品牌元素，趣味化动效在分散用户加载等待的焦虑感同时也体现了品牌设计的差异化。▼
从左到右：滴滴-客服进度条、QQ-看点页面加载动效、淘宝购-物车加载toast提示
以上即为用户在APP中操作过程中常见的6种加载场景，目前应对大部分的加载场景均已有较为成熟的技术方案，但需要注意的是加载场景和加载策略并非一一对应的，尤其在信息比较复杂的页面，往往需要配合运用多种加载策略。根据不同的加载场景合理规划运用加载策略，才能有效提升用户体验。解决加载问题的策略
下面梳理了APP中常用的几种加载策略，在APP的设计规划时可以考虑针对不同的加载场景选用合适的加载策略。01 整页加载
特点：一次性加载信息保证了内容的整体性，用户可以系统浏览所有内容，但需要注意的是一次性加载过多内容会产生等待时间，当加载时长超过3秒后，用户会产生较明显的等待感。场景：整页加载适用于新页面跳转以及部分重要信息页面，常见的如购物车、收货地址列表页面等。02 占位符
定义：又称为骨架屏（Skeleton Screen），在页面数据尚未加载前，用灰色块填充的方式给用户展示页面框架，当数据请求返回后再将内容替换为真实的数据内容。特点：相对于整页加载时的白屏页面来说，占位符成为白屏和内容呈现之间的一个过渡状态，会给用户更为连贯的视觉感受，体验感更好。场景：占位符适用于页面信息布局相对固定的页面加载，例如淘宝的微淘页面和豆瓣首页，是比较典型的运用加载占位符的APP。▼
03 分步加载
定义：也称作优先加载，即将页面中的信息根据一定的顺序进行加载。分步加载的顺序大致分为三类：1）按资源类型加载：文本→图片→语音→视频→其它内容特点：可以帮助用户迅速了解界面信息布局及阅读内容，减少等待时长，但用户可能会在浏览的过程中丢失部分信息。场景：分步加载适用于承载信息类型丰富且信息量大的页面加载，例如直播类APP视频列表、新闻或商品详情页。一般会根据页面上的资源类型进行先后加载，优先加载占网络资源较小的文字，图片在加载过程中使用占位图，直到图片加载成功。需要注意的是，将信息展示给用户仅仅是信息加载的最基本要求，最终目的是帮助用户理解这些信息。在信息层级较多的页面分步骤地给用户展示信息，用户更容易消化。例如，Keep户外跑步功能结束后，页面首先会展示跑步时长配速等信息，最后向用户呈现跑步路线。▼
从左到右：一直播、小红书-首页
keep跑步结束后页面信息顺序加载录屏
04 分屏加载
定义：又称延迟加载或懒加载，即根据用户的浏览行为来逐渐加载内容，“按需加载”仅加载用户当前浏览区域内的内容。特点：页面加载速度快，网速正常的情况用户不易察觉加载动作，节约流量且不影响浏览，用户体验好。场景：适用于多屏且图片资源较多的页面，如电商应用商品列表和详情页页面。▼
从左到右：淘宝商品、购物车列表加载
05 分页加载
定义：当页面有较多的信息要展示给用户时，每次只加载固定数量的少量信息。用户浏览到最后手动点击或自动页面再次加载更多内容。特点：减少避免一次性加载大量数据造成的体验不佳，用户不需要跳转页面即可进入无尽浏览模式，但容易造成迷失，且不易快速定位到某个内容。场景：适用于内容列表页，如：资讯列表、评论列表等。▼
从左到右：今日头条资讯列表加载、微博评论列表加载
06 预加载
定义：预加载可以理解为当用户在浏览页面A时，系统预判用户接下来可能会看的页面B，提前加载这部分内容，当用户需要查看时可以直接从本地缓存中渲染。特点：用户进入下一级界面无需加载过程，也保证了用户在无网或弱网情况下查看消息的体验。预加载占网络资源较小的元素是一种平衡网络流量和流畅体验的方法。但同时会对影响服务器前端性能，且在非wi-fi环境下若用户不确定查看的情况下则会浪费流量。场景：适用于进行预加载消耗的流量较少的场景，例如微信的公众号消息列表，预加载占网络资源较小的元素文本信息、公众号头像及整体框架，本身较大的图片内容则需联网获取。▼
微信-订阅号信息
07 智能加载
定义：根据不同的网络状况来加载不同的数据，Wi-Fi网络下加载所有资源；非Wi-Fi环境下仅加载内容框架以及文字，图片视频等只显示占位符，并对用户进行当前网络环境可能消耗大量流量提醒；在弱网环境下默认加载低质量或停止加载图片、视音频等，并对用户进行网络环境异常提醒。特点：根据具体场景来控件流量和加载速度，帮助用户避免出现流量非自愿损耗的情况。场景：智能加载适用于有大量图片或视频等页面数据量较大的加载，例如新闻、直播、视频等APP中的页面加载。网易新闻首页在弱网环境下仅加载文本信息，优酷视频在移动网络环境下加载视频前会告知用户视频播放所需的流量，部分APP在非Wi-Fi网络下加载视频页面会提示当前正处于移动网络环境下，例如小红书的视频播放页。▼
从左到右：网易新闻首页弱网加载、优酷视频视频消耗流量提示、小红书视频播放页网络环境提示
08 后台加载
定义：用户在操作后，客户端立即向用户反馈操作成功，操作请求放到后台与服务器处理。特点：为用户提供即时的操作反馈，无需等待的时间，体验流畅。但需要注意的是，后台记录用户操作请求并与服务器交互的过程遇到的请求失败情况，用户并不会得到提示，均以操作成功显示，这会导致用户误以为操作成功了。场景：适用于特定小操作场景，例如小红书的点赞、微信的朋友圈评论操作，微信发布朋友圈的操作，均采用后台加载的方式，微信在后台将文字图片上传到服务器，用户不用等待上传结果即可在朋友圈列表看到发布的内容。设计师需要了解加载动画Tips
在多种复杂的加载场景中，需要运用不同的加载策略，而每个加载策略又需要辅助以恰当的视觉表现形式给用户准确的信息反馈。因此当前的加载状态需要toast提示、控件动效提示还是动画的表现形式，需要设计师谨慎思考平衡选择。在前文提到的多种表现形式中，加载动画相对更容易吸引用户的眼球，趣味性的动画为页面加载过程注入了一丝愉悦感，填补了用户等待的空白时间，可有效分散用户在等待页面加载过程中产生的负面情绪。有些APP中的加载动画设计巧妙融入了品牌元素，还能加深用户对品牌的印象，一举多得。但需要注意，动画的应用并非使用任何加载场景，加载的表现形式还是需要遵循简洁实用的原则，以准确反馈信息为前提，避免过渡设计。目前页面加载动画的实现，大致有以下几种常用的技术解决方案：1、GIF图：研发成本小，缺点是在动画细节和画面质量方面有损失，边缘会会出现锯齿或毛边。2、图片序列：可完整还原动画，且研发成本不大，缺点是序列图片张数较多的情况下文件整体比较大。3、代码动画：研发通过代码或者用代码控制图片素材实现动画，需要设计师给出动画示意，并给出详细的动画参数变化，包括：时间、大小、颜色、速度等动画属性，以便于研发实现动画。4、Lottie动画：支持多平台使用同一个json动画文件，基本可完整还原动画，大大节省设计与研发反复沟通动画还原细节的时间成本。但图片素材过多的话可能会影响文件大小，建议交给研发前将图片素材进行再次压缩。结语
综上所述，APP的页面加载涉及多种加载场景、加载策略以及表现形式，然而其本质并不复杂。但了解页面加载原理，根据不同加载场景中的数据类型选择合理的加载策略，并辅助与适合的表现形式，就可以有效优化用户的每个操作步骤，不断提升用户的心理预期，为用户提供更好的用户体验。Powered by Froala Editor
大牛，别默默的看了，快登录帮我点评一下吧！:)
登录 立即注册