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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
(二)过渡动画:利用动画提升用户体验
0.0°
2019-08-11 自译外文 经验/观点 原作者: Nick Babich 举报 1641 2 1 0

Image title


动画会讲故事,会讲一些简单而不复杂的故事。例如:“嗨,看这里”或者“好了,你可以走了”之类。总之,动画的目的不是为了娱乐用户,而是帮助他们了解发生了什么,或者如何有效的使用应用程序。Zurb’s的话很好的解释了这一切:


我们不再只是设计静态的屏幕。我们设计用户如果通过屏幕查看内容。


动画可用于各种尺寸和背景,以统一美感和功能:他可以影响操作,连接各种状态,引导用户视线以及帮助用户查看操作结果。接下来简单举例,告诉你哪些地方可以通过使用动画来提升用户体验:


1、等待依旧,厌烦不再


如果你不能缩短等待的时长,你可以让等待变得愉快。这时你可以使用动画来代替烦人的旋转加载指示器(基本上只是提醒用户他们需要等待)。几乎任何网站或者应用都可在加载时使用加载占位图(skeleton screen)和微动画来吸引用户注意。

Image title


2、状态切换,拒绝生硬


动画可以使过渡更自然,这样就能清晰的表明发展经过。一个好的过渡动画能很好的引导用户的注意力。


Adrian Zumbrunnen有了个很好的例子,展示滚动动画在点击链接时如何保持上下文之间的关联。只需要对比这种生硬的静态变化:

Image title


与自然的过渡动画:

Image title


你就会发现,过渡动画能帮助用户了解界面的节奏与流程。这也有助于引导用户进行下一步的交互。


3、展示变化,连接上下


动画可以提升直接操作感。


Ps:直接操作(direct manipulation)-源自计算机科学。指的是对可视化对象进行直接的操作,如点击、拖拽等。与之对应的操作有命令操作,比如DOS。


举例来说,菜单图标可以平滑地转换到回放控件,并能再变回来。这种效果既告知用户按钮的功能,又为交互添加了一种奇妙的色彩。播放与暂停按钮的相互变化表明他们俩是相互关联的,并且不能同时存在。

Image title

另一个例子,当点击浮动动作按钮时,加号按钮变为书写按钮。这表明“编辑”是主要操作。如此小的细节意味着必须猜测接下来会发生什么,以及了解图标在这两种状态下的含义。

Image title


4、错误提醒、突出显示


动画可以强化用户正在执行的动作。


例如,表单输入可以通过一些动画得到极大的增强。如果表单中输入的数据是正确的,那么在确认是会展示一个“点头”动画。输入错误时可以使用一个横向抖动的效果表示。当用户看到动画时,他们能立即理解动画的含义。

Image title


5、操作完成,反馈提醒


通过动画用户可以想象到自己操作的结果。


遵循“show,don’t tell”的原则,您可以使用动画反馈来显示已经完成的工作。


在以下条带的示例中,当用户单击“付款”时,一个加载器会在应用程序显示成功状态之前短暂出现。复选标记动画使用户感觉他们轻松地完成了付款,用户确实欣赏这些重要的细节。

Image title


结论


当以一种复杂的方式使用动画时,它是强大的。真正重要的是要花时间去考虑什么时候动画是合适的,什么时候不合适。我们需要从一开始就考虑动画展示,并将其视为我们设计的自然组成部分,因为设计不仅仅是视觉呈现。就像乔帮主说的:


设计并不仅仅是它看起来怎么样 或者感觉怎么样,设计是如何让它运作。


感谢观看!!!


硬广:烦请喜欢我搬运的文章的朋友去浏览一下我的个人网站UxBooks,增加点点击量。能浏览几页而不是进入首页就退出那就更感谢

更新:2019-08-11

收藏

2人已收藏

UxBooks

拖延症无法克服,但可以顺势而为。

  • 19

    作品

  • 35

    粉丝

  • 1

    关注

  • 紫光展锐AR头盔——风声
  • 腾讯AR导航 HUD 云评测
  • (三)增强体验:手机应用设计方案
  • (一)微交互:优秀应用程序的秘密
相关标签

    猜你喜欢

      2019-08-11 自译外文 经验/观点 原作者: Nick Babich 举报 1641 2 1 0

      (二)过渡动画:利用动画提升用户体验

      0.0°

      你确定要举报(二)过渡动画:利用动画提升用户体验

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2019年08月02日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      1
      2
      0

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

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

      登录

      手机号

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

      登录
      第三方账号登录