为什么我着迷于动效设计?

设计师喜欢专注细节。 他们用大量时间设计出令人发指的像素级按钮、表单样式、设置页面,把图标打磨得像图钉一样精细。好吧,满分,棒极了,你们这些家伙千万别停手啊。

但是…… 我们需要稍微想想怎么把一个个静止的界面组合在一起。你按下按钮, 然后表单就……会怎样呢?你滑动删除一个条目然后它就那么消失了?那样会显得非常奇怪 且不自然。现实世界中,任何状态的转换都不会如此生硬。总会让人感觉哪出了问题。

哦,好吧。你们会写上说明 —— 比如“滑入。”

如何滑入?飞快?会回弹吗?缓冲滑入?静态界面设计无法为状态之间提供上下文。

这些人一旦遇到动画和有趣的交互时,通常会抛出一个词“愉快的”。对这些家伙来说很酷、 棒极了。但是,你猜怎么着?动画一样可以有功能性,它可不只是用来渲染细节。

动画带出了一个俯瞰维度 —— 时间! 一种不可见的结构将空间整合在一起。你大可不必像 数学白痴一样去理解。

我们来看看一些简单的想法:

放慢/缓冲

在传统动画里,分画帧决定了主体如何从 A点 移动到 B点。它将惯性加入移动,并且确定剩下的帧序列。 以这25帧插入值,观察第13帧(中间帧)的位置变化。

看到了吧!你已经学会了放慢、缓冲。电脑就像傻瓜一样喜欢线性填充间隔,因为它们都是懒汉。一个优秀的动画、动作设计师会花大量的时间与电脑较劲,以确保没有把事情搞砸。

动画是时间相关的。你可以用各种方式处理空间来得到不同的结果。不过这样已经足够了。 这毕竟不是动画教程,关键在于你对时间和空间艺术的思考。

一些关于动画在交互中的想法

把条目插入到一个列表

比方说,你现在正着手于一个实时事件列表,并且想填充实时数据。如果你把它交给 电脑,看起来会是这个样子:

哎呀,这太粗糙了……

将它处理平滑只需要少量帧的动画。如何让它为你的大脑对列表中将要发生的事情提供线索?

如果添加了一个新条目,列表需要为这个条目腾出空间,然后(来自某个地方的) 新条目填充这个空间。 这样就舒缓多了。由缓进缓出来软化状态的改变。感觉起来更自然了 ,因为我们空间的转换有了上下文 —— 正好对应了你在生活中将某个东西添加到一堆东西中的 场景。

更多想法

进入列表中

有一个典型的、滑动进入列表中项的默认方式。这是一种标准使用方式,但是并不能 反映直观的感觉。

滑动的方向并不能给你带来视图转换的任何有用线索。

何不考虑下将列表项看成一个容器,内嵌更多的内容?

如果目的是进入并聚焦在列表项上,我们甚至可以在同一个视图内把其它不相关的东西都 隐藏掉:

面包屑导航 > 所有 > 路线 > 进入 > 视图 > 这是最容易让用户迷失的方式。

保持内嵌的一个好处,就是你不用向用户去解释他已经深入的子视图层级。可以放弃 层级导航,因为用户自己就能看出来。

当然,上面的想法并不适用于所有场景 —— 但是通过这个视角可以引出更多优秀的流程转换解决方案。

一个已实现的例子 ThingList

ThingList, 是我在 Elepath 与 Kyle Bragger 合作的的一个产品,里面有很多有趣的动效设计。上面的例子说明了我们如何展示一个新的过滤功能。

建议你关注更多的动效设计的例子:

你懂的,我真的不能说太多…… 天平的一端是非常华丽但单调的界面,另一端充满了过度点缀的花哨动画。

这是我现在推荐的三个。

Clear:手势紧密地驱动动画。

Willcall:整体一致,有动感的节奏。界面转换毫无突兀感。体验非常愉快。

Facebook应用:一致性不是非常好,但在绘制焦点时有些独到的解决方案。具体来说…… 一个是进入显示全屏照片时的弹出层,还有一个是在列表中弹出评论输入框。

对我来说,很多人认为动效设计与时间无关是非常可笑的。动效可以提供更多信息!也许对设计师来说,制作这种原型的工具太过复杂了?

这本来是我为Elepath员工写的内部文档,目的是解释我对动效的着迷。毕竟我是个动画工程师。

我们觉得,如果把这些分享出来供大家讨论,一定会很酷。我很愿意倾听来自其他界面设计师的想法,认真地思考怎样以及为什么要使用动画。

在这里给我留言吧,或者上推特跟我聊聊:@pasql ……要么在branch网站加入讨论:

http://branch.com/b/transitional-interfaces-design-ux

2 2 收藏 评论

关于作者:段昕理

因为iPod而喜欢上苹果的一系列产品,非常认同他们追求极致的精神。工作之余,喜欢前端的开源项目,Github(https://github.com/sandywalker) 个人主页 · 我的文章 · 15 ·    

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部