南京音乐推荐联合社

Framer交互教程系列 - 01初探

海华社Hiwow 2019-07-31 12:01:55

Framer是什么

一个制作 iOS, Android 和 Web 应用的原型设计工具.

  1. 直接可制作UI界面,并且实现响应式布局

  2. 高保真的原型, 最为接近真实的效果

  3. 易于分享, 任何平台轻松查看




高保真原型的目的

制作原型最重要的目的就是“沟通” !近年来许多设计流程里,开始重视”原型制作”的重要性,例如设计思考中,就有特别将”原型制作”当成一个重要环节。透过这些原型,可让你进行最基础的想法验证,然后根据测试结果再来修正你的设计方向。这样的测试循环,可有效降低部分设计错误。

要记住不要在原型投入太多精力. 完美不是原型的重点,而是如何透过它得到验证结果。

Framer 的编程语言(Coffee Script)

Framer整体是架构在JavaScript下。但我们所撰写的语言则是CoffeeScript,它属于高级语言的一种,因此它的程式码是非常接近口语。

但以设计师的角度来看,会建议你不要从CoffeeScript下手来学习。先从理解Framer本身架构,以及它所提供的参数与Function入门比较妥当。

  • Framer Doc:http://framerjs.com/docs/  

  • 中文网(文档同步有一定延迟) http://www.framercn.com/docs

  • Coffee Script:http://coffeescript.org

Framer的拓展能力

Framer 支持许多JavaScript 提供的服务, 比如可以接入地图MapBox等网页的第三方服务,让你的原型完整度更高; 当然支持VR原型。

原生交互感受

VR原型

数据折线原型

3D交互原型

游戏原型

Framer的分享

Framer分享很方便,上传到Framer的云平台。通过链接可以发送给任何人,他们也可以通过手机或者电脑查看。同时,平台支持版本保存,方便你迭代对交互细节不断打磨。如果觉得Framer cloud太慢,可直接上传公司服务器,也可随时分享他人查看

小试牛刀

光说不练假把式,只有亲自体验才能知道Framer的强大之处。Framer支持导入第三方sketch和Photoshop等软件的设计稿。在Framer90版本新增Design模式,也就是我们完全可以不使用第三方软件,只在framer完成设计图和一些高保真交互。(案例文件,末尾进行下载)

这次暂时不会讲解如何导入第三方设计稿,本次只是让你初步体验到framer的强大,不要着急,罗马不是一日建成的。

我们来看看我们第一部分教程要做的效果

Gif效果变慢了,移步这里体验 https://framer.cloud/pKxzY

Framer中制作Email图案

切换到Framer的Design模式下,使用方式和sketch,XD等工具如出一辙。我们拆分下邮件结构。

邮件背面和邮件正面包裹我都添加了轻微的阴影,营造一种轻拟物的感觉。

注意,所有的形状都请包裹在framer的Frame中,因为这样你才能在Code界面下去控制他们的属性和制作动画(也就是需要一个容器去装这些元素)

括号的英文就是包括的Frame的名称,我们来看看图层结构。整个email我用了一个大的Mail来包裹,CustomDevice就是作为深色的画板背景。effect图层是点击的水波纹效果,暂时不要管。

然后,我们在需要做动画的图层右键添加Target,这样就可以在Code中去调用这些图层去控制它们啦。

把mail,cover 都添加上Target。 然后我们切换到code模式下。

可以看到左边有我们刚刚Target的图层,它们都高亮显示,表示我们可以直接通过名称去控制它们。左下角的Docs是我们经常用的,可以快速去查看官方文档,当我们遇到问题,可以多阅读文档很多问题都能解决。

右边就是预览效果窗口啦。 咦? 为何我邮件是折叠状态呢,明明我们在Design模式下是打开的。

因为我添加了这段代码

我们来逐一解释一下意思哦(开始Code咯,别害怕很简单的)

cover.originY = 0

cover就是我们之前画的邮件封口啦,我们通过名字去找到这个图层。然后带上一个小点,就是说我们要去控制cover的什么属性呢(就是图层的尺寸,位置,颜色等)。OriginY是什么呢?

Origin就是指的图层的变换中心,比如我们进行缩放,旋转的时候的一个定位中心,OriginX就是横向中心,OriginY就是垂直中心,看下图

默认的变换中心是蓝色的(OrignX=0.5,OrignY=0.5)这里我们需要切换到红色(只需修改originY=0),也就是把cover向下翻折180度,变成关闭状态。

cover.rotationX = -180

然后以X轴旋转180度,因为是逆时针所以是负的。

这个时候你会发现cover图层不见了,为什么呢?因为我们的空间是三维的,还有Z轴的存在,Framer的翻折之后图层产生了重叠(默认图层都在Z轴为o的位置)

cover.z = 1

把cover的z轴设定为1,那它就在其它图层的上面咯。

mail.y = 0

可以源文件mail的Frame和mail位置是不同的,mail的坐标是相对于mail的Frame的(可以连接买来的Frame就是承载mail的画板),这里把mail.y = 0就是讲mail的Y坐标以Frame的坐标重置,这样mail就装进了邮件中。

隐藏cover可以看到mail被装了进去

Mail.x = Align.center
Mail.y = Align.center(-50)

这两句代码很简单,Align.center就是相对屏幕居中的意思,这里设定就可以让Mail图标在你任何屏幕尺寸下居中,Align.center(-50)就是居中后,坐标值减50(因为我们的视觉中心基本都中间靠上,所以我设置垂直距离居中偏上,这都是细节!)

做到这里,我们的效果应该是这样子

是不是觉得很难?开始接收陌生的事物都是这样子的,更重要的是去思考,发现内在规律和联系。

本次最后一个知识点,我们添加点击事件,进行点击邮件切换为打开状态。

添加代码:

Mail.onTap ->
    cover.rotationX = 0
    cover.z = 0

onTap就是一个事件,加上 ->。记得它们之间一定要带有空格,然后在下面写上事件执行的动作。下面我写的就是还原我们设计稿中的状态(即打开邮件的效果),记住写在事件里面的内容一定要换行。就像下面的代码被包裹在事件中一样。

完成上述代码后,我们可以看到

附上到目前为止的课程文件:

(公众号回复)Framer教程01

我们已经实现一个基本的效果了,剩下就是润色动画了,目前的知识点已经比较多了,考虑到大家的接受程度,动画部分将在下一期内容中进行。

教程中肯定没有写到所有细节,我希望的是更多的自主探索的学习,当然小有伙伴有问题也可以加我微信,向我提问。也可留言提出建议,毕竟第一次写教程,我担心写得太难。。。



下面这些看过吗


如何让设计脱颖而出?今天举个“栗子”

设计有捷径吗?

果然,印度人都是开挂的

加拿大8年资深设计专家COREY专访

Material Design 2.0主题编辑器

经验 | 6步打造「属于自己」的插画

用Lottie制作动画,我的月薪翻了一番!!!

海华社(Hiwow)一个用心做设计的团队


PS:团队长期招募优秀设计师,欢迎来信。

 

 团队联系方式 


https://dribbble.com/Hiwowstudio

hiwow323studio@gmail.com

海华社设计交流QQ群:640835455




Copyright © 南京音乐推荐联合社@2017