翻译 | 移动应用里的转场动画

动画是用户体验的重要组成部分。当涉及到移动应用的转场时,你可以通过细致的动画传递丰富的信息。发送信息、打开设置、点击复选框、导航去其他页面-这些都是变化的时刻。对转场进行动画设计是一种强化用户行为的绝佳方式。

在这篇文章中我们将回顾当功能性的动画补充视觉设计和支持交互时的常见情况。

提供系统的状态

当用户触发了某些操作时,他们期望得到一个视觉反馈,系统需要清晰地表明它已经接收到这个操作请求同时正在运行中。这里有一些有益于用户体验的动画反馈案例:

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


在任务流程中连接不同的步骤

有时用户需要一系列的步骤来完成操作。而这些步骤需要清晰的标明他们是紧密相连的。动画能够帮助你连接不同的步骤创造一个完整的体验。

下面是一个如何利用动画来创造连续线性事件的优秀案例。

Image: Jakub Antalík


动画可以帮助设计师创造渐进式展现。渐进式展现通过减少同一时间内信息量的展现,使界面更加简单易学。这里有两个很好的例子,说明使用渐进式展现提供有意义的信息块。


Image: Anton Skvortsov

引入新元素

当我们在页面上引入一个新的元素时,我们尝试将用户的注意力聚焦在这个对象上,同时帮助他们回答这样一个问题,”为什么我会看到这个新对象“?动画可以帮助你在引入新元素时定义对象之间的关系和层级。


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


提供用户空间方位感

动画能够帮助用户构建空间感更好的心智模型。尤其是对手机用户而言,在小屏幕上进行短时间关注这种组合方式,很容易导致用户在屏幕之间迷失方向。

我们可以用动画引导用户,动画有助于解释信息如何从一种状态流向另一种状态。通过向用户提供关于他们目前正在进行的操作的信息,可以防止用户迷失方向。

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


减少认知负荷

认知负荷是使用产品所需的脑力劳动。认知负荷直接影响用户如何轻松地与移动应用产生交互。一般来说,使用产品的工作量越大,产品就越不理想。

作为设计师,我们的目标应该是创造简单易用的界面。如果过使用得当,动画可以减少用户在完成任务时的工作量。

在大多数的移动应用中,用户不得不填写很多表单。许多表单都将文本占位符作为字段区域的标签。当用户点击这些字段区域时,标签就会消失。结果就是,用户很难弄清这个字段区域代表什么。浮动标签帮助用户理解上下文,同时让用户在与长表单发生交互时感到舒适。

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


帮助用户理解功能变化

当元素交互后,元素的功能也随之变化。举个例子,当用户点击了一个按钮后,这个按钮就代表了不同的含义。动画可以帮助用户找到“这个元素现在做什么”的答案。

在手机界面中,开关就是个常见的功能性改变的例子。动画帮助用户理解当前元素的含义。


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


总结

动画在复杂场景中的使用是非常强大的。它解决了界面中很多功能性问题,同时让用户感觉到产品真实和真诚的反应。无论你设计哪一款移动应用,动画都将帮助你向用户更加有效地讲述故事。


原文:https://uxplanet.org/animated-transitions-in-mobile-apps-412b8e8478e7

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 158,736评论 4 362
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,167评论 1 291
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 108,442评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 43,902评论 0 204
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,302评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,573评论 1 216
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,847评论 2 312
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,562评论 0 197
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,260评论 1 241
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,531评论 2 245
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,021评论 1 258
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,367评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,016评论 3 235
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,068评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,827评论 0 194
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,610评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,514评论 2 269

推荐阅读更多精彩内容