移動(dòng)開(kāi)發(fā)平臺(tái)(Framer Studio for mac)

Framer Studio for mac是Mac os平臺(tái)上的一款功能非常強(qiáng)大的Mac開(kāi)發(fā)軟件，F(xiàn)ramer“是給“具有前端開(kāi)發(fā)能力的設(shè)計(jì)師”打造的交互設(shè)計(jì)工具”這部分結(jié)論（甚至我覺(jué)得，由于選擇了Coffee做工程語(yǔ)言，這根本就是給前端用來(lái)做Prototype的），但是不認(rèn)同要使用 Framer 必須要學(xué)習(xí)JS 再學(xué)Coffee的觀點(diǎn)。

Framer Studio for mac可以方便的讓設(shè)計(jì)師把 Photoshop 或 Sketch 里的設(shè)計(jì)圖導(dǎo)入到 Framer.js 里面，而這次 Framer Studio 的發(fā)布，讓這一創(chuàng)作過(guò)程更加簡(jiǎn)便了，極大了方便了設(shè)計(jì)師。

軟件背景

Framer.js 的創(chuàng)始人 Koen Bok 和 Jorn van Dijk 分別是之前 Mac 平臺(tái)著名的軟件開(kāi)發(fā)公司 Sofa 的創(chuàng)始人和設(shè)計(jì)總監(jiān)，隨著 Sofa 幾年前被 Facebook 收購(gòu)，他們也都加入到 Facebook 做起了產(chǎn)品設(shè)計(jì)，但最近兩人離職后創(chuàng)立了 Podium，專(zhuān)注于打造小而美的生產(chǎn)力工具，當(dāng)然目前還只是針對(duì) Mac 平臺(tái)，可以說(shuō)是建立了第二個(gè) Sofa 吧。

其實(shí) Framer.js 很早就推出并且開(kāi)源了，隨著最近 3.0 的發(fā)布，底層代碼已經(jīng)重新全寫(xiě)了，功能和動(dòng)畫(huà)效果也更加完善了，官網(wǎng)上的教程和例子也很豐富，可以看到利用它可以創(chuàng)造出和 Carousel，Google Now 這些 app 一樣的復(fù)雜交互。另外它還提供了一個(gè) The Framer Generator，可以方便的讓設(shè)計(jì)師把 Photoshop 或 Sketch 里的設(shè)計(jì)圖導(dǎo)入到 Framer.js 里面，而這次 Framer Studio 的發(fā)布，讓這一創(chuàng)作過(guò)程更加簡(jiǎn)便了，極大了方便了設(shè)計(jì)師，并且之前內(nèi)測(cè)時(shí)也得到了包括 Facebook，Dropbox 等公司的頂級(jí)設(shè)計(jì)師們的一致好評(píng)。

Framer.js 由于是需要手寫(xiě)代碼來(lái)實(shí)現(xiàn)交互效果的，對(duì)于單純只做設(shè)計(jì)的設(shè)計(jì)師可能很難上手，而且它的代碼是 CoffeeScript，這讓設(shè)計(jì)師尤其是交互設(shè)計(jì)師學(xué)習(xí)的成本更大了…

Framer.js介紹：

Framer.js 是一個(gè)可交互原型框架，基于JavaScript，較為誘人的有以下幾點(diǎn)：支持手勢(shì)、動(dòng)效、狀態(tài)、基于網(wǎng)頁(yè)、容易實(shí)現(xiàn)、可在任何設(shè)備上瀏覽。最近，我們用Framer.js制作了 Aurora的應(yīng)用原型。

僅需一點(diǎn)點(diǎn)編碼知識(shí)，便可以將多種手勢(shì)支持、交互效果、動(dòng)效加入到設(shè)計(jì)中，還可以在手機(jī)或平板中預(yù)覽。而且Framer還提供了 Framer Generator （Framer生成器）插件，可以快速導(dǎo)入Photoshop和Sketch中的圖像并根據(jù)圖層分層，一期 Framer Studio這款可預(yù)覽編輯器。

圖層

