温州网站制作：如何通过动画令人愉快地欺骗用户

没有动作，就没有互动。

当你关闭一个标签时，它会从屏幕上消失：在这个基本级别，运动提供即时反馈（这是至关重要的，因为视觉是我们的主导意识），但在更高级别，运动增加了一层人性和现实感。动画使界面感觉活跃并真正响应用户。

在过去，动画主要是基于Flash的网站的奢侈品，但现在几乎每个网站都使用CSS / Javascript / HTML5动画，从简单的滑块到更复杂的视差卷轴。温州网站制作

这不是一件坏事 - 除了看起来漂亮和令人愉悦的用户之外，动画还解决了界面中的许多功能问题。正如我们在交互设计最佳实践中所描述的那样，动画也创建了“通信器”，这些实体比文本描述和图像更完整，更简洁地传达某些想法。

让我们探讨一些平滑加载时间，简化转换以及检查迪士尼动画原理在数字交互设计中的应用的策略。

在加载期间分散用户的注意力

加载时间是我们超越技术能力的野心的副产品。虽然有些产品比其他产品受损（视频游戏，数据量很大的网站），但对于大多数数字产品来说，这是不可避免的情况。

但是当我们不能缩短线路时，我们当然可以让等待更加愉快。加载时间动画（一种静态动画）就是这样做的。

虽然动画无法解决问题，但它们肯定会减少等待的问题。

对于加载时间，“技巧”是超出简单加载条的创意动画。最佳情况，动画会影响用户对产品技术的感知，使其看起来比实际更好。最糟糕的情况是，您的用户在等待时可以看到有趣的内容，从而改善整体体验。

事实上，用户对于创建情感联系的网站和应用程序更加宽容。就像一个聪明的404错误页面可以缓解一些挫折感，一个有趣的加载屏幕增加了情感价值，否则将浪费时间。

通过现实生活中的例子可以最好地展示动画的力量。以数字创意机构Dunckelfeld为例。当您第一次进入时，他们的网站会提供有趣的加载动画

创造性地使用传统的装载杆和独特的橙色对角线标志，开场动画让用户知道等待时间不会太长，让他们感到愉快，同时提升品牌知名度。完成后，加载栏，现在只是Dunckelfeld徽标，飞到屏幕的左上角，无缝过渡到用户现在可以自由交互的界面。

该网站通常使用动画很好。根据光标的位置，自行探索界面移动和更改的方式。这些微交互技术将个性融入您的产品中，并为您的用户带来更多乐趣。

该网站在技术上不需要初始加载动画和微交互动画 - 毕竟，它们的加载时间不长，微交互主要是装饰性的。然而，这些小小的添加使得网站脱颖而出，并使其与之交互更加令人满意。在交互设计中，永远不要低估眼睛糖果的价值。

有关正确加载屏幕的更多示例，请查看Sitepoint列出的这12个Creative，Clever Loading Screens。

过渡和通知用户

动画不仅应该分散用户的注意力，而且还可以发出内容。

无论是从一个页面或对象移动到另一个页面，还是从无处出现的简单下拉菜单，动画都可以增强每个交互点 - 但最好的动画是那些看起来很自然且不会引起人们注意的动画。

让我们来看看我们如何在速度和理解之间取得平衡，同时让您的网站感觉更加流畅。与UI模式一样，将这些视为指南，根据您的网站或应用的需要进行自定义。

1.动画通知

因为运动自然会引起注意，动画通知是一种令人愉快的方式来提醒用户而不会过多地干扰体验。

在线照片礼品零售商Photojojo通过在屏幕上设置“+1”动画并在用户添加项目时进入购物车，使购物车体验变得有用和有趣。

动画还有一个聪明的商业目的：通过在项目页面上提供视觉反馈，该网站不需要将用户重定向到结帐页面。购物体验不会中断，用户有更多时间购买更多商品。

当然，这种动画模式不仅适用于电子商务网站。如果您想以友好的方式通知用户，请考虑为消息设置动画，例如RelateIQ的下拉通知（在几秒钟后消失）。

2.揭示信息

动画还可以触发其他信息。两种最常见的方法是悬停显示和点击显示。

悬停技术非常简单。当用户将鼠标悬停在内容上时，会显示更多内容。您不希望使用悬停来吸引用户参与操作，而只是显示微妙的辅助信息。另外，请记住，在移动设备上浏览网站时，悬停不起作用。

例如，在Flickr上，您需要将鼠标悬停在照片上以显示标题。

要吸引用户使用主要内容，请尝试点击鼠标悬停的替代方法。您可以看到AirBnB的地图隐藏了有趣的提示（网站的主要内容），直到您实际点击每个目标图标。

3.突出显示内容

如果您使用网格或卡片布局，这种模式几乎是不费脑子的。就像我们在第1卷中讨论的那样，确保设置大量参数，以便当人滚动内容区域（而不仅仅是链接文本）时动画触发。你可以看到这就是阿迪达斯在下面的例子中所做的。

4.折叠菜单

正如我们前面提到的，为了节省屏幕空间，有时最好隐藏功能，直到需要它们为止。如果你正在使用这种模式，你会希望崩溃或下拉是平滑和流畅的，而不是简单地“现在你看到它，现在你没有。”这将告诉用户正在发生变化（反馈），不中断他们的流程。

