关于动效 #8211; 要潜移默化,还是要引人注目？.pdf

关于动效 – 要潜移默化 ，还是要引人注目？ 看完这篇文章之后 ，你也许会意识 ，你在各种应用里看 的所有动效 ，其中有80%可能是不恰 当的 ，或是根本没必要存在的。 本质上讲 ，应用界面是在显示屏的2D框架当中为我们呈现更广阔的2D甚至是3D世界的。在现实生 活中 ，如果你把锤子放在抽屉里 ，那么它就在那里 ，你知道拉开抽屉就能看 。而在手机里 ，如果 一个元素移出屏幕 ，它就不再“存在”了。所以 ，要把应用设计的更加“符合直觉” ，很重要的一点就是 尽量让界面元素以用户在现实生活中熟悉的方式进行运动。 一直以来 ，我设计应用 ，苦心研究各种应用 ，读书 ，在网上消费内容…经验告诉我 ，各类界面中的 动效大体可以分为两类 ： 潜移默化的动效 引人注目的动效 潜移默化的动效 你用Faceboo k吗 ？当然。先不要打开Faceboo k的应用 ，告诉我 ：当你在f eed界面里上下滚屏时 ， 除了内容以外 ，还有什么元素在移动吗 ？仔细想想… 答案就是 ：当然有了呗。 这么一说 ，也许有的人才意识 ，内容滚动时 ，顶部的搜索栏会自动收起 ；其实是挺明显的交互 ， 意图就是在用户浏览内容时提供更多的可视空间。看上去很简单的事情 ，但妙就妙在用户也许根本 不会注意 这一点。 这就是“潜移默化的动效”的经典范例 ：对于我的操作行为 ，界面元素能够以非常符合直觉的、甚至 是不会让我注意 的方式进行响应。 (前方高能) A chvr应用则是一个反例。在Faceboo k中 ，当我的手指上移5像素时 ，顶部搜索栏也会上移5像素 ， 这种对应关系让我感觉正是自己的动作使搜索栏逐渐隐藏起来。而在A chvr当中 ，一个很小的滚屏 操作就会导致内容产生大幅度的移动 ，交互体验非常不符合预期。在Faceboo k中 ，我们几乎不会留 意 界面本身的变化 ，而在A chvr里 ，我的注意力则被迫集中 了界面交互上。 要知道 ，在上面两张图片当中 ，我的手指移动距离是相同的。 刷屏用… 刷屏用… 刷屏用… 刷屏用… 刷屏用… 刷屏用… 刷屏用… 这是什么情况 ？ A po llo Ro bbi s在T ED上为我们演示了扒手行窃的过程 ，并讨论了为什么我们的大脑每次只能聚焦 在很少的事物上 ，例如演讲台上的聚光灯。 我们来做个小实验 ：看看你的iPho e主界面左下角是哪个应用 ？现在就试试 ，看看是否和你记忆中 的一致。 然后把手机放起来 ，同时也不要看任何其他设备 ，告诉我 ，现在几点 ？ 实际上在前面看手机的过程里你至少能看 两次时间 ，但你很可能完全没有注意 。 简单的、符合直觉的日常事物通常会被大脑所忽略 ，因为它很难在其中发现什么有意思的或是值得 惊讶的东西。另一方面 ，你现在的注意力仍然会被上面那张图左下角闪烁的小方块所吸引 ，对吧 ？ 因为它所处的情境并不符合我们的直觉 ，你不理解这个东西为什么会一直在那闪烁 ，因此你的大脑 会将注意力放在上面。 所以 ，当我们在Faceboo k中滚屏时 ，由于搜索栏隐藏的过程完全符合我们在移动手指时的操作 直觉 ，我们通常难以注意 这一点 ；而A chvr的内容在移动时大大超出了我们在潜意识中对操作结 果的预期 ，所以感觉很突兀。 有时 ，你不希望用户注意 某些东西 ，而有些时候正相反。这也引出了我们要讨论的第二类动效 ： 引人注目的动效 也许你已经猜 了 ，这类动效的主旨就是引导用户将注意力集中 某个地方 ，譬如一些你希望用户 注意 的新功能。 上面的动画图片演示的是A imot o Video Maker应用 ，我最喜欢用它来演示这类用以聚焦注意力的 动效。为了避免使用新手教程一类累赘的东西 ，A imot o力图打造极其简单移动的界面 ，并通过动 效来吸引用户的注意力 ，诠释操作方法。当用户进入上图演示的界面 ，突然看 面板在弹跳 ，便很 难不去试着点开它看个究竟。 上图演示的是Ji k应用的介绍界面。你的目光注意 哪里了 ？自然是动效。人们通常不会留意新应 用的介绍界面 ，但我在Ji k当中真的留意了。很多应用都试着让用户在这些界面里读一些简介文字 ，但Ji k只是把文字作为诠释动画演示的辅助信息。 结论 “天啊 ，看看我实现了怎样的效果 ！”几乎每个新开发者都会这样讲。这种感觉确实不坏 ，但也是很 危险的。一开始你还不知道怎样呈现一个UI元素 ，突然间你可以让所有的东西都很炫酷的移来移 去了。很久以前我也是这样的