Motion UI Design

Motion UI Design

什么是动态设计？ 这是一种让您的界面充满活力的魔力，让用户对 UI 更改感到舒服. 它是与运动 UI 设计、UI 动画和过渡相关的资源、软件、库、视频和文章的精选集合. 随意地 add something interesting （内部待办事项）通过拉取请求！

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 马蒂厄·勒拉特着.
• Animated UX/UI 朱利安·提利 (Julien Tilly) 着.
• Motion UI 通过代码设计.

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 工作室.
• 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 @SnehaMunot.
• UI Animation. Microinteraction for Macroresult @图比克工作室.
• The Principles of UX Choreography @RebeccaUssaiHenderson.

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 – 用于创建和编辑动态图形、用于视频制作和电影制作的字幕以及用于视觉效果的 2D 和 3D 合成的 MacOS 应用程序.
• 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 现代用户界面的工具.
• Avocado – 交互设计师的工具箱.
• Form – 具有基于节点的可视化编程语言的应用程序，用于 Google 的应用程序原型制作.
• Principle For Mac – 用于创建动画和交互式用户界面设计的 MacOS 应用程序.
• Floid – 适用于任何平台和设备（Web、iOS、Android）的 MacOS 交互设计工具.

HTML, CSS and JavaScript

• Framer studio – 用于通过 CoffeeScript 编程语言制作动画原型的 MacOS 应用程序.
• 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 应用程序.
• 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 – Collections of UI animations.
• 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 动画库，高性能且轻量级（gzipped 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) （：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

• 安卓
• Material design guidelines: Motion
• 苹果系统
• OS X Human Interface Guidelines: Animation
• iOS
• User Interface Design for iOS 7 Apps ( 视频)
• iPhoto for iOS: UI Progression and Animation Design ( 视频)
• 苹果手表
• Specifications: Animations
• 窗户
  • 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 迈克·朗德尔.
• 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

• 在推特上分享
• 在脸书上分享

License

** 与 合集，由 Artur Kornakov 和 these awesome guys**