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应用程序,但也适用于高保真动画和原型:
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一样容易.
- 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 –新闻通讯,其中包括Rachel 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 



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