有些网站无论在内容，可用性，设计或者功能等方面胜人一筹，其取胜之道在于交互和动效的细节上。在这里通过各种模型和大家分享一些案例，并分析为什么这些简单的方式能产生让人难忘的效果。
我们常常会用Photoshop和Sketch这一类软件来设计数字产品。大多数在这个行业工作过几年的人都应该知道设计不仅仅是视觉传达而已。尽管如此，还是有许多人在进行静态的设计。对于设计，乔布斯就说过这样的话：
“设计并非外观怎样，感觉如何。设计的是产品的工作原理。”
我们对产品的体验和印象是由综合因素影响的，其中交互起着根本性的作用。我们再也不能先从静态的角度考虑用户界面，然后再加入交互效果。相反，我们需要从一开始就考虑到互动，并把这个当作界面的天然属性。
让我们来看看一些小而美的交互实例，看看这些巧妙的动效是如何优雅地改善了用户体验。
动态滚动网页上的超链接既有好处又有缺点。当你点击一个链接，你无法预期会带你到怎样的页面，也许是一个产品的页面，也可能是一家令人毛骨悚然的沿街老木偶店面的网站。前后的关联是断开的。
阅读书籍的一个很棒的体验就是内容是线性的。书中每个章节是递进的。比如，你必须阅读第一章中的经济学入门来帮助你理解第二章。当你跳过一个章节，你很清楚你可能会遗漏一些信息，从而会缺乏对后续内容的理解。在网页上，尤其是在很长的网页上，这种现象常常无意识地发生。这时通过添加一个滚动的动效，就可以解决这个问题：
对比下这个效果：
对比下锚定链接的默认方式和动态方式，快速下滑到内容处不再是一种无意识的动作，这是一种决策。在 Hope Lies at 24 Frames Per Second的手机视图上有一个菜单按钮，点击后能回到页面顶部，但是没有任何的过渡动效。我花了不止一分钟才弄明白究竟发生了什么。
状态切换谨记：界面上任何突兀的变化会让用户感觉很难进行，别把他们搞得晕头转向；清晰的显示发生了什么事。
正如上个例子里我们所看到的，切换的过程能帮助用户了解界面的路径和指向。没有什么能比一个突发变化更让人感觉到不自然了，因为瞬变在现实世界中是不存在的。让我们来看看另一个例子：切换菜单。用户看到“＋”这个符号，会联想到添加内容或扩展元素。旋转45°后，加号变为一个叉叉，这个元素被广泛地理解为“关闭”：
这个简单的过渡，彻底改变了图标的含义。这样一个小小的细节意味着不必猜测接下来会发生什么，用户知道图标在两种状态下的含义。如果你问我，我觉得这样的切换是相当人性化的。此外，请注意加号的旋转和内容的出现是在同一方向，加强了信息的指向。
收缩表单和评论谨记：保证你的网站元素在每个状态下都易于理解。
许多博客和新闻网站的评论表单不是一个让人看着愉悦的组件。为什么呢？好吧，大部分还是不够友好的，对吧？当你准备发表评论时，你只是想开始输入评论。然而，一个典型的表单却要求你先提供其他的各种信息，这样多烦人。
为了激励人们参与评论，我们可以把表单折叠，并只显示最关键的元素：评论框。当用户点击了评论框，你可以相应地扩大表单。这种逐步披露的方式可以在纽约时报的测试版网站上找到一个实例：