在Cabedge的上述示例中，传统的下拉菜单通过动画进行了修改。菜单不是一次全部出现，而是逐渐扩展和折叠。这种效果使标准的UI模式再次焕然一新。

如果您想在不降低代码速度的情况下玩动画，请随意使用包含超过24种动画和交互的库在UXPin中进行游戏。

5.动画滚动

印刷媒体相对于数字媒体的（少数）优势之一是其线性。

如果您正在阅读杂志，那么您总是会对杂志中的某些内容有所了解。翻阅页面到达目的地甚至创造了新的浏览机会，并且通常特定的图片或标题可能引起您的注意，并且您最终会阅读您原本不想要的文章。数字媒体通常缺乏这种品质......但并非如此。

动画滚动是一种设计方案，整个网站从上到下呈线性排列（称为单页网站）; 当您单击不同的菜单选项时，该站点会自动滚动浏览到目标的内容 - 比“跳转到部分”机制更少迷惑。

动画滚动方法模仿了打印媒体的浏览方面，完成了3个主要功能：

• 向用户定制网站上有多少内容以及它们与其余内容相关的位置

• 开辟了浏览和发现页面到页面布局缺乏的新内容的机会

• 从页面到页面平滑震动过渡

Laura Meroni的网站是一个很好的例子。注意在过渡期间，站点的每个层如何以不同的速度移动，从而产生更刺激的视觉效果。

当涉及到网络和移动时，您需要将用户视为刚刚崩溃。结合第1卷中讨论的导航和定向最佳实践，动画卷轴可以作为一个令人愉快的豪华轿车乘坐，将潜在的混淆访客带到他们所属的确切位置。

如果您要创建更传统的多页面网站，您仍然可以通过替代的视差滚动方法添加交互性。要了解有关此策略的更多信息，请下载免费的电子书Web UI最佳实践。

遵循迪士尼的12个动画原则

因为它需要几本书来涵盖交互设计中的所有不同动画，我们认为描述您可以遵循任何动画的指南更有帮助。

谁在动画比一个更好的专家迪斯尼？1981年，“生命的幻觉：迪士尼动画”一书概述了帮助迪士尼成为今天动画巨头的12项原则。数字设计师已经将这些原则用于网络和移动。

• 壁球和拉伸 - 为了逼真地模拟物体，给予物体质量和刚度，然后通过它在移动时“压扁”或“拉伸”来显示它。选择对象是作为固体对象移动还是具有灵活性取决于您自己。

  

• 预期 - 设计UI以便表单建议预期的操作 - 记住，表单表示功能。例如，在下面的屏幕截图中，您可以看到左侧的卡片图案如何表示内容将相应地旋转。

  

• 暂存 - 围绕您的动画呈现正确的上下文有助于锚定您的用户，以便他们感觉更适合与您的应用/网站进行交互。使用颜色，对比度，构图和动作将用户聚焦在主要对象上，同时使他们在整体体验中保持接地。

例如，您可以在弹出表单后模糊背景，以便更好地将用户定向到数据字段。

• 直前和姿势 - 使用直接动画捕捉动态和复杂的动作，并使用姿势摆姿势来覆盖更可预测的动作。下面的示例显示了顶部的正前方和底部的姿势到姿势。

  

• 跟随和重叠动作 - 现实和不现实动画之间的一个主要区别是不同区域的不同运动。当该男子从跳跃着陆时，由于动量（后续），他的斗篷会挥动一两秒钟。当一个人降落时，他的斗篷和腿也会以不同的速度移动（重叠动作）。

  

• 缓慢进出 - 通过在动画的开头和结尾添加更多帧，给人一种你的界面遵循惯性定律的印象。这产生加速/减速感觉。

  

• 弧形 - 沿弧线的运动感觉更自然，而沿直线的运动感觉僵硬。例如，Android的UI具有直线滚动功能，使其机器人感觉真实。

  

• 次要行动 - 在现实世界中，行动会产生多重后果 - 看看下面的松鼠及其尾巴。这可以应用于数字设计：例如，如果用户打开新的子菜单，则为前一个子菜单关闭设置动画。

  

• 时间 - 正确使用时间是主观的，因为不同的速度传达不同的音调。快速可能最适合轻松，有趣的应用/网站，而对于更结构化和复杂的应用/网站来说，速度可能更慢。要在直接用户控制时创建幻觉，必须在0.1秒内触发动画。

• 夸张 - 动画的乐趣之一就是它可以玩得很开心。虽然现实主义是好的，但过多的现实主义否定了动画的创造力。谨慎使用此效果，以便您只是略微超越现实。如本例所示，您可以为壁球和拉伸效果添加摆动，使球更有弹性。

• 实体绘图 - 像现实世界中的对象一样，利用3D空间，重量和体积。

• 上诉 - 这是动画中最棘手和最主观的方面。请记住遵循情感设计的最佳实践。

最后，请记住适度使用动画。动画应该有助于在操作和页面完成目标之间轮换用户，而不是作为一个漂亮的中途停留。

带走

对动画的需求只会随着时间的推移而增加，而且不足以让您的网站或应用程序过时。

不要忘记，动画是一个强大的工具，它不仅满足交互设计的娱乐目标，而且满足功能性的娱乐目标。记住3种不同类型的动画，将它们应用到您的界面，以平滑加载时间和过渡。在制作动画时，不要忘记迪士尼的12条原则。

当网站元素既实用又有趣时，这种情况很少见，所以不要轻易拍摄动画。

温州网站制作