下一个转场,动画见

好的动画转场能够提升用户体验,今天翻译的文章将说明动画与用户体验的关系,以一些精彩的动画转场案例。以下是译文:

在设计数字产品时,为用户提供无缝体验是广受欢迎的目标。 现代设备和软件已经实现了在屏幕上进行元素之间的复杂过渡,作为设计师,我们应该接受这种为更好的用户体验索带来的发展。 但是如何定义一个好的转场呢?

好的动画是看不见的。 你不注意到你是在看动画。 ——帕斯夸里德

1. 动画和用户体验

为了更好地定义转场,了解动画和用户体验之间的关系非常关键。

  • 动画贯通上下文

如今,数码产品已经能够使我们做之前难以想象的事情,如从你的手腕上订购一辆出租车或无需思考就能准备好一顿饭。 随后,这意味着作为一个成功的产品界面设计师的工作是至关重要的。 通过所有这些复杂的交互和可能性,用户可以快速贯通和产品定位。 如果元素在屏幕上突然(重新)移动,你可以失去对界面的理解。在电影中当有人经过时间机器时使用动画和音效并不罕见,所以在界面设计时也很自然地使用动画。

  • 动画提供反馈

使用动画可以为用户提供有价值的反馈,而不会弄乱界面或避开用户信息。 一个很好的例子是iOS上的相机应用程序,当它试图对焦于一个对象,十字准星淡入并通过收缩模仿抓住焦点。当抓住正确的焦点,曝光会闪烁两次然后逐渐消失,告知用户准备拍照了。 这些类型的动画在没有避开用户的前提下提供非常具体的信息。

  • 动画突出重点

如果一个界面功能拥有很多元素,它可以将用户的注意力在屏幕上转移到一个特定的元素。 使用动画使设计师能够通过位置,规模和不透明度来吸引用户的注意力。 另一个技巧是使用异步时间轴动画将注意力放在变化的元素上。

如果不使用动画,流程会感觉不流畅;如果不是,这可能意味着你的动画是多余的。 ——迈克尔·维拉尔

  • 动画不解决用户流程

动画绝对可以帮助提高界面使用体验,但仅仅是一小部分的用户交互。动画可以帮助用户去理解的他们的设计之路,但需要确保路径是通往正确的目标和期望。

2. 交互设计中的动画

动画可以提升用户体验,但并不是每一个动画都适合你的产品。诺基亚在2010年做过研究,他们得出的结论是,用户就动画作为一个过渡的一部分是喜忧参半。 不过通过使用不同的速度和动画曲线,他们能够确定哪些是最理想的动画。

缓冲

计算机生成的动画是非线性的,而使用缓冲动画被证明是自然并更令人愉悦的。 诺基亚发现动画从慢到快的发展通常经历了从低到高的产品,最有可能是因为产品提供了慢于预期的反馈。

产品提供的反馈应该尽快转为产品消息并快速响应,即使最终到目的地的路径很缓慢。 如果已经展示出了产品的进步,用户通常更倾向于等待新的改变,所以越快地反馈进展,与用户建立连接也越快。 只要确保你的加载时间快,不必显示一致的进程,可以向下面这样:

2qdvpTCRuyvZce81cKv2NtQ

3. 动画转换的精彩案例

在用户界面上我们已经收集了一些例子,这些案例都增强了用户体验。

  • iOS上的日历

为了确保用户了解他们的日历,它提供了一个缩放和规模动画以保持上下文在屏幕之间的灵活过渡。 因为缩放动画,用户就会被呈现一种无形的系统布局,即底部是全年日期,上面一层是具体月份。

可见缩放动画帮助贯穿上下文。

  • iOS上的Facebook

使用动画来改善转场的另一个很好的例子是在Facebook应用程序中打开和关闭照片。无论点击任何照片,它都会提供一个全屏视图的照片。为改善体验,你点击停留在屏幕上的照片和自动变焦,而背后的界面和它的周围会逐渐淡入。关闭照片回到图片在时间轴的原有位置。所以使用这些小动画的界面很容易追踪正在发生什么。

  • Iconjar

这些动画并不限于移动设备。 例如在Iconjar网站上,当你点击一个链接它将揭示以无缝的方式打开一个下拉菜单。 因为下拉单的出现和隐藏,用户理解到它是源于你点击才出现的。

