

Motion UI Design

Motion UI Design

什么是运动设计？ 这是一个神奇的界面，让用户对UI变化感到满意. 它是与动作UI设计，UI动画和过渡相关的资源，软件，库，视频和文章的精选集合. 随意地 add something interesting （todo里面）拉请求！

Resources for inspiration

Sites

• Tympanus codrops - 互动演示和实验.
• Codyhouse - 互动演示和实验.
• Dribbble - Dribbble上的动画镜头类别.
• Codepen - HTML / CSS / JS沙箱.
• Give ’n’ Go - 经过精心策划的Dribbble镜头库作为交互式CodePen笔重新设计.
• capptivate.co - 一系列令人敬畏的移动界面.
• Awwwards - 网站带动画设计的例子.
• cssanimation.rocks - CSS动画演示.
• michaelvillar.com - @michaelvillar（Stripe）的实验.
• hakim.se - @hakimel的实验.
• ui-animations.tumblr.com - 软件用户界面中的动画.
• hoverstat.es - 由Animade工作室策划的一系列有趣的网站.
• appealing. - 移动过渡和动画的集合.
• UI Movement - 动画界面和简报.  

Pinterest boards

• Gestures, transitions, animations 作者：Yuri Vetrov.
• Web UI animation 由JRMY LFBV.
• UX/UI interaction & Motion design 作者：Matthieu Lerat.
• Animated UX/UI 朱利安蒂莉.
• Motion UI 通过CodeDesign.

Processing and other weird, but funny stuff

• Bees & bombs - Dave Whyte的加工实验.
• PATAKK - Paolo Zagreb的加工实验.
• dvdp - davidope的视觉唐人街.
• bigblueboo - 查理·德克的3D和处理实验.
• Misha Kvakin - Cinema4D和UI实验.

Articles

• How fast should your UI animations be? 由@valhead.
• Getting started with UI motion design 来自@Molly Lafferty.
• A Designer’s Guide to Perceived Performance 由@Luke琼斯.
• How to Use Animation to Improve UX 由@Nick Babich提供.
• How To Use Animations and Motion in Web Design 通过@PageCloud
• UI Animation: Eye-Pleasing, Problem-Solving 由@Tubik Studio提供.
• UI Motion Design — The Compendium 由@Thalion.
• Creating Usability with Motion: The UX in Motion Manifesto 由@Issara Willenskomer撰写.
• Jedi Principles of UI Animation @Adaptive Path.
• Micro Interaction; great experience for user engagement @Sneha Munot.
• UI Animation. Microinteraction for Macroresult @Tubik Studio.
• The Principles of UX Choreography @Rebecca Ussai Henderson.

Software

通过使用技术和结果格式（视频，原型，代码等）分离可以生成UI动画的所有可能软件的列表，其中包含必看教程和插件的链接.

Video, gif, presentation

• Adobe After Effects - 行业标准的动画和创意合成应用程序可让您为电影，电视，视频和网络设计和提供专业的动态图像和视觉效果：
• Using After Effects for UI Animation Prototypes （：movie_camera：视频）.
• UI Animation tutorials.
• How to Use After Effects for Web Animation Prototypes （：movie_camera：视频）.
• MtMograph summits （：movie_camera：视频）.
• 30 days of AE （：movie_camera：视频）.
• After Effects CC Essential Training on Lynda （：movie_camera：视频）.
• BodyMovin - 从AE到SVG / canvas的转换器.
• Squall - 从AE到iOS的转换器.
• Apple Motion - 用于创建和编辑动态图形的MacOS应用程序，用于视频制作和电影制作的标题，以及用于视觉效果的2D和3D合成.
• Adobe Photoshop- 光栅图形编辑器，也可以生成gif UI动画：
• 9 Photoshop UI Animation Tutorials.
• Adobe Flash - 用于创建矢量图形，动画，游戏等的软件.
• Apple Keynote - 用于演示的MacOS应用程序，但也适用于高保真动画和原型：
  • How To Prototype UI Animations In Keynote.

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

• Framer studio - MacOS应用程序，用于通过CoffeeScript编程语言进行动画原型设计.
• Your first prototype with framer.
• Tumult Hype - 用于创建HTML / CSS网站，横幅，演示文稿等的MacOS应用程序
• Adobe Edge Animation - 用于创建HTML / CSS网站，横幅，演示文稿等的应用程序：
• Prototyping UI Animation.
• Adobe Experience Design (ex-Project Comet) - 用于创建网站和移动应用程序的设计，原型和动画的应用程序（预览版）.
• Google web designer - 基于HTML的设计和动画.
• Animatron – Web app for creating animations, banners, and infographics.
• Pixate - 原型平台.
• SpiritJS - 网络动画工具（尚未实现）. *任何HTML / CSS编辑器， libraries ;)

显而易见你的秘密武器 - 笔和纸！

Helpers

• easings.net - 缓解功能备忘单.
• cubic-bezier.com - Cubic-bezier可视化工具.
• csstriggers.com - 触发重绘，重排或合成的CSS属性列表.

Libraries

