CS巴别塔(1)

论动画的设计

Posted in Uncategorized by Kenny Yuan on 2014/01/08

标题仍然是开了一个小玩笑,不过倒也不是瞎说。

这年头大家都在乎动画了,大约能总结以下几点:

1、样式是不是好看;

2、效果是不是让人感觉舒适、愉悦(最好不要带来任何不适感);

3、总量的控制,不要给“正事儿”捣乱;

4、要有一个统一合理的隐喻;

然后下面呢,就是我的私货了,也是我一直想推广的理念(可惜没有人买帐啊)。

A、动画不能是“死”的。不能一播放就变成了“开弓没有回头箭”,比如iPhone屏幕要休眠了,会有一个变黑的动画,大约1秒多吧,如果用户发现了,想打断这个过程,会去屏幕上点点划划想“挽救”,但现在的设计是不管用户输入的,必定要去休眠——“朕意已决,无需多言”。

另一个例子是弹出的对话框,这个动画很慢,在动画还没结束的时候,反应快的用户基本上已经知道要去点哪个按钮了(人类强大的模式识别能力),但是动画中的元素是“死”的,那些按钮是不能点击的,于是用户会感觉明明点击了,但是没有效果(微吃是一个Usability问题)。

再举一个电子书翻页的例子,多数电子书阅读器的翻页动画是必须要看的,不看完动画不能翻下一页(或上一页)……说到这里,你可以感受一下想连续翻10页,或者翻错了一页想快速翻回去时的心情……

B、动画不能是单模式的。单模式动画会让人感觉很过时,很不“怀申”。单模式的例子:整个动画的画面一起滚动/平移,整个动画的画面整体缩放。更好的动画的必要条件是组成元素的运动轨迹并不一致但又有规律可循(分不清必要条件和充分条件的请优雅地transform and roll out)。

C、不能带来illusion。这其实是一个底线,但常常会被打破。有些是设计上的问题,比如我原来提到过的虚拟键盘设计造成了Hermann grid illusion。其实实体键盘也有,比如苹果家的银底黑键帽。或者设计没有严重问题,是动画本身的illusion,比如有一个大面积的网格对象在滚动,如果它的网格元素的个体识别度不高,又赶上了驻波,就会造成反方向倒退的假像(想想电影中的车轮)。

(未完待续)

P.S. 说“未完待续”有点儿显得自己还没想好似的,我还是试着说一句“临时有事,回头再接着整理贴上来”吧,这样显得自己准备充足,嘻嘻……

Advertisements
Tagged with: , ,

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: