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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
【UI设计必学习】有哪些功能性动效需要了解?
0.0°
2017-11-18 好文转载 教程 原作者: 优设 举报 3877 36 20 1

交互设计和动态效果的详情,带来的是网站或APP的根本改变。这种思维方法,在下面有详细的描述。

为了设计出更好的数字产品,从一开始网页或APP就要有良好的交互性质是非常有必要的。这一次,就将如何有效的运用UI动效的方法详细介绍给大家。


看了文章喜欢的可以加入UI设计学习群:514985251,群内可以找管理要UI设计的软件资源,晚上7点8点还有UI设计师讲解UI设计所以很适合想学习的朋友一起学。


功能性的动效是?

功能性动效,指的是在UI设计中作为功能的一部分被采用的小动效,有着非常明确和合理的目的。

为了减轻认知的负担。 防止发生变化时看漏(英: Change Blindness)。 在空间关系中确立良好的层级关系。

以用户为中心的设计方法,直观的用户界面,响应性,人性化等等都是必须的。功能性动效,将有助于你实现这些目标。那么,就让我们详细的来看一看功能性动效吧。

用功能性动效完善UX

对APP或网站的体验或印象,通过在好的地方使用动效,会更易于使用,让功能性更加完善。

通过仔细研究测试,功能性动效,都包含以下的功能、要点。

01. 可视化的反馈

舒适的交互设计可以提供更好的反馈。无论是否成功,反馈能告诉用户系统已经识别到了你的操作。显示出相互作用的结果。这组动效应特别注意控制。

Image title

△  反馈按钮

在我们的生活中,对按钮会有按下去的反应。进行会有怎样的反应的预测是十分重要的。

Image title

△  操作结果的可视化

按照基本规则,使用动画进行反馈,你可以很好的强调什么操作是错误的。

例如,如果你输入密码错误,让我们添加一个左右抖动的视觉动画吧。像出错啦,请再试一次这样,左右摇头的效果。当用户看到这些动效后,可以立即了解当前的状况。

Image title

另外,您还可以强化用户当前正在运行的动作。在下面的例子中,当用户点击提交按钮,在成功之前通过一点点加载动画来显示。加载的动效使用户感觉过程已经成功完成。

02. 抑制状态的变化

至于添加动效最好的地方,就是让变化的瞬间变得引人注目。用户界面状态的变化,特别是网站上突然的变化,很难让用户理解当前究竟发生了什么。在这变化的瞬间,就可以在UI中添加动效进行缓和。

建立连接

动画的变化,能向用户界面展示各种各样的状态,作为一个如同中介一样的角色,帮助用户理解当前正在发生着什么。用户只需跟随动效,就能够理解2个UI状态之间究竟有着怎样的联系。

Image title



另外,也可以显示缩略图和详细信息。

Image title

这张动画卡片,是通过点击将重叠的详细信息进行展示,它清楚地表明了是同一个项目。

注意变化

当一个新的对象已经公开时,动效有助于我们在被掩盖的信息中清楚的找到它。比如通过滑动打开内容来隐藏信息,你可以在需要关注时用到这种变化效果。

在下面的案例中,当您单击汉堡包图标时,导航菜单用幻灯片展示。通过这种动作,用户就可以明白,导航菜单不会消失。

Image title


03. 系统状态的可视化

作为Jakob Nielsen为了可用性推导出来的答案之一,系统状态的可见性仍然是用户界面设计中最重要的原则之一。对于用户来说,把握理解系统当前的状况,是非常重要的。

进度条

上传和下载数据的过程是采用功能性动效的一个很好的机会。有动效的加载栏,可以直观的看到动作加载完成预计还要多少时间。

另外,当操作未能成功进行时,动效也很有用。例如在下载失败的时候,你就需要考虑如何让失败画面看起来比较舒服。

Image title

下拉刷新

用户的等待时间是从动作开始的瞬间开始,最糟糕的情况是不知道系统是否收到指示。

下拉刷新这一技术,让我们尝试在操作瞬间作出反应。告诉用户你的进程已经开始,最重要的是给与用户视觉反馈,在这里使用动画将非常有帮助。

Image title

04. 解说动画

有时,用户需要一些额外的帮助来了解用户流程或如何与某些界面元素进行交互。对于包含用户的新的或不熟悉的功能或交互的用户界面尤其如此。

新手上路

用户入门需要一个完美的UX,第一次看到的操作动画对于首次使用者如何与应用程序进行互动有着巨大的影响。无论多么复杂的东西,动画都能通过有趣的方法传达出来。他有着无限的可能性。

Image title

视觉提示

动画可以提供一些易于理解的视觉线索。解说动画,通常是在网页第一次被打开时看到,通过动画可以表现页面上特定的要素在什么情况下可以使用。

这种类型的动画,通过故事的进行渐渐的看到全体的效果,在游戏中经常被利用。只有当用户自己的经验到达一个点的时候,才会触发这个提示。

总结

动画是一个复杂而强有力的工具。

我们需要从一开始就采纳这种效果,并将其视为我们设计的自然部分,因为设计不仅仅是视觉呈现。正如史蒂夫·乔布斯谈到设计时所说的:设计不仅是外形和感觉,设计关乎如何运作。

关注微信公众号:uisjxy,回复“梦梦”可以领取资源

Image title





更新:2017-11-18

收藏

36人已收藏

梦梦_喵喵星人

小白领取资源,咨询设计问题都可以加我qQUN:652137396

  • 175

    作品

  • 748

    粉丝

  • 4

    关注

  • PS鼠绘章鱼角图标教程
  • PS鼠绘邮件图标教程
  • AI绘制扁平化快餐图标教程
  • PS绘制简约风格沙滩插画教程

    猜你喜欢

      2017-11-18 好文转载 教程 原作者: 优设 举报 3877 36 20 1

      【UI设计必学习】有哪些功能性动效需要了解?

      0.0°

      你确定要举报【UI设计必学习】有哪些功能性动效需要了解?

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2017年11月18日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      20
      36
      1

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

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

      登录

      手机号

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

      登录
      第三方账号登录