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

2019.08.16 mf_web

91

没有动作,就没有互动。

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

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

BeoPlay

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

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

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

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

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

Escriba

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

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

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

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

Dunckelfeld

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

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

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

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

过渡和通知用户

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

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

过渡

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

1.动画通知

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

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

Photojojo

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

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

RelateIQ

2.揭示信息

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

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

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

Flickr的

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

制作的Airbnb

3.突出显示内容

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

阿迪达斯

4.折叠菜单

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

Cabedge

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

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

5.动画滚动

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

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

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

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

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

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

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

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

劳拉梅罗尼

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

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

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

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

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

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

    壁球和拉伸

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

    交互设计的前沿

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

交互设计

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

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

    姿态到另一个姿态

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

    重叠动作

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

    CSS动画

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

    动画原理

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

    副作用

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

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

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

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

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

带走

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

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

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

温州网站制作

最新案例

寒枫总监

来电咨询

18868949445

微信咨询

寒枫总监

TOP