提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
优秀的动画,对于提升UI的逼格非常重要,在大多数情况下,针对动画进行合理的调整,就可以让你的UI变得更加出色,好的交互设计,能够展示状态之间的连续性,以及不同UI元素的的关系,同时,能够使得用户的注意力聚焦在重要的地方。
所有的交互都是用体验版本的InVision Studio做出来的,你可以下载源文件。
将选项卡种的内容做成可滑动的
左图的内容淡入淡出;右图的内容随着标签一起滑动。
当你设计选项卡或者弹出菜单这种交互时,试着将内容的位置与打开它的动作相关联。通过这种方式,你可以将你的内容和内容的位置都做成可视动画。做这种页面时,也加上一个可以在不同内容之间切换的滑动手势。
关联卡片上的相关元素
左边的卡片打开一个新页面是滑上来的;右边则是扩展了卡片并使其占满屏幕。
当给两种不同的状态的过渡做动画时,看看这两种状态之间有没有共有的元素,如果有则可以在动画中体现两者的联系。在InVision Studio中,两个相关联的页面有重复的元素时,当你创建一个Motion的时候,系统会自动在两个元素之间创建关联动画。这让创建动画原型变得轻而易举。
在内容中使用瀑布流效果
左边的卡片通过滑动和淡入的效果显示;右边的卡片在同样动画的基础上,让每个卡片都有短时间的延迟。
要达到瀑布流的效果,可以将每个动画元素都保持相同的动画速度以及持续时长,并对其按序设置一定的延时。要将瀑布流的形式应用在组里,不能应用在单独的元素上。保持动画的快速简介,谷歌的提醒功能里,每个元素出现的间隔不超过20毫秒。点击动画里的瀑布流形式查看更多案例。
让内容推开其他元素
左边的动画中,动画效果直接出线在其他内容上面。右边的动画中,随着动画的扩大,其他内容被推开了。
让内容与周围的环境相互动。这意味着让内容吸引或者赶走它周围的元素。
让菜单从按钮中出现
左边的菜单从下面滑入;右边的菜单则从打开它的按钮中扩展出来。
用按钮展示不同的状态
左边的动画使用文字表明状态;右边的动画则直接使用按钮展示不同状态。
试着用按钮本身展示不同状态。例如:用旋转菊花或者加载动画代替CTA;或者在按钮背景中加一个动画表明进程。具体方式取决于你,核心就是利用好已有的用户已经与之交互的空间。如果你使用按钮颜色去确认成功状态,对于用户来说就是一个大彩蛋。
将用户的注意力引导到重要的东西上
左边的案例使用颜色和位置让元素突出显示;右边的则使用了一个简单的小动画吸引用户的注意力。
当用户需要做出一些重要的操作时,试着将这些操作的按钮以动画的方式展现,以吸引用户的注意力。可以做一些简单细微的动画并逐渐增加强度,并根据行动的重要性改变按钮的大小、颜色和动画的速度。记住只在最重要的操作上使用动画,因为你用的动画越多,它就变得越不重要并且会打扰到用户。
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册