天津UID培训
达内天津天大中心

4000178985

热门课程

交互设计工具Framer新版体验

  • 时间:2016-08-31
  • 发布:未知
  • 来源:伯乐在线

Framer是一款支持通过代码实现交互效果的设计工具,通过它设计师可以设计复杂的可交互原型。同时,Framer支持Sketch和Photoshop源文件导入,实时预览交互效果,也可以在移动设备上进行测试。在图形化设计工具大行其道的时候,Framer选择了更高效的方式,虽然学习曲线较斗,但学会之后不仅能制作高还原度的原型,还能让设计师对代码的原理略知一二,文件源码对于开发工程师也有一定帮助。

A new way to design with code

前几天Framer官网在为即将到来的新版软件进行倒计时,并写着:A new way to design with code,看来新版的设计方式与以往不同。之前Framer一直只能通过代码进行设计,但这种方式对设计师来说普遍偏难,不易上手。所以我隐隐觉得,这次改版应该是加入了图形化设计。

新版发布之后,我第一时间升级并试玩了一番,果然是比以前更顺手。官网介绍说:一种全新使用代码设计的方式,充满无限可能性,比以往更容易。那我们就看一下新版Framer到底体验如何。

首先,Framer更换了新的logo,感觉上比以往更专业。当然这不是我们要说的,重要的更新在下面。

1、新增图形化设计方式

在图形化的交互设计工具扎堆出现时,Framer独辟蹊径鼓励设计师用代码进行创作,但是由于编程门槛较高,一直以来很少有设计师愿意去尝试使用。这一次估计Framer团队也意识到了这个问题,将改版后的Framer加入了可视化设计。

像sketch一样,这一次你可以在Framer里通过简单的拖动、选取来进行图形化设计。不必像以前一样写出很长的代码来画一个简单的图形,你只需要点击左上角的insert->layer就可以插入简单的形状。

插入图层

同时,你也可以拖动图形来改变它的位置,通过颜色选择器来改变它的填充颜色,改变输入框内的数字来改变描边宽度。一切都是那么简单,就像你使用sketch和photoshop一样。以后你甚至可以直接在Framer中进行简单的设计,而不需要从设计软件中导入。

像sketch一样熟悉

2、设计图与代码同步

Framer界面很清晰地被分成左右两边,左边是代码书写区,右边是图形设计区。看起来好像有点分裂,但其实不然。当你在右侧进行图形设计时,左边对应的代码也会跟着改变;当你在左侧编写代码时,也能实时看见右侧的图形跟着变化。

同步变化

对于不熟悉代码的设计师,以后就可以在右边进行设计,通过观察左边代码的变化来学习编程。

3、支持图片文件拖入

以前在进行设计时如果需要图片,除了直接导入sketch和ps设计文件,就只能把图片放进对应文件目录下。但这一次你可以使用一种更加简单的方式——直接将图片拖进编辑区——Framer会自动将图片转化成代码。

拖动添加图片

4、不只能插入图层,交互动作也能插入

我们不仅仅可以通过直接插入的方式添加一些图层,还可以插入状态和事件,来实现可交互的效果。就像下面的例子:

我们先给layerA添加一个新状态,在该状态下改变他的大小和填充颜色。

添加状态

接着用同样的方式给layerA添加事件,这里我们给它添加click事件,当我们点击layerA时,让他过渡到下一个状态。

添加事件

这里需要注意的是,点击事件的响应仍要写自己代码。如上图,给layerA添加事件之后,代码编辑区光标自动定位到点击事件之后,我们要在这里写上:layerA.states.next(),就表示layerA从当前状态过渡到下一个状态。

本例中只有两个状态,所以点击layerA时就会在两个状态间循环变换。

总结

新版Framer更加适合设计师,我们完全可以不写一行代码来做一些简单的效果。在练习中不断加深对代码原理的理解,时间久了就可以通过代码来实现更加复杂的交互原型。

当然,Framer官方也说了,这只是一个开始。这是通过自动编码进行设计的一个突破,以后Framer会探索出更多方法,让设计师做出更好的作品,让我们继续期待吧。

如果你对自己的未来迷茫,或者工作遇到瓶颈,不妨考虑来达内天津ui培训机构学习ui设计。已经有20多万学员从达内毕业之后都找到了满意的工作。给达内一个机会,你将受益终生。天津ui培训班开班在即,欢迎点击右下角在线咨询报名。

上一篇:让你的 Sketch Workflow 更快
下一篇:一次搞懂 IconFont 是什么

0基础学习UI必看的知识体系!

学习UI设计的4个小技巧

UI设计师都做些什么呢?

设计师最关注的28个问题,有你想问的么?

选择城市和中心
贵州省

广西省

海南省