• 洞察 Insights
  • 商店 Store
  • 论坛 BBS [beta]


      All picture& design are licensed under the Creative Commons Attribution 3.0 license.

      Darksang copyright ©2015-2022 .

      This template doesn't support hiding the navigation bar.

      动效设计的6个原则

      6 principles of animation design

      · 设计 Design

      动效设计(微交互)是未来情感化设计的方向,这个在我的其他文章有所提及,这里详细展开一下我总结的几个动效设计师需要掌握的原则。

      记得你拿到IPhone初代机的兴奋么?(好像暴露年龄了 =))还记得开机的第一个Screen么?

      IPhone 初代机

      这里面就有一个当时的解锁屏幕的创新性动效,当然现在的解锁方式被生物科技所替代(面部识别,指纹解锁),但在当时,这个解锁方式是开创时代而且十分具有创新性的,即时放到现在也毫不逊色。

      Slide to Unlock,怀念下帮主Steve。

      这个不妨叫做可交互性动效,在拟物时代,这真的令人惊艳。

      动效我们可以总结以下6个方向:

      1. 可交互动效
        引诱用户完成某个操作
         
      2. 动态平面设计动效
        动态壁纸等让画面更具生动感,气氛类动效渲染一种特定的氛围归类于此
         
      3. 情感化设计动效
        对用户的操作进行情绪反馈,比如加入购物车,Loading,预加载等
         
      4. 人机对话类动效
        用动效简介目前程序进行哪一步的操作,比如车辆检查的HMI动效,同时也是在情绪上安抚用户的等待时的焦虑情绪,因为主要目的是将抽象的检查形象化展示出来,所以归类为人机对话类,不准确请指正
         
      5. 转场类动效
        指用户从一个界面切换到另外一个界面时的页面转换类动效,IPhone内置了很多转场类动效,调用也很方便
         
      6. 其他类动效
        dribbble很多很漂亮而且很前卫的动效归类于此,例如VR类这些

      那么这么多方向的动效,我们在进行动效设计时应该掌握什么原则?

      抓住眼球

      如果我们在做动效的时候,不能抓住眼球,我们会发现他基本上是无用的,因为我们动效本来就是UI设计的提亮,动效应该是整个视觉设计的亮点。

      简单有效

      简短有力,快速交代问题(特指在UI里面的动效,平面设计类动效不受限制)。这里没有一个特定的时间限制,但给出的建议是:

      • 尽量简洁
      • 尽量一个运动原则
      • 尽量时长压缩到能看懂即可。

      转场类特效要有仪式感

      转场其实就是一个弃旧用新的过程,转场一定是一个阶段的结束,一个新阶段的开始,所以转场类特效一般具有仪式感的特性。

      预言

      What‘s next?

      在等待过程中,用户对未知会充满期待感,甚至会有迷惑或者恐惧感,动效可以快速缓和情绪,消除不安感,让用户知道下一步操作,当然是很重要的。

      现实模拟

      别忘了我们的用户生活在现实客观环境里,结合使用情景对现实进行模拟,让用户快速进入角色。完成购买或者促销任务。
       

      亦即在线上进行线下行为的模拟。

      统一运动规律

      这个是对第二条原则的深化,同一软件所有运动规律尽量统一,这样用户不会在繁杂的跳动元素里迷路。

      以上是我对动效的一些原则总结,还是那句话,实时更新,如果你有所添加或修正,可以在线联系我,首页列举了我所有的联系方式,当然也可以直接给我写信。

      本来还想加一些案例,但现在的动效设计其实大部分在探索和成熟期,就不放出来了,如果想看,可以去dribbble或者类似设计分享网站咯!bye!

      订阅
      上一篇
      一款即时获取任何MAC软件快捷键的工具
      下一篇
      UX设计方法总结(第一季)
       回到主页
      所有文章
      ×

      还剩一步!

      确认邮件已发至你的邮箱。 请点击邮件中的确认链接,完成订阅。

      好的

      0