路野

按钮是UI中最常用的组件之一,在用户的行动触发中起到了至关重要的作用。近几年来动效越来越流行,按钮的设计与体验也不再满足于静态的展现。本文为大家梳理总结了按钮动效设计的三大方向,希望这些设计细节和思考可以帮助你把按钮的设计做到最好。

图片

 

01.使用图标展示动态

大部分的按钮主要由轮廓、文字和图标三部分组成。如果轮廓发生动效变化,会影响内容的版式,也会对周围的元素造成干扰;如果文字发生复杂的动效变化,会影响整体的可读性。

所以按钮的动效设计,重点通常都会放在图标的演示上,文字与轮廓对其进行配合,这样在提升趣味性与产品细节的同时,又可以兼顾到产品的可用性。

图片

图片

图片

 

02.展示加载状态

一些按钮的功能需要一定的加载时间,这时为按钮量身定做一个加载动效是很好的选择,可以降低用户的焦虑感,提升产品的设计细节。

图片图片

图片

 

03.悬停状态

当你的按钮被用于网页或PC端,一个好的悬停效果(Hover),可以极大的增加用户的点击欲望。悬停效果应根据产品风格和按钮属性来定制,多用在关键按钮上,次级按钮应该谨慎使用,避免喧宾夺主。

图片

 

原文地址:设计师深海(公众号)

作者:设计师深海

 

转载请注明:学UI网 » 按钮动效设计的3大方向!

登录收藏
 
你可能喜欢的:
被吹爆的巴黎设计风格,到底有多牛?被吹爆的巴黎设计风格,到底有多牛?
2022年LOGO设计新趋势2022年LOGO设计新趋势
用好“对比色”,让你的设计更有吸引力!(实操篇)用好“对比色”,让你的设计更有吸引力!(实操篇)
这逆天的效果,竟然是10秒钟做出来的,真实大开眼界!这逆天的效果,竟然是10秒钟做出来的,真实大开眼界!
总监说我的UI配图不够有设计感,后面教了我10个优化办法,学到了!总监说我的UI配图不够有设计感,后面教了我10个优化办法,学到了!
配色没有冲击力?来试试对比色搭配配色没有冲击力?来试试对比色搭配
为什么我做图会没灵感?大佬灵感都怎么来?为什么我做图会没灵感?大佬灵感都怎么来?
原来这种爆火的风格可以这么用!学到了!原来这种爆火的风格可以这么用!学到了!
当设计师看了《鱿鱼游戏》!当设计师看了《鱿鱼游戏》!
2021下半年3种UI新趋势!2021下半年3种UI新趋势!