网页设计和APP设计技巧:加载动画设计需考虑哪些内容?

如今,越来越多手机应用程序和网站争相出现,用户对产品质量的要求也越来越高。对大多数用户而言,优秀的产品自然能快速满足他们的各种需求。

例如:网站加载时间延迟2-3秒,用户会以为这3秒加载延迟是个Bug,事实上,网络慢、代码繁杂、操作时间长等都有可能会延长网站的加载时间,导致应用程序的运行速度无法达到用户的预期。这时用户可能会耐心等待或直接关闭,因此,利用加载动画向用户提供明确的反馈信息,情况可能就不一样。那麽,为应用程序设计加载动画时,需要考虑哪些内容呢?

* 加载动画的由来

Nielsen Norman的文章曾提及,有关相应时间和加载动画的描述:如果电脑无法提供快速响应,应以百分比进度指标形式向用户提供持续反馈,其作用在於:

1.提示用户系统没有崩溃,且正积极解决问题中;

2.告知用户最大等待时长,用户可在这段时间做其他事情;

3.为用户提供界面视觉内容,减轻用户心理焦虑。

事实上,尽管近几年加载动画的设计趋势和技术都在不断变化,但其目的依然没有变化:

网页设计和APP设计的技巧:加载动画设计需考虑哪些内容?

网页设计和APP设计技巧

① Web1.0,预加载器的广泛使用,使用户将所有注意力集中在加载动画上,忽略页面内容还在加载;

② 2007-2009年间,各类动画设计软件,以及「加载GIF生成器」的出现,使设计师更加轻松灵活地将动画运用到网站上。

③ 2010年开始,加载动画逐渐偏向於web端设计,设计师也愿意将更多精力花费到加载动画上,,使优质的加载动画争相出现。

* 加载动画的特色

为了更好地向用户提供界面反馈需求,APP设计和网站设计在应用加载动画时,应遵循以下原则:

1. 减少加载动画时间

加载动画设计得再好,也只是「缓兵之计」。不想用户因加载时间太长而失去耐性,提高APP或网站的运行速度,减少用户的等待时间,才能有效留住用户。

2.给出加载时间进度

给用户大概的加载时间,或直接显示加载进度等,无形中给用户设定了心中的预期,减少心理焦虑。

网页设计和APP设计的技巧:加载动画设计需考虑哪些内容?

网页设计和APP设计的技巧

3.给出用户需要等待的原因

无论加载动画设计得多好,其实用户并不理解其存在的必要。巧妙地告知用户需要等待原因,以及加载时程序在做什麽,会让用户更愿意等待这短暂的加载过程。

网页设计和APP设计的技巧:加载动画设计需考虑哪些内容?

网页设计和APP设计的技巧

4.让等待过程更有趣

向用户分享有趣的加载动画,或提供新颖的想法等,都能让用户在等待过程中,成功被分散注意力,减少焦虑感。

网页设计和APP设计的技巧:加载动画设计需考虑哪些内容?

网页设计和APP设计的技巧

5.传递公司品牌形象

加载动画与品牌形象保持一致,能加深用户对品牌的印象,提升品牌和产品的知名度。

网页设计和APP设计的技巧:加载动画设计需考虑哪些内容?

网页设计和APP设计的技巧

* 不可忽视的设计细节

很多人都以为加载动画只是UI设计中一个很小的细节,但对APP设计和网站设计而言,它是不可忽视的设计细节。同样,加载动画的各种形式和变化,也给用户带来不同的感受。

1. 进度条-用户直观知道加载时长

网页设计和APP设计的技巧:加载动画设计需考虑哪些内容?

网页设计和APP设计的技巧

进度条的作用,其实就是明确用户所需的等待时长,并向用户展示目前的进展状态。进度条可以是直观显示剩余时间或百分比,同样也可以利用其他方式,让用户清晰感觉到目前的加载进度。

2. 无限循环-告知用户,APP仍在工作

网页设计和APP设计的技巧:加载动画设计需考虑哪些内容?

网页设计和APP设计的技巧

