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

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

提交需求

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

0/20
0/200

设计大赛

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

提交完成
感谢您对UI中国的支持和信赖!
UI设计中的基本动效-下
0.0°
2017-09-12 原创文章 经验/观点 举报 2157 9 7 0

上一篇文章向大家介绍了UI基本动效的上部分,主要是指向性动效,这里将继续介绍剩下的部分,展示其他的最常见最基本的动效模式。


通过动效引导使用者的注意力,使用户清楚界面上可能被忽略的变化,目的是通过动画来引导用户注意特定的对象。用光影和色彩作为突显。



一.突出显示


1.缩放

通过对目标对象的突出显示来吸引和引导用户的视线。

Image title

2.旋转
当一个特定对象需要被突出显示,旋转动画可以引人注目。最常见的就是我们在iOS上删除应用时,应用图标都会通过这种动画来提示用户。

Image title

3.着色
通过用颜色的区分来突出显示的对象,一般用于点击或是选中的状态。
4.褪色
周围对象的颜色变淡来突出显示的目标对象。此效果在点击图片放大时用的较多。
4.褪色
周围对象的颜色变淡来突出显示的目标对象。此效果在点击图片放大时用的较多。
4.褪色
周围对象的颜色变淡来突出显示的目标对象。此效果在点击图片放大时用的较多。
4.褪色
周围对象的颜色变淡来突出显示的目标对象。此效果在点击图片放大时用的较多。
4.褪色
周围对象的颜色变淡来突出显示的目标对象。此效果在点击图片放大时用的较多。
Image title

4.褪色
周围对象的颜色变淡来突出显示的目标对象。此效果在点击图片放大时用的较多。
Image title

5.模糊
周围对象模糊来突出显示的目标对象,iOS中的3D touch就是使用的这个效果。
Image title6.变暗
用周围元素的变暗来凸显目标对象,多用于弹窗的出现。
Image title


7.翻转
用翻转目标对象来显示选中对象。我们玩一些翻牌小游戏的时候经常会出现这样的效果。
Image title8.发光凸显
通过对光影的变化来凸显目标效果。地图目标显示经常会使用这样的效果。
Image title9.改变深度
目标移到其他对象之前,来突出移动的目标的结果,用户看起来像是改变了深度。多用于列表的移动。

Image title

10.放大
目标对象在用户交互的时候放大,如果对象没有被激活应该回到原来的大小。通过放大目标来显示哪个对象在活跃并且正在交互中。多用于一些tab的切换。

Image title

总结
1.缩放
适合场景:当你设计的元素期望用户点击。例如在你的页面中新推出了活动或者是优惠项目,这个效果可以加强用户点击的欲望。


2.旋转
适合场景:当选中的元素需要进行二次确认操作,这个动效能反馈被选中。例如删除安装的应用。


3.着色
适合场景:如果在选项中可以进行多选,这个动效就特别适用。例如选择关注的明星,人物等。


4.褪色
适合场景:如果在选中这个元素时将产生过渡,例如在一些选中图片进行放大过渡时,这个动效会更加适合。


5.模糊
适合场景:当多维度的交互产生时,不同的操作产生不同的结果,用动效反馈会更加合适,模糊背景突出选中状态可以是长按的交互操作,iOS中的3D touch就是使用的这个效果。


6.变暗
适合场景:选中一个元素,背景变暗类似于浮动效果,多用于选中的元素还要进行下一步操作,例如弹窗和输入框的弹出。


7.翻转
适合场景:点击某个元素之后需要强烈反馈的。例如我们做一些趣味小游戏时,选中之后加上翻转效果会让用户产生期待感。平时慎用,这个动效会产生延缓等待的感觉。


8.发光突显
适合场景:使用发光效果来增加点击引导,例如一些重要按钮或者新增的功能模块,通过发光来引导用户点击。


9.改变深度
适合场景:两个或者多个对象进行切换时。例如一些影片或是图片的切换,表示同一层级下的不同选项。


10.放大
适合场景:多个元素进行切换选择时。例如tab切换、图标切换。


更新:2017-09-12

收藏

9人已收藏

燃烧的小曲奇

我们征服的不是高山,而是我们自己

  • 5

    作品

  • 51

    粉丝

  • 2

    关注

  • UI设计中的基本动效
  • 设计技巧-分割线在不同环境下的使用
  • 交互设计-如何提升悬浮按钮的用户体验
  • 设计技巧-如何正确使用下拉列表
相关标签

    猜你喜欢

      2017-09-12 原创文章 经验/观点 举报 2157 9 7 0

      UI设计中的基本动效-下

      0.0°

      你确定要举报UI设计中的基本动效-下

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

      0/200

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

      点击上传附件

      对谁可见:

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

      您确认要推荐?

      该作品发布时间:2017年09月12日

      评分

      完整度

      启发性

      勤奋性

      排版布局

      推荐心得

      建议20-200字以内

      0/200

      7
      9
      0

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

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

      登录

      手机号

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

      登录
      第三方账号登录