引言

引言

在网络刚起步时,动画(animation)主要是在开发新手实在没有其他办法时才会使用的,为的是强调页面上的重要部分以吸引人们的注意。即使他们想让动画突破限制而发挥更大作用,也做不到,因为浏览器(以及电脑)的速度太慢,无法流畅地呈现基于网络的动画效果。

我们从闪烁的横幅广告、滚动的跑马灯新闻和Flash介绍视频的旧时光一路走来,取得了长足的发展。时至今日,iOS以及Android中叹为观止的动效设计(motion design)不仅没有降低用户体验,反而使其大大改善。最优秀的网站和应用的开发人员利用动画来提升用户界面的感觉直觉性。动画在设计开发中的重要性明显提升,这不仅仅是因为硬件的处理能力提高了,更体现了网络开发群体对于最佳实践有了更深的理解。现如今,人们普遍认为最终用户体验的质量比开发网站用什么工具更加重要。当然,尽管这是个看似明显的结论,但事实却并非总是如此。

那么,究竟是什么偏偏让动画变得这么有用?不论是内容块之间的过渡效果、复杂加载次序的设计还是对用户下一步操作的提示,动画都是文字和布局的有效补充,强化了网站的预期行为、彰显了个性、丰富了视觉体验。内容究竟是要以友好的方式弹跳出现呢,还是要猛然甩到屏幕上?这正是动效设计研究的问题。同时,你的选择将会决定应用的总体感觉。

当用户将你的应用推荐给他人的时候,他们经常会试着用“顺滑”或“精致”这样的字眼来形容,但却没有意识到,他们描述的大多是界面上的动效设计。作为外行人,他们没法明确区分应用和应用的动效设计,而这正是优秀的用户界面(UI)设计师孜孜以求的效果:用动画来加强页面所要达到的目标,但同时又不分散用户的注意。

本书为你提供了一些必备的知识。掌握了它,就可以自信地实现动画效果,不仅视觉上效果震撼而且技术上也易于维护。一方面要通过动效设计丰富页面体验,另一方面又要避免累赘的花哨。本书自始至终都努力在这两者之间达到平衡。

为什么所有这一切都如此重要?为什么值得花费时间去优化过渡和淡入淡出效果?以上这些问题的答案也正是设计师花费几个小时优化字体和颜色的原因:只是因为使产品越来越完美,这种感觉棒极了。是他们让用户啧啧称赞、口口相传:“哇,这简直太酷了。”然后马上转头对朋友叫道:“你可得看看这个!”

注意 如果不熟悉基本的CSS属性,那就需要先找本介绍HTML和CSS的书看看,然后再来读本书。

目录