header_v0.7.2

动效用户体验编排的基本原则 动效

64天前发布

原创文章 / UI / 教程
杨沐晨曦 原创,如需商业用途或转载请与杨沐晨曦联系,谢谢配合。

设计师喜欢在细节上精益求精。大多数时候精确到像素-他们的按钮、表单样式、设置类型,图标等;越来越有意思。



过渡接口

设计师喜欢在细节上精益求精。大多数时候精确到像素-他们的按钮、表单样式、设置类型,图标等;越来越有意思。

53da5921277ca801216a3e396a4a.jpg

一学就会。但是,没有考虑这一切是如何组合在一起的静态demo。你需要点击一个按钮,就形成了。看起来喝醉了吗?你点击删除项目,只是消失?这就是超级古怪和不自然。在现实世界几乎没有作出任何作为,只需交换出其状态。感觉就像一个毛刺,生硬,难受!!





你可能做了一些笔记——但它只是滑动


如何?快点好吗?它反弹回来?在缓冲?


动画利用了一个被忽视的维度——时间!一个看不见的空间与织物一起。你不必成为一个数学怪人来理解这一点。



让我们看看一些简单的想法:

缓动/缓解/缓入/缓出

在传统动画的影响中断点如何从大规模的确定AB。它以偏压运动,并确定如何处理剩余的帧。这些插值帧25,该中间框架(13)的变化点位置:

0f7c592127e7b5b3086ed47d7a1c.jpg

34a9592127eaa801216a3ef10f6d.jpg

a3ab592127eeb5b3086ed4626eb0.jpg




看看那个!你听说过缓动/缓解?计算机是傻x的,因为他们是懒惰的。一个伟大的动漫设计师/运动是与大部分电脑的战斗,以确保它们不把这一切搞砸了!



动画的定时。你可以使用各种不同的间隔以得到不同的结果。但那足够。这不是动画的教程,是为了让你思考的时间和间隔。






插入到列表中的项目


比如说你是活着的事物,你会爱上它被填充到与现场数据。如果你仅仅是一个计算机,它看起来像这样:


7b7859212860a801216a3e56e425.jpg

那这时候你可能会总觉得哪里不对,对!这是很粗糙的。


它仅需要平滑的动画帧。如何让你的大脑检索事情?

2d3a59212946b5b3086ed40ce89c.jpg

对于一个新项目添加到列表需要留出空间用于该项目,然后项目所致在某处填充的空间。才能更和谐。软化改变。感觉更自然,因为我们有空间——镜像的上下文的基础上加上一些真实的东西在来使它富有生命!

878e5921295ca801216a3e18afb0.jpg





向下钻取到项目列表

典型的,在默认模式的项目。

f7a859212986a801216a3e355b84.jpg

滑动方向真的不给你任何有用线索的线性链的外部视图。

 


有关如何考虑该物品的容器的更多

7918592129b6b5b3086ed4e94b7e.jpg

ad9a592129bea801216a3e853cc3.jpg

如果目标是在具有与钻和列表项目进行充分的聚焦,我们甚至能使其他一切都隐藏在了同样的观点:

当然,不工作的情况,但这种观点可能产生更加优雅的连接的流程。


实例

678b592129e7b5b3086ed4653b9c.jpg




1a0259212a64b5b3086ed45c6cf4.jpg


08b059212a8ca801216a3e990ac1.jpg

以上部分案例来自网络,如有冒犯,请告知,立马删除。谢谢。

1

    文章信息

    意见反馈
    没有新消息

    提示文案

    提示文案

    提示失败
    提示成功