Framer中的一切都基于圖層。圖層指的是區(qū)域有限的、有顏色的文本或圖像。除此之外，每個(gè)圖層都有一系列屬性可以調(diào)整，例如不透明度、寬度、高度、比例、模糊等等。在原型制作中，我們用以下兩種方式來(lái)使用圖層：

1.圖像圖層，例如UI設(shè)計(jì)中得標(biāo)題、按鈕等等。在分層導(dǎo)出之前，我們需要考慮哪些部分需要添加效果，哪些無(wú)需，無(wú)需的部分就不用分的那么仔細(xì)了，否則太多的圖層做起來(lái)會(huì)很麻煩。

2.熱區(qū)圖層（類(lèi)似QC中的Hit Area），設(shè)置熱區(qū)圖層后，我們可以通過(guò)點(diǎn)擊來(lái)觸發(fā)交互動(dòng)效。在調(diào)試過(guò)程中，熱區(qū)透明度要設(shè)置為50%。當(dāng)設(shè)置完熱區(qū)后，透明度設(shè)置為0%。

下圖便是一個(gè)案例，圖像為一個(gè)圖層，可見(jiàn)的熱區(qū)又是一個(gè)圖層。 

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

圖層里面也可嵌圖層，處理成組元素比較方便

狀態(tài)

圖層可以有一系列的狀態(tài)，在觸發(fā)時(shí)會(huì)有不同的屬性改變。在應(yīng)用的不同狀態(tài)下，圖層顯示不同的狀態(tài)，例如菜單的側(cè)滑，標(biāo)簽欄懸停時(shí)的高亮等等。通過(guò)交互來(lái)觸發(fā)狀態(tài)的改變。

既然狀態(tài)和圖層有所關(guān)聯(lián)，那么可以通過(guò)定義隱藏面板的狀態(tài)。

// STATES myPanel.states.add({   hide: {y:600,rotationX:90} })

動(dòng)效

我們所創(chuàng)建的每個(gè)原型在需要的場(chǎng)合都設(shè)置了動(dòng)效，無(wú)論是直接交互，或是觸發(fā)事件。實(shí)際上，好的動(dòng)效能夠處理轉(zhuǎn)場(chǎng)過(guò)程中大多數(shù)問(wèn)題，首先能夠引導(dǎo)用戶(hù)，也能適時(shí)的展現(xiàn)內(nèi)容。

動(dòng)效有很多屬性可以設(shè)置，例如設(shè)置物體狀態(tài)A Y軸位置是0，狀態(tài)B Y軸位置為100，可以選擇默認(rèn)效果，也可以修改持續(xù)時(shí)間、延遲以及動(dòng)效的其他屬性。而且，你還可以選擇觸發(fā)動(dòng)效的交互方式。

除了標(biāo)準(zhǔn)的交互->動(dòng)效，也可以設(shè)置無(wú)需交互而顯示的動(dòng)效。例如，你先讓元素如下圖般擴(kuò)大進(jìn)入視窗。

// ANIMATIONS myPanel.animate({   properties: {     scale: 1   },   time: .2,   curve: "spring(100,10,0)" });

Framer的動(dòng)效彈性十足，不過(guò)你也可以非常方便的動(dòng)態(tài)調(diào)整。可以設(shè)置動(dòng)效的曲線，如下。

// ANIMATION OPTIONS myPanel.states.animationOptions = {   curve: "spring(100,12,0)" }

Framer中，大部分動(dòng)效屬性都可調(diào)節(jié)。Framer相當(dāng)于一個(gè)大沙盒，想做動(dòng)效？隨便玩！

交互

Framer提供了一系列交互設(shè)置，稱(chēng)之為事件，包括了敲擊、雙擊、拖移等更多。雖然手勢(shì)不是很多。但是可以擴(kuò)展——Prototyping swipe and drag gestures with Framer 3

敲擊交互效果：

// INTERACTIONS myPanel.on(Events.Click, function(event) {  myPanel.states.next("hide"); })

當(dāng)在圖層上偵測(cè)到交互事件，就可以觸發(fā)很多東西，例如狀態(tài)改變產(chǎn)生動(dòng)效果。