提交需求
赛事与广告咨询合作,请填写需求表单,我们会在第一时间与您联系!
Framer是一个强大、全能的原型设计工具,但学习曲线也很高。
设计师们经常回避使用 Framer(http://framerjs.com/) ,因为和其他原型工具相比,它的初始学习曲线更高。这是由于它是基于代码来实现原型,但这也恰恰是令它强大和全能的原因 —— 你可以创建其他工具无法实现的详尽的、高保真的交互原型和动效。
当学习一个新的软件和工具时,按照逐步指导的教程来在实践中学习是一个很好的探索和学习的方式。
下面是10款Framer的教程,可以帮助你从菜鸟开始使用Framer创建属于你自己的交互原型。不过,在你开始之前,请先去Framer官网的 学习专区(http://framerjs.com/learn/basics/) 熟悉一下layers、animation、events、CoffeeScript以及其他相关的基础知识。
http://www.prototypingwithframer.com/zero-inbox-animation/
使用Sketch和Framer再现Google Inbox 收件箱清空时的动效
http://www.prototypingwithframer.com/uber-apple-watch/
一个逐步指导如何实现Uber Apple Watch App原型效果的Framer教程。
https://medium.com/@designforhuman/new-to-framer-just-3-things-to-get-you-started-47397f27c71e
David Lee 带你学习Framer的三个关键概念:events, layers, states,以及一个Google Inbox的原型范例。
http://www.prototypingwithframer.com/creating-a-button-loading-animation/
使用Framer实现一个简单的按钮loading动效
使用Framer实现 Material Design 原型效果
http://www.prototypingwithframer.com/material-design-with-framer/
一个如何实现常见material design 交互原型效果的Framer教程。
Sean Mateer 教你如何使用Framer创建一个引导界面的滑屏效果Demo
http://www.prototypingwithframer.com/ios-lock-screen-interaction/
一个如今常见的手机app原型效果 —— 滑屏翻页效果
http://www.prototypingwithframer.com/twitter-birthday-balloon-animation/
使用Sketch和Framer在Twitter个人信息界面生成随机的气球动效
https://medium.com/@_mikehlee/learn-framer-with-kanye-32bc68eb80d8
用Framer+卡内(美国说唱歌手)的头像图片实现一些交互效果
https://medium.com/@kennycheny/creating-your-first-prototype-with-framer-c39221da7668
这是我创建的第一个Framer原型
通过这些Framer教程,你将体验到Framer的强大,以及顺利的实现属于你自己的原型。
像学习更多关于Framer的内容?
请浏览原作者的博客 Prototyping with Framer http://www.prototypingwithframer.com/
From:https://medium.com/@kennycheny/learning-framer-6030028cb08e#.ooq5fenes
--------------------------------------------------------------------------------------------
Shunz顺子
欢迎订阅个人微信公众号:UX思考(ID:UXThink)
大牛,别默默的看了,快登录帮我点评一下吧!:)
登录 立即注册