给设计师的网页动画设计基础指南

挤压和拉伸
预期
登台
连续动作和姿态对应
缓进缓出
弧形运动
次要动作
时序
夸张
立体刻画
吸引力

动画早就不是早期人们印象中的低龄向玩物了,从早年的卢卡斯影业到今天的工业光魔,动画技术证明了它可以实现无限的可能性;从70年代的高达、 EVA到之后的宫崎骏、皮克斯,动画的深度和内涵也早已不弱于电影和文学作品。而随着技术的积累,网页中的动画也已经是遍地开花,它时尚,有趣,也人性 化。不断涌现的新技术和新工具令网页动画设计的门槛逐年降低,高速网络也使得漂亮的动效和纯萌的GIF几乎是无缝地加载到网页中。今天,我们可以斩钉截铁 地说,动画已经是最常见也是最实用的网页设计工具之一了。

基础知识

给设计师的网页动画设计基础指南

Watches

给设计师的网页动画设计基础指南

PSD2HTML

给设计师的网页动画设计基础指南

Bubble-Jump

将静止或者二维平面上的物体赋予生机与活力,让它们以符合或者贴近物理定律的方式来运动,这就是我们所熟知的动画。Mac 桌面上那个著名的图标跳动动画就是最典型的例子之一,那种模拟皮球在地上弹跳的效果显得真实而有质感,这种动画设计是遵循著名的动画设计12原则的。

对动效或者说动画最熟悉的,无疑是迪士尼。Frank Thomas 的《生命的错觉:迪士尼动画》中,就详细总结了创造今天动画的12个原则:

  • 挤压和拉伸
  • 预期
  • 登台
  • 连续动作和姿态对应
  • 缓进缓出
  • 弧形运动
  • 次要动作
  • 时序
  • 夸张
  • 立体刻画
  • 吸引力

文末相关链接中,会附上关于这12原则的相关文献。

网页动画的实现方式很多,最常见的是使用Gif图,CSS,SVG,WebGL 以及视频。但是和动漫不同,网页中的动画可以是任何元素,小到下划线,大到背景和整个页面,它可以随着页面加载而出现,也可能是鼠标移动到某个位置上之后 被触发。和其他的设计手法相似,动画可以是非常微妙、触动人心的,也可以是开门见山、清晰直观的。所以,最重要的是看你怎么运用动效,是在合适的时候给人 会心一击,还是摆在显眼的位置,令人不会错过。

新兴的趋势

给设计师的网页动画设计基础指南

Djeco

给设计师的网页动画设计基础指南

Wonder Land

给设计师的网页动画设计基础指南

I Ngen IO

当我们谈及网页动效的时候,它和动漫、CG、电影、游戏中的动画,是截然不同的。当我们在网页的语境之下提及动画和动效的时候,它作为一个典型的设 计趋势和设计手法,节制是是最关键的因素。小巧简单的动效在网页中会更具吸引力,也更加有趣,那些真正“隐形”的动效会让用户难以察觉,却更好地让他们有 更好的体验。但是显著而抓人眼球的复杂动效也很重要,它们会强化设计感。不过在动画和动效的设计上,一致性很重要,过于复杂的规划可能会让整体效果混乱。

让动画成为设计趋势,其实是整个设计圈的走向造成的。扁平化和极简风的流行开来,网页设计确实简约了很多,但是用户需要更多的信息来告诉他们应该怎么做,而动画就是最好的方案——无需影响整体美感就可以给用户以足够的引导。即使是最简单的设计,动画的存在都能给予用户以说明和指引,这样前提下诞生的动效,在简单和易用性之间达成了平衡。

动画其实在后端和用户端和有很多不错的影响。首先是大家再也不需要用Flash来事先复杂的动画了,它的实现方式也相当的自由和多样,今天的动画不会像曾经的Flash等技术那样拖慢网站的呈现速度甚至影响服务器,加载速度飞快,体验优异。

大小动画的对抗

给设计师的网页动画设计基础指南

Rose

给设计师的网页动画设计基础指南

Henry-Brown

大和小的竞争无处不在,即使是动画的领域也同样是如此。

规模较大的动画常常是以视频的形式存在的,它们通常会占满整屏或者一个比较关键的部位,循环、简练是它们的特色。这些动画为整个设计创造了焦点,用户即使没有执行任何操作,也能看到它们。以Studio Meta的网站为例,当你阅读文案的时候,没一张大图都会逐步缩放。

小动效会出现在网站的各个角落,当你同网站进行交互的时候,会发现它们的存在。这些动效可能会在光标悬停的时候触发,可能是一个指引性的标识,也可 能以更加微妙的方式呈现。这些微小的动效会对整体的美感产生影响,在 Henry Brown 的这个案例中,动画就非常的小而微妙,仔细观察,你会发现人物的眼睛在闪烁。

