搜狐首页 科技 催眠师

手机搜狐

SOHU.COM

从微信、钉钉等APP,看六种常见的loading设计

大多数App都要与服务器进行数据的交换,App向服务器发出数据请求,服务器接收到请求之后向App传输相应数据,App接收成功后显示数据内容,没有接收成功则反馈数据接收失败。

在这个数据交换过程中,由于网络原因,需要花费一定时间,也就是说用户要等待加载完成,这个时候就要用到loading加载机制,它告诉用户,App正在努力为您加载数据,您稍安勿躁。好的loading设计能减弱用户的等待焦虑,不合理的loading设计就会让用户骂爹骂娘了。

标题栏loading:微信、钉钉

1479089338-8283-1114

钉钉微信

微信、钉钉等都采用了这种形式。聊天列表页的聊天记录是储存在本地的,所以页面内容不为空。这个时候加载无需获取用户的视觉焦点,只要在标题栏展示App正在加载,加载成功则标题栏loading消失,若因为网络错误未连接服务器,则在标题栏显示未连接状态。

白屏loading

1479089337-5329-1114

当页面内容比较单一,需要一次性加载完成才显示,则采用这种白屏加载样式。这种加载方式用户在完全加载完成之前是看不到任何内容的,所以一旦超过时间太久一定要提示用户什么原因加载失败,而不是一直在那转啊转。同时将加载图标做得更有趣些,也会减轻用户等待时的焦虑(上面右图就比左图更让用户感觉良好)。

进度条

1479089340-3326-1114

Safari微信

进度条的加载样式,多见于浏览器,包括PC端和移动端的浏览器。一些App页面会用H5的形式去做,这种页面多数也都会采用进度条的样式来显示loading过程。

toast

1479089339-7985-1114

当用户执行了某个操作时,为了防止用户继续操作导致数据加载失败,则用Toast的样式来提示正在加载,同时限制用户继续操作。这种情况用户一般只能执行返回到上一级页面的操作,其他操作都被禁用。

为了防止数据一直加载不出来,可以在Toast上加个取消按钮,让用户主动停止加载状态,由于加载数据失败的情况极少出现,所以在Toast上加取消按钮的App并不多。

下拉刷新

1479089339-5816-1114

下拉刷新广泛被运用于大多数App,这种加载机制,保证了用户能看到本地缓存数据的前提下,还能告知用户页面正在刷新,同时,用户还可以通过下拉的手势操作来自己选择重新加载数据,一定程度上满足了强迫症患者。

精选