[交互基础］系列之移动端页面加载详解

表现形式：如下图所示，APP的加载过程通常使用能强化品牌效果的趣味动画，或者简单的循环加载、菊花加载样式，但趣味性动画的设计更能吸引用户，减轻用户等待时的焦虑感。H5 页面通常使用进度条来表示加载的进度。

3.2.分步加载

分步加载即先加载文字，再加载图片。页面通过整体加载的方式将文字加载成功后，再使用分步加载的方式来呈现页面的内容，即呈现文字内容和图片占位符，再加载图片。这样做是为了减短整体加载的时间，让内容尽快呈现，减少用户的等待时间。由此，我们可以看出，我们经常要对多种加载策略进行搭配使用，以达到更好的用户体验。

• 定义：根据页面上的资源类型进行先后加载，优先加载占网络资源较小的文字，图片在加载过程中使用占位符，直到图片加载成功。文字→图片→视频→其他资源。

• 场景：适用于图文内容交织的页面,如新闻列表页面、详情页面等。许多应用的首页都有大量的图文内容，就适合用这种加载方式。

• 作用：可以让用户快速地了解界面信息布局及阅读内容。

• 缺点：开始的瞬间可能会丢失掉重要的关键信息，用户初次感知可能会认为产品出现问题了。

• 表现形式：如下图所示的图文列表、内容详情页面，先加载文字，图片加载过程中使用占位符填充位置，占位符一般使用灰框显示，或在灰框内加入品牌标识，强化品牌效果。

加载占位符（Skeleton Screen ）：加载占位符是分步加载的另一种形式，即先加载页面的框架，然后再加载框架里的内容。这种形式所展示的是内容的大概轮廓，用于内容框架固定的页面，若页面可能出现空数据也不宜使用，需保证最后呈现的内容与展示的框架大致相符。如下图所示，Facebook、简书等采用了这种加载方式。加载占位符的方式可根据实际情况配合分步加载、分屏、分页等加载方式，可达到更佳的效果。

（编辑：PHP编程网 - 黄冈站长网）

【声明】本站内容均来自网络，其相关言论仅代表作者个人观点，不代表本站立场。若无意侵犯到您的权利，请及时与联系站长删除相关内容!