• <div id="imyhx"></div>
  • <div id="imyhx"></div>
  • 您的意见是我们 UI 中国进步的动力!
    点击立即反馈按钮,发表您的意见!
    立即反馈
    QQ群反馈
    您?#37096;?#20197;加入UI中国官方反馈群进行反馈!
    群号:302892100
    备注:反馈问题后@管理员能让我们及时了解您的意见

    成长值达到300分以上才可以发?#21152;矗

    收集成长值 先看看别人的即刻>

    设计师都应该了解的Loading动画知识

    自译外文 分类: 经验/观点 版权: 原作者: 未知
    15866 445 485 19
    2019-04-08
    134.5
    首页推荐

    一篇文章,全面了解加载动画知识


    Loading动画,在现在的设计中已经是一个必须要设计的系统元素,它能减缓用户等待焦虑的心态,也能用来作为品牌?#22797;?#22686;加曝光。


    那关于loading动画相关知识,我觉得对于设计师来说是有必要去了解的,所以我?#19994;?#20102;这篇优秀文章,让大家能够深入了解loading动画,透过现象看本质,学以致用。


    Image title

    ?#35745;?#26469;源:Domaso



    没有人喜欢等待

    在用户心目中,优秀的应用、工具、网站都应该是制作精良且能快速响应他们需求的产品。


    举一个真实的例子:最近我们新发布了一个用户评价的应用,第一个版本并不完美,loading延迟在2-3秒。


    你猜怎么着?


    很多人认为这3秒是一个?#25910;稀?#22312;实际开发中,你可能要面对龟速的网络,没有优化的代码,操作时间长或数据处理太多等问题。因此,App的运行速度可能没有用户预期中的那么快。虽然早期用户可能会给你的产品第二次机会,但绝大多数人会立即退出它。


    除非你的产品界面对用户的行为提供了明确的即时反馈。刚才发生了什么?是操作错误还是在等待服务器的请求?用户需要等待多长时间才能正常使用这个工具或网站?用户为什么要等待呢?


    让我们一起深入了解Loading动画:

    1、loading动画的历史由来

    2、优秀loading动画所具备的特征

    3、细节可以做出精彩

    4、简单处理还是精心制作



    loading动画的历史由来

    对于这种类型的反馈,设计师会使用进度条、loading示意图、预loading、或旋转器。它们向用户解释什么时间发生了什么或正在loading的过程,以减少用户的心理焦虑。


    你觉得设计师是从什么时候开始考虑加上这种反馈的?


    我很惊讶的看到关于Nielsen Norman的一篇文章,提到响应时间和loading动画是在1993年(参考1985年的资料):


    如果计算机无法提供快速响应,则应该以百?#30452;?#30340;形式向用户提供?#20013;?#21453;馈。【Myers 1985 论文,“计算机-人机界面百?#30452;?#36827;度指标的重要性”】


    显示进度的三个主要优点:向用户保证系统没有?#35272;?#19988;正在处理他们的问题;告诉用户还需要等待多久时间,让用户能腾出时间来做其他的事而不只是干等;甚至可以向用户提供一些可以阅读和查看的内容,减少等待的焦虑。—?Jakob Nielsen, on January 1, 1993


    自从Web 1.0以来,几乎每个网站都有loading状态,用户可以注意到当页面内容正在loading时,这些Loading动画活跃的身影。


    在2007年的时候,网站的Loading形式大概是下面这张图上的样子:

    Image title

    2007年时的Loading


    在那个年代,你可以?#19994;?#20687;Firewoks(2007)、Flash (2008) 或者Loading GIF Generator (2009)这样的工具来做这些 loading动画。


    到了2010年,随着CSS3的?#35813;?#21457;展,出现了很多教程教大家如何做CSS3动画,也能?#19994;?#22823;量的loading 动画预设包。设计师?#37096;?#20197;在Ps cs5中做这种loading动画,这个在10年前是非常流行的。


    在那时,Loading动画更像是web的专属问题,因为页面loading确实是一个问题。在2010年的时候,很多Flash网页都做了一些很有创意的loading动画:


    Image title

    30个创意Flash loading案例(https://web3mantra.com/2010/09/08/30-creative-flash-preloaders-examples/)


    渐渐地,设计师们开始不满足于简单的进度条和旋转Loading,到2014年-2016年的时候,变得更加关注这块的设计。所以,你能发现更多关于loading教程,免费的Loading设计资源,插件和开源项目。


    Image title

    2016年出现的Material Design loading(http://www.qooqee.com/news/muse-preloader-widget-tips)


    设计趋势和方法已经发生了变化,但向用户提供有效反馈的原则依然需要遵循。



    优秀loading动画所具备的特征

    在一个完美的世界里,loading动画应该:


    尽可能少的显示给用户

    如果你的工具或网站工作的足够快,那就是非常完美的。或者至少要使?#30431;?#20204;的速度符合用户的预期,显示?#27599;?#30340;loading动画只是一个缓兵之计,等待太久了一样会惹恼用户。所以,首先应该是解决内容的loading问题。


    给出具体时间

    它可以是一条简单的文本信息,告知大致的等待时间,?#37096;?#20197;是可视化的图形来表示。总共上传了多少文件?更新需要多少分钟?已经进行到了什么阶段?这些体验上的设计细节都可以给用户预期并减少焦虑。


    Image title

    宇航员数据loadingby Cream M.



    告诉用户为什么需要等待

    一些应用的loading过程,通常让用户不大容易理解。一个好的Loading动画,应该要告知用户等待的原因以及等待的背后软件正在做什么:


    Image title

    文件获取动画 by Vinoth


    让我们说回我的案例,那个反馈工具软件。当我们的等待时间超过1秒时,我们决定给这段等待时间增加一段解释。动画?#24471;?#24212;用目前正在处理截图资源,这清晰的表明,我们的工具没有?#35272;#?#23427;只是正在处理请求:


    Image title

    好的loading动画



    让等待的过程不那么让人无聊

    可以放一个有趣的动画来吸引人,让用户的眼睛始终保持忙碌。


    Image title

    动画来源:Alex Kunchevsky



    减少用户等待时间的心理感知

    这与上面提到的一点非常相关,如果你在等待的过程中发现了一些能够吸引用户注意力的东西,那么感觉上时间就会过得更快。它可以是一个引人注目的色彩搭配,有趣的想法,或者是一个什么特别的东西。


    Image title

    ?#26696;鈒oading by Pierre Kleinhouse



    ?#22797;?#20844;司品牌形象

    如果用户在用你的应用或者网站时会有一段等待时间,为什么不机智的利用好这?#38382;?#38388;呢?#35838;也?#24314;议仅仅只是为了做loading而做一个loading动画或者去在动画里使用一些心理学技巧。我觉得最好是将品牌的声音融入整个Loading动画中,?#30431;?#25104;为一个非常重要的设计细节:


    Image title

    BCG的车票应用动画 by Antonin



    细节可以做出精彩

    虽然?#34892;?#20154;可能会认为Loading只是一个很小的UI细节,但它其实也?#34892;?#22810;类型和变化。?#35805;?#26469;说,我把loading动画分为几类,进度条,无限循环的loading图和骨架图。


    进度条

    当可以明确loading时间时使用,进度条可以通过数字或视觉化的形式来表现。


    有数字进度的,有时也称为百?#30452;?#25351;示符。他们可以简单直接,?#37096;?#20197;很有创意,需要?#38405;?#30340;用户业务表达更有效:


    Image title

    一个app loading页 by Nguyen Tran



    你?#37096;?#20197;?#19994;接?#36259;的进度条和循环动画结合的loading图。


    Image title

    Loading动画by Dragonlady



    进度条背后的主要思想是显示一个操作将花?#35759;?#38271;时间以及目前所处的状态。根据UI需求的不同,进度条?#37096;?#20197;是线性的,没有百?#30452;?#30340;形式。


    想想Gmail,它没有显示进度百?#30452;齲?#20294;是用户同样可以感觉到加载的进度。下面是两个简单而又创意的例子:


    Image title

    Image title

    Gamil loading和一个创意loading动画 by  Allen Zhang



    无限loading动画

    当loading的时间是未知的时候来使用,它可以是默认的旋转图,?#37096;?#20197;是一些创意动画,显示应用正在做一些?#34385;欏?/p>


    Image title

    计算loading图标 by Hoang Nguyen



    创意性loading动画一样可以与业务紧密相关,并帮助支?#21046;?#29260;发声。请思考下那些应用会使用这种loading动画?


    Image title

    LittlePin Spinner by Daniel Sofinet



    无限循环动画要求用户在上传或执行某些操作时等待,但不要求具体需要多久时间,它们可能会非常简单或非常有创意。


    Image title

    Loading cat by domaso. So cute!


    Image title

    Infinity by Eszter Balogh. 看起来非常有趣,但是你并不想他们永远不停下来。


    如你所见,如今的loading动画不仅仅只是一个系统状态的UI元素。



    骨架动画

    骨架动画展示了loading页面的变化过程,你可以把它理解为开始是一些页面占位图,逐步加载上一些可见的?#35745;?#25991;本?#25512;?#20182;内容。


    这个?#39318;?#26089;出现在Luke Wroblewski 的文章中,Luke建议使用骨架动画来获得更好的loading体验。这个想法得到了其他设计师的支持,并在Facebook、Linkedln、YouTube, Google Drive 等用户界面中得到了应用。


    举个栗子,如果你使用的是网页设计工具Figma,你会在页面顶部看到一个进度条,同时还在逐步loadingUI:首先你会看到占位符,然后才是可用数据:


    Image title

    Figma UI



    简单处理还是精心制作

    除了这篇文章中所展示的一些优秀案例和Dribbble上的设计概念,在目前大多数应用中,你可能能看到还是一个默认的Loading。


    有一?#38382;?#38388;,简单的Loading被大众所推崇,因为他们对于性能的影响最小(尤其是对于web)。使用默认的或开源的loading要容易的多,不需要设计师和开发花心思来设计和实现它。


    如果你正在开发MVP或者项目的第一个版本,那么使用简单的或者开源的loading动画更符?#19979;?#36753;。在这个阶段,即使把loading动画做的再怎么有创意,也并不会?#38405;?#30340;产品有多么大的帮助,如果它不能解决真正的需求。


    Image title

    一些简单的loading动画案例



    有趣的是,在2016-2019年,我们可以看到非常多精心的loading动画。注重细节,?#25214;?#25104;熟的设计公司,更好的科技环?#24120;?#26356;方便的设计工具,这些都使得loading动画变得更加富有创造性。如果你浏览Dribbble,能?#19994;?#38750;常多超赞的Loading动画,所以这也成了展现自己设计能力的一种方式。


    即使在我们只有5人的初创公司里,我们也会考虑更好的用户体验,让我们用户等待的体验更愉快。否则,我们做的反馈工具可能会失去用户,没有人希望失去用户。




    原文:https://medium.com/flawless-app-stories/everything-you-need-to-know-about-loading-animations-10db7f9b61e

    作者:Lisa Dziuba

    译者:彩云Sky

    本文翻译已获得作者的正式授权

    Image title

    授权截图



    译者:彩云sky ,腾讯视觉设计师。微信公众号:彩云译设计

    本文由 @彩云Sky 翻译整理发布。未经许可,禁止转载。

    微信公众号:彩云译设计

    彩云Sky

    腾讯视觉设计师

    5780粉丝/12关注

    首页霸主2016年度最佳作品集TOP50得主人气明星?#19979;?#35782;途原创超人
    干货分享:如何更好地使用栅格系统面型图标vs线型图标,该如何正确使用?
    4
    178****1551

    怎么实现没有讲 。。。意义不大

    精彩!

    扫描二维码
    去手机端查看海报

    彩云Sky

    TA已经获得14枚勋章啦

    • 成就勋章

      • 特别勋章

      • 身份勋章

    • 已拥有

    • 作品

      创造者才是真正的享受者。

    • 经验

      经验是一所好学校,可它的学生却经常旷课。

    • 活跃

      大神都是从围观群众开始的

    • 拓展

      作品、经验、活跃还不能满足你?

    京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2019 UI.CN

    北京快乐8奖金
  • <div id="imyhx"></div>
  • <div id="imyhx"></div>
  • <div id="imyhx"></div>
  • <div id="imyhx"></div>
  • 香港超级单双中特 澳门娱乐场免费巴士 重庆时时彩平刷一期分析 3603d彩票走势图 柏林联合对达姆施塔足球分析 便民p3开机号 平码平肖全年免费资料 天津十一选五开奖 三肖中特期准黄大仙房介 福利彩票2019130双色球 2019年79期开码现场 真人游戏美女cos 安徽时时彩直播开奖结果查询 吉林时时彩平台 山东时时彩网11选5