移动APP界面UI交互动画的6大要素

功能性动效(functional animation),是指清晰的、有逻辑、有目的的交互动效。使用得当可以有效的降低用户的认知负担,提高对应用的空间位置认知,避免使用中的盲目性。

动效可以通过灵活变化(形状、大小、位移、融合、重组等)使应用的界面更加充满活力。在应用UI设计中,我们应当巧妙的设计好的功能性动效(functional animation),使用户切换各个功能模块/页面的体验更加流畅,更好地解释一个界面里各元素的变化过程,更好地强化各个元素的层级结构关系。

成功的切换动效设计包含以下6大要素:

1   处处响应,及时反馈 Responsive

视觉反馈在UI设计中极为重要,因为它给了用户的自然期望以一个及时而符合逻辑的确认。比如,生活中,按一个按钮,就可以点亮一盏灯;按门铃,门铃就会响……交互过程中,只要人做出了一个操作,系统就应当予以及时的反馈,这符合我们的习惯和对即将发生的事情的预期。

1468848924-8032-9b62578853190000018c1b27998f

用户界面应当根据用户的触发的操作快速给予反馈,同时,应当表明新的界面和触发它产生的UI元素之间的联系,让人总是知道当前的操作将会带来什么变化。

1468848924-6100-5ae8578853cc0000018c1b2bf5e9

对象对用户的操作作出恰当的反馈,点击项目-展开详情,切换自然,符合预期

