恭喜你成为UI中国推荐设计师 (详情)

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

动效设计 - 四个原则

原创文章 分类: 经验/观点 版权:
1458 10 9 1
更新于:2019-11-01
0.0
编辑推荐



一、符合物理规律的


在真实的世界中,一个物体可以被重量、表面摩擦力影响很快的加速或减速。同样的,材料设计的动效也是不会发生突然停止,或者突然启动,都是会有一个加速度或者减速度。(红色没缓动,蓝色有缓动)

Image title


真实世界中的力,例如重力,能使一个元素沿曲线运动而非直线运动。

Image title

Image title


Image title


https://www.youtube.com/watch?v=XjrifSBwhKE


缓动函数速查表

https://easings.net/zh-cn




二、及时且有趣的反馈


Image title

Google 电话图标


Image title

Messenger 的点赞动画

Image title


Image title

苹果锁屏输入错误时的抖动反馈

用户触摸屏幕时,通过漪涟动画能使用户确认输入。卡片上升表示该卡片处于激活状态。

用户触摸屏幕时,通过漪涟动画能使用户确认输入。卡片上升表示该卡片处于激活状态。

Image title

下拉刷新反馈



三、清晰的层级和空间关系


Image title作为过渡元素,他们和他们周围元素的运动是精心安排的,可以通过这个过程看出他们之间的关系。


Image title

卡片可以推动其他卡片,让他们给自己让开路。


Image title


Image title

Image title



正确示例:

Image title




错误示例:

Image title

滑动的方向除了展示一个线性的视图之外,没有给你任何真正有用的线索。




四、便捷的交互方式


Image title

转场动画有助于引导用户进行下一步的交互。


Image title

运动可以传递不同的信号



当用户手势操作的时候,让界面的动态走向更符合手指的运动,从而让用户感觉到是自己控制了界面的动向,而不是机械化的跳转。

Image title

Image title

Image title


图片源于网络,侵删。









Powered by Froala Editor

etesy

1516粉丝/52关注

2016年度最佳作品集TOP50得主当仁不让lv.2助人为乐小有名气首页达人
[AE] + [BODYMOVIE] 的安装与导出方法SKETCH - 连线箭头模板与制作方法

您确认要推荐?

评分

完整度

启发性

勤奋性

排版布局

推荐心得

建议20-200字以内

0/200

扫描二维码
去手机端查看海报

etesy

TA已经获得14枚勋章啦

  • 成就勋章

    • 特别勋章

    • 身份勋章

  • 已拥有

  • 作品

    创造者才是真正的享受者。

  • 经验

    经验是一所好学校,可它的学生却经常旷课。

  • 活跃

    大神都是从围观群众开始的

  • 拓展

    作品、经验、活跃还不能满足你?

每人每天仅限5票,快给你心仪的作品鼓励的一票。

投票

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

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

登录

账号或密码错误

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

登录

京ICP备14007358号-1 / 京公网安备11010802014104号 / Powered by 2008-2020 UI.CN