恭喜你成为UI中国推荐设计师 (详情)

您的意见是我们 UI 中国进步的动力!
点击立即反馈按钮,发表您的意见!
立即反馈
QQ群反馈
您也可以加入UI中国官方反馈群进行反馈!
群号:302892100
备注:反馈问题后@管理员能让我们及时了解您的意见

动效是如何创造情感的?

自译外文 分类: 经验/观点 版权: 原作者: Nick Babich
7168 139 211 6
2020-05-15
50.7
首页推荐

动画效果通常被设计师认为是可以改善用户体验的东西,但是大多数动效并没有增加多少价值。那么如果我们重新考虑实现动画的方式并将其用作设计的基础该怎么运用?在本文中,我将介绍如何应用动效来创造情感。


使用动画讲故事


每种经历都是一种叙事。无论你使用哪种类型的应用程序或网站,都有一些特定的信息要传达给用户或访问者。设计师的目标是以最有效的方式传达故事。


使用动效描述复杂的概念

您可以按照多种方式讲述故事,其中一种莫过于通过在画面上引入动效,可以增强图片的效果。动效不仅可以帮助设计人员更有效地传达信息,还可以使整个故事更具吸引力。当设计师将这一原理应用于设计时,他们会创造出真正令人难忘的体验。


让我们看看“显示,不告诉”概念在特定情况下如何工作-一个强调回收重要性的网站。设计人员没有使用动画来显示人们应如何处理垃圾,而是告诉访客为垃圾提供正确处理的重要性。



“动画叙事”

叙述是事件的线性进展,这些事件在整个用户体验中都联系在一起。设计师创建数字叙事的最简单方法之一就是使用视差效果。当用户向下滚动或跨页面滚动时,UI设计中的视差效果会创建3D滚动效果。


视差效果具有明确的功能目的。它支持视觉连续性 -帮助访问者了解他们在体验中所处的位置。



基本的移动互动使用


在动效的帮助下,可以进行日常的基本交互,并使它们变得新鲜而出乎意料。动画效果对移动应用程序特别有用-它们使用户忘记他们只是在轻敲一块玻璃,而使他们感觉好像他们正在与屏幕上的真实元素进行交互。


难忘的首次登录体验

动画可以帮助用户查看其动作的效果。在用户初次使用应用程序时,建立良好的第一印象。


检查以下示例。您可以看到动画效果如何将用户引导至下一个视图-曲面进行变换以传达层次结构。


Readme.io应用程序是动画如何使首次登录受益的另一个很好的例子。该应用程序在登录期间使用猫头鹰吉祥物。当用户点击密码字段时,猫头鹰遮住了眼睛。当你第一次看到该动画效果时,它真的很有趣。



有趣的滚动效果

动效可以考虑对象的物理属性。在下面的示例中,滚动效果通过考虑液体的行为来增强物理感。



丰富与数据的互动

当设计师使用有趣的动效时,甚至诸如数据可视化之类的众所周知的概念也变得新鲜和出乎意料。



留下反馈变得更加自然

动画非常适合提供反馈-让用户知道正在发生或已经发生的事情。通过将微妙的动画效果注入到设计中,您可以使用户感到自己正在与具有个性的事物进行交互。


Powered by Froala Editor

微信公众号:设计文

推荐人:

UI中国

溜滑冰

微信公众号:设计文

330粉丝/112关注

UI中国核心编辑老马识途助人为乐首页达人当仁不让lv.1
这10条交互设计规则,你必须得遵守这些实用小技巧,能快速改善你的UI设计
2
鱼Book

想学习,要是有教程就好了

精彩!

你确定要举报动效是如何创造情感的?

如果查出恶意举报,十天内禁止提交任何举报申请。

0/200

上传证据: 超过10M的附件请使用网盘地址

点击上传附件

对谁可见:

全部设计师
  • 全部设计师
  • 推荐设计师和认证设计师

您确认要推荐?

该作品发布时间:2020年05月15日

评分

完整度

启发性

勤奋性

排版布局

推荐心得

建议20-200字以内

0/200

扫描二维码
去手机端查看海报

溜滑冰

TA已经获得12枚勋章啦

  • 成就勋章

    • 特别勋章

    • 身份勋章

  • 已拥有

  • 作品

    创造者才是真正的享受者。

  • 经验

    经验是一所好学校,可它的学生却经常旷课。

  • 活跃

    大神都是从围观群众开始的

  • 拓展

    作品、经验、活跃还不能满足你?

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票

账号或密码错误,请重新输入

账号或密码错误,请重新输入

登录

账号或密码错误

发送验证码 120s 验证码错误

登录

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2020 UI.CN