APP动效交互|切换动画设计

功能性的动画微妙,清晰,逻辑清楚,能够减轻用户认知负担,建立更好的人机交互体验。而且,它还可以赋予界面生命力。

动画通过改变切分元素,改变它们的形状和大小赋予页面活力。你应该利用功能性动画来让切换变得更加流畅自然,把切换更加合理,帮助用户理解内容层次。

成功的动画设计应该具备以下几个特质:

1.响应式的

视觉反馈在界面设计中非常重要,因为对于用户来说这符合他们的心理预期。在现实生活中,按钮,开关都是会给出相应反馈的,这是他们所期待的事物运行的模式。

用户界面应该快速准确地响应用户输入,并且展示新页面或者新元素和触发它们的元素之间的关系。

2.关联的

将引起变化的按钮或元件与变化之后的界面联系起来。这种关联背后的逻辑是为了让用户能够更好地理解页面布局上发生的变化以及变化的原因。

下面是两种菜单呼出动画。在第一个例子中,菜单的出现离触发按钮很远,打破了这种关联关系。

在第二个例子中,菜单从按钮的右上角弹出,直接与触发点联系起来了。

另一个例子是,按钮在点击之后发生了功能变化。“播放”按钮点击之后变成“暂停”就是一个很常见的例子,这种变化让用户很容易理解两个功能之间的关联性:点击“播放”功能之后“暂停”功能启用。但这种切换必须是连续的才有意义。

3.自然的

避免突然的切换。任何一个动画都应该是自然的。在物理世界中,一个物体的加速和减速是受它的质量和表面摩擦力影响。同样,开始或停止在界面上也不会自动发生,而是需要某种力量去推动。

下面这个例子中,用户点击了列表中的一个项目来放大查看它的详细信息。在展开的过程中,小卡片通过一个弧线运动到它的目的地,在上升的过程中,慢慢减速直到停下来,这个交互过程是自然的。

4.有目的的

动画的特殊性决定它通常都是交互过程中的焦点,没有任何静态的图片或者文字可以跟它媲美。一个好的动画可以帮助用户顺畅地衔接到下一个页面。

在用户无法判断下一步将发生什么的时候,动画可以很好地缓解这个盲区,至少可以指出即将发生事情的方向,让用户觉得新内容的出现不至于那么突兀。

Mac系统在最小化窗口的时候用了“神奇效果”的动画,把窗口的两种状态很好地衔接在一起。

另一个很好的例子是父页面和子页面之间的切换。当用户选择列表或者卡片中的一个项目放大查看它的详细信息的时候,让用户可以保留父页面的情况下查看子页面信息。

5.快速的

当页面元素在不同位置之间移动或者切换自身状态的时候,变化的速度要足够快,让用户感觉不到等待,但是也要足够慢让用户完全理解。所以这个时间尺度要把握好。

不能让动画速度过慢导致一些不必要的延迟。

动画速度要快让用户感觉不到等待。

让切换时间缩短,因为用户会经常看到这些切换。保证切换动画时间在300ms以下。

6.清晰的

切换动画不宜在同一个APP中做太多,因为当很多元素都在界面上移动的时候用户会晕。

切换动画应该要清晰,简单,连续。切换动画的原则就是“少即是多”。我们应该聚焦于切换动画对用户来说的实际意义来设计。

总结

综上所述,动画不是随机的,每一个动画背后都应该有特定的目的。不管你的APP事趣味型的,游戏型的,还是严肃的,使用动画的时候都请注意以上几个原则,它可以帮助你提供一个清晰快速流畅的用户体验。

用心设计,对每一个细节都保持敏锐是你取得成功的关键。

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

推荐阅读更多精彩内容