• Web Animation Infographics - 使用技术的图书馆的大（但旧）信息图.
• Bouncy Ball - 通过展示如何与每个球反弹来比较动画技术.

CSS

• Animate.css - CSS动画的集合.
• Effeckt.css - UI动画的集合.
• Bounce.js - 用于从js缓动函数生成漂亮的CSS关键帧动画的工具.
• Animations.css - 收藏.
• Magic animations - 收藏.
• UI buttons - 按钮的集合.
• Hover.css - 悬停效果.
• Morf - 具有自定义缓动功能的转换.
• Awesome CSS3 animations - 动画库.
• All Animation - 一套有趣的动画，让你的项目更加性感.
• CSS Animate - 用于轻松快速创建CSS3关键帧动画的工具.
• Mantra - 用于创建关键帧动画的工具.

JavaScript

• GreenSock - 适用于现代网络的超高性能专业级动画.
• Velocity.js - 加速JavaScript动画.
• Impulse - 移动网络的高性能互动.
• AniJS - 声明的数据属性的动画.
• Snabbt.js - JavaScript中的简约动画库.
• Famo.us - 用于动画和界面的高性能JavaScript库.
• Processing.js - 用于处理可视化编程语言的JavaScript库.
• Framer.js - 用于设计UI，交互和动画的原型工具.
• Dynamics.js - 用于创建基于物理的动画的JavaScript库.
• Mo.js - 用于网络的运动图形工具带.
• AnimateTransition - 用于块和弹出窗口转换的库.
• Animate Plus - 适用于现代浏览器的CSS和SVG动画库，高性能和轻量级（3KB gzip），使其特别适合移动设备.
• Gravitas.js - JavaScript的超快速物理模拟​​.
• Popmotion - JavaScript动作引擎，可以快速，简单地创建引人入胜的用户交互.
• anime.js - 轻量级JavaScript动画库.

SVG

• SnapSVG - JavaScript库使得处理SVG资产变得像jQuery使用DOM一样简单.
  • How to Manipulate and Animate SVG With Snap.svg
• BonsaiJS - 具有直观图形API和SVG渲染器的轻量级图形库.
• Vivus.js - 允许您为SVG设置动画，使其具有被绘制的外观.
• Walkway.js - 为线条，路径和折线元素组成的SVG图像设置动画的简便方法.
• Transformicons - 使用SVG和CSS的动画图标，符号和按钮.

Web animation performance

• Jankfree.org - 收集有关浏览器性能的文章和演示文稿.
• High performance animations.
• How to Create Smoother Animations and Transitions in the Browser.
• CSS animations and transitions performance: looking inside the browser.

Speeches, presentations, videos

• Interface Animations (Mark Geyer) - 2014年BlendConf研讨会.
• The future of UX – Animation on the Brain (Rachel Nabors).
• Designing Complex SVG Animations (Sarah Drasner, Trulia).
• Designing with animation (Pasquale D'Silva) （：movie_camera：视频）.
• Animating Web Experiences (John Allsopp) （：movie_camera：视频）.
• Putting Your UI in Motion (Val Head) （：movie_camera：视频）.
• Motion design with CSS (Val Head) （：movie_camera：视频）.
• Lets move! (Benjamin De Cock, Stripe) （：movie_camera：视频）.
• Animating Your UX (Rachel Nabors) （：movie_camera：视频）.
• Styling and Animating Scalable Vector Graphics with CSS (Sara Soueidan) （：movie_camera：视频）.
• Animating the User Experience (Rachel Nabors) （：movie_camera：视频）.
• Designing meaningful animation (Val Head) （：movie_camera：视频）.
• Functional Animation (Sarah Drasner) （：movie_camera：视频）.
• Animations anew - laziness, arrogance and intolerance (Andrey Sitnik) （：ru：俄语）.

Newsletters, podcasts, screencasts

• The UI Animation Newsletter - 有关资源的新闻通讯以及有关如何让网络动画为您每月直接进入收件箱的有用建议@valhead.
• Web Animation Weekly - 时事通讯，包括文章，视频，书评和其他有关Rachel Nabors网页动画和动画设计精彩世界的好东西.
• Motion and meaning - @valhead和Cennydd Bowles关于数字设计师动作的播客.
• All The Right Moves - @valhead的动画评论.
• UI Movement - 本周最佳UI动画时事通讯.

Guidelines

• Android
• Material design guidelines: Motion
• MacOS
• 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：视频）
• Apple Watch
• Specifications: Animations
• Windows
  • Guidelines for animations
  • Microsoft web framework: Motion
• IBM
  • IBM Design Language – Animation design guidelines
• SalesForce Lightning

Books

• The Web In Motion: Practical Considerations For Designing With Animation 通过Smashing Magazine.
• Motion Design for iOS 作者：Mike Rundle
• Animation in HTML, CSS, and JavaScript.
• Futureproof Web Design Techniques. Interaction Design & Complex Animations 通过@UXPin.
• CSS animations 由@valhead.
• Designing Interface Animations @valhead（尚未发表）.

How to Share

• 在Twitter上分享
• 分享到Facebook

License

收集：心脏：由Artur Kornakov和 these awesome guys