

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 由朱利安·提莉（Julien Tilly）设计.
• Motion UI 由CodeDesign提供.

Processing and other weird, but funny stuff

• Bees & bombs – Dave Whyte处理实验.
• PATAKK – Paolo Zagreb的处理实验.
• dvdp – davidope的视觉唐人街.
• bigblueboo – Charlie Deck进行的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 Jones.
• 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 @自适应路径.
• 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 /画布的转换器.
• 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 – MacOS应用程序，用于创建HTML / CSS网站，横幅，演示文稿等.
• 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 –三次贝塞尔曲线可视工具.
• 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 –用于移动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

• 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) – BlendConf 2014工作坊.
• 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) ( Russian language).

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

• The Web In Motion: Practical Considerations For Designing With Animation 粉碎杂志.
• 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