进步的车轮正在改变我们对“新”或“旧”的看法，用户可以很容易地蔑视几个月前他们还喜欢的网站和应用程序。但技术每关上一扇门，就会打开一扇新门。

下面我们收集了一些用户正在使用的现代IxD技术。有些是真正的新想法，而另一些只是旧想法的新想法。无论哪种方式，它们都能帮助你走在曲线的前面，以及进步的车轮上。

1. 动画和过渡

说到交互设计，最流行的概念之一是动画和动画效果。动画可以包括任何东西，从一个很酷的悬停状态效果到在背景中播放的全屏动画。

动画在交互设计中可能并不新鲜，但它们的流行得益于HTML5、Javascript和CSS的发展。虽然在Flash时代，它们曾被认为是一种审美奢侈品(“哇，图标会反弹!”)，但现在它们已成为一种功能必需品(“啊，图标除了会反弹什么都不做?!”)。

除了视觉吸引力，动画更重要的是让用户在内容状态之间转换。过渡是把所有动画效果粘在一起的胶水。用户如何从一个状态切换到下一个状态?每个不同的状态要求或告诉用户做什么?一个平滑的过渡允许动画以一种方式解开，沟通两点毫不费力。

如果使用得当，动画可以帮助用户了解如何与之交互，从而为设计提供上下文。(请记住，当涉及到交互时，一些较新的技术和交互模式可能会感到不舒服、不熟悉或随着时间的推移而发展。)动画也是一种聪明的策略，可以在较长的加载时间内分散用户的注意力，让他们沉浸在原本令人沮丧的体验中。

动画和动画转换对于某些设计框架来说是一个显而易见的解决方案。如交互设计最佳实践中所述，动画的五个主要功能包括:

动画的通知

透露的信息

强调的内容

折叠窗体和菜单

滚动，特别是对于单页的网站

当谈到过渡时，无缝的电影般的动画是错觉的关键。

用户习惯于电视式、高清晰度和像素完美的设计。迪士尼动画师弗兰克·托马斯和奥利·约翰斯顿提出的动画12条原则在今天仍然适用，并且应该成为未来设计所有动画技术和过渡的基础。

2. 交互式叙事(“Webgraphics”)

当社交媒体的分享使得信息图形作为一种视觉信息媒介的人气飙升时，“网络图形”是交互设计的对等物。尽管网络图形格式并没有出现在网络的每一个角落，但我们已经从这种媒介中学到了很多交互设计的经验。

虽然这两种图形格式遵循相同的理念，但网络图形使用HTML5、CSS3和jQuery等工具，通过颜色、类型和流畅的动画来传递交互体验。

Webgraphics是Venture Beat在2013年创造的一个术语，通常要求用户在访问整个故事的过程中执行一个操作。这个动作可以简单到点击，也可以是输入文字或触摸屏幕上的图像等请求。

网络图形的真正力量在于它们与用户路径的轻松集成。与信息图不同的是，你可以设计网络图来创建一个“站点中站点”的体验，让用户完全沉浸在其中，并提供相关的链接和表单，以实现更有说服力的转换。

例如，《斜坡上的安全》(上图)就是交互式网络图应有的样子。该网站结合了信息、地图、视频、事实和数字，以帮助用户了解冬季运动的危险，否则可能会感觉像一个无聊的讲座。

当然，游戏中并没有任何行动召唤或额外行动的微妙暗示，但这些都是可以实现的。例如，假设一个户外运动零售商创建了这个网站，作为季节性活动的一部分——您可以嵌入一些相关的潜在危险产品或链接到产品类别。

我们知道，不是每个人都有资源来构建一个独立的交互式信息图(无论是在他们的网站上还是作为一个独立的URL)，但你肯定会应用它的一些技术，使任何网站感觉更有沉浸感。

例如，滚动触发动画在交互式信息图中很常见，但也被用于像humanan(上图)这样的网站，以一种有趣而不引人注意的方式揭示其团队的事实。

奢侈时尚品牌House of Borel(上图)给人的感觉当然更像是一个互动故事，而不是一个传统的网站。你可以在这里看到交互式信息图的元素:滚动触发的视频，“展开”并引导你通过不同章节的体验，以及对视觉叙事的更多关注，而不是层次导航。对于一个优雅的品牌来说，这种处理方式当然是有道理的，因为它希望你在展示产品之前先感受它的生活方式。

3.微观相互作用

微互动是指完成一项任务的瞬间事件，比如iPhone发出的警报提醒用户。登录你的在线银行门户网站，甚至在Facebook等网站上点赞内容，这些都是定义体验设计细节的微互动。

作为一个网站和应用程序的用户，你可能每天参与数百个微交互，所有这些加起来都是一个有凝聚力的用户体验。微交互可以说是设计中最小的交互元素，但却是最重要的(事实上，FastCo design甚至称其为设计的未来)。