2    关联性(Associative 

触发一个动作的UI控件,与即将出现的新面板之间,必须有逻辑上的紧密联系。这样才有助于用户更好的理解这个操作。

下方是两个对比的实例:

第一个例子:触发的菜单和触发它的UI控件隔了较远的距离,打破了触发点和被触发事件之间的联系。

1468848925-4149-77125788543b0000018c1beb3f2d

第二个例子:点击菜单图标,菜单从紧贴它位置出现,从视觉格式塔心理学上,靠近的对象之间的联系密切,而远离的对象之间的联系薄弱。体现了它们之间的逻辑关联性。

1468848924-6293-b8975788543b0000018c1b2f699d

另一个是播放器“播放”按钮和“暂停”按钮的例子,这两个按钮是紧密关联的,点击其中一个按钮则另一个按钮立马变为可见。所以它们之间也需要具有关联性的过渡变换。下图很好的做到了这一点。

1468848929-8454-7c4d578854b00000018c1be65b17

3    过渡流畅自然(Natural

避免出乎意料的交互动效。任何元素的移动应当遵循现实中的物体运动规律。在现实生活中,一个物体对象的加速或减速一般都受到外力的影响(重力、摩擦力等),而且运动速度的变化是连续而非突变的,所以同样的,在动效设计里,突然的/奇怪的运动模式都会显得不自然,丧失愉悦的使用体验。

下方是一个不错的实例:点击小卡片-> 卡片和圆对象沿着一道平缓的圆弧进行缓动,而非突然闪现,或者沿着奇怪的路径(比如折线),同时卡片平缓的放大,切换自然舒服。

1468848931-7328-341a5788595c0000012e7e8192c2

4    带有目的性,而不是看心情(Intentional 

动效在交互中对视觉体验有着显著的影响,界面中的静态图片或者文字内容的导向作用都没有动效抢。因此,好的动效要正确恰当地指引用户进行下一步操作。

第一次使用某个应用的用户一般并不能预测交互何时何地会怎么发生,但是恰当的动效能帮助用户专注当前的目标,而不被干扰,感觉到当前显示对象的突然变化。

Mac OS 的窗口最小化动效,将当前窗口如同纸片一样收纳到下方的工作应用台,告诉用户点击“最小化”按钮的直接作用就是将当前的窗口隐藏到下方的工作台上,并且告知了用户具体的位置,方便他随时可以重新找到再次打开。这个过程也很流畅,用户可以专注于他处理的事件,而不是被突然打断,变得迷茫。

1468848928-6749-6c6b5788552c0000012e7e8ad4d2

另一个是父子关系转换的例子,用户点击小卡片,小卡片弹开放大显示详细的信息,信息的出现和展示井井有条,一切动效都是为了功能(合理地展示内容),让用户专注于内容本身。

1468848928-3139-96bd578855560000012e7e513882

5    快速灵敏(Quick

界面各个元素在发生位置或状态改变时,变化的速度不能过慢,而导致过长时间的等待。(同样也不能太快,以致于用户看不清、不能理解动效的逻辑含义。)

下方的例子中,各元素的缓动接连发生,且速度过慢,造成了不太必要的延时。是不可取的做法。

1468848928-4902-f0f3578855a80000012e7e533249

1468848929-6409-8a89578855cb0000012e7ebd2fee

改进后的正确做法如下:

1468848934-9259-eef2578859730000018c1b02315b

1468848934-3037-faff578855bb0000012e7e11edbb

6    简明清晰(Clear

在单次交互动效中,不宜发生太多样、太多元素的动态变化。交互动效应当清晰、简明、一致。“少即是多”的设计原理在此同样适用。酷炫不是目的,帮助功能的实现,信息的展示,适用的便捷才是目的。

下面这个交互动效中动态的样式过多,没有逻辑性,看起来很炫酷,但实际上干扰视觉,打断了体验

1468848937-6578-10ab5788564f0000018c1be31aa2

“少即是多”的设计原理在此同样适用。酷炫不是目的,帮助功能的实现,信息的展示,适用的便捷才是目的。改进后的效果好了很多,没有多余的视觉噪声,用户可以沉浸在内容中。

1468848944-8204-a95d578856510000012e7e721da9

结语

交互运动不应该随机产生,我们在设计每一个交互的时候,要记住背后一定需要一个目的/理由来支撑。动效的关键在于引导用户沿着正确的操作路径快速高效的达到目标,在任务过程中不迷失,不被突然打断。无论你的应用是有趣好玩、是严肃、还是简单商务风格,好的动效设计确实可以为用户提供一个清晰快速的操作体验。

注意每一个细节,做到一分不多,一分不少,恰如其分,一定可以创造出更卓越的交互体验,更为人喜爱的产品。

转载注明:yunrui
原文地址:zcool

分享到:

常见问题

  • 1、为什么PPT、APP和网页等模版里没有示例图片?
    因为这些素材只是模版,一般不包含里面的示例图片,示例图片是需要另外购买的;
  • 2、百度网盘为什么下载慢?
    国内只有在百度网盘放资相对靠谱,基本不会出问题,但百度网盘限制了非SVIP用户的下载速度和稳定性,不过使用百度云盘软件下载(不要用网页直接下载)会相对稳定,而且能断点续传;
  • 3、解压时提示损坏,是什么原因?
    可能没下载完,如果打不开请确定您下载的文件和百度网盘上一模一样大,如果您用的是MAC,下载下来的文件会比网上的大一些,如果文件一样大,还不能打开,请在底部留言;
  • 4、PS动作文件如何安装和使用?
    1.双击安装好所有的笔刷(.abr)、图案(.pat)和动作(.atn)等文件;
    2.选择分辨率在3000PX*3000PX,72dpi左右的高清素材图;
    3.使用英文版的Photoshop (PS中文变英文的办法 https://www.yrucd.com/74023.html);
    4.用PS打开素材,并且保证素材在background图层上(将素材合并到background上);
    5.新建空白图层,名为brush;
    6.在brush图层上用画笔覆盖素材主体物(该图层一般命名为brush,少量资源命名为profactions);
    7.在动作面板执行该动作,实现效果;
  • 5、素材更新频率和质量问题
    目前云瑞素材的日更新量增加了不少,所以多了很多不同种类的素材,之所以发这些素材,是为了满足更多人的需求,素材种类多了,就很难保证所有素材每一个人都喜欢,但品质我们还是会精选,也会根据用户数据反馈来调整更新策略;另外,后续也会和今日头条一样,做智能推荐,推荐你喜欢的内容,这样你不点的素材就很难再看到了。
  • 6、素材能商用么?
    素材仅供个人学习使用。

评价交流

返回页顶