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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
7个小技巧大幅度提升你的UI动效品质
0.0°
2018-05-14 自译外文 经验/观点 原作者: Pablo Stanley 举报 1817 25 17 0

Image title

优秀的动画,对于提升UI的逼格非常重要,在大多数情况下,针对动画进行合理的调整,就可以让你的UI变得更加出色,好的交互设计,能够展示状态之间的连续性,以及不同UI元素的的关系,同时,能够使得用户的注意力聚焦在重要的地方。

所有的交互都是用体验版本的InVision Studio做出来的,你可以下载源文件


将选项卡种的内容做成可滑动的

左图的内容淡入淡出;右图的内容随着标签一起滑动。

左图的内容淡入淡出;右图的内容随着标签一起滑动。

  • 好的动效将内容从一个标签页淡出,再淡入到另一个标签页;

  • 优秀的动效让页面内容在不同标签之间移动,能够展现过度时的连续性。

当你设计选项卡或者弹出菜单这种交互时,试着将内容的位置与打开它的动作相关联。通过这种方式,你可以将你的内容和内容的位置都做成可视动画。做这种页面时,也加上一个可以在不同内容之间切换的滑动手势。


关联卡片上的相关元素

Image title

左边的卡片打开一个新页面是滑上来的;右边则是扩展了卡片并使其占满屏幕。

  • 好的动画展示信息详情页时使用左滑或者上划的方式;

  • 优秀的动画会在有共同信息的两种状态之间建立联系。

当给两种不同的状态的过渡做动画时,看看这两种状态之间有没有共有的元素,如果有则可以在动画中体现两者的联系。在InVision Studio中,两个相关联的页面有重复的元素时,当你创建一个Motion的时候,系统会自动在两个元素之间创建关联动画。这让创建动画原型变得轻而易举。


在内容中使用瀑布流效果

Image title

左边的卡片通过滑动和淡入的效果显示;右边的卡片在同样动画的基础上,让每个卡片都有短时间的延迟。

  • 当卡片进入屏幕时,好的动画改变它的位置和透明度;

  • 优秀的动画则会快速蔓延每组元素。

要达到瀑布流的效果,可以将每个动画元素都保持相同的动画速度以及持续时长,并对其按序设置一定的延时。要将瀑布流的形式应用在组里,不能应用在单独的元素上。保持动画的快速简介,谷歌的提醒功能里,每个元素出现的间隔不超过20毫秒。点击动画里的瀑布流形式查看更多案例。


让内容推开其他元素

Image title

左边的动画中,动画效果直接出线在其他内容上面。右边的动画中,随着动画的扩大,其他内容被推开了。

  • 好的动画直接在画面中移动和展示元素;

  • 优秀的动画则会展示出动画对其周围元素的影响。

让内容与周围的环境相互动。这意味着让内容吸引或者赶走它周围的元素。


让菜单从按钮中出现

Image title

左边的菜单从下面滑入;右边的菜单则从打开它的按钮中扩展出来。

  • 好的动画菜单出现的方向与打开它的按钮的方向保持一致;

  • 优秀的动画菜单从打开它的按钮中展开。


用按钮展示不同的状态

Image title

左边的动画使用文字表明状态;右边的动画则直接使用按钮展示不同状态。

  • 好的交互将活动状态用文字方式展示在按钮旁边;

  • 优秀的交互则直接用按钮展示不同状态。

试着用按钮本身展示不同状态。例如:用旋转菊花或者加载动画代替CTA;或者在按钮背景中加一个动画表明进程。具体方式取决于你,核心就是利用好已有的用户已经与之交互的空间。如果你使用按钮颜色去确认成功状态,对于用户来说就是一个大彩蛋。


将用户的注意力引导到重要的东西上

Image title

左边的案例使用颜色和位置让元素突出显示;右边的则使用了一个简单的小动画吸引用户的注意力。

  • 好的设计使用颜色、尺寸和位置,来突出需要格外引起用户注意并触发用户行为的重点内容;

  • 优秀的设计使用动画引导用户将注意力放在重要的地方,并且不会打扰到用户。

当用户需要做出一些重要的操作时,试着将这些操作的按钮以动画的方式展现,以吸引用户的注意力。可以做一些简单细微的动画并逐渐增加强度,并根据行动的重要性改变按钮的大小、颜色和动画的速度。记住只在最重要的操作上使用动画,因为你用的动画越多,它就变得越不重要并且会打扰到用户。

更新:2018-05-14

收藏

25人已收藏

Yice

https://dribbble.com/Yice

  • 13

    作品

  • 31

    粉丝

  • 4

    关注

  • 手游社区UI设计
  • 一个专注于图片调色的APP(Colorful)
  • 如何用AE做出App store的卡片动态效果
  • 彻底搞懂AE曲线,让设计中的动效更加有趣

    猜你喜欢

      2018-05-14 自译外文 经验/观点 原作者: Pablo Stanley 举报 1817 25 17 0

      7个小技巧大幅度提升你的UI动效品质

      0.0°

      你确定要举报7个小技巧大幅度提升你的UI动效品质

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2018年05月13日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      17
      25
      0

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

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

      登录

      手机号

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

      登录
      第三方账号登录