例如，如果你不能在几次点击中设置用户名和密码，或者你最喜欢的新闻网站的推送通知出现得太频繁，你会多快放弃一个网站。

无论是博客还是全球性的电子商务网站，这些小小的交互几乎为每个网站提供了各种各样的核心功能:

完成任务——这包括简单的操作，如登录、添加状态更新或设置警报。

连接元素——同步两个点可以在两个设备或网站之间创建微交互，无论是从设备间同步的多人游戏/应用程序，还是智能手机上的简单蓝牙耳机。

做出调整——对网站设置的任何改变(比如调低应用程序或音乐播放器的音量)以及相应的视觉(和音频)反馈都构成了一个微动作。其中一些是非常小的用户无需思考就能执行许多操作，这就是为什么微互动必须精心设计，以提供足够的反馈，而不会让人感觉受到干扰。

状态变化——关闭或打开一个网站或其中的功能，改变状态并完成一个小动作。

独特的数据交互——这指的是通过直接操作，如打开应用程序或使用定位工具查看网站，获得实时数据，如查看你所在地区的天气或交通状况。

一个动作启动了上面的每一个动作;用户在网站或应用程序中做一些事情来启动这个过程(即使它在最初的步骤之后继续)。这遵循了用户的行动号召模式，由界面决定的参与规则(游戏邦注:会发生什么以及如何发生)，用户的反馈(游戏邦注:是否有效)以及模式或循环(游戏邦注:行动只发生一次还是按照计划重复)。

当涉及到交互时，每一个微小的部分都是设计计划的一部分。想要了解更多关于微互动的信息，我们强烈推荐你去Dan Saffer的网站看看，他创造了这个术语。

4. 分层的影响

创造一个吸引人的互动体验并不是在你的网站设计中添加单一的效果。这是一项有计划的努力，需要分层设计技术和对用户流程和习惯的仔细思考。

通过结合视差、长滚动、背景视频等效果，你的设计在视觉上既吸引人又能吸引用户。诀窍是不要走极端——在用户交互的精细层次结构和混乱混乱之间有一条细微的界线。

下面，我们将考察三个站点，它们在分层效果方面做得很好，可以创造沉浸式的交互体验。

i. AIGA设计百年

设计百年纪念网站，旨在庆祝设计作为一种艺术形式的历史，使用了各种技术和趋势，从滚动动作到汉堡包菜单，再到用户提交的视觉效果。每个新屏幕都包含信息(向下滚动)、支持概念的动画以及移动到下一个元素的提示(无论是通过导航还是使用屏幕提示)。

ii.哪些座位设计师

Eventbrite的界面被各地的活动策划者用来销售门票，它为用户提供了非凡的工具，可以为特定场馆或活动创建定制座位表，这曾经是大型场馆独有的功能。只需在模板上单击几下，用户就可以轻松地创建自定义安排。

界面采用了近乎平坦的设计风格，明亮的色彩、简单的菜单和流畅的加载过渡。

iii. 索诺兰沙漠的山谷

该网站提供类似游戏的体验，用户输入特定信息，参与一场数字之旅。该网站使用标准的汉堡风格导航，同时使用惊人的动画和视频效果分层。主屏幕以极简风格的美学开始，但打开到宽屏视频体验。(你可以在这个网站上玩上几个小时。)

超越现在的思考

这些可能是今天的前沿实践，但这些突破性的技术还需要多久才能让用户翻白眼呢?

保持领先的最好方法之一就是超前思考。看看用户需求是如何发展的，我们可以自信地——但不能肯定地——预测未来什么会流行。

许多人认为可穿戴设备是交互设计的下一个“西部大开发”。当涉及到可穿戴交互时，设计可能会转向更微妙的触觉模式，可能会更不直观。手表的震动可能是首选的通知方式，而不是屏幕上的大图像或声音。

在所有媒体中，互动可能会变得更像电视，因为讲故事仍然是数字设计的核心方面。

当你总是想要确保设计能够帮助用户实现他们的目标时，用户的选择很可能会被呈现为网站更大叙述的一部分。这并不是一个适合每个网站的策略(例如，电子商务，银行)，但它肯定会在高度视觉化网站的内容流中发挥更重要的作用。随着视频背景作为一种常见的网页设计技术的出现，我们已经看到了这一点。作为一种视觉媒介，屏幕设备——电视、电脑和电话——之间的界线将变得更加模糊。

当我们想到网站时，交互设计主要是视觉的，但它将继续将视觉与环境因素结合起来。振动、声音和强制动作将变得更加普遍，特别是对于为移动或可穿戴设备设计的网站或应用程序等用户控制元素。

虽然许多未来规划只是猜测，但我们用户的基本面或多或少会保持不变。可以预见的是，用户总是喜欢互动和参与——唯一改变的是提供给他们这些的途径。

要了解更多关于掌握现代交互设计的艺术，请查看免费的第1册和第2册交互设计最佳实践。这本书包含了近200页的实用建议，以及几十个来自当今顶级公司的分析案例。