学交互设计有前景吗

动效是这个扁平化时代，交互设计必然的一个出口。UI动效设计能让用户体验更加舒适顺畅，一直都非常受设计师欢迎。

现在扁平化来临的这几年我们不难发现，动效越来越深入人心，那些深受用户喜爱的产品都在把动效作为APP的表现形式之一。

动效设计并不只是为了修饰，他的重要性是在用户在遇到问题时候，动效能够用易于用户接受的方式帮助用户解决。能站在解决问题的立场上给我们提供一种新的方式。

动效可以表现APP的质量，并且可以提供和完善信息的关联形式，还可以与用户互动，产生共鸣

那我们聊聊关于动效设计这点事，图片较多，建议先马后看。

首先动效设计分为两种类型

1，MG动效类

MG动效类

MG动效在大多数交互设计里，都是充当了增加产品魅力值，增加趣味性的作用。

这类的小动效还可以帮助品牌在细节中流露出它的特性，还能表达应用的情绪和气质，在产品内部以及产品之间形成完整并且统一的操作体验。

2，交互动效

交互动效

我们可以看到动效在浏览器里面，非常有效的去引导用户进入下一个页面，并且把层次结构和空间关系在屏幕内外之间进行一个传达。

在触发一个动作之前，用户可以提前预知到接下来的反馈，并且可以从好的方面去分散用户的注意力。

动效设计的原则

我们先看一个在交互设计里面第一个明确动效表意的官方设计规范。

在谷歌的基础上进行了延伸和概括，可以总结出一个好的动效设计，需要具备四个条件：

快速反馈符合自然规律洞察其他元素明确视觉引导

1，快速反馈

天下武功，唯快不破。

快速反馈的指动效需要对操作快速做出反馈和响应。

快速反馈里，时间很重要，慢了用户会感到拖沓，快了用户又会感到不适。这里，推荐动效的持续时间在300到350毫秒之间，这个时间是比较舒服的。

超出这个时间就会给人的感受非常的慢，非常的迟钝。虽然慢状态下的用户能看到更多的细节和更细腻的过渡，但是这只是交互设计师的一厢情愿，用户只想以最快的速度完成自己在APP里面的任务。

正确案例：

反面案例：

2，符合自然规律

人们总会习惯把大自然里面看到的东西带入到电子屏幕世界，这就需要我们在做动效时候一定要符合自然运动规律。

自然界中的运动一般都会受到各种各样外界力量的影响，比如空气阻力，惯性，摩擦力等等。

没有任何物体会突然动起来或者突然停下来，通常都会有一段从动态到静止或者静止到动态的过渡过程，那么身为交互设计师为了遵循这个自然运动规律，就需要我们对动效加上一定的缓动。

缓动分为以下几种情况：

（1）缓入缓出

案例：

（2）缓入

一个元素从屏幕外进入屏幕，他一瞬间的加速发生在屏幕外边，你看不到他，他给人的感觉就是它从屏幕外边特别快速的进入。

用户也不在乎他从哪儿来，只会留意它最后去了哪里，像这样的曲线我们就称之为缓入曲线。

案例：

（3）缓出

相反的，缓出曲线用在元素退出屏幕的时候，他的加速是递增的，但是他的减速是一瞬间的，相同的，减速的一瞬间发生在屏幕外边我们也就不会再去留意。

案例：

（4）弧形运动

动效除了基本的缓动之外，还需要另一个概念：弧形运动。

为什么是弧线？流星划过是一条弧线，人挥手是一条弧线，风吹树枝的摇摆也是弧线，纯直线运动的物体是没有的，它或多或少都会受到这个力那个力的影响，所以我们在做动效的时候要加一些曲线运动。

案例：

总结：

当你做的动效符合自然规律后，界面里每一个元素在转场过渡中都考虑了不同重量会对外力做出的反馈后，你的动效才会看起来无比的顺滑又恰到好处。

3，洞察其他元素

下面这张图片表现了动效在转场过程中的元素变换。

当元素切换界面的时候，它会考虑与周围其他元素的关系，按照层次结构进行变化，解释这些元素从哪里来，到哪里去。

元素或者模块表面可以互相推开，在相同高度下的元素，一个元素展开就需要推开另一个元素或者模块来展现层级。

当元素上升到了不同的高度，就不需要再去推开周围的元素了。

