移动应用程序中的动效转换

动效是用户体验的重要组成部分。 当涉及到移动应用程序的转换时,有很多东西可以通过动效非常巧妙地沟通交流。 发送消息,打开设置,选中该框,导航到另一页 - 这些都是界面变化的时刻。 在界面过渡时进行动效制作是强化用户行为的绝佳方式。

在本文中,我们将回顾功能性动效丰富视觉设计和支持交互体验的常见情况。

https://dribbble.com/Ramotion

提供系统状态

当用户触发某些操作时,他们希望看到一个视觉响应的反馈 - 系统应该明确表示它已收到请求并正在进行处理。 以下是动效反馈提升用户体验的几种情况:

确认用户操作

用户得到系统收到该操作指令的确认。 当用户有视觉反馈时,这可以防止他们再次重复点击元素。


反馈用户他们的行为结果。https://dribbble.com/ColinGarven

刷新页面内容

使用下拉指令来刷新页面上的内容。 加载指示器(loading)格式的视觉反馈可帮助用户了解系统正在处理他们的请求。


巧妙的动效可以帮助用户理解正在发生的事情。https://dribbble.com/Ramotion

等待内容加载

加载不一定很无聊。 几乎所有的应用程序都可以在加载内容时利用巧妙的动效来防止用户离开。 加载动画可以占用用户的视觉反馈,因此用户会感受到更短的等待时间。


动效可以保持用户在应用程序加载完成之前参与其中。https://dribbble.com/UI8

在多步骤过程中连接不同的步骤

有时用户需要通过一系列步骤来完成操作。 应该清楚的是,每一个步骤之间是相互连接的。 动效可以帮助您连接每一步操作以创建一个完整的旅程。

下面是一个很好的例子关于如何使用动效创建线性事件的进程。


https://dribbble.com/antalik

动效可以帮助设计师创建渐进式披露。 渐进式披露通过减少一次性呈现的信息量,使界面更易于学习。 以下是两个很好的例子关于使用渐进式披露在有意义的模块中提供信息:


https://dribbble.com/Ramotion
https://dribbble.com/AntonSKV


引入新的元素

当我们在页面上引入一个新元素时,我们试图将用户的注意力集中在该对象上,并帮助他们回答这个问题——“为什么我会看到一个新对象?”。当引入新元素时,动效可以帮助您定义对象关系和层次结构。


动效可以显示新物体来自哪里。https://dribbble.com/virgilpana

给用户一种空间定位的感觉

动效可以帮助用户建立更好的空间信息心理模型。 这对于移动用户来说尤其重要 - 将短时间关注和小屏幕尺寸组合在一起可能会导致用户在屏幕迷宫中迷路的情况。

我们可以使用动效来指导用户。 动效有助于解释信息如何从一个区域流向另一个区域。 通过向用户提供关于他们目前正在进行操作的信息,可以防止用户迷路。


方向性动效让你知道你现在在哪里与你来自哪里。https://dribbble.com/johnjbrown

在下面的例子中,浮动动作按钮(FAB)转换为标题,并向用户说明这两个对象之间的相互关系。


动效可以帮助你建立元素之间的关系。https://dribbble.com/anish_chandran

尽量减少认知负荷

认知负荷是使用产品时所需的脑力总量。 认知负荷直接影响用户与您的app的交互方式。 一般来说,使用产品所需的脑力总量越多,这个app就越不理想。

作为设计师,我们的目标应该是创建一个易于使用的界面。 如果使用得当,动效可以减少用户使用过程中完成操作所需的工作量。

在几乎任何应用程序中,用户都必须填写一些表单。 许多表单都将文本占位符作为字段的标签。 当用户点击这个字段时,标签消失。 因此,用户很难弄清这个字段代表什么。 浮动标签可帮助用户保持上下文的连贯,并使其在长表单的交互中更加舒适。


当涉及到用户输入时,不要依赖用户的内存。 使所有关键信息可见。https://dribbble.com/mds

允许用户理解功能变化

功能性的改变发生在元素进行交互之后改变其功能时。 例如,当用户点击按钮时,该按钮将意味着不同的意义。 这个动效可以帮助用户找到问题的答案——“这个元素现在意味着什么?”。

一个功能变化的常见例子是切换, 可以在很多移动界面中看到。动效可以帮助用户了解元素所处的状态。


在点击按钮上使用动效,以便用户可以看到更改。https://dribbble.com/jurrehoutkamp

在某些情况下,单个元素的功能变化会导致整个视图的功能变化。 例如,一个汉堡菜单变成'X'并激活一个新的视图。


向用户明确表示对象实用程序已更改。https://dribbble.com/tamaskojo

结论

在复杂的交互操作时,动效的功能是强大的。 它解决了界面中的许多功能问题,并使他们感到活跃并真正对用户作出交互反馈。 无论您设计什么应用程序,它都会向您的用户讲述故事。 动效的功能可以帮助你更加有效地讲述故事。



我的设计作品(Dribbble):https://dribbble.com/exciting


本文翻译来自Medium感谢Nick Babich

原文链接

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

推荐阅读更多精彩内容