pixate下载(移动交互设计软件)

　　pixate 中文版是一款面向设计师而开发的专业的移动交互设计软件，它能够帮助用户在浏览器上模拟复杂的交互，帮助用户完成更加便捷的开发出动感、漂亮的原生移动界面，从而更容易创造专注于图像的应用程序，另外，Pixate的技术可通过SDK集成进现有的移动应用中，极大的满足了设计师的开发需求，相比于动态UI设计而言，这款软件更符合设计师的思维模式，是设计师、开发者的极佳选择！

软件功能

　　pixate 主要面向移动开发者，可支持利用 CSS 开发移动原生应用（支持 iOS 和 Android），其界面非常直观方便，用户只需拖放设计元素，进行属性设置，就可以在不需要编写任何代码的情况下即可完成具备交互能力的原型设计。

　　利用这款纯原生移动应用原型开发和测试工具，设计师可以在浏览器上模拟复杂交互，包括拖放、滚动、长按、点击等，同时通过移动端的 app 可以实时观看原型的交互效果。

　　由于 CSS 技术的配置灵活性，开发者不必每次在添加新的图形元素时都要对应用进行重建，从而极大地方便了界面的开发和应用部署。通过这种原型开发方式设计师可以实现快速迭代开发，及时将原型提交给项目经理等相关人员审核修改，从而缩短了交付给工程团队进行下一步开发的时间。

　　因此可以用说 Pixate 是一个面向设计师的原型设计平台。近期其主要工作仍聚焦在原型开发上。但是未来有计划去改进设计与工程的交接流程，从而令设计师的工作更加顺畅。

　　它还是更适合做页面级的动画，对于需要形变、非常细腻的复杂动画，有些无能为力。所以Pixate更适合交互设计师来表达界面逻辑。

软件特色

　　适合设计师的思维方式

　　QC的好处是可以比较方便的和程序猿对接，很多动效的实现逻辑和前端的代码逻辑是相通的。也就是说，使用QC虽然不需要写代码，但归根结底还是猿类的思维方式，对于我们这些一点代码不懂，逻辑能力又不是特别好的小小设计师来说，还是有些门槛的。看到满屏的连接线，就让人有点望而却步，搞不清其中的逻辑。

　　作为设计师，无论是交互还是视觉，无论是用PS、AI还是用Axure、Sketch，我们最最熟悉的一个概念，就是图层了。而Pixate的操作方式，同样也是图层的概念。Pixate的界面，乍一看有点像PS呢。

　　如上图所示，左上角是图层区，我们可以将视觉稿或是高保真的交互稿切图后导入Pixate中，所有的图层按照前后顺序出现在图层区中，与PS一样，上层的图片会覆盖在下层的图片上，图层还可以设置成组。历史记录区域也与PS很相似，记录最近的20步操作。值得注意的是，Pixate是随时保存的，如果操作了一堆之后，想要退回到20步以后，就再也回不去了…左下角是手势交互和动画区域，包括常用的手势操作（拖拽、单击、双击、长按、旋转、缩放、滚动）和常见的动效（移动、缩放、旋转、渐隐渐显、变色、改变图片、重复），我们可以将这些手势或是动效直接拖拽到图层上，图层就会实现相应的效果。界面右侧则是对图层属性和交互和动画属性的设置。图层属性可以用来设置图片的大小、位置、透明度等。重头戏是右下角的交互和动画属性设置，通过设置这些参数，可以将手势和相应的动画连接起来，连接完成后，一个可以操作、可以交互的原型就制作好了。

　　实时预览，可交互

　　Pixate的另一个优点就是可以实时预览，并且是可以在手机上实时操作和预览。只需在手机上下载Pixate的app，iOS和Android都可以下载，通过wifi或是数据线连接电脑，就可以实时看到预览效果了。如果懒得连手机，也可以在模拟器上预览效果。

　　全平台

　　你可以online使用，也可以在Mac或是Windows上下载使用。Pixate支持多款iOS和Android机型，甚至支持Apple Watch、LG G Watch和Moto 360三款智能手表，可以说是全平台覆盖。