4，明确视觉引导

（1）共享元素

在动效设计里有一个比较关键概念叫做共享元素。共享元素就是共同出现在相关联的两个页面中，上个界面到下个界面的切换过中，共享元素内容不发生变化。

如下如的App Store：

但是注意，共享元素一般在界面中有一到两个就足够了，太多会导致用户无法辨别哪个才是共享元素，不知道该跟着哪个。会产生干扰，得不偿失。

（2）交错元素

还有一种视觉引导的方式叫做交错元素，利用每一个元素出现的先后顺序来引导视线，核心理念是把视觉引导到一条直线上，单列的交错一般情况下从上往下最为合适，会比不自然的出现和同时出现更容易引导用户去做一些操作。

（3）交错网格

交错网格会复杂一些，适合场景有限，一般我们把网格当做一个整体，再把他们沿一个对角线依次展现出来，会比逐行处理更容易引导用户去做一些操作，单列交错或者网格交错的错帧时间一般建议是在20-25毫秒之间。

（4）提前预知

除了转场动画中的视觉引导之外，在转场之前也可以通过一定的反馈提前预知操作的结果，比如这里一个简单的卡片右滑，在不能滑动的情况下加上一定的阻力，表现他的不可滑动，相反当我们遇到可以滑动的项的时候可以让他显得更容易滑动。

插件分享

1，sketch 2 ae

这款插件是谷歌最近推出的一款插件，只需要简单的对 sketch 中的图层用插件做一个复制粘贴就能完成从 sketch 到 ae 的导入，并且支持 “组” 和 “组件” 的导入，以及对矢量图层的导入。

2，Trapcode

我们在 dribbble 上经常都能看到这样一些令人眼花缭乱的动效，像这样的动效大多数都是使用 Trapcode 插件制作的。功能及其强大，合理利用能做出非常炫酷和顺滑的效果。

3，Motion2

它主要用在 MG 动效领域，功能全面且十分实用。

重点推荐三个功能：

1，调节缓动

2，快速定位中心点

3，批量复制关键帧

AE 的操作虽然相当复杂，但是有了这款插件之后，就能大大提高我们的效率。

4，Flow

我们在 AE 里调好的缓动，在和开发哥哥对接的时候他们是很头大的，因为开发程序里读取的是贝塞尔曲线，而非速度图表。那么针对这种情况，flow这款插件，提供了25种可以直接给到开发的曲线类型。还可以导出css缓动代码，帮助团队完成缓动复用。

以上的分享就到这里。

关于交互设计入门书籍，楼上有很多答主的推荐都不错，不过交互设计作为国内的一个新兴专业，未接触过的人在学习初期容易混淆很多专业概念，在自学过程中还要花费时间整理知识点。下面小编就简单梳理一下交互“入门”阶段的一些基本定义与常见的项目表现形式，希望能帮助题主更快的进入学习状态：

一、交互设计是什么?

各个百科上对交互设计都有非常明确的定义，但对于没有专业基础的同学们来说，这些定义还是略显弯弯绕绕，小编简单解释一下：交互设计，其实就像人与人之间的日常交流一样，人与系统之间也是“有问有答”，具有互动性的，而交互设计就是协调人与系统之间的“交流”方式。凡是可以通过五感来达成的信息传递、观念传递、情感传递的互动行为都在“交流”的范围之内。

从具体表现形式上来说，包括但不限于手机APP、传统网站、可穿戴设备以及新兴的VR，各种与非电子类产品的交互关系也属于交互设计的范围。

这样一讲，交互设计的范围似乎太过宽泛，但其实简单来说，交互设计大致可以分为三个基础模块：

1. 美学——用户界面设计(User Interface Design)

2. 心理学——用户体验设计(User Experience Design)

3. 计算机&工程学——人机交互设计(Human-Computer Interaction)

在这里我们先说UI设计(用户界面设计)，大多人似乎都知道UI设计是什么。但其实，UI放在交互系统内，比如众所周知的app、网站，它可以成为交互设计展现的一种媒介，是交互设计中一个难以或缺的组成部分。严格来说，UI设计并不属于交互设计，它实则应该归类于Graphic Design--平面设计。

