高效Mac(三)面向程序员的交互设计神器:Framer Studio

最近程序开发,对公司设计的交互原型很是感兴趣,但那些工具开发出的交互原型真的无法忍受,就想找一款能搞真是模拟软件的交互工具,功夫不负有心人,终于找到一款非常完美的交互设计工具,相对其他工具来说学习成本较高,但是对于会代码的人来说相对简单,也很有意思,搞了一天还没完全搞定,但是还是忍不住先介绍出来让大家尝尝鲜,下面进入正题。

软件名称:Framer studio

该软件为Mac平台的移动交互原型设计工具,该软件的出现为移动交互设计领域增添了又一款强有力的生产力工具,是由Framer.js建立,一个快速原型技术的开放源码框架。Framer 允许您定义动画和交互作用,在移动设备上运行。

通过该软件,设计师可以快速导入Photoshop或者Sketch里的设计图导入进来,并且该软件具有强大的动画编辑能力,可以快速简单的添加个中动画,使你的交互原型设计更形象。

很不幸,该软件目前只有Mac版本,而且价钱不菲,价值人民币800多元,有钱的朋友可以出手,没钱的朋友要想办法了。

1.欢迎界面:

中间有四个图片,分别有名称:Animate,Drag,Scroll和Page,分别表示动画,拖拽,滚动和翻页,四种效果可以亲手添加操作一下,很简单。

2.首先新建文件,点击:File->New或者快捷键Command+N,创建新项目如下所示:

上面左侧面板显示“通过快捷键shift + command + N”插入一个图层,也可以通过上上面的Insert选择插入图层,插入后效果如下:

由上图可知,左侧为代码编辑区,中间为手动输入区,右侧为显示区,看到代码是不是很亲热,不过代码是用js写的,不过相对还是很简单的,有代码基础的同学学一下就会了。有了代码就可以搞出很牛的效果。中间部分可以看出可以设置初始位置,宽高,背景,透明度,圆角,阴影,缩放,旋转等效果,是不是很强大。如果没有中间调节参数部分可以点击左侧“1”后面的layer前面的那个图标即可。

3.状态:我们先导入一个例子,如下图:

这是一个列表界面,左侧为代码区域,看看发现结构清晰,代码简单,中间为结构名称结构图,右侧为显示效果图,是不是很逼真。

点击左上角的Insert菜单,弹出如下图所示下拉菜单,里面有个state选项,将鼠标移动到该位置,会显示为如下图所示,展示了导入项目中的所有组件:

在Insert菜单中的State选项下面有个Events选项,鼠标移动到该位置,会弹出如下菜单,会显示所有组件,每个组件后面都有很多的触发事件,和我们Android手机端的时间很相似,包括点击,触摸拖拽等等,每个事件还包含子事件,由于太多,没有展示,可以自己动手看看。

4.设备切换:在软件右上角有个Device选项,点击会弹出如下菜单:

里面有多重苹果设备和Android设备,你可以自己切换看看效果,此处不再介绍。

5.代码教程:最重要的是代码教程问题,该软件里面已经包含了详细的代码教程,不过是英文版的,但是相对很简单,有些只需要查一下就知道什么意思了,这里我也不再介绍,内容比较多,官方教程也很详细,官方教程调用方法:点击软件上面的菜单Window→Documentation或者快捷键Command+D或者点击软件上面的Docs菜单即可:

教程介绍了从位置打下调成,到颜色值调整,到动画使用,都做了非常详细的介绍,简单易学。功能强大,希望该软件帮你设计出更好的交互原型。

原文发布于微信公众号 - 小巫技术博客(wwjblog)

原文发表时间:2016-05-15

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏腾讯社交用户体验设计

Origami五分钟入门秘籍 - 腾讯ISUX

1602
来自专栏做全栈攻城狮

小白学编程实战项目-利用Winform开发美女音乐播放器

这是小白学习软件开发系列课程,旨在帮助对电脑编程感兴趣的朋友学习并熟悉C#技术。其中基础部分已经讲解完毕,可以查看:电脑编程入门(10)-C#面向对象编程浅聊,...

2243
来自专栏思衍 Jax 专栏

企鹅辅导课程详情页毫秒开的秘密 - PWA 直出

随着近几年的前端技术的高速发展,越来越多的团队使用 React、Vue 等 SPA 框架作为其主要的技术栈。以 React 应用为例,从性能角度,其最重要的指标...

95111
来自专栏lgp20151222

Java引用外部字体(路径引用)的一些坑

然后,一路踩了jvm关于字体的坑,重点是,java的报错很随意,甚至不报错,建议直接看最后面.

1901
来自专栏前端侠2.0

Angular Elements 组件在非angular 页面中使用的DEMO

      Angular Elements 是伴随Angular6.0一起推出的新技术。它借助Chrome浏览器的ShadowDom  API,实现一种自定义...

3752
来自专栏互联网杂技

前端各种优化

1.  请减少HTTP请求   基本原理:   在浏览器(客户端)和服务器发生通信时,就已经消耗了大量的时间,尤其是在网络情况比较糟糕的时候,这个问题尤其的突...

3418
来自专栏Material Design组件

Human Interface Guidelines — Widgets

1183
来自专栏iOS开发笔记

ios开发照片框架详解(一)-- AssetsLibrary

1 概要 在 iOS 设备中,照片和视频是相当重要的一部分。最近刚好在制作一个自定义的 iOS 图片选择器,顺便整理一下 iOS 中对照片框架的使用方法。在 i...

3769
来自专栏极乐技术社区

五个套路看懂微信小程序开发(下)

你或许听说过,快速入门就是要学最小必要知识。而我最近在看微信小程序的官方教程时发现,这个教程虽然简单,但对于微信小程序开发来说,80%的套路都能从这里学习到,你...

2989
来自专栏iOS开发笔记

iOS开发照片框架详解(一)-- AssetsLibrary

1 概要 在 iOS 设备中,照片和视频是相当重要的一部分。最近刚好在制作一个自定义的 iOS 图片选择器,顺便整理一下 iOS 中对照片框架的使用方法。在 ...

4267

扫码关注云+社区

领取腾讯云代金券