什么时候使用动画

给设计师的网页动画设计基础指南

Species-pieces

给设计师的网页动画设计基础指南

Aara

给设计师的网页动画设计基础指南

Poker

当我们谈及每一种设计趋势的时候,都需要探讨一个重要的问题:什么时候才能使用它们。动画可能是一种非常讨巧的设计手段,它有用,但是并非适用于每一个设计项目。动画应该是平滑无缝的,而非滞塞机械的,它的服务对象是用户,并且和其他内容的呈现形式不一样。

使用动画和动效的首要目的是提高网页的可用性。简单的动效可以有效的引导用户,帮助他们了解点击之后会去怎么样,即使是需要使用复杂的视差滚动动效,设计师也会搭配一些简单的动画来作为引导和辅助之用。

可用性的呈现形式:

  • 解释功能,展示网站的运作
  • 呈现变化,比如展示可点击的元素,或者表单那的正确填写方式
  • 创建流程,或者引导用户执行动作召唤类的操作

使用动效的第二个理由是出自美学需求。动画和动效无疑是拥有强装饰性的元素,如果某个动效是出于视觉装饰的作用而进行设计的话,无疑是可以接受的。 这种装饰性的动画不仅有助于讲述故事,而且可以建立用户界面之间的情感联系,它可以通过视觉上的变化引发用户的兴趣,在不断的交互中让用户停留更长的时 间,不断回来。

如果你要创建纯粹的动画,那么你楈枒仔细思考它能做什么,会带来什么。你希望用户有什么样的反馈?想分享一些独特的内容,还是用动效给用户带来愉悦的体验?这很重要。

一些资源

准备为网站加入动画和动效么?接下来的一些文章或者网站可能会给你一些帮助。(这些文章都是英文的,恩)

《生命的错觉》会告诉你一些关于动画的12个基本原则

《网页动画的运作》是一个列表,其中的资源会告诉你网页动画是如何运作的

《CSS动效新手指南》是告诉你如何运用CSS属性来制作动画的

《弹性SVG元素》是教你如何使用SVG组件的教程

《UI动画的艺术》是Mark Geyer 的文章

《创建优秀动画的15个HTML5工具》,如果你掌握了基础知识,这个工具列表会非常有用

《动画师的急救包》这篇文章也是介绍各种形式动画的基本原理的

结语

评判动画和动效其实并不难,只要看它是否为用户带来更好的体验,就知道了:它能否产生情感联系,能不能让人会心一笑,能不能让网站更好使用。

动画是一种有趣的技术,它的运用范畴会越来越广,如果你对它有兴趣,就持续研究下去,它就是未来。

 

译文来自:优设

原文地址:designshack

原文作者: CARRIE COUSINS

优设译文:@陈子木

原创文章,作者:Catherine,如若转载,请注明出处:https://www.iamue.com/30101/

(0)
CatherineCatherine
上一篇 2017-05-27 05:05
下一篇 2017-05-27 07:08

