150-1924-0507

5个优秀的UI设计欣赏(动画)

2020年01月10日 23:18  千赋科技 

  “尽管运动有着如此巨大的潜力,但它可能是所有设计学科中最不被理解的。”谷歌材料设计团队的运动设计师Jonas Naimark写道。

  乔纳斯(Jonas)辩称,虽然动画有助于使UI更具表现力和易于使用,但它是UI设计家族的新成员之一。许多设计师认为运动设计太复杂或根本不知道如何选择合适的表现效果,容易导致混乱。

  为了帮助顺利的将动画融入UI工作中,我们在Dribbble上发现了五个出色的例子,可以作为启发:

  案例一

谷歌翻译

By Pendar Yousefi

  Google翻译团队正在努力通过显示中性性别单词和短语的男性和女性翻译来减少其翻译中的性别偏见。

  为了帮助展示这些翻译而不会使用户感到不知所措,设计团队使用简单的动画来一次将您的注意力集中在一条信息上。

  例如,当您输入要翻译的短语时,文本字段保持紧凑。输入完短语后,该框将自动展开以显示翻译。

  案例二

注册页面

By Mari Kostrova

  该动画在保持品牌形象的同时,给客户页面增添了一些异想天开的感觉。对于需要注册帐户的用户来说,渔夫在等待钓到鱼时好像在打盹。但是,如果您选择使用现有帐户登录,则渔夫会展示他捕获的鱼,因此站起来变得很高。

  案例三

航班值机界面

By 尾大的小马_Chi7 Ma

  在此航班值机界面中添加动画会增加可信度和兴奋度。当您单击航班时,您会看到机票信息和飞机在天上飞的图形。当您单击以选择座位时,您将被带到那个飞机上,使体验更真实。

  案例四

下载动画

By Pedro Aquino

  此微交互使用动作为视觉效果不佳的动作(下载文件)添加视觉兴趣,然后帮助您跟踪进度。单击下载按钮时,圆形箭头图标会向前和向后移动,显示下载状态。完成后,该圆圈将落入新按钮,您可以打开该文件。

  案例五

资金展示

By tubik

  颜色和动画用于使该预算应用更加井井有条,更易于理解。饼图是根据每个人进行颜色编码的,当您单击饼图时,它会转变为包含相同颜色的条形图,并且会更深入地研究每个人的支出。


标签 :UI设计
上一篇 旅游行业网站建设的不可忽视的3个功能
下一篇

声明:本文内容由深圳市千赋科技有限公司原创或者通过网络收集编辑所得,所有资料仅供用户参考;对收集的资料本站不拥有所有权,也不承担相关法律责任。如您认为本网页中有涉嫌侵权的内容,请及时与我们联系,并提供相关证据,工作人员会在5个工作日内联系您,一经查实,本站将立刻删除涉嫌侵权内容。

相关文章 Related articles
服务热线

150-1924-0507

网站建设公司 www.2185.org 粤ICP备15080528号-1

Copyright© 2008-2019 深圳市千赋科技有限公司 版权所有