UI设计之加载篇

加载包括：启动页加载，界面间跳转加载，分步加载，懒加载，预加载，智能加载，缓存加载

加载还包括加载的情感化和加载的样式。

启动页加载：

启动app需要一个短暂的过程，启动页的作用就是自然的过度这个过程。启动页一般以图片的形式，配置logo与slogan等传递品牌的和情感内容。也有一些做的与首页一致，使人感觉进入首页的速度特别快。在启动页之后，根据产品需求，可以在后台配置闪屏图片或视频。由于闪屏图片是在后台可配置的，所以可以定期更新，运营到各种活动与节日。

界面间跳转加载：

根据内容情况分为当前页加载和进入页加载。

• 当前页加载：点击链接后，在当前页提示正在加载或者处理，成功后进入下一个页面。一般适合在需要判断处理的页面，例如多步表单的设计。也适合一些webapp及时的反馈加载信息，不用担心进入空白页面。

• 进入页加载：点击链接后，直接进入下一个页面，在下一个页面显示加载内容。进入页加载需要考虑分步加载，优先加载框架与默认元素，让用户尽快看到页面的基本布局与内容。

界面内元素的加载：

分步加载／懒加载／预加载

• 分步加载：优先加载占用网络资源少的内容如框架，文字与默认图案，再加载占用网络资源多的内容。这样子可以让用户更快速的看到界面框架内容。

• 懒加载：主要出现在长页面中，如无尽列表，用户可以不断地向下查看内容，达到某个点后自动加载内容或者触发拉动后自动加载更多内容。

• 预加载：是一种提前加载的方式。如闪屏的时候可以提前加载首页，对一些表单都可以提前记载。

智能加载：

在设计上主要有2种方式

• 隐藏信息：根据网络的不同生成不一样的页面。网络好的时候，提供更长的页面；网络差的时候，考虑流量与加载速度，只显示部分内容，将更多内容隐藏，通过用户的操作再显示

• 多套资源：主动判断网络情况，资源会根据网络情况做差异化处理。例如，对于图片的资源，可以根据网络情况的好坏提供高质量与一般质量的图片。

缓存加载：

无网络情况下，用户仍可以看到缓存在本地的有用信息，不会出现空白页。解决了设计体验与观感的问题，主要体现在以下一些方面：

• 一般主要页面的处理都会使用缓存加载，避免在无网络情况用户面对一个空白页面。例如首页内容一般都会使用缓存加载，给用户好的观感。

• 缓存加载可以有效减少用户的访问流量，同时加快反应速度。特别是一些框架的频繁加载需要使用缓存的方式。不能无限制的使用缓存加载，会增加app占用的系统空间。特别是一些产生大量图片与视频的app，需要有缓存清理入口与上限的控制机制。

加载的样式：

常见的样式是loading图标配置文字的说明，可以放在页面任何可见的位置。有直接覆盖在页面上方，也有半透明的toast，也有嵌入到页面内容中的。以下为常见的页面加载样式。

• 状态栏加载：一般是系统默认的加载样式。可以根据产品的需求设计需要的样式，直接覆盖在状态栏上。

• 导航栏加载：将导航标题临时变为加载信息，主要是文案的提示。例如微信的连接中。

• 界面中加载：比较常见的有下拉刷新，懒加载与toast加载。

• 工具栏加载：比较少见，一般在ios邮件列表有这样的方式。

加载情感化

大部分的加载方式采用系统默认的旋转loading样式。可以将情感化的设计元素融入到加载样式，让无处不在的加载时刻传递特色，让用户等待过程中感受到乐趣。