如何用好动效元素?

如何用好动效元素?

 

在页面当中的动效要设计得自然,一般需要通过形变、运动时间及缓动曲线来实现。形变表现的是动效元素自身的质地,运动时间及缓动曲线则是表现动效元素周围的环境。

因此,要如何设置缓动曲线以及时间,让动效设计得顺畅而自然,不妨参考以下的建议:

1.linear曲线(匀速运动)除了一些特殊场景如载入、星空背景外,其实很少被使用。

2.easeIn(先缓後快)页面中的场景适用也不多,主要适用於掉落、toWhere的场景当中使用。

3.easeInOut(头尾缓、中间快)通常在需要轮转切换的场景中使用,这类动效元素的触发物件与运动物件并不是同一个元素。

4.easeOut(先快後缓)最常见的效果,其触发物件与运动物件往往是同一个。主要用在展开、收起、出现、移动等动画中。因此,当不知道要用哪个缓动曲线时,就适用这个吧。

5.曲度主要表现动效元素运动过程的力的大小,曲度越大,启示力或阻力越大。

6.回弹则表现的是动效元素运动的剧烈程度及质地。

7.动效元素运动时间一般需要控制在0.3s-0.8s之间,过长的时间会让用户感觉拖遝,不自然。

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

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

(0)
Inspirr的头像Inspirr订阅用户
上一篇 2022年6月25日
下一篇 2022年6月25日

相关推荐

  • 网页设计很重要,如何让网站更加成功?

    网页设计很重要,特别是对于企业的运营很重要。因为现在企业要想得到更多的销售量,那么就必须抓紧网络营销市场,利用网页进行企业宣传。那么大家知道如何进行网页设计吗?下面那就必须注意以下几个方面。 第一点便…

    2019年8月23日
    0175
  • 操作弹窗类型的设计原则

    操作弹窗多出现在较多用户容易操作失误的页面当中,以此给予提示和引导。但弹窗无论怎样,都很容易造成用户的反感,因为会打断用户目前的操作流程,给用户造成体验上的不愉悦。 频率上的注意;虽然是弹出为了引导与…

    2022年6月25日
    0123
  • 从桌面组件到灵动岛,深度回顾「小组件设计」的前世今生。

    今天我们以“小组件”作为一条线,好好聊聊 PC、移动端这么多件和提效相关的动作。一、起源于 90 年代1. 开端:苹果公司的“桌面装饰”这事还得从 Mac 说起,当 Mac 还被称为 Macintosh 时,初始团队工程师 Andy Hertzf…

    2023年3月2日 SEO操作
    025
  • 网页进度条的设计特点

    説明在使用者明确页面当中的程序正在做什麽,是否属於正常; 説明使用者明确当前的页面状态; 为用户的後续操作提供了充足的支援; 有明确的进程概念,和时间因素关联比较紧密; 进度条不仅仅是为了缓解等待的焦虑…

    2022年6月25日
    0123
  • 5000字干货!超详细的交互动效设计指南 。

    前言当我们提及"动效设计"这一词,第一印象往往是那一类炫酷的极具视觉表现力的动效,而有一类动效,它们如春风细雨般融入了用户交互过程的点滴之中,为打造符合用户心智的流畅体验默默做着贡献,它们就…

    2023年3月7日 SEO操作
    01
  • 正解网站页面设计应赋予可观性、可读性、美观性三大原则。

    为了让用户更容易获取信息,网页布局设计需要使图片和文本相互配合,让视觉图片营造一种氛围,优先将一般信息和感觉传递给用户,而文本则提供详细准确的内容,以确保信息准确无误。可用。文本也需要尽可能容易理解…

    2023年2月17日
    011
  • 什麽是方块堆叠式页面布局?

    页面设计到了布局的流程,要有新创意,不妨考虑下如今正在疯狂流行的方块堆叠式布局! 首先,要了解这种布局方式最适合使用在图片和视频页面当中,无论是APP的页面设计,还是桌面端的页面设计,这种排版方式越来越…

    2022年6月12日
    0219
  • 五大可用性原则

    1、统一原则 网页设计当中使用的风格、色彩、用词、功能、以及操作需要保持整体的一致性。能够有效降低用户的认知、摸索和记忆的成本。 2、防错原则 通过网页的优化、重组或特别安排,最大程度上减少用户的犯错。 3…

    2022年6月25日
    0154

联系我们

QQ:951076433

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