通过对界面元素进行组合、拆分最新上线现金棋牌:、改变他们的形状和大小,功能性动画是一种微妙的动画

作者:色剂产品    发布时间:2020-01-01 23:37    浏览::

谨慎地设计。注意每一个细节,是成功打造易用人机交互的关键。

结论

总之,运动不是随意的,每个动作都是有目的的。运动原理是动效设计的基础原则,运动也能突出重点让你不会淹没在界面元素里。无论您的应用程序是有趣好玩或严肃直接的,使用运动原理能帮你建立一种清晰又具有凝聚力的界面体验。

谨慎设计。关注每一个细节是使人机交互易于使用的关键。

: 本文图片来源MaterialDesign等设计网站

英文原文:Nick Babich, Functional Animation In UX Design: What Makes a Good Transition?

原文地址

本文译者:文美(点融黑帮), UI设计师,现就职于点融网技术部DDC团队,曾从事电商、视频等产品UI设计工作。

错误:多个元素移动到不同的方向或者交叉路径,会造成转场动画的混乱。

成功的动态设计具有以下六个特征:

卡片界面

卡片呈现信息的实践其实一直都有,得到Material Design 强调后应该很快会迎来一波爆发。从社区讨论看来,直接使用卡片的欲望也是相当强烈的 ,但根据Material Design的官方指导的建议,卡片的应用场景和与列表应该要有明确的区分,而不是盲目替换,该用列表视图的场景,还是应该坚持使用列表,以免割裂浏览体验。

节选一些官方指导中比较重要的用卡片的场景:

  1. 大量不同数据(文字、图片)的集合,或呈现非常长(超过三行)的文字

  2. 有大量交互(比如+1、评论、分享等按钮),比如三个或以上

  3. 不同卡片间的内容不需要被对照比较

  4. 通常作为一个整体可以像在Google Now中那样被滑动移除

反之,单一的(比如图片库),主要供浏览的,没有太多对应动作的内容的罗列,并且设计上不能被滑动移除的信息流,做成列表会更合适,卡片会打断阅读,造成困惑,损害体验。

综上,我们这次还是把项目和任务的罗列用列表视图来呈现。

卡片是一种好的呈现方式,但与其说被鼓励的是卡片,不如说,被鼓励的是卡片所能承载的那种多类型丰富信息的聚合。

最后,一个有意思的例子:微博新改版的过程中使用卡片收到了很多吐槽,其实也是一件很无奈的事情,理论上来说每条微博有转赞评等行为,但如果大部分人的使用行为都只是浏览,则着重动作的卡片就会造成打扰。

相比较而言,Twitter对动作按钮的处理要相对克制一些。

Mac OS在最小化窗口时用了一种功能性动画。动画把前后两个状态联系起来。

成功的动效设计具有以下六大特点。

当程序在后台运行时,分散用户的注意力

减缓许多元素的变化速度会延长整体动态变化的时间。

扁平风格的点缀,带出亮点

Mac OS的最小化动画

(图片来源:ZURB University)

一个交互动作不应该让用户做不必要的等待。

下面是一个很好的例子,用户选择一个列表项后放大查看其详细信息,在卡片的扩展过程中,原本的小卡片遵循了一条面向终点的弧线型轨迹。

迎接新“抽屉导航”的到来。

是的,就像“抽屉导航”那样,最早被零散使用的交互要素,进入Android的设计规范后,会在接下来的时间中被广泛使用,乃至扩散到iOS和桌面端。这次同样最具代表性和潜力的两个元素,应该是炙手可热的浮动按钮(FAB,Floating Action Button)和卡片。

  1. 响应

4、有意图的

操作指南关注的是如何在合适的地点、合适的时间给出引导提示。而动态效果,因为其特性,则拥有界面上最高的可见性(译者补充:运动中的东西最易被人眼察觉)。无论是文本段落,还是静态图像都无法超越它。好的过渡有助于引导用户下一步的交互。

第一次使用时用户无法真正预测即将发生的交互,但适当的动效可以帮助用户引导方向,不会觉得内容突然发生变化。

Mac OS最小化窗口时使用的功能性动效,这个动效将第一个状态和第二个状态连接起来。

(Mac OS最小化窗口动效)

层级跳转间使用的过渡动效,用户在列表中选择一个项目或卡片元素,并放大到详细视图。这个交互动效能够让用户保持维持对界面情景的认知。

(层级跳转间的过渡动效)

2.动效是明确的

想想看,很多转场用户是会频繁看到的,你一定要让这个过程够快,别让用户总是等。这个时间应该控制在300ms以下。

