做靠谱交互动画的 5 种方法

2015/04/19 · HTML5 ·
交互动画

本文由 伯乐在线
Abel
翻译,黄利民
校稿。未经许可,禁止转载!
英文出处:24ways.org。欢迎加入翻译组

从我在这个网站上开始写《Flashless
Animation》这篇文章到现在已经两年了。从那时起,交互动画已经从像圆润的APP一样的用户界面到交互式杂志在网站上流行。对网页交互动画师、交互开发人员、用户体验师、用户界面设计人员和许多其它与交互动画有关的人员来说,这是一个多么令人兴奋的时间。

但是匆忙的设计交互动画,似乎表示我们很少讨论是否必须要使用交互动画,而是更多地讨论我们用交互动画能干什么?我们花费很多时间为怎么以
60fps 使所有东西可以动画而着急,而不是设计一些方法让初级用户避免障碍。

我喜爱网页动画,并以它为生。我知道动画能被滥用,而且我们都拿flash-trubation来娱乐。但是在网页设计期间积累的教训,我们忘记它是如此的快啊。视差滚动效应也许是对这原因产生的大概介绍。在Flash和网页动画API这一令人深思的时期,我们确实学到了很多。

所以这里的五点建议,我们可以用于把处于交互动画滥用边缘的使用者拉回到高水平上。有这几点建议在心中,我们可以让2015的网页动画年真正地属于它自己。

有目的性的使用动画

很遗憾,大量的Web开发社区认为动画是装饰性的。UI设计师和交互开发人员当然理解的更到位。但是当我给一个工作室培训交互动画的时候,我知道我的学生是在和一些决策者做艰苦的斗争,这些决策者认为有动画会非常美妙并要求尽可能的在项目的结尾附上动画,而我的学生则认为不然。

这种观念差异很难动摇,但是当我们精心做动画的时候这种观念差异也许就会消失。附加动画带来的危害比益处要多,这点很少被用户考虑。例如,用户也许会抱怨动画太快或者太慢,或者他们不知道动画在展示什么。

当我今年参加 Chrome 开发峰会的时候,我有和 Roma Shah 交流的机会,她是
Polymer Material Design 背后的 UX
主管。我问她有什么建议给在设计当中使用动画和转场的设计师。她简单的回答:有目的地使用动画。如果你不能慢下来想想如何做交互动画并代表用户做一个充分知情和精心制作的决定,那么你最好不要做这个尝试。动画需要花费精力来制作,而一个差劲的动画比没有更糟糕。

不止《生活的错觉》这把书中提到的动画 12 条准则

我们总是试着在激发我们兴趣却毫不相干的事情之间找到相关性。最近越来越多的人把《生活的错觉》放在挨着《理解漫画》这本书的同一个书架上。这些书给我们带来很多来自其它领域的有用的观点。然而,我们不应该在网站上犯类似与漫画书与动画片的错误。虽然它们可以帮助我们用新的角度理解我们的工作,但是这些概念会或多或少产生上述混淆两者概念的作用。

我一直在慎重地思考《生活的错觉》,迪士尼动画工作室的经验丰富的工程师们在书中提出了动画十二条准则。这些规则对做动人的、逼真的动画非常有用,如像弹起的球、蹦跳的松鼠、绚丽的物理极光一样的页面转场动画。但是什么时候或者怎样把一个动画作为一个大型交互体验的一部分,这些准则没有对这些问题做方向性的指导。比如一个下拉操作需要多久才能伸展完毕,或者一组可操作对象是应该按照顺序,还是按照整体做成动画。

这十二条准则仅仅是一个开始地方,除此之外我们还有其它很多东西要学习。我已经写过至少六条应用到web和app的设计交互动画功能。当我们思考做交互动画时,我们不仅仅考虑做什么动画、动画的物理学,还要考虑为什么要做动画,怎样做动画。如果动画是多余的或者令人费解的,再严密的物理设计也是徒劳的。

有用、有必要,然后是漂亮