而HCI(人机交互设计)，与VR、AR，以及大数据等次时代的前沿科技相关，未来发展前景光明。但需要强调的是，HCI绝大部分学校是按理工科教授，因为它主要研究的是人机如何交互，而不是人机为什么交互，为谁交互，以及交互究竟有何意义。简言之，就是HCI研究人机交互的技术，更简言之，多数是在搞程序、编代码。

最后，重点说一下涉及到心理学的UX设计(用户体验设计)。在交互作品集的创作中，UX是尤为关键和重要的，主要原因在于，相较国内对于学术研究和视觉审美的培养，国外院校更看重的是设计出来的物品是否真正解决了用户的需求。

这一点就要求了设计者必须换位思考，设身处地的站在用户的角度上去考虑设计的每一步。这也应证了交互设计的本质——交互设计师设计出来的是用户想要的东西，而不是设计师要做用户想要的东西。

二、交互项目常见表现形式

1. APP、网页

交互设计中，最简单的就是单一化的APP或网页项目，几乎每一个同学在学习中都会涉及到。而且APP与网页项目的制作过程与方法相似程度高达90%，同学们在创作项目初期可以先尝试这类项目练手，尽快熟悉作品集的创作流程。

2. 复合APP制作

比上述提到的APP和网页稍复杂的是复合APP，比如产品+APP、传感+APP、装置+APP、手表+APP 、网页+APP等等，简单说，不仅仅是以APP为载体类型的应用都可以称之为复合App。主要也是为了解决形式单一化，以及丰富项目内容创造更多设计点。如果思考维度多元化，专业领域深入探究，也可以发展为一个服务设计项目。

3. 交互装置制作

装置在交互设计中属于较为复杂的项目，因为技术方面涉及到了电子化编程和电路板连接传感器等内容，呈现效果体现了交互意识、审美意识以及代码意识。内容方面，交互装置更多是从产品原型开发去研究。由于涉及到代码问题，在创作这类项目之前，专业技能及代码知识都需要系统的了解。

4. 游戏制作(普通→AR→VR)

在交互游戏制作过程当中，很多同学会遇到不知道制作流程，不明晰VR和AR是什么概念，或许也会困惑为何我们把AR、VR列入游戏制作等种种问题。事实上，VR、AR也都需要通过游戏引擎搭建，所以从本质上来看，它们都是游戏。

动效是这个扁平化时代，交互设计必然的一个出口。UI动效设计能让用户体验更加舒适顺畅，一直都非常受设计师欢迎。

现在扁平化来临的这几年我们不难发现，动效越来越深入人心，那些深受用户喜爱的产品都在把动效作为APP的表现形式之一。

动效设计并不只是为了修饰，他的重要性是在用户在遇到问题时候，动效能够用易于用户接受的方式帮助用户解决。能站在解决问题的立场上给我们提供一种新的方式。

动效可以表现APP的质量，并且可以提供和完善信息的关联形式，还可以与用户互动，产生共鸣

那我们聊聊关于动效设计这点事，图片较多，建议先马后看。

首先动效设计分为两种类型

1，MG动效类

MG动效类

MG动效在大多数交互设计里，都是充当了增加产品魅力值，增加趣味性的作用。

这类的小动效还可以帮助品牌在细节中流露出它的特性，还能表达应用的情绪和气质，在产品内部以及产品之间形成完整并且统一的操作体验。

2，交互动效

交互动效

我们可以看到动效在浏览器里面，非常有效的去引导用户进入下一个页面，并且把层次结构和空间关系在屏幕内外之间进行一个传达。

在触发一个动作之前，用户可以提前预知到接下来的反馈，并且可以从好的方面去分散用户的注意力。

动效设计的原则

我们先看一个在交互设计里面第一个明确动效表意的官方设计规范。

在谷歌的基础上进行了延伸和概括，可以总结出一个好的动效设计，需要具备四个条件：

快速反馈符合自然规律洞察其他元素明确视觉引导

1，快速反馈

天下武功，唯快不破。

快速反馈的指动效需要对操作快速做出反馈和响应。

快速反馈里，时间很重要，慢了用户会感到拖沓，快了用户又会感到不适。这里，推荐动效的持续时间在300到350毫秒之间，这个时间是比较舒服的。

超出这个时间就会给人的感受非常的慢，非常的迟钝。虽然慢状态下的用户能看到更多的细节和更细腻的过渡，但是这只是交互设计师的一厢情愿，用户只想以最快的速度完成自己在APP里面的任务。