相关推荐

  • 专业的网页风格指南应该如何制作?

    文案规范
    视觉指南

    配色方案,包括每种色彩的具体参数,以及其他可接受的色调
    字体和排版方案,包括每个部分的字体类型、尺寸、字重以及具体用法
    LOGO,包括它的样式、变体、尺寸以及位置的说明
    拼写、关键词的选择、文案的风格(包括按钮、社交媒体等)
    图片使用规范,包括色彩、裁剪规则和视觉表现方面的标准
    SEO信息,比如可选的标签和关键词
    栅格标准(主要用作网页排版和印刷)
    空间与留白方面的说明(设计的松紧度等)
    关键点的说明(团队成员可能会提出的问题或者有待澄清的点)

    在内容表述上不要限制太多,这毕竟是风格指南,重点是视觉上的引导,设计是核心;
    将相关、相联的条目整合到一起做快速指引:一个页面介绍色彩,在另外一个页面做排版的规范等等;
    用图片案例来展示界面应有的外观,而不要单纯用枯燥的文字来做介绍;
    提供可用的具体说明。比如配色方案中提供色彩的RGB或者CMYK的具体值,确保色彩的运用能够一致;
    将一部分的设计案例分解说明,确保每个元素的功能和使用规则都足够明晰;

    2017-05-22
  • Axure 8.0手机页面拖动弹回效果

    Axure RP8.0教程 手机页面的拖动和弹回效果 。用户向上拖动页面,页面向上滑动。用户向下拖动页面,页面向下滑动。当用户拖动页面到最底部时,页面弹回显示第一屏。当用户拖动页面到最顶部时页面弹回显示最后一屏。步骤一.在部件库中拖入一个图片部件,双击打开浏览手机外壳图片,加入到工作区中,跳转这张手机外壳图的大小和位置。步骤二在手机内部框中制作一个列表页面,页面,使用到的部件有图片部件、标签部件、水平线部件、将这些部件相互组合,设计一下...

    2018-03-10
  • 交互设计案例-闲鱼产品分析

    闲鱼·产品分析 Completion Date    Completer    闲鱼Versions       Phone Type March 11,2015     niu hang      V_2.1.3_Android     MEIZU MX4 Pro 1.战略层 用户需求:闲置物品的买卖(包括且不限制于二手物…

    2015-05-07
  • Medium评选的年度最佳设计文章2016

    译者:陈晶,审校:刘洁 该文章为UXRen翻译组的陈晶和刘洁同学基于Medium的文章《Medium’s Best Design Writing of 2016》整理、翻译和审校完成,为我们呈现了北美科技圈在2016年的最佳设计文章。 注明: 1、以下文…

    交互专题 2017-08-07
  • 交互设计师之学习需求分析总结

    交互设计师在产品开发的过程中扮演者什么样的角色?需要做什么具体的工作?这是我之前接触到交互设计时的疑问,我想只有清楚了交互设计师的工作流程,才能对交互设计师的职责有一个深入的理解,下面根据自己所涉猎…

    交互设计 2015-08-12
  • AI 交互设计怎么做?谷歌详解自家 AI 相机设计思路

    文 | 何忞来自雷锋网(leiphone-sz)的报道雷锋网按:日前谷歌在其官网发布博文,文中详细介绍了 AI 相机 Google Clips 的一些设计思路。雷锋网将其编译如下正如过去曾经发生过的移动革命以及再之前的网络革命一样,机器学习正在让我们反思、重构、重新审视我们生活中已经拥有的一切。在 Google 用户体验(UX)社区中,我们开始了一项名为“以人为本的机器学习(HCML)”工作项目,来指导和帮助我们重构世界。站在这样的视角...

    2018-02-03
  • 观点 | 交互设计在未来会多火?

    周一:AE动效 | 如何入手创作才能更加真实?周二:马克笔如何通过"叠加技法"精准调色周三:更快更好 | 手绘板也能比着尺子画!?周四:观点 | 交互设计在未来会有多火?周五:开拓视野 | 哪些用户体验很棒的APP设计好在哪里周六:如何看懂艾迪.斯理曼的Dior Homme周日:学珠宝设计我们推荐给你的必看书目交互设计是什么?对你而言,它可能还是未知数。让我们先看看大多数人如何看待交互设计这一专业:1.交互设计师是做APP的2.交互设计...

    2018-04-06
  • 交互设计、视觉设计 | 专业、课程大起底,

    dadsadsadasdsadsMulticultural epicenters for arts, culture, design, and business.是什么原因让你对设计感兴趣?是爱吗?是责任吗?都不是!是因为当年某个app的UI设计让你眼前一亮然后就欲罢不能!于是确认过眼神,我遇见了最爱的专业。想为之奋斗一生。于是就这么愉快的决定了 在设计这条不归路上愈行愈远。纠结了许久,等到开始准备作品集时却分不清什么是视觉设计或是交互...

    2018-03-29
  • 刘克成:历史的回顾——90年代黄帝陵整修经历和关键点 | 黄帝陵国家文化公园规划设计大师工作营

    📌 编辑 | 璇仔编者按:“黄帝陵国家文化公园规划设计大师工作营”由陕西文化产业投资控股(集团)有限公司、陕西省黄帝陵文化园区管理委员会、黄陵县人民政府和CBC建筑中心共同发起。邀请了中国最具有代表性的六位规划大师及其领衔的团队作为核心设计团队,通过共同驻地对黄帝陵国家文化公园的调研、研讨,分别提出对未来黄帝陵国家文化公园的规划设计理念及方案。2018年3月23日,西安建筑科技大学建筑学院教授刘克成将作为探班大师来到工作营现场,以“历史...

    2018-03-22
  • iPhone 6 / 6 Plus 出现后,如何改进工作流以实现一份设计稿支持多个尺寸?

    移动app开发中多种设备尺寸适配问题,过去只属于 Android阵营的头疼事儿,只是很多设计师选择性地忽视android适配问题,只出一套iOS平台设计稿。随着苹果发布两种新尺寸的大屏 iPhone 6,iOS平台尺寸适配问题终于还…

    2014-10-28