浅谈移动端App的页面载入方式

很多人在开发移动端app的时候往往会十分注重页图案的精美，图标的细致和背景色是否足够吸引人，然后对于移动端app的页面加载过程及不同页面窗口的加载直接的衔接和过渡往往容易忽视。我们也常常会看到很多app一安装后打开的页面显得高大上，但是启动过程如乌龟爬行一般的速度，最后经常等得都不想等了，加上有不少用户使用的2g网络来上网，app的页面加载和切换往往处于不可用状态，这些问题的大多数原因往往都可以通过改变app的页面载入方式来解决或者减轻问题带来的影响。那么针对移动端app该如何设计相应的页面载入方式来减少页面的加载时间，减少用户的等待时间，从而提升app的用户体验。

第一， 采用页面全部加载方式。app页面的全部加载就是等待页面的所有数据都读取完成后才会加载，在所有数据完成加载之前页面会显示空白。这种页面的加载方式我们在微信中经常都可以看到，经常在外面如果某些朋友圈的链接打开后都会变成空白页面，但页面全部加载的最突出优点是保证页面内容的完整性，缺点显而易见就是等待的时间往往会过长，等待的时间久了用户就会烦躁，特别是在公交车或者室内等网络信号不好的地方几乎是不能打开一个完整的页面。如下图是采用页面全部加载方式。

第二，页面内容优先加载方式。我们经常会遇到这样的情况，用手机app的时候最主要的目的只是为了看某几个文字，如用支付宝打开只是为了看看余额宝昨天的收益金额，那么这个时候app的页面就存在着内容的主次之分。当一个页面的内容大多数是文字内容的情况下，我们可以先加载文字部分，比较耗流量的图片内容可以放在后面加载，这里如果是app嵌入网页的方式则采用的是ajax异步请求加载，pc端的很多网站为了提高用户体验经常也都采用ajax加载方式。这就是页面内容优先加载的方式，其优点是可以让用户尽可能快地获取到想要读取的内容，而非等待太长时间，缺点就是某些用户还是没有办法获取到完整的页面内容。如下图是采用先加载文字后加载图片的方式。

第三，采用页面自动拉伸进行加载。有很多移动端app是做内容服务的，那么在app的页面中自然不能显示所有的内容，这时就需要对app的内容列表页进行分页操作，只显示前面几条内容，这时我们可以使用自动拉伸加载。有经常使用新浪微博的用户都可以发现这个特点，如下图。采用页面自动拉伸加载方式可以让用户觉得app可以提供无限的内容，容易吸引用户不断往下阅读，而无需点击下一页进行跳转和等待，不好的地方就是这种自动拉伸加载的页面载入方式用户经常会找不到起始阅读的地方，迷失了app当前所操作的位置。

第四，根据网络环境页面自适应加载。移动端app的正常使用离不开稳定的网络环境，当网络不出于wifi时更容易造成部分图片加载失败或者长时间等待的情况。为了满足不同网络环境下的加载需求，app应该能够对此做出相应的调整来改变页面加载方式。例如手机淘宝客户端，如果网络情况发生变化，则会提醒用户，然后在商品详情页面减少图片的加载，产生相应的页面提示，并且页面只显示较为简单的内容如下图。

第五，客户端离线加载方式。当用户不能上网的情况下，许多app的功能都变得不可用了，甚至连主界面都打不开，这样往往显得十分不友好。要避免这个问题就是需要使用客户端离线加载方式，当客户端在联网的情况下把重要的内容缓存到本地便于在当没网络的情况下客户端可以直接读取这部分内容。目前许多的小说类app、视频点播app都会提供离线缓存的功能，其目的就是为了解决客户端离线带来的功能性问题，但是要离线缓存的前提是要使用手机的磁盘存储空间。

上面提到的几种页面加载方式是目前移动端app的页面载入中经常用到的，每种页面的载入方法都各自的优点和缺点，不能绝对性地认为是哪种方式好或者哪种方式不好，而应该针对app应用的实际情况来选择性地采用相应的页面载入设计方式。此外，移动端app过程中，还可以加入动画、进度条等方式来过渡用户的等待过程，减少用户因为等待带来的枯燥感，如下图是几种页面等待的过渡效果，通过类似这样的页面载入效果可以进一步加强用户体验。

购物网站的页面加载过渡

下载过程的页面进度条过渡

本文由北京网站制作培训原创，如有转载请注明出处，谢谢!