broken image

  • 洞察 Insights
  • 商店 Store


      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么?

      broken image

      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设计方法总结(第一季)
       回到主页
      Cookie的使用
      我们使用cookie来改善浏览体验、保证安全性和数据收集。一旦点击接受,就表示你接受这些用于广告和分析的cookie。你可以随时更改你的cookie设置。 了解更多
      全部接受
      设置
      全部拒绝
      Cookie设置
      必要的Cookies
      这些cookies支持诸如安全性、网络管理和可访问性等核心功能。这些cookies无法关闭。
      分析性Cookies
      这些cookies帮助我们更好地了解访问者与我们网站的互动情况,并帮助我们发现错误。
      首选项Cookies
      这些cookies允许网站记住你的选择,以提供更好的功能和个性化支持。
      保存