互动设计中的效率动效

翻译自:Functional Animation In UX
Design

译者纪:本片文中包含大量的动态页面(原网站是视频链接,本网站上传视频不可以排序,故人工转为动图),加载较缓慢,请各位多点耐心,么么哒


一个好的互动设计师可以很容易的诠释设计之中的支配悄悄的逻辑。这包含着音信架构,页面内容的层次结构,流程和所做的分解。

一定,动效将会利用到线框图原型中,这一个时候,再去对统筹做决定如故是表达,将会变的难有的。例如有些这样的理由:太狂拽酷炫了……太潮了……太鸡冻了……这将是计划失去其力度的园地(Reasons
such as “It will be cool!” or “It’s trendy” or ”exciting” are exactly
the areas where a design starts to lose its
strength.)在我们的筹划中,动效理应占到更多的比重。我们相应去定义动效,并且演讲他们的目标——像大家讲演一个计划中任何的元素一样。

何以是意义动效?

意义动效是神秘的动效,是大家松手在用户界面设计中的流程的一部分

不像是迪斯尼出的动效(动画)或者是电脑游戏中的动效,大家这边讲的效率动效拥有一个清楚的、有逻辑性目标。这个目标为是大家想要传递的规划理念服务的。功效动效是我们UX(交互设计)工具库中的又一个工具。

在一个圆满的社会风气里,大家应该可以证实效率动效与明显设定逻辑的目的。假诺一个动效在大家的宏图之中服从我们设定的逻辑目标,那么它就是一个实用的成效动效,它存在在我们的筹划中便是合理的。可是,假诺它不与逻辑目的切合,那么它恐怕就是剩下的,需要再行慎重考虑这一个动效存在的意义。

在过去的一年左右的时刻里,做过形形色色的类型,我采访并整治了一密密麻麻九个逻辑目标。后日帮自己表明功效动效。我曾经意识到,通过查阅一个被很好定义的动效,我可以很容易的把它们放入到这多少个体系点一个如故更多的组。

也足以这样考虑:当一个动效不符合一个效用性的目标,那么这多少个动效多存在或者会让用户认为困惑或者愤怒。上面是自家当下收集的这一名目繁多的动效。我梦想你会在您的统筹中对您具备帮忙。

1、导向

导向会讲明结构。在这组中,收集的是一些装扮导航角色的动效,它是网页音信结构的体现。这种动效是想要吸引用户对导向的小心,帮助用户知道页面布局刚果暴发的浮动:什么导致了那么些转变,下次想要使用的时候怎么再一次打开。

一个一流的例子是:一个按钮,可以切换隐藏内容(如个人资料等)。当您点击它是,会油但是生一个逃匿的面板,当您合下边板,它缩短回操作按钮。

先是次接触的时候,用户可能对顿时要爆发的作业(做了动作之后的回馈)猜的不那么准。隐藏面板尺寸不断变大的载入动效能够帮忙用户更好的知道暴发了怎么样,而不是认为自己离开了页面或者内容突然熄灭了。这样用户就时有暴发一种轻松的掌控感。收回面的的动效能够帮忙用户关联打开对应面板的按钮或者图标,这样他们就会分晓下五次从哪个地方打开这一个面板。

逻辑目标:避免突然间的扭转,让用户理解自己在哪。

比如说:下列多少个动图:

2、相同的岗位,新的效能

一个显眼的易用性准则:保持规划和站点内容的一致性。一个有所一致性的站点平时是可预见性的,由此,也是足以学学的。此规则也适用于按钮的操作。

在少数情况下,我们务必要设计一个在大势所趋原则下效果暴发肯定变化的按钮。咱们这么做平凡是因为空间受限,如手机等。由此,用户已经了解一个按钮的效率情形下,他还得上学另一个新效用。

“保存”和“编辑”按钮是效用转化按钮的最广泛的例证。可是这些又是最简便的,因为这两项操作是排斥的,他们拥有同样的情景(context)。在另外的情状中,当五个功能之间不拥有强烈的关系,可用性的挑衅就显示出来了。效率动效这一个时候就能发布很好的效能。

逻辑目的:强调动作按钮的功用转移。

比如说:下列两个动图:

3、放大缩短

其三组的放大缩短看起来和第一组的导向有些相似。在这个动效里面,用户在列表里采取一个条款,然后就成为了这多少个条款的情节或细节(取代了列表视图),并且能够回来在此以前的条款列表。

大家日常在图像库、卡片和条款选取中阅览这么的动效。用户采用了一个条款,条目顿时响应用户的选用,在屏幕上显得相应的底细内容。

这里的劳累是必须让用户继续感到掌控感,并且还在原来的流水线中。功用动效在此时往往是少不了的。

在探究这个组中的功用动效时,我注意到一种共同的情势,当下面条件被准确无误的执行时,会进步动效的效用:

1、开始状态时条目标列表。

2、每个门类被指定一个独门的视觉唤起,例如一个主色调、一个符号、一个加粗标题或者是预览图像。

3、当用户做出了一个挑选,一个新的页面现身,所挑选的条规的视觉唤起的要素被突出出来。例如,整个页面的水彩可能持续了前头所选条目标主色调;或者,在此以前页面的记号被扩大并且定位到页面的标题;或一个条条框框的名字会变的更大,出现在页面的标题。

4、一个较明朗的闭馆动作按钮出现在新的页面,如“裁撤”,“关闭”,“再次回到”或“x”。

逻辑目的:把条目与详情页关联。

比如:下列多少个动图:

4、视觉唤起

视觉唤起可以襄助用户更好的精通怎么去操作产品的界面。尤其是统筹带有特殊对象或者纯粹的导航格局时,显得更加关键。

那种效率动效是很容易被察觉的。当大家开辟了一个页面,突然触发一个很快的五次性动效,来演示怎样操作产品中的功用。

逻辑目标:可以展现独特效能仍旧隐藏的轩然大波。

5、突出

这种动效可以吸引用户在情节太多的环境下的注意力。

设计师平时是避免嘈杂的布局和太多的始末的,当内容太多时,屏幕中的各类颜色和情节均准备引发用户的小心。

一个缓解的办法就是从界面上去掉些内容,但是那个艺术在部分时候并不是那么给力。试图想转手一个信息网站的领导想要移除一些情报和图表。

另一个角度想转手。动效是足以自但是然的得到页面上的视觉核心的。无论是公事内容仍旧平稳的图纸,都是力不从心与动效比拟的。我们可以使用效益动效的这一亮点。记住,通过充裕动效获取最高视觉主旨是对嘈杂界面的一个缓坡。

在上边动效的例证当中,我们得以见到,在沸沸扬扬的网页中把一个物品进入到购物车是不显眼的。所以,这时候就需要动效。

逻辑目的:抓住用户注意力,超过嘈杂的界面。

例如下面一个动图。

未完待续

发表评论

电子邮件地址不会被公开。 必填项已用*标注