Pixate Studio安装使用教程

Pixate是一个原生移动应用动态UI设计平台，成立于2012年，创始人是Paul Colton和Kevin Lindsey，其目标是帮助设计师和开发者方便开发出动感漂亮的原生移动界面。2015年7月底Pixate被Google收购，团队全部成员加入 Google 的设计团队。希望Pixate与Google的结合能让双方在用户体验和产品发展上能够得到双赢。期待Pixate的后续的版本更新！

软件介绍

Pixate可支持利用CSS开发移动原生应用（支持iOS和Android），其界面非常直观方便，用户只需拖放设计元素，进行属性设置，就可以在不需要编写任何代码的情况下即可完成具备交互能力的原型设计。2012年Pixate曾加入Y-Combinator夏季班，此前曾获得Accel Partners领投的380万美元融资。

Pixate 是新一代的移动交互设计软件，致力于帮助产品设计师不通过编写代码就能够实现移动端复杂的动画和交互设计工作。Pixate能够100%生成原生的移动交互原型，能够让你针对不同平台改进产品交互体验。同时也能更好地向项目小组成员展示、分享和交流你的交互想法。

如果你想创造一个和真正的移动产品相差无几的产品原型来展现和表达自己的交互动画理念，Pixate可以让你抛开代码，迅速创建能够在移动设备上执行和快速交互的移动产品原型。当你的产品及交互想法在真正的移动设备上展现出来过后，你可以和设计师还有其他小组成员更加高效地交流产品设计。

你的想法，一台电脑，PixateStudio，浏览器加上一个云账户（用来做分享和云存储），安卓或者苹果移动产品，再加上一个制作颠覆性应用的计划。

开始使用Pixate

使用Pixate可以分为两个步骤：通过Studio创建和编辑原型，通过云存储和分享你设计的产品原型。

Pixate Studio 用来创建和编辑原型。这个工作编辑器让你创建层、动画和交互。Studio在你的系统中保存所有原型和工程文件。

如果你想分享或者和成员合作，你需要使用Pixate的云服务。这个是使用Pixate进行协作的一部分，使用这个工具，你需要连接网络同时进行注册。

点 vs 像素

Pixate使用的是点而不是像素单位，所以尺寸和图像尺寸会有点不同，点代表视图的大小和位置，以及渲染的内容。这就能让一个图像可以在两个不同分辨率的不同设备显示，并没有视觉上的大小差异。

当你创建一个新的原型，你将看到密度（x2 和 x3）在设备屏幕大小后面。

当创建图像上传到 Pixate 的时候使用这个作为乘数。如果你创建一个 APP，使用的是 iPhone 6（x2），用点的尺寸乘以 2 就可以获得图像的像素尺寸。

Pixate编辑器

我们前面提到过，Studio用来创建和编辑产品原型。所有的产品原型都保存在本地，不用联网你就可以预览所有的产品原型。

Pixate文件

Pixate编辑器拥有和其他的桌面应用一样的创建和打开文件的方式。在Pixate欢迎页面或者File菜单选项中可以创建和打开Pixate文件。

Pixate编辑器提供了你可以打开和实验编辑的产品原型案例。你可以通过欢迎界面或者File菜单点击New from Sample选项打开Pixate提供的原型案例。

Pixate欢迎页面同时列出了最近打开的文件。通过点击Learn More about链接获得Pixate提供的教程视频，用户手册教程和官方案例。

在使用Pixate编辑产品原型的时候，如果文件被编辑修改，Pixate会自动保存，所以不必自己进行手动保存。

IOS模拟器

Pixate能够在原生移动设备上提供原型预览是我们值得骄傲的，我们意识到模拟实时预览的功能和需求度会慢慢提升。Pixate Studio开发了针对IOS模拟器的实时预览，即在桌面系统开发原型，同时在模拟器中模拟移动设备进行实时预览的功能。

请注意，使用IOS模拟器，你需要在你的系统中安装XCode，如果你没有安装XCode，当你点击Simulator菜单按钮的时候得到一个反馈提示。

点击Simulator菜单按钮选择不同的设备进行模拟。

Studio界面

Studio界面分为6个工作选区，每个选区有自己的信息和功能。

A - THE TOOLBOX/ASSETS TABS（A-工具和资源选项卡）

ToolBox选项卡包含层列表（Layer List）Actions面板和交互/动画面板。这些都是你在创建层（Layers），应用Actions，交互和动画的工具。

Layer list（层列表面板）

层列表保存了产品原型用到的所有层信息。在这里你可以创建，删除或者组织产品原型中的层（Layers）

Assets（资源文件面板）

第二个选项卡内容是资源文件，你可以上传产品原型中使用到的图片。你可以从外部拖拽文件到Assert资源文件选项卡中，或者点击”+”按钮进行添加。

B - ACTIONS（B-动作脚本面板）

Actions是帮助你完成一些常用功能的脚本，比如设置ScrollView或者调整对齐层。Actions面板中包含一些基础功能脚本，你可以创建新的脚本。

C - INTERACTIONS AND ANIMATIONS（C-交互，动画面板）

这个界面分为两个部分。第一个部分包含交互组件，第二个部分包含动画组件。通过拖拽组件图标到层列表中相应的层就可以将交互组件和动画组件作用到层（Layer）

D - THE CANVAS（D-画布面板）

这个面板包含画布和画布按钮。画布按钮包含当前编辑的产品原型名称，选择的制作产品原型的设备，取消，重做按钮，合并按钮。画布的是你的产品原型的虚拟展示区域。画布呈现的内容就是你在预览所看到的内容。

E - LAYER PROPERTIES（E-层属性面板）

面板显示当前选中层的信息。在这个面板中你可以修改相应的参数调整Layer层位置，尺寸大小，旋转来改变Layer层内容。

F - INTERACTION/ANIMATION PROPERTIES（F-交互/动画属性面板）

作用到Layer层的动画和交互组件属性信息将会被显示到该面板。这些属性用于定义条件，设置动画范围和定义动画与交互组件之间的联系。双击项目重命名，点击左边的箭头展开和收起属性信息。你也可以点击右侧的开关来开启和关闭动画。