×
新网 > 建站推广 > 正文

最全最好用的动效落地方法(上)

用户体验设计的发展日趋完善,优秀的动效是完善用户体验中不可或缺的一环,优秀的界面动态设计可以让产品的用户体验锦上添花……一般情况下,在沟通界面动效的过程中,工程师会希望设计师使用更具体的表达方式。这里所谓「具体」的意思是:接近代码。

  用户体验设计的发展日趋完善,优秀的动效是完善用户体验中不可或缺的一环,优秀的界面动态设计可以让产品的用户体验锦上添花……

最全最好用的动效落地方法(上)

  你会说,这些道理我都懂,但是动效做起来真的很麻烦啊。直接切入到大家常见的问题吧:

  一般情况下,在沟通界面动效的过程中,工程师会希望设计师使用更具体的表达方式。这里所谓「具体」的意思是:接近代码。然而同样的一套动效,在设计工具上和Web端上实现逻辑可能完全不一样。

  没有了精确的参数描述。设计师很难跟开发解释清楚要做一个什么样的动效。而只有简单的口头描述的话、开发做起来也很痛苦,导致最终开发效率低下。以至于知乎上出现了这样的问题:在APP的开发过程中,作为设计师,如何说服程序去实现动效?

  看到这里也许你会很抓狂。好消息是随着却越来越多优秀开源库的诞生,动效的实现也变得越来越简单。甚至以后设计师都不用说服工程师了,自己可以直接上手在端上实现动画了。举个例子Sanhttps://baidu.github.io/san/

  这个例子中卡片Hover动效的设计和开发都是我做的。

  

  好的动效要控制在0.3~0.5秒,本例中,菜单出现几乎花费了一秒。频繁打开菜单很容易引起人的疲倦,可以说是画蛇添足了。

  小结

  上篇就讲到这里,本篇里面我们了解了界面动效的价值:

  满足用户心理预期

  引导用户注意力

  情感化设计

  也接触到一下优秀的界面动效实例:

  通过动效暗示二维界面暗含的三维层级关系,及其暗含的操作逻辑。

  引导用户的注意力向界面重点元素。

  通过动态设计让情感化设计变得更生动。

  动效的视觉效果统一,控制数量,不滥用。

  在下篇中我会讲讲有哪些便捷的方式去实现这些优秀动效。其实我们平时看到的那些天花乱坠的效果,背后涉及到的设计参数非常简单,只有三个。敬请期待吧。

 

 

  • 相关专题

免责声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,也不承认相关法律责任。如果您发现本社区中有涉嫌抄袭的内容,请发送邮件至:operations@xinnet.com进行举报,并提供相关证据,一经查实,本站将立刻删除涉嫌侵权内容。

免费咨询获取折扣

Loading