有一句行内话:除非一个动画既是必须又是有用的,要不然不要做它;如果它既是必须的,又是有用的,那就毫不犹豫去把它做漂亮。当说到动画和网页,目前很少有文章写什么样的动画是有用或者必要的。我们大部分都是倾向于做漂亮、令人愉快、令人有趣的动画。虽然动画的外观漂亮很重要,但是外观是仅次于用户的整体体验的。

第一次我在掌机看到黄色口袋妖怪的开机动画时,我被迷住了。到了第六次的时候,当Freak的游戏图标出现在屏幕上时,我被开始按钮搞的厌烦了。当我们在做设计的时候,令我们高兴和有意义的东西对用户来说却是未必的。像黄色口袋妖怪令人欣喜的开机动画一样,纯粹令人愉快的动画即使是被用户欣然的接受,但是太多次的重复却最终无意义的动画,用户就会慢慢对该动画产生厌恶之情。

如果一个动画不能在某种方式上帮助用户,如让用户知道他们在网站的什么位置或者一个页面上的两个元素是如何彼此相关的,那么它是在耗费电池并在不停地产生仅仅令用户高兴的效果。资源很少得到合理的利用。

威尼斯人线上娱乐,动画不是仅仅为了令用户高兴,首先,我们必须能让动画给用户清晰的表达两个意思。以从 Finethought.com 网站上这个菜单图标为例。当我们点击这个菜单图标时,它向我们表达了两个意思。

1.这个菜单按钮用动画给用户以反馈,表面这个图标已经被点击了。

2.这个菜单按钮表明通过点击关闭图标,页面的内容将会发生改变。

假定我们有两个好的理由来做交互动画,那么就会有理由来取悦用户。

以四倍速度让动画更快

有一个传统动画的概览法适合于网页动画:不管你的动画应该持续多久,把动画的持续时间减半,然后再减半。当我们设计动画几个小时之后,我们对时间的感觉会变长。对我们来说速度很快的动画,对大部分用户来讲已经到了无法忍受的慢。事实上,最近来自于用户对网站动画接口的绝大数批评似乎是:“它太慢了。”一个好的动画是不唐突的并且速度是非常快的。

如果让你的动画持续时间处于一个最佳值,那么请把动画持续时间减少到原来的四分之一。

安装一个关闭开关

不管一个动画是多么的富有见解和必要性,总有一些人对动画不感冒。对这些人来说,我们必须增加一种方式来让他们关闭网页上的动画。

幸运的是,网页设计师已经在考虑赋予用户一些自己做决定来改变网页体验的权力。以下面的动画为例,这个《小鱼商店》的动画电影网站允许用户关闭视差效果。虽然它不能移除全部动画,但是这个网站确实减少了动画的视觉给用户带来的头晕的感觉。

在我们网页设计的工具库中,动画是一个强有力的工具。但是我们必须小心:如果我们滥用动画,动画也许会带来不好的效果;如果我们低估动画,它就不能完全发挥它的作用。但是如果我们恰到好处的使用动画,当既有必要又有用的使用动画,赋予用户关闭的动画的权力,那么动画会变成一个帮助我们建造一些用起来简单、带给我们快乐的东西。

让我们把2015的网页动画年带给用户吧!

赞 收藏
评论

在设计和编程之间只有薄薄的一线,当我们进入新的十年时,这条线变得越来越模糊。在Photoshop上绘制漂亮的模型就够了吗?5年以前也许如此。在今天,普通的网络用户要求的更多。所有的东西都很漂亮,但没有实质内容,过段时间人们就会厌烦。如果你唯一的目标是用你漂亮的设计影响圈内其他设计师,你会发现你很快就落伍了。2011年不关心漂亮,而是关心功能。新的一年甚至十年的趋势是交互设计、粘度和虚拟现实。

关于作者:Abel

威尼斯人线上娱乐 1

简介还没来得及写 :)
个人主页
·
我的文章
·
10

威尼斯人线上娱乐 2