正确案例：

反面案例：

2，符合自然规律

人们总会习惯把大自然里面看到的东西带入到电子屏幕世界，这就需要我们在做动效时候一定要符合自然运动规律。

自然界中的运动一般都会受到各种各样外界力量的影响，比如空气阻力，惯性，摩擦力等等。

没有任何物体会突然动起来或者突然停下来，通常都会有一段从动态到静止或者静止到动态的过渡过程，那么身为交互设计师为了遵循这个自然运动规律，就需要我们对动效加上一定的缓动。

缓动分为以下几种情况：

（1）缓入缓出

案例：

（2）缓入

一个元素从屏幕外进入屏幕，他一瞬间的加速发生在屏幕外边，你看不到他，他给人的感觉就是它从屏幕外边特别快速的进入。

用户也不在乎他从哪儿来，只会留意它最后去了哪里，像这样的曲线我们就称之为缓入曲线。

案例：

（3）缓出

相反的，缓出曲线用在元素退出屏幕的时候，他的加速是递增的，但是他的减速是一瞬间的，相同的，减速的一瞬间发生在屏幕外边我们也就不会再去留意。

案例：

（4）弧形运动

动效除了基本的缓动之外，还需要另一个概念：弧形运动。

为什么是弧线？流星划过是一条弧线，人挥手是一条弧线，风吹树枝的摇摆也是弧线，纯直线运动的物体是没有的，它或多或少都会受到这个力那个力的影响，所以我们在做动效的时候要加一些曲线运动。

案例：

总结：

当你做的动效符合自然规律后，界面里每一个元素在转场过渡中都考虑了不同重量会对外力做出的反馈后，你的动效才会看起来无比的顺滑又恰到好处。

3，洞察其他元素

下面这张图片表现了动效在转场过程中的元素变换。

当元素切换界面的时候，它会考虑与周围其他元素的关系，按照层次结构进行变化，解释这些元素从哪里来，到哪里去。

元素或者模块表面可以互相推开，在相同高度下的元素，一个元素展开就需要推开另一个元素或者模块来展现层级。

当元素上升到了不同的高度，就不需要再去推开周围的元素了。

4，明确视觉引导

（1）共享元素

在动效设计里有一个比较关键概念叫做共享元素。共享元素就是共同出现在相关联的两个页面中，上个界面到下个界面的切换过中，共享元素内容不发生变化。

如下如的App Store：

但是注意，共享元素一般在界面中有一到两个就足够了，太多会导致用户无法辨别哪个才是共享元素，不知道该跟着哪个。会产生干扰，得不偿失。

（2）交错元素

还有一种视觉引导的方式叫做交错元素，利用每一个元素出现的先后顺序来引导视线，核心理念是把视觉引导到一条直线上，单列的交错一般情况下从上往下最为合适，会比不自然的出现和同时出现更容易引导用户去做一些操作。

（3）交错网格

交错网格会复杂一些，适合场景有限，一般我们把网格当做一个整体，再把他们沿一个对角线依次展现出来，会比逐行处理更容易引导用户去做一些操作，单列交错或者网格交错的错帧时间一般建议是在20-25毫秒之间。

（4）提前预知

除了转场动画中的视觉引导之外，在转场之前也可以通过一定的反馈提前预知操作的结果，比如这里一个简单的卡片右滑，在不能滑动的情况下加上一定的阻力，表现他的不可滑动，相反当我们遇到可以滑动的项的时候可以让他显得更容易滑动。

插件分享

1，sketch 2 ae

这款插件是谷歌最近推出的一款插件，只需要简单的对 sketch 中的图层用插件做一个复制粘贴就能完成从 sketch 到 ae 的导入，并且支持 “组” 和 “组件” 的导入，以及对矢量图层的导入。

2，Trapcode

我们在 dribbble 上经常都能看到这样一些令人眼花缭乱的动效，像这样的动效大多数都是使用 Trapcode 插件制作的。功能及其强大，合理利用能做出非常炫酷和顺滑的效果。

3，Motion2

它主要用在 MG 动效领域，功能全面且十分实用。

重点推荐三个功能：

1，调节缓动

2，快速定位中心点

3，批量复制关键帧

AE 的操作虽然相当复杂，但是有了这款插件之后，就能大大提高我们的效率。

4，Flow

