产品经理：掌握动效设计！让你的设计富有未来时尚科技感（上）

为何有的产品、服务特别受欢迎？

是因为这些产品、服务在内容、外观、设计、可用性、功能等方面具有无可匹敌的优势。其实，所有的这些层面都属于 交互设计 的细节，其中一个关键点便是动效。

本文将介绍几种常见的动效模式 （用GIF图演示）， 分析 一下为何这些简单的设计模式在实际应用中能够奏效。

当我们设计数码产品时，我们一般用PS或者Sketch这种设计软件来进行设计。

了解设计的人明白这样一个道理：设计不光只是视觉表达。设计也不应该是静态的。乔布斯说过这样一句话：

设计并非外观怎样，感觉如何。核心在于，它是怎样工作的。

影响用户对产品的体验与印象的因素有很多，交互在其中扮演着关键性角色。我们不能再简单的把用户界面当成一种静态界面而设计。我们应该顺应互联网动态的本质，打造更加动态的图形用户界面。

好了，废话不多说，我们来看看，什么叫做更智能的交互、更精致的动效。看看这些设计模式是怎样提高 用户体验 的。

动效滚动

超链接是互联网的双刃剑，当你点击链接时，你可以在互联网中任意遨游，随心所欲。

可是过度自由好吗？不见得，比方说你在浏览一款精美的产品页面，然后你点击了一下页面中的链接，突然导入了一款令人毛骨悚然的木偶商店页面。这就是超链接的弊端，有时候的页面转换太突然，缺少过度，让用户一时不能接受。

我们可以看看书籍的 用户体验 ：故事发展一般是线性的，每一章都和上文有所联系。想要阅读第二章，必须先阅读第一章，以便大致了解书中的环境与人物关系。如果你”跳章”阅读，不可避免的会错过一些关键剧情，因此无法理解有些内容。

在网页设计中，同理，尤其是那种内容比较大，页面比较长得网站，这种情况经常无意识的发生：用户会错过之前的某些关键内容，而且又缺少提示，因此很难理解当前内容，通过添加动效滚动，可以修正这一问题。

再来和这种设计比较一下：

第一种动效，锚链接的”名称”会有从左向右 移动 的行为。这样进行”跳章”时，用户便能做好心理准备。因为从”Home”移动到了”Contact”，用户便能了解，从主页转到了联系方式页面。而如果突然转变，毫无过度的动效，用户很难理解发生了什么。

注意：界面的突然改变会让用户难以适应，千万不要这么设计这不符合用户的预期。要满足用户的预期，同时合理的引导。

状态切换

正如上面提到的那样，突然改变，毫无过渡，这样的局面用户是无法接受的，我们需要让界面动态一点，达成圆滑的过度。动效能够帮助用户理解界面之间的转换。我们可以字面的想一下，突然往往不自然，因为太快了，而且现实世界中万物的运转也都是缓慢、协调、自然的，很少有突兀的改变。我们再来看看切换菜单。这个”加号”有效的引起了行为召唤，用户会忍不住点击，点击后便侧拉出另外一个界面。这时加号会旋转45度，变成”叉号”，再点一下便回到原页面。很协调的设计，也符合用户显示生活中的预期：加号是添加，叉号是删除。

这种简单的过度，需要图标承载更多的意义。设计师首先需要掌握用户心理，知晓用户的预期，然后选择合适的图标，在细节上狠下功夫。结果呢？看看上面这个小动图，这种切换模式非常的友好，而且让用户对信息层级有了更深刻的认识。同时，图标能够有效的引导用户操作。

注意：你的页面元素在各个状态下都要易于理解。

下拉填表、评论动效

很多网站的填表和评论设计的并不好。为何？因为有时候你只想评论，结果跳转至其他页面，填写了一大堆不相干的个人信息后才能评论。非常烦人。

为了鼓励用户评论，增加网站的互动性，我们可以设计一些下拉评论动效。这样用户不用切换界面，而且只需填写最基本的个人信息即可。可以看看下面这个New York Times的网站：

但其实我们可以更进一步，这种设计还有个不便之处：用户若想评论，还需要拉到页面最低端进行评论。应该满足用户随时随地评论的需求。可通过下面的动效实现。

可以把这个评论域固定在顶部，然后根据 用户需求 ，选择是否动效显示。

这样，就能减少评论时的界面繁杂感，让人感觉你是诚心诚意邀请用户评论。而第一种方法需要拉到页底，加之惯例是由上到下自动载入最新评论，如果一篇文章的评论很多，用户若想评论，必定要经历痛苦的翻页。这就是这个办法解决的问题。

注意： 有些UI组件可以简化成最基本的形式，当用户需要时通过动效来进行拓展。