2011年你会如何设计呢?设计师的最终目标是留住用户,而不是让人炫目。所有得到惊讶声和赞叹声的设计师都很容易被忘记。高超的设计师可以创造出一种环境,吸引并迷住用户到不想点击”返回”按钮的地步。几个元素汇聚在一起,组成一个奇妙的幻境:和谐的色彩主题、直观的设计、易用的信息和快速的反应。另外,永远不要低估简洁的力量。当然,情况一直如此,但在2011年,你将不再仅针对电脑桌面和笔记本,还要为智能手机、上网本、Tablet等等设计。你准备好了吗?

看看2011年前11个趋势。

1、更多的CSS3+HTML5

多么令人满意啊!在过去几年里,CSS3和HTML5只出现在网页设计那遥远的地平线上。但现在,在2011年,我们看到了它的爆发。设计师们终于开始让Flash走开。你可能感觉到,Flash和一些对你当前和潜在用户有用的最新最热技术,配合的不是很好。在2011年,你会慢慢远离Flash,拥抱被称为HTML5的魔术。看看这组惊人相似的比较:

威尼斯人线上娱乐 3威尼斯人线上娱乐 4

现在已经显示,Flash和HTML5是不相等的对手。在2011年两者都有大量的应用空间。问题是设计师们在2010年(和之前)滥用了Flash。举一个例子,很少整个网站由Flash组成,特别是这些日子。HTML5减轻了Flash的一些负担。不过,HTML5还不能完全取代我们由Flash实现的那些非凡的设计元素。

也许更让人兴奋的是,CSS3在今年可以投入使用了。移开Photoshop(哇,Adobe还是不能休息),CSS3可以更快实现文本阴影、圆角边框和背景透明。如果你还没有开始,现在就开始钻研了解CSS3和HTML5吧。

2、简洁的配色方案

简洁。没有什么比在安静的背景上显示清晰的消息更安静了。安静可以被解读为几种不同的方式。忘掉黑白和灰度阴影,想想绿色、黄色或甚至红色作为你的主色调。不过,限制你的调色板只有两或三种颜色,试试各种颜色不同的灰度。用少量颜色表现信息是非常了不起的。观察一下:

威尼斯人线上娱乐 5

绿色阴影创造了这个Twitter可视的工具。边注:这个网站是用XHTML/CSS和java
script创建的。

威尼斯人线上娱乐 6

如果做的不好,红色很容易产生冲突。这个网站用高对比的易读文字克服了红色本来的特性。

3、适用于手机

智能手机、iPad、上网本,哦天哪!一个令人眼花缭乱的手机产量在2011年提供给消费者。这意味着你的网页设计必须适应多种窗口。

创建一个适用于手机的网站不是简单的从你的设计中去掉那些花哨的东西。这只会产生一个空虚无个性的设计。虽然不太可能,但从你的原始设计中去掉那些魔法,变成简单陈述你的品牌,这非常困难。幸运的是,技术正在快速解决这些麻烦。

借助CSS3的帮助,主要是media
queries,手机网页设计有一个大的飞跃(以后详说)。最重要的一个进步是,你可以设计一个整站并允许你的编码遵从用户的可视区域。

设计一个专门的手机网站可能很有诱惑力,但这可能不再能满足你的观众了。越来越多的手机网站包含了访问原始网站的选项。如果你没有提供这一选项或你的原始网站没有为手机标准优化好,你就没有为2011年做好准备。预测显示,智能手机今年的销量将超过个人电脑。准备好你的设计,满足这一需求。

4、视差滚动(Parallax Scrolling)

视差滚动:不是指老早的电子游戏。如上所述,2011年这一热门设计趋势是创造一种深度感。还有什么方法比视差滚动更好吗?视差可以影响用户产生一种三维空间的错觉。它可以由一些简单的CSS技巧或jQuery插件如Spritely的帮助实现。视差滚动可以作为设计中最重要的次要元素,例如,在页头、页脚,或背景。把它放在导航可能会迷惑你的访问者。

威尼斯人线上娱乐 7

Old Pulteney Row to the
Pole
网站在背景中使用了由上至下的视差滚动效果。这增加了一种很微妙的深度和许多乐趣。

只由CSS和HTML创建的视差滚动,由Roman Cortes创建。