我们在 AE 里调好的缓动，在和开发哥哥对接的时候他们是很头大的，因为开发程序里读取的是贝塞尔曲线，而非速度图表。那么针对这种情况，flow这款插件，提供了25种可以直接给到开发的曲线类型。还可以导出css缓动代码，帮助团队完成缓动复用。

以上的分享就到这里。

关于交互设计入门书籍，楼上有很多答主的推荐都不错，不过交互设计作为国内的一个新兴专业，未接触过的人在学习初期容易混淆很多专业概念，在自学过程中还要花费时间整理知识点。下面小编就简单梳理一下交互“入门”阶段的一些基本定义与常见的项目表现形式，希望能帮助题主更快的进入学习状态：

一、交互设计是什么?

各个百科上对交互设计都有非常明确的定义，但对于没有专业基础的同学们来说，这些定义还是略显弯弯绕绕，小编简单解释一下：交互设计，其实就像人与人之间的日常交流一样，人与系统之间也是“有问有答”，具有互动性的，而交互设计就是协调人与系统之间的“交流”方式。凡是可以通过五感来达成的信息传递、观念传递、情感传递的互动行为都在“交流”的范围之内。

从具体表现形式上来说，包括但不限于手机APP、传统网站、可穿戴设备以及新兴的VR，各种与非电子类产品的交互关系也属于交互设计的范围。

这样一讲，交互设计的范围似乎太过宽泛，但其实简单来说，交互设计大致可以分为三个基础模块：

1. 美学——用户界面设计(User Interface Design)

2. 心理学——用户体验设计(User Experience Design)

3. 计算机&工程学——人机交互设计(Human-Computer Interaction)

在这里我们先说UI设计(用户界面设计)，大多人似乎都知道UI设计是什么。但其实，UI放在交互系统内，比如众所周知的app、网站，它可以成为交互设计展现的一种媒介，是交互设计中一个难以或缺的组成部分。严格来说，UI设计并不属于交互设计，它实则应该归类于Graphic Design--平面设计。

而HCI(人机交互设计)，与VR、AR，以及大数据等次时代的前沿科技相关，未来发展前景光明。但需要强调的是，HCI绝大部分学校是按理工科教授，因为它主要研究的是人机如何交互，而不是人机为什么交互，为谁交互，以及交互究竟有何意义。简言之，就是HCI研究人机交互的技术，更简言之，多数是在搞程序、编代码。

最后，重点说一下涉及到心理学的UX设计(用户体验设计)。在交互作品集的创作中，UX是尤为关键和重要的，主要原因在于，相较国内对于学术研究和视觉审美的培养，国外院校更看重的是设计出来的物品是否真正解决了用户的需求。

这一点就要求了设计者必须换位思考，设身处地的站在用户的角度上去考虑设计的每一步。这也应证了交互设计的本质——交互设计师设计出来的是用户想要的东西，而不是设计师要做用户想要的东西。

二、交互项目常见表现形式

1. APP、网页

交互设计中，最简单的就是单一化的APP或网页项目，几乎每一个同学在学习中都会涉及到。而且APP与网页项目的制作过程与方法相似程度高达90%，同学们在创作项目初期可以先尝试这类项目练手，尽快熟悉作品集的创作流程。

2. 复合APP制作

比上述提到的APP和网页稍复杂的是复合APP，比如产品+APP、传感+APP、装置+APP、手表+APP 、网页+APP等等，简单说，不仅仅是以APP为载体类型的应用都可以称之为复合App。主要也是为了解决形式单一化，以及丰富项目内容创造更多设计点。如果思考维度多元化，专业领域深入探究，也可以发展为一个服务设计项目。

3. 交互装置制作

装置在交互设计中属于较为复杂的项目，因为技术方面涉及到了电子化编程和电路板连接传感器等内容，呈现效果体现了交互意识、审美意识以及代码意识。内容方面，交互装置更多是从产品原型开发去研究。由于涉及到代码问题，在创作这类项目之前，专业技能及代码知识都需要系统的了解。

4. 游戏制作(普通→AR→VR)

在交互游戏制作过程当中，很多同学会遇到不知道制作流程，不明晰VR和AR是什么概念，或许也会困惑为何我们把AR、VR列入游戏制作等种种问题。事实上，VR、AR也都需要通过游戏引擎搭建，所以从本质上来看，它们都是游戏。