使用具有创意的无限循环加载动画,能缓解用户的焦虑感,同时能让用户更清晰地了解页面加载的原因。若循环动画与产品、业务等结合,对树立品牌形象有不错的作用。

3. 骨骼图-提供加载页面的渐进过程

网页设计和APP设计的技巧:加载动画设计需考虑哪些内容?

网页设计和APP设计的技巧

其实骨骼图的作用,与页面占位符的区别不大,先加载APP或网站的框架,然後逐步加载图片、文本以及其他内容,这能给用户一种错觉-网站即将加载完成,为用户提供更好的加载体验。

加载动画虽然能缓解用户因等待而出现的焦虑感,但将更多厚望给予在加载动画中,显然是不能解决根本问题,因为要让用户愿意使用其根本原因仍然是产品的本身。

本文来自投稿,不代表重蔚自留地立场,如若转载,请注明出处https://www.cwhello.com/43158.html

如有侵犯您的合法权益请发邮件951076433@qq.com联系删除

(0)
InspirrInspirr订阅用户
上一篇 2022年6月25日 23:41
下一篇 2022年6月25日 23:41

相关推荐

  • 位置与对比,轻松提升按钮易点击性  

    位置 对於网页设计来说,按钮应该放置在哪个位置必须重视。因为按钮能够有效地提升用户的转化率,按钮元素放置在页面哪个位置能够让用户更有点击的欲望呢? 一般来说,按钮的位置应当按照网页当中的信息内容来进行…

    2022年6月25日
    0112
  • 小编分享化妆品网页设计教程。

    在当今的数字化时代,网页设计已经成为了企业和个人展示自己的重要方式,无论是简单的网页设计模板还是复杂的化妆品网页设计模板,都需要设计师们精心制作,以吸引用户的注意力并传达出正确的信息。 我们来看看简单…

    2024年6月28日
    01
  • 在南宁如何挑选网页设计公司?

    随着互联网的发展,越来越多的公司加入到了电子商务的潮流当中,网站作为互联网宣传的重要载体,越来越受到企业的重视。网页设计的关键就是挑选一家好的网页设计公司,可以这样说,挑选到了一家好的网页设计公司您…

    2019年3月31日
    0255
  • 如何让用户拥有更好的沉浸体验

    及时解决问题和困惑 任何的网站都需要肩负着解决用户问题与困惑的使命,不然网站用来呈现什麽?所以,网站建设的时候,一定要保证每个环节与交互能够清晰引导用户进行浏览和操作。 沟通方式要简洁通俗 所谓的沟通,…

    2022年6月11日
    0128
  • 导航设计3步曲:高手帮你快速掌握导航设计。

    导航系统的设计依赖于信息的组织结构,受制于媒介的交互特性,还需要符合用户的习惯和目标,所以我将从信息结构、导航形式、导航路径优化 3 个方面为大家展开导航设计。1. 导航是什么?① 导航的起源与本质导航,英…

    2023年3月2日 SEO操作
    010
  • 系统弹窗设计的注意事项

    最常见的是评分类的系统弹窗类型,这类弹窗很容易被用户直接忽略,因为最容易影响用户体验: 1、不要在用户第一次注册登陆你的页面时,就立马弹出来。很明显,用户还没开始使用你产品界面,如何评价? 必须注意弹框…

    2022年6月25日
    0148
  • 动效网页设计如何取悦使用者?

      等待载入时给用户愉悦感 对於目前的页面设计来说,使用者总会在不同的情况之下不可避免地需要去面对载入过程。当你不能缩短载入过程的时候,应该努力让用户在这个等待过程中感觉到有趣。动效能够有效地降低…

    2022年6月25日
    0203
  • Inspirr Creation案例鉴赏:如何让网站更加有吸引力

    在如今的互联网移动时代,网站点击率的高低会直接反映网站所带来的访客数量,而提高访客数量也就意味着提高产品在网站的销售量。那麽,如何让网站更加有吸引力呢?下面,Inspirr Creation将从「kidsmebaby婴幼儿购物…

    2022年6月25日
    0114

联系我们

QQ:951076433

在线咨询:点击这里给我发消息邮件:951076433@qq.com工作时间:周一至周五,9:30-18:30,节假日休息