恭喜你成为UI中国推荐设计师 (详情)
//百度统计 20220402 uicn

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

提交需求

赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!

0/20
0/200

设计大赛

  • 设计大赛
  • 发布广告
  • 发布招聘
  • 其它需求

提交完成
感谢您对UI中国的支持和信赖!
动效是如何创造情感的?
0.0°
2020-05-15 自译外文 经验/观点 原作者: Nick Babich 举报 8553 142 215 6

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


使用动画讲故事


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


使用动效描述复杂的概念

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


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



“动画叙事”

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


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



基本的移动互动使用


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


难忘的首次登录体验

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


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


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



有趣的滚动效果

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



丰富与数据的互动

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



留下反馈变得更加自然

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


Powered by Froala Editor

微信公众号:设计文

更新:2020-05-15

收藏

142人已收藏

溜滑冰

微信公众号:设计文

  • 23

    作品

  • 356

    粉丝

  • 124

    关注

  • 用户体验设计师应了解的6条视觉设计原则
  • 激发用户内部动机,该怎么做?
  • 这10条交互设计规则,你必须得遵守
  • 这些实用小技巧,能快速改善你的UI设计
相关标签
设计经验分享

    猜你喜欢

      2020-05-15 自译外文 经验/观点 原作者: Nick Babich 举报 8553 142 215 6

      动效是如何创造情感的?

      0.0°

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

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

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

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      215
      142
      6

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

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

      登录

      手机号

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

      登录
      第三方账号登录