界面切换等场合,要关注动画质量

Material Design强调现实生活中积累的交互预期向数字空间的移植,于是设计指导一方面要求动画的形式必须具备现实中的运动的关键特征,同时也要求在界面转换时,如同现实空间那样,伴随动画动作的发生。

切换动画应如现实那样,具备这些关键特征:

1.有质量和惯性。上下方向运动时,运动受重力的影响,并不是匀速运动,而是类似向上抛物和下落,进而——2.进入和离开视野是对速度应该是最高速度,案例如下:

官方指导中还特意给出了不符合这一规律的动画案例,作为对比,这种与自然状况不吻合的运动会额外牵引我们不必要的注意力,增加用户的认知负担,坏案例如下,进入画面后加速,离开前减速:

一脉相承的,考虑降低用户认知负担,官方指导还要求所有的界面切换都应该有承接前后界面的、相关的、有意义的动画作为过渡。

比如列表中点击一个项目后的展开,屏幕不应突然切换,相关内容滑入屏幕,会是一个更好的做法,如果支持手势操作,用户反方向滑动屏幕能够直接回到列表,就更加酸爽了!

Teambition智能日程表中「今天」中的事件:

快速完成动画,用户就不必等待动画结束。

6、清晰

避免在一次动效中做多件事情,因为当多个项目需要在不同的方向或交叉路径移动时,它们就会变得很混乱,让用户晕头转向。

(错误方式)

过渡应该是清晰的,简洁的,连贯的。关于动效,请记住少即是多。因此,我们应该只关注动效对用户的实际价值。

(正确方式)

如何制作材料设计的动效?

让你的动画足够快保证用户不必等待这个过程的逐渐完成。

让材质、层叠与动画效果体现信息逻辑

借鉴现实中纸张层叠排列的光影效果,和海报中常见的强烈的颜色反差,新的 Material Design 设计指导想尝试用能更接近用户生活经验的方式来呈现信息的层级结构。

大致有这些首要的原则:

成功的动效设计具有以下6个特征:

5、快速

当元素在位置或状态之间移动时,运动应该足够简洁快速,不要造成用户的等待,同时又能保证过渡动效能够被用户所察觉并理解。

避免过慢的动画,因为它会造成不必要的迟缓并增加完成操作的耗时。

(错误方式)

错开和放慢过多元素的运动会延长持续时间。

(错误方式。图片来源:MaterialDesign)

快速的动效,让用户不必等待动效完成。

(正确方式)

用户会经常看到它们,所以应保持过渡时间短,保持动效持续时间在300毫秒内。

(正确方式)

即使这些app有着不同的功能,但是他们相似的动画体验让人感觉他们是有关联的。

Mac OS在最小化窗口的时候使用一个功能性的动画效果。这个动画将窗口的两个状态连接在了一起。

让信息呈现一致,顺应用户预期

应用图标和功能图标呈现应该一致与清晰,包括,

物体对于用户意图的恰当反馈。图片来源:Material Design

1、响应

视觉反馈在用户界面设计中是非常重要的,因为渴望得到确认反馈信息是用户的一种天性。在现实生活中,按钮、控制键和其它物体会因我们的操作而产生相应的反馈,这已经是人们习以为常的交互方式。

用户界面应该在用户点击输入框时,就准确及时地给予响应,表现出上一界面和当前界面的关系,以及哪些元素和操作导致了当前界面的出现。用户通过点击应用程序总是能知道发生了什么,这感觉很好。

(元素对用户的操作意图给出了合适的回应)

材料设计的动效通过模仿真实世界的力,而展现了自然的运动过程。

在UI设计领域,视觉上的反馈是极其重要的,好的视觉反馈之所以起到作用是因为它符合了人们在认知上的自然预期。想想看,在真实生活中,按钮,控件和其他物品大都能够针对我们的操作做出友好的响应,而这种真实的体验也应该迁移到界面设计中。

作者:钱卓群

最新上线现金棋牌 1

功能性的动效是指一种微妙且具有清晰合理目的的动画效果。它能减少认知负荷,防止对(界面)变化的忽视、还能帮助用户在界面的空间关系之中建立惯性回忆。更重要的是,动效给用户界面赋予了生命。

动效的好处可以从以下两个例子中明显看出:其中一个app遵从这些模式,而另一个没有遵从。

元素在不同的位置或状态间转变时,其运动应该足够快到不用让用户等待,但同时也要足够缓慢好让用户能够理解这个过程(快速的同时保证用户理解)。

