新手UI设计师必学的UI 交互动效制作原则

在APP和网页制作中加入UI 交互动效制作，已经是提高用户体验度的有效方式。这些技巧能使页面流畅，并且能够运行在流行的台式和移动设备的浏览器上，最重要的一点，它们还非常易于维护。

一、用非常清楚的方式隐藏内容：

很久以前，动画效果必须由 jquery 的 animate() 方法来处理，许多复杂的淡入淡出效果的处理是通过 display 的属性值切换实现的。太早显示，那么动画还没完成，但是太晚的话就会在页面上显示一片空白，总是需要回调函数去给执行完的动画擦屁股。CSS 中的 pointer-events 属性只是让元素失去了点击和交互的响应，就好像它们不存在一样。它能通过 CSS 控制显示或隐藏，不会打断动画也不会影响页面的渲染或可见性。

二、适当增加切换延时能够更简单地编排动作

动画的编排非常重要，同时也会做大量的试验和测试才能恰如其分。然而，动画编排的代码并不会非常复杂。单从代码来看，你只需要关心状态的变化，而不用担心一堆时间节点的维持。

三、尽早并且经常地在移动设备上的测试。

大多数的网站都是在电脑上搭建的，并且最常用本机做测试。因此，移动端体验和动画性能就被次要考虑了。一些技术（比如 canvas）或者动画技术可能在移动端表现地并不好。然而，如果代码写得好优化也到位，移动端的体验甚至比电脑更加流畅。

不可否认使用FLASH制作的网站确实很有动感，但有利必有弊，它的加载速度相当慢，在移动端的表现很差，导致访客下降，这是我们不想看到的。为了解决这问题，很多网站已经使用HTML5、CSS3、JS、SVG来实现网站的交互以及动画效果。因此作为一名全栈UI设计师不仅要精通各种设计软件，同时更要具备一定的前端开发基础，唯有如此，才能让自己设计出的产品被更多的用户赏识。

想要视频链接的同学可以留言或私信，可免费分享全套视频学习链接！