未来Mac下载

mac.macxz.com
软件介绍
相关软件
相关专题

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

Framer Studio 7 mac下载

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

framer studio mac 破解说明

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

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

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 for mac (移动交互界面设计)

framer studio mac 功能介绍

开始

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

高保真原型

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

设计

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

工作流程

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

构建和设计

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

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

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})

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

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

状态

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

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

动效

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

动效有很多属性可以设置,例如设置物体状态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 for mac (移动交互界面设计)

framer studio mac 小编点评

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

framer studio for macv88破解版改进

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

在slidercomponent程序文件。

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

交互设计另一款推荐

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

相关软件

更多

相关专题

立即下载

客服QQ:

客服微信

返回顶部
后退
榜单 X