安装方法

　　1、首先，下载并解压软件，双击“PixateSetup.exe”开始安装本软件，若提示Pixate需要.NET 4.5，则点击“install”安装.NET 4.5。

　　2、.NET 4.5正在安装，等待安装完毕。

　　3、软件会自动进行安装，仅需等待Pixate安装完毕即可。

使用方法

　　1. 首先我们先整理下效果运行的大致思路：

　　在Pixate里制作整个效果，我们需要通过两个左右半圆在沿着一个圆形轨迹来进行中心顺时针旋转的更迭动画。其中左半圆起始时被白色cover挡住，然后从0点开始往6点方向顺时针旋转慢慢全部显示出来。而当左半圆完成180°旋转后，右半圆则跟上继续做6点到12点方向的顺时针旋转。同时，白色的cover将消失或移动到右半圆的下层。这样就大致完整了一个360°的绕圈运动

　　2. 开始制作：

　　如上图所示，是这个项目需要的一些基本资源素材：

　　（ 资源素材的制作就不在阐述了，可以在AI、PS、Sketch或其他任何你会的软件里生成统一大小的PNG资源即可）

　　1. 需要一个透明镂空的背景轨迹（Transparent_circle_track）；

　　2. 一个半圆的白色覆盖层（Cover）；

　　3. 一个左半圆的进度条（LeftPart）；

　　4. 一个右半圆的进度条（RightPart）；

　　5. 可选项：一个按钮（Download btn）及一行运行状态时的文字显示（Downloading text）

　　将资源拖入画布后按照下图顺序排列图层：

　　（起始页没什么好说的。图层的排列还是很好理解的。点击的按钮顶层；透明镂空的背景轨迹一定在进度条和cover上；cover起始一定在两条进度条上；而left在right上面的原因，是我在这个案列中，我给cover使用了reorder的指令。便于制作，我之后将cover就直接set到rightpart的下面或者是直接置于整个的层底）

　　将资源全部放置于画布的中间，并将最后一层的“rightpart”的Opacity不透明度设置为0，使其完全透明不可见。

　　最后的效果应该是如下图：

　　现在来设置每个层级的具体参数：

　　先设置第一个按钮层：

　　因为是整个项目的起始触发，所以先给按钮层一个Tap交互属性：

　　接着给它添加一个“fade”的动画属性，设置触发按钮后，其本身会消失：

　　接着选择“leftpart”左半圆的那个图层，赋予一个“旋转”属性。让它在按下“下载按钮”1秒后，在2秒内完成一个自身180°的旋转

　　此时，再选择“rightpart”右半圆的那个图层，也赋予一个”旋转”属性。让它在按下“下载按钮”3秒后，在2秒内完成一个自身180°的旋转，紧接着左半圆完成另一半的运动。（为什么是3秒？因为做半圆完成自身的旋转是2秒，再加上1秒的延时，所以左半圆完成全部的时间是3秒）

　　因为之前将右半圆设置了全透明，所以要再给它赋予一个“fade”属性，让它重见光明。当然这个时间差也是3秒。

　　这个时候还有个问题就是在6点到12点范围内，白色的cover其实是遮住了右半圆的图层，所以我们也要在整个时候将白色的cover放置到最底层。拖拽一个Reorder动画属性给cover层，并设置“放置底层”。同样也是3秒的时间差。因为这个时候左半圆刚好完成了他自己的旋转。

　　最后给“downloading”的文字增加一个“Fade”属性让它在整个流程跑完后就消失。

　　因为跑完整个流程是“左半圆”的2秒加上“右半圆”的2秒，再加上起始左半圆的1秒延时。所以整个过程是5秒

　　好了，至此全部的设置完成了。点击一下download的按钮就会看到圆形的进度条已经可以完美工作了！

　　各位还可以根据需要制作一个“reset”的按钮，让其跑完一圈后“重置”。这里就不再深入了。