編者按：30秒出交互原型，5分鐘搞定交互動(dòng)畫(huà)！今天@Payshare?給大家安利一款超實(shí)用的交互原型制作神器，亮點(diǎn)有3：整體交互原型制作，與Sketch無(wú)縫配合，制作速度快快快到難以想象，內(nèi)附一個(gè)教程，不到20秒效果就完成你敢信？來(lái)收！

Flinto的前身是一款在線制作原型的工具，通過(guò)上傳圖片，添加熱點(diǎn)配合相應(yīng)的交互動(dòng)作快速的生成整體原型通過(guò)網(wǎng)頁(yè)或者手機(jī)端展示給客戶觀看，與之前介紹的Briefs非常相似，但Flinto是在線應(yīng)用。

隨著移動(dòng)設(shè)備的普及，F(xiàn)linto也不斷進(jìn)化，團(tuán)隊(duì)開(kāi)發(fā)出了Flinto for mac 版本，截止到現(xiàn)在的版本是Flinto 1.12

任何工具的出現(xiàn)都是為了提高我們的效率。作為一款交互原型制作軟件首先要滿足：

1. 可以人機(jī)交互
2. 便于設(shè)計(jì)師與其他人員溝通
3. 減少開(kāi)發(fā)成本

Flinto的一些效果

也許我們很難想象，以上的后面三個(gè)效果都是在極短的時(shí)間內(nèi)完成的（極短<=5分鐘）

目前的Flinto除了擁有透明度變化，XYZ軸旋轉(zhuǎn)，XY軸位移，運(yùn)動(dòng)曲線調(diào)整，移動(dòng)端保存預(yù)覽，等基礎(chǔ)功能之外，最大的優(yōu)點(diǎn)有五個(gè)：

1. 整體交互原型的制作
2. 與sketch無(wú)縫配合
3. 制作速度快
4. 制作速度真快
5. 制作速度非?？?/li>

案例

下面我們要制作如上圖的效果：

首先在sketch中繪制靜態(tài)效果圖：

2. 利用Flinto插件一鍵導(dǎo)出到Flinto，點(diǎn)擊相應(yīng)圖片添加觸發(fā)交互的行為，這里是Tap，即單擊，新建變化（New transition）

3. 把背景層透明度調(diào)整為0，調(diào)整整個(gè)圖層位置，鏈接放大圖片到小圖片，調(diào)節(jié)運(yùn)動(dòng)參數(shù)。

4. 保存動(dòng)作，選擇四張圖片成組制作滾動(dòng)Scroll，添加返回行為，預(yù)覽效果。

以上的效果我制作原型其實(shí)只用了不到20秒。

之所以那么短的時(shí)間得益于Flinto的connet layer（類(lèi)似于Flash的補(bǔ)間動(dòng)畫(huà)）的作用，使圖層之間的變化可以非常迅速的制作，并且Back link功能使我們可以一鍵制作原型的返回效果，這兩點(diǎn)無(wú)疑大大加快了制作速度，并且由New Transition制作的交互動(dòng)作和connet layer的標(biāo)簽還可以重復(fù)使用，總之，難以想象的快。

作者微信公眾號(hào)：

【優(yōu)設(shè)近期超實(shí)用神器合集】

在線創(chuàng)建超贊圖表的酷站！
《缺少靈感？自動(dòng)生成上千款熱門(mén)配色色板的COOLORS》

幫你補(bǔ)充配色靈感！
《缺少靈感？自動(dòng)生成上千款熱門(mén)配色色板的COOLORS》

一次搜索21個(gè)圖庫(kù)的搜圖殺器！
《搜圖殺器！一次查找21個(gè)免費(fèi)可商用圖庫(kù)網(wǎng)站的STOCK UP》

作者：@Payshare

【優(yōu)設(shè)網(wǎng) 原創(chuàng)文章 投稿郵箱：2650232288@qq.com】

================關(guān)于優(yōu)設(shè)網(wǎng)================
"優(yōu)設(shè)網(wǎng)uisdc.com"是國(guó)內(nèi)人氣最高的網(wǎng)頁(yè)設(shè)計(jì)師學(xué)習(xí)平臺(tái)，專(zhuān)注分享網(wǎng)頁(yè)設(shè)計(jì)、無(wú)線端設(shè)計(jì)以及PS教程。
【特色推薦】
設(shè)計(jì)師需要讀的100本書(shū)：史上最全的設(shè)計(jì)師圖書(shū)導(dǎo)航：http://hao.uisdc.com/book/。
設(shè)計(jì)微博：擁有粉絲量103萬(wàn)的人氣微博@優(yōu)秀網(wǎng)頁(yè)設(shè)計(jì) ，歡迎關(guān)注獲取網(wǎng)頁(yè)設(shè)計(jì)資源、下載頂尖設(shè)計(jì)素材。
設(shè)計(jì)導(dǎo)航：全球頂尖設(shè)計(jì)網(wǎng)站推薦，設(shè)計(jì)師必備導(dǎo)航：http://hao.uisdc.com