应用图标方面

  1. 应用图标上的元素不超过两层的层叠

2. 应用图标上引入z轴分布时,每层不要超过1dp厚(160dpi屏幕上的1像素),仿佛是纸叠出来的,可以引入阴影加强层次关系

  1. 平视,不透视,不扭曲(这是在打MS全线产品的脸啊)

避免令人意外的过渡效果。所有的运动都应该遵循真实世界中力的作用。现实中,一个物体加速减速的快慢,受它的重量和表面摩擦力影响。类似的,在好的界面设计中,启动和停止不会立刻发生。

2、关联

新出现的界面需要和那些导致它出现的元素或操作联系起来。这种联想式关系所隐含的逻辑,能帮助用户理解刚刚在视图的布局中发生的变化和什么触发了变化。

下面你能看到两个导航菜单的动效案例。第一个案例中,菜单从用户点击点以外很远的地方开始浮现,这就打破了点击行为和菜单动效的联系。

在第二个例子中菜单从接触点出现,这就将元素关联在了接触点上。

另一个例子是在特定条件下操作按钮功能的变化。“播放”和“停止”按钮可能是切换开关最常见的例子。将播放按钮转换为暂停按钮意味着这两个动作是相连的,并且点击一个按钮后另一个按钮才会出现。你应该提供按钮动效让这两种状态转换地更为流畅且避免间断感。

(平滑地过渡到一个播放控件并告知用户按钮的功能,同时增加了一个惊喜的交互元素。图片来源:Material Design)

润色整个app:个性化、令人愉悦

6、干净的

层叠关系

交接界面之间(比如导航栏、工具栏与内容部分)的独立性(比如是否会共同移动)不同,最好在z轴的高度层次上有体现,平边(seams)则连接两个共同移动的界面,仿佛一张纸推动着另一张纸移动。

而不共同移动端界面交接最好是形成层叠(steps),交接边界用阴影区隔,宛如一张静止的纸盖着另一张移动中的纸。

官方设计指导中着重解释了应用的导航栏、工具栏与内容各种不同的相对运动情况下应该采用的不同边界层叠模式,有纸夹式(clips)、瀑布式(waterfalls)、平移式、覆盖式等等。

Teambition各线产品采用的主要是纸夹式。

非常感谢!

3、自然

避免令人诧异的过渡,每一个运动都应该遵循现实世界中的作用力。在现实世界中,一个物体加速或减速的能力受重量和摩擦力的影响。同样的,好的界面设计中,动效的启动和停止也不能过于突兀。

下面你可以看到一个很好的例子,用户选择列表中的一项放大到详细视图。在扩展过程中,小卡片沿着弧线移动到它的目的地,扩展成一个更大的卡。

(正确方式。在屏幕上向上移动的元素应该在运动过程中出现加速的力)

在真实的世界中,一个物体可以被重量、表面摩擦力影响很快的加速或减速。同样的,材料设计的动效也是不会发生突然停止,或者突然启动,都是会有一个加速度或者减速度。

转场应该清晰、简单而连贯一致。对于动画而言,少即是多。因此我们应该关注于对用户起到实用性作用的动画效果。 

会心一笑的小细节

官方指导花了一节来鼓励开发者往应用内加入令人会心一笑的小细节(delightful details),会根据当前界面状态变化的图标,比如点赞数字酷炫的无缝转变,比如播放器中 播放 与 停止 标识的无缝切换。

我们也埋入了不少这样的小彩蛋等大家发掘。 比如「今天」当中,返回顶部按钮,随着你往前回溯或者往后展望日程,都会想指南针一样指向今天的事件应该在的位置,一定距离之后就平滑转动,变了传统的“返回顶部”按钮。

把新产生的界面,与触发它们的元素或操作关联起来。关联性背后的逻辑,能帮助用户在界面布局中理解刚发生的变化是什么导致了变化

通过对界面元素进行组合、拆分、改变他们的形状和大小,动效可以让界面更加生动。你应当使用功能性动效流畅地在上下文间引导用户,解释屏幕上元素排列的变化,以及加强元素层次结构。

正确:在转场的过程总,用户被引导到了下一个视图。表层的转场清晰的传达出层级关系。loading的过程在后台进行,以减少延迟时间。

3、自然的

导语

Material Design 主张将现实世界中的交互体验,应用到界面设计中来,以求用户的经验能够迁移,并更快习惯新系统。Teambition 已经根据 Material Design 重新设计了旗下所有的 Android 客户端产品。在实践过程中,设计和产品团队总结了一些值得分析的要点,与大家分享。