主页 > J生活派 >写给工程师看的互动设计

写给工程师看的互动设计

写给工程师看的互动设计

不得不说,有太多工程师或者美工误把技术当艺术、把漂亮当设计,真正重要的互动部分反而遭到忽略,你可以看看,一大批产品都是近乎静态的,许多操作诡异至极,诸如你想新增条目到列表里,它就生硬的出现在那;你想删除,它就直接消失。这样的产品经理,你们到底有没有考虑过使用者的感受,有没有考虑过产品的感受,这种完全不合逻辑的东西亏你们做得出来。

当然,还有一部分产品是具有互动性的,但是,悲哀的是,那些互动完全被用作另一种形式的美化,完全不知所云。

互动性真正革命性的意义在于,它把时间这一魔幻般的属性带入静态的产品之中,通过对动作、速度、显现等等的定义,让产品的操作体现出真实感,使用者因而能够自然而然的理解每一个动作的含义。不过这不是那些高中时候整天泡妞、看不起书呆子的人能理解的。

一些简单的例子

这些例子的目的是向各位读者介绍动画的精髓,告诉各位读者时间轴和空间对于动画意义。而动画对于互动的意义不言可喻。

例如:缓冲效果

以下三个 demo 展示了在最传统的动画中,如何透过控制关键格来控制整个动画的效果。

写给工程师看的互动设计

在这三段 25 格的动画中,设计师只需要定义第一格、最后一格和关键格,其余 22 格由电脑自动填充,但是,电脑没想像中那幺聪明,它只能线性填充空白格。优秀的动画师和动作设计师需要花费大量时间来学会如何控制电脑按照自己设计的效果工作。有兴趣的读者可以自己做些实验,本文重点在于阐述概念,所以不着过多着墨于技术方面。

另外一些稍微複杂的例子:互动动画所能营造的真实感

这些例子的目的在于告诉设计师们,互动所能代替的一些旧功能以及实现以前做不到的功能。

例如:插入元素

以下是三个关于向列表里添加/删除元素的 demo,来展示不同的互动动画所产生的效果

写给工程师看的互动设计

demo 1 没有进行任何加工,既生硬又粗糙,不能给人任何自然的感觉。
demo 2 添加了一些关键格使得添加的动作顺畅了很多,这样的动画已经能给使用者一些暗示了。

最后一个 demo 是最贴合自然状态的,就像我们平时把一本书插入书架一样,需要先腾出空间,然后再插入/取出。

例一最后一个 demo 的设计让人一目了然,因为这和生活中的动作完全相似,使用者不需要其他提示就知道这样的动作所代表的含义。这样的互动在之前的非触控萤幕上没有多大用处,但对于如今遍地的 app 意义重大。

例二:展开/弹出 Menu

同样是三个 demo,分别展示不同的展开效果所带来的不一样的感觉。

写给工程师看的互动设计
 第一个是最典型的展开样式,但是不具有体验上的一致性,这个动作在现实中并不存在,所以没有办法让使用者轻易的明白它的含义。

再观察下第二个,这样的样式是不是给了你更多的讯息?

最后一个样式可以使关键内容突出,可以用来表示强调。

切记,不要试图把多种样式放在一个产品/功能中,这样会导致使用者不明所以。

例二后两个 demo 的设计可以代替旧式导航栏位,使用者可以很容易记得自己的动作,从而知道自己所处的位置。

当然,所有的例子都不是万灵丹,需要视情况而使用。放在这里的目的只是让大家明白,乾净利落但是逻辑性强的动画对于改善产品体验的作用。

想要更多的了解动画在具体产品中的效果,可以体验 Thinglist,这是我与 Kyle Bragger 合作为 Elepath 开发的一款产品。下图是该 app 关于如何加载内容的示範。

写给工程师看的互动设计
动作化介面的设计原则

你明白的,我不能把很具体的产品名字些在这,但是,有些产品的确是走得太极端,一种是介面极端漂亮但没有一点互动,另一种是拿互动动画当装饰,完全失去互动本质。所以我列出以下几项原则来定义真正的互动:

一、动画乾净利落
二、节奏一致、过渡自然

有些人的想法让我很无言,他们从不认为可以增加时间元素到介面中。难道,你们不知道互动能提供更多更有用的讯息给使用者吗?还是你们觉得这样做对你们来说太複杂了?

最初,这份文件只是用来培训内部员工,后来我们觉得如果公开来讨论可能会更有用,而且我也愿意与更多同行交换意见。如果有兴趣可以追蹤 Twitter 帐号  @pasql。或者 在 Branch 参与我们的讨论 。

读者福利:一些值得读或者看的材料:

The Animator's Survival Kit by Richard Williams
Prologue -- Designing Fictional Interfaces for Iron Man 2

上一篇: 下一篇: