移动应用里的转场动画设计

　　转场动绘能够经由过程许多种方法去强化用户止为，那挪动使用里有些甚么转场动绘呢？正在那篇文章中，我们将报告当功用性的动绘弥补视觉设想战撑持交互时的常睹状况。

　　动绘是用户体验的主要构成部门。当触及到挪动使用的转场时，您能够经由过程详尽的动绘通报丰硕的疑息。收收疑息、翻开设置、面击复选框、导航来其他页里-那些皆是变革的时辰，对转场停止动绘设想是一种强化用户止为的尽佳方法。

　　正在那篇文章中，我们将报告当功用性的动绘弥补视觉设想战撑持交互时的常睹状况。

　　1、供给体系的形态

　　当用户触收了某些操纵时，他们希冀获得一个视觉反应，体系需求明晰天表白它曾经领受到那个操纵恳求同时正正在运转中。

　　那里有一些无益于用户体验的动绘反应案例：

　　1. 确认用户操纵

　　用户获得体系关于该操纵确实认，当用户能够获得有用的视觉反应，那便能够避免用户从头面击操纵元素。

　　Notify users of the results of their actions. Image: Colin Garven

　　2. 利用下推革新关于页里的内容停止更新

　　减载提醒的视觉反应协助用户了解体系正正在关于用户的恳求做处置。

　　Subtle animation helps users understand what is going on. Image: Ramotion

　　3. 等候内容减载

　　减载其实不必然很单调，险些一切的挪动使用皆能够正在页里减载时，操纵奇妙的动绘去避免用户分开。减载动绘能够连续占有用户的视觉反应，成果便是用户觉得等候的工夫更短。

　　Animation can keep the user engaged even before the app fully loads. Image: UI8

　　2、正在使命流程中毗连差别的步调

　　偶然用户需求一系列的步调去完成操纵，而那些步调需求明晰的标明他们是严密相连的，动绘可以协助您毗连差别的步调缔造一个完好的体验。

　　上面是一个怎样操纵动绘去缔造持续线性变乱的优良案例：

　　Image: Jakub Antalík

　　动绘能够协助设想师缔造渐进式展示，渐进式展示经由过程削减统一工夫内疑息量的展示，使界里愈加简朴易教。

　　那里有两个很好的例子，阐明利用渐进式展示供给故意义的疑息块。

　　Image: Anton Skvortsov

　　3、引进新元素

　　当我们正在页里上引进一个新的元素时，我们测验考试将用户的留意力散焦正在那个工具上，同时协助他们答复那样一个成绩：“为何我会看到那个新工具”？

　　动绘能够协助您正在引进新元素时界说工具之间的干系战层级。

　　Animation can show where new objects are coming from. Image: Virgil Pana

　　4、供给用户空间圆位感

　　动绘可以协助用户构建空间感更好的心智模子，特别是敌手机用户而行，正在小屏幕长进止短工夫存眷那种组开方法，很简单招致用户正在屏幕之间丢失标的目的。

　　我们能够用动绘指导用户，动绘有助于注释疑息怎样从一种形态流背另外一种形态。经由过程背用户供给闭于他们今朝正正在停止的操纵的疑息，能够避免用户丢失标的目的。

　　Orientational animation lets you know where are you now in relation to where you came from. Image: Jae-seong, Jeong

　　正在接下去的案例中，浮动操纵按钮(FAB)转换到顶部，并背用户阐明那两个工具之间的互相干系。

　　Animation can help you build a relationship between elements. Image: Anish Chandran

　　5、削减认知背荷

　　认知背荷是利用产物所需的脑力劳动，认知背荷间接影响用户怎样沉紧天取挪动使用发生交互。普通去道，利用产物的事情量越年夜，产物便越不睬念。

　　做为设想师，我们的目的该当是缔造简朴易用的界里。假如过利用恰当，动绘能够削减用户正在完成使命时的事情量。

　　正在年夜大都的挪动使用中，用户不能不挖写许多表单，很多表单皆将文本占位符做为字段地区的标签。当用户面击那些字段地区时，标签便会消逝。

　　成果便是：用户很易弄浑那个字段地区代表甚么，浮动标签协助用户了解高低文，同时让用户正在取少表单发作交互时感应温馨。

　　When it comes to user input, don’t rely on users memory. Make all critical information visible. Image: MDS

　　6、协助用户了解功用变革

　　当元故旧互后，元素的功用也随之变革。举个例子：当用户面击了一个按钮后，那个按钮便代表了差别的寄义，动绘能够协助用户找到“那个元素如今做甚么”的谜底。

　　正在脚机界里中，开闭便是个常睹的功用性改动的例子，动绘协助用户了解当前元素的寄义。

　　Button animates on tap so users can see the change. Image: Jurre Houtkamp

　　正在一些案例中，单个元素的功用性改动会招致团体界里的变革。比方：汉堡菜单酿成“x”同时激活了新的界里。

　　Make it clear to users that object utility was changed. Image: Tamas Kojo

　　7、总结

　　动绘正在庞大场景中的利用长短常壮大的，它处理了界里中许多功用性成绩，同时让用户觉得到产物实在战热诚的反响。不管您设想哪一款挪动使用，动绘皆将协助您背用户愈加有用天报告故事。

　　本文做者：pazzamanu

　　本文链接：https://uxplanet.org/animated-transitions-in-mobile-apps-412b8e8478e7

　　译文做者：pazzamanu

　　译文链接：https://www.jianshu.com/p/7f6648a09149

　　本文由 @pazzamanu 受权公布，已经做者答应，制止转载

　　题图去自 Pexels，基于 CC0 和谈