一些有趣的loading加载页面

UI 佳作分享
原作者:网络 来源:网络
1578 0 0 0
2018-02-24 16:27


01dee65a9115f4a80121923181ea5f.gif

0116b55a9115f4a8012045b3f39078.gif

01b2295a9115f5a8012192317131f5.gif


为何要设计loading页:即使用户看见加载进度愿意等待,但现在互联网是快、准、便捷的时代,用户耐心极其有限,加载进度超过3秒以上就会开始不耐烦,普通的进度条不够满足用户耐心。

loading页怎么设计:它是整个产品最先展示在用户面前的设计,抓住用户眼球至关重要,但也有一定的条件限制,比如它的加载分量要轻以快速为准。以下在网上找了一些例子分类看看loading如何设计。



a、有趣巧妙

让用户看到亮点,更加期待后面内容。


01f70d5a911648a8012045b3265f78.gif

01d04a5a911651a8012045b34893c8.gif

0152e35a911652a80121923105f03e.gif

01d8dd5a911652a8012045b3342ca6.gif

0141f35a911652a801219231ac7b30.gif




b、加载面积小

一般loading页使用纯色、主体占用整个页面小部分面积设计就够了,在网络不佳的情况下也能快速加载出来。


01b9185a911680a801219231a0ca93.gif

0163e95a911680a8012045b366414d.gif

0102565a911680a8012192311e7fe5.gif




c、可重复循环

无论进度条多长,能保持动画无间断重复播放。


0138d95a9116a3a8012045b3949449.gif

016f585a9116a4a801219231bc1e1d.gif

0138c35a9116a4a8012045b39492eb.gif




d、跟产品相关联

使用产品中的形象、或更产品有关的设计。


01c15d5a9116cda801219231f539ce.gif

0130f35a9116cda8012045b35a0918.gif

016ad85a9116cda801219231d5c309.gif



e、自然规律

有始有终的自然规律跟进度条从0%至100%相呼应,比如花谢花开、含苞待放的过程、灰尘蜘蛛网等也是随着时间的长短累积越来越多,进度条代表的就是时间,加载时间越长灰尘或者蜘蛛网越多,这是一种形象比喻手法,自然规律中有很多,要经常观察及产生联系。


01d3045a9116eea8012045b3433d4d.gif

01d6025a9116eea801219231e9bd24.gif

01905d5a9116eea8012045b38e125b.gif

01c0285a9116efa8012045b3c83937.gif


每个互联网从业者都希望打造与众不同的产品,但实际上千变万化却又千遍一律。能在众产品中脱颖而出  用户体验上应当花费更多的功夫,而用户体验个人认为更多是细节上的设计,loading页只是其中一小部分设计,所以想做好一个产品先从细节抓起。





uitrees

uitrees

这个人很懒什么都没写

0 粉丝 / 1 关注

VTOPE APP — Exchange of Social Activity Green messenger

严禁发布 广告 回复

高级模式

    (设计树uitrees)打造最新最潮最全的UI资源分享、学习平台,为设计师提供UI设计交流,UI设计教程,UI设计规范,H5设计交流,HTML5设计教程等

    设计树站内所有涉及作品及素材图片由会员上传而来,设计树不拥有此类素材图片的版权。本站所有资源仅供学习与参考,请勿用于商业用途。

设计树 鄂ICP备18002748号-1 uitrees.com © 2016-2018

知道创宇云安全