framer studio for mac (移动交互界面设计)

framer studio for mac (移动交互界面设计)

v88破解版

  • 2017-03-30
  • 英文软件
  • 5分
  • 714下载
此为PC软件,请到PC端下载

Framer Studio mac 一直是业界炙手可热的明星软件,一直广受Google、Dropbox 等公司推荐.其实,说到原型设计工具,UI设计师不得不提的也就只有 Framer Studio for mac ,这款移动原型设计工具,基于Framer.js快速原型框架,可以快速的创建可交互的原型,集成了Photoshop & Sketch等软件,可以快速的将这些软件的源文件导入到原型中,这样简单的介绍.估计还没有入手的你已经心动!

Framer Studio 7 mac下载

framer studio mac 破解说明

软件下载完成后,打开软件包,拖动软件【framer】到应用程序进行安装.安装后运行软件.软件已经激活!

framer studio mac 软件介绍

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

其实 Framer.js 很早就推出并且开源了,随着最近 3.0 的发布,底层代码已经重新全写了,功能和动画效果也更加完善了,官网上的教程和例子也很丰富,可以看到利用它可以创造出和 Carousel,Google Now 这些 app 一样的复杂交互.另外它还提供了一个 The Framer Generator,可以方便的让设计师把 Photoshop 或 Sketch 里的设计图导入到 Framer.js 里面,而这次 Framer Studio 的发布,让这一创作过程更加简便了,极大了方便了设计师,并且之前内测时也得到了包括 Facebook,Dropbox 等公司的顶级设计师们的一致好评.

framer studio mac 功能介绍

开始

是一种新的创造性的工具来构建交互和动画原型.它允许您连接像素行为和发现令人兴奋的交互设计的新方法.

高保真原型

原型可以帮助设计人员、开发人员以及其他许多有效沟通的概念,从micro-interactions到整个新员工培训流程.

设计

探索交互桌面应用程序,网站或移动平台.选择8预先安装的设备在多种颜色或快速修改您的具体设置.

工作流程

完成样机的设计- 他们导入筹划者与一个单一的点击.开始添加交互和动画让你的设计生活.

构建和设计

在设计移动时,验证概念的最好方法是去体验他们在实际设备上.在实时预览原型镜子.

framer studio mac 特色功能

图层

Framer中的一切都基于图层.图层指的是区域有限的、有颜色的文本或图像.除此之外,每个图层都有一系列属性可以调整,例如不透明度、宽度、高度、比例、模糊等等.在原型制作中,我们用以下两种方式来使用图层:

1.图像图层,例如UI设计中得标题、按钮等等.在分层导出之前,我们需要考虑哪些部分需要添加效果,哪些无需,无需的部分就不用分的那么仔细了,否则太多的图层做起来会很麻烦.

2.热区图层(类似QC中的Hit Area),设置热区图层后,我们可以通过点击来触发交互动效.在调试过程中,热区透明度要设置为50%.当设置完热区后,透明度设置为0%.

下图便是一个案例,图像为一个图层,可见的热区又是一个图层.

// IMAGE

myPanel = new Layer({x:20, y:100, width:280, height:200, image:"images/panel.png", opacity:1})

// HOTSPOT

myHotspot = new Layer({x:20, y:100, width: 76, height: 50, backgroundColor: "lime", opacity:.5})

图层里面也可嵌图层,处理成组元素比较方便

状态

图层可以有一系列的状态,在触发时会有不同的属性改变.在应用的不同状态下,图层显示不同的状态,例如菜单的侧滑,标签栏悬停时的高亮等等.通过交互来触发状态的改变.

既然状态和图层有所关联,那么可以通过定义隐藏面板的状态.

动效

我们所创建的每个原型在需要的场合都设置了动效,无论是直接交互,或是触发事件.实际上,好的动效能够处理转场过程中大多数问题,首先能够引导用户,也能适时的展现内容.

动效有很多属性可以设置,例如设置物体状态A Y轴位置是0,状态B Y轴位置为100,可以选择默认效果,也可以修改持续时间、延迟以及动效的其他属性.而且,你还可以选择触发动效的交互方式.

除了标准的交互->动效,也可以设置无需交互而显示的动效.例如,你先让元素如下图般扩大进入视窗.

// ANIMATIONS

myPanel.animate({

properties: {

scale: 1

},

time: .2,

curve: "spring(100,10,0)"

});

Framer的动效弹性十足,不过你也可以非常方便的动态调整.可以设置动效的曲线,如下.

// ANIMATION OPTIONS

myPanel.states.animationOptions = {

curve: "spring(100,12,0)"

}

Framer中,大部分动效属性都可调节.Framer相当于一个大沙盒,想做动效?随便玩!

交互

Framer提供了一系列交互设置,称之为事件,包括了敲击、双击、拖移等更多.虽然手势不是很多.但是可以扩展

framer studio mac 小编点评

framer studio for macv88破解版改进

在应用程序文档的价值变化事件。

在slidercomponent程序文件。

Framer Studio,移动交互设计的春天,现在!快来!

交互设计另一款推荐