4. 总结

动画不仅提供美观的界面,还可以是真实的用户体验改良剂。关键在于在有趣和功能之间找到合适的平衡点,并确保用户流程是在没有动画的前提也是好的。一个良好的过渡是不突出的,不仅增强了用户体验,同时是有趣的。

来源:medium   翻译:Tina

原创文章,作者:Tinadmin,如若转载,请注明出处:https://www.iamue.com/6809/

(0)
TinadminTinadmin
上一篇 2015-07-03 12:11
下一篇 2015-07-07

相关推荐

  • 动态响应-应用程序的身体语言设计

    引言:如果把APP比作一位美女,那么icon是她的证件照,界面是她的形体,而动效则是她的肢体语言。

    2014-12-30
  • 《设计师要懂心理学》读书笔记

    语言简单明了案例通俗易懂,它可以让你的设计有理有据,而不会在视觉评审时,被人质疑为啥这样设计时,不知如何辩驳。

    2016-02-03
  • sketch 3.6.1(破解版涵盖3.0以上版本) 安装and使用指南(20160303更新)

     截至2015  6月23 日  SKetch 常用版本  3.2.2 、 3.3.1 、3.3.2    3.4.4 截至2016 3月2日  常用版本 3.5.1 ,3.5.2  ,3.6.0  3.6.1 Sketch 安装指南 安装版本 : 3.2.2  3.3.1  3.3.2 安装环境:mac book pro 20…

    2016-04-13
  • 其实,设计LOGO并不难!用对工具,你也可以成为设计师!

    Logo是一个企业丶团体丶组织或独立个体的视觉识别形象代表。通常是人们一眼看见所产生的第一印象,因此如何创造出一个令人印象深刻的logo,来帮助您建立您心目中所期望塑造的品牌形象是一门大学问。一个好的logo对于一个品牌打入市场的成功与否,扮演着举足轻重的脚色。因此投入足够的时间来绞尽脑汁,设计出一个独一无二的logo是不可避免的过程。

    2016-09-18
  • 用户体验分享-儿童玩具上的用户体验与交互设计

    大约在同一时间,我成为了一位父亲,我刚进入用户体验世界,试图找出如何使我的产品,够了吧,可以理解的、 易于使用,并且直观。我是一个巨大的玩具迷,还是玩,他们之前到达了我的儿子,但他在房子里意味着更多的玩具和更多的机会来观察他与他的玩具在他的生活非常首个月的交互。看着他让我想起了关于如何普遍经验和界面设计是在我们的生活从一开始,从这些经验,我们能学到多少 — — 尤其是如果我们打算建立一种可以理解的产品。

    2015-01-03
  • Material Design设计初步尝试

    Material Design(以下简称MD)是Google在Android 5.0发布后主推的ue设计规范,旨在解决Android平台设计风格不统一的问题,其核心理念“材质化”是基于拟物与扁平之间的设计,强调真实世界元素的物理规律与空间关系,…

    Material Design 2015-08-26
  • 中国银联副总裁柴洪峰演讲实录:用户体验对移动支付是核心的竞争力

      中国银联执行副总裁柴洪峰发表主题演讲。 他表示:用户体验对移动支付是核心的竞争力,希望在产业链各方的合作下,把用户体验产品做到极致,并以迭代开发的方式不断适应变化的用户需求,争取来满足大家的要…

    2015-12-06
  • 深度点评亚马逊、微软、谷歌、IBM 等 6 大机器学习云

     来源:InfoWorld 译者:朱焕 【新智元导读】机器学习云这么多,各家特色是什么?哪个适合练级,哪里高手齐聚?哪家有不为人知的 Bug?最重要的,哪个最适合解决你的问题?资深程序员实测点评亚马逊、微软、谷歌、I…

    2016-05-24
  • 28页PPT详解腾讯数据挖掘体系及应用

    28页PPT详解腾讯数据挖掘体系及应用

    2016-09-18
  • 借假修真

    借假修真,看上去有点玄乎的词语,顾名思义,就是在借着做一些事情(事物),来提升另外一种能力。前者称为假,后者称为真。 什么是假什么是真?佛学中讲,身体是假,佛道是真。身体从无到有,又从有到无,只不过区区…

    设计理论 2015-12-30