Motion UI Design

Motion UI Design Awesome

什么是运动设计? 界面上充满了魔力,使用户对UI更改感到满意. 它精选了与运动UI设计,UI动画和过渡有关的资源,软件,库,视频和文章. 随意地 add something interesting (里面的todo)拉请求!

Resources for inspiration

Sites

Pinterest boards

Processing and other weird, but funny stuff

Articles

Software

所有可能产生UI动画的软件的列表,这些软件使用技术和结果格式(视频,原型,代码等)分隔,并带有必看的教程和插件的链接.

Video, gif, presentation

Visual programming

  • Quartz Composer –带有基于节点的可视化编程语言的MacOS应用,用于对MacOS / iOS应用进行原型制作:
  • The 4 Minute Guide to Quartz Composer (:movie_camera:视频).
  • Introducing Origami for QC.
  • Origami –通过Facebook创建现代UI的工具.
  • Avocado –交互设计师的工具箱.
  • Form –带有基于节点的可视化编程语言的应用,用于Google制作的应用原型.
  • Principle For Mac – MacOS应用程序,用于创建动画和交互式用户界面设计.
  • Floid –适用于任何平台和设备(Web,iOS,Android)的MacOS交互设计工具.

HTML, CSS and JavaScript

显然是您的秘密武器–笔和纸!

Helpers

Libraries

CSS

JavaScript

  • GreenSock –适用于现代网络的超高性能专业级动画.
  • Velocity.js –加速的JavaScript动画.
  • Impulse –用于移动Web的高性能交互.
  • AniJS –通过声明的数据属性进行动画处理.
  • Snabbt.js – JavaScript中的简约动画库.
  • Famo.us –用于动画和界面的高性能JavaScript库.
  • Processing.js –用于处理视觉编程语言的JavaScript库.
  • Framer.js –用于设计UI,交互和动画的原型工具.
  • Dynamics.js – JavaScript库,用于创建基于物理的动画.
  • Mo.js – Web的运动图形工具带.
  • AnimateTransition –用于块和弹出窗口转换的库.
  • Animate Plus –适用于现代浏览器的CSS和SVG动画库,性能优异且轻巧(压缩3KB),使其特别适合于移动设备.
  • Gravitas.js – JavaScript的超快速物理仿真.
  • Popmotion – JavaScript运动引擎,可快速轻松地创建引人入胜的用户交互.
  • anime.js -轻量级JavaScript动画库.
  • useAnimations -微型动画图标库;

SVG

Web animation performance

Speeches, presentations, videos

Newsletters, podcasts, screencasts

  • The UI Animation Newsletter –带有资源的新闻通讯,以及有关如何使Web动画工作的有用建议,每个月由@valhead直达收件箱.
  • Web Animation Weekly –新闻通讯,其中包括Rach​​el Nabors撰写的有关Web动画和动作设计的奇妙世界的文章,视频,书评和其他好东西.
  • Motion and meaning – @valhead和Cennydd Bowles播客关于数字设计师运动的播客.
  • All The Right Moves – @valhead的动画评论.
  • UI Movement -每周最佳的UI动画新闻.

Guidelines

安卓 * Material design guidelines: Motion * 苹果系统 * OS X Human Interface Guidelines: Animation * iOS * User Interface Design for iOS 7 Apps (:movie_camera:视频) * iPhoto for iOS: UI Progression and Animation Design (:movie_camera:视频) 苹果手表 * Specifications: Animations * Windows * Guidelines for animations * Microsoft web framework: Motion * IBM * IBM Design Language – Animation design guidelines * SalesForce Lightning

Books

How to Share ⭐️⭐️⭐️⭐️⭐️

License

CC0

与:心脏:由Artur Kornakov和 these awesome guys