軟件介紹

Flinto是一款專業(yè)的交互設(shè)計軟件，它擁有非常功能的功能，可以幫助用戶輕松設(shè)計各種手機(jī)APP的交互動作，包括動畫、手勢和滾動等等。Flinto使用起來也很方便簡單，不需要時間線和編程，十分容易上手使用，有需要的用戶快來下載吧。

特色功能

設(shè)計自定義動畫轉(zhuǎn)場和交互

通過直接操作手勢瀏覽您的應(yīng)用程序原型

可添加滾動區(qū)域。 支持垂直、水平、嵌套、分頁以及基于滾動的動畫

通過我們的免費配套iOS應(yīng)用程序?qū)崟r查看您的成果

直接從Sketch導(dǎo)入屏幕設(shè)計，或者直接在應(yīng)用程序中繪制簡單的用戶界面

可以發(fā)送Flinto文件給任何人，他們只需要安裝我們免費提供的iOS查看器應(yīng)用程序或Mac應(yīng)用程序的免費版本

使用教程

1、創(chuàng)建原型

在主頁點擊“New Prototype”按鈕(如下圖)，然后填寫項目的主要信息，選擇設(shè)備的類型和方向(豎屏還是橫屏)。注意設(shè)備的類型和方向選擇好后不可以進(jìn)行后期更改，所以要謹(jǐn)慎選擇。標(biāo)題、狀態(tài)欄樣式和密碼可以在后期進(jìn)行更改。

2、編輯器介紹

我們進(jìn)行的所有操作基本都在這個界面完成。在這里我們可以添加頁面并把這些頁面鏈接起來，設(shè)置轉(zhuǎn)場動畫，預(yù)覽原型效果等。編輯器左側(cè)為工具欄，右側(cè)為頁面主操作區(qū)(如下圖所示)。下面是編輯器的主要功能介紹：

1)添加頁面功能

直接將設(shè)計效果圖(PNG、GIF、JPG、PSD格式)拖拽到編輯窗口，或者點擊工具欄的“Add Screens”按鈕來添加頁面。

2)預(yù)覽功能

點擊工具欄的“Preview”按鈕(快捷鍵P)，你可以快速預(yù)覽所做的交互效果是否符合你的設(shè)計本意。

3)分享和安裝功能

可以將你的原型通過郵件或手機(jī)號分享給收件人，并可以在客戶端安裝，模擬真實的環(huán)境。

4)縮放功能

在工具欄中左右滑動縮放滑塊來縮小和放大原型(快捷鍵“-”和“+”)。

5)設(shè)置功能

點擊工具欄上的“Settings”按鈕，打開Flinto原型設(shè)置彈窗，你會看到三個Tab設(shè)置面板，分別為：常規(guī)選項設(shè)置面板、分享預(yù)覽設(shè)置面板、動作設(shè)置面板。后面我們會詳細(xì)介紹。

3、添加屏幕/頁面

Flinto原型由很多張屏幕圖片組成。你可以用你喜歡的圖像軟件如：Ps、Ai以及Sketch(最愛)等輸出一系列圖片。同時Flinto支持多種格式的圖片導(dǎo)入：PNG、JPG、GIF、甚至PSD(PSDs會被轉(zhuǎn)換成PNGs)。

你可以直接將圖片拖到Flinto編輯器中或者從Dropbox(在線存儲工具)中同步過來。而這些速度都非�？�，以至于你都不需要等待文件上傳就可以開始原型制作，非�？岚�。

這里有幾個關(guān)鍵的設(shè)置項你需要了解下，對你定制原型非常有幫助：

1)屏幕(頁面)大小

Flinto支持多個屏幕尺寸，非常靈活。你可以使用任何大小的屏幕頁面。但是如果你要做的是高保真(high-fidelity)的原型，最好選擇和你的設(shè)備相符的屏幕尺寸。其中寬度相符最為重要，F(xiàn)linto會自動調(diào)整寬度尺寸去適應(yīng)設(shè)備。另外，F(xiàn)linto非常貼心-支持滾動，允許你上傳比你的設(shè)備尺寸更高的圖片，這點和SKetch Mirror一樣，是不是很贊呢。

盡量保證你的圖片大小在5百萬像素以內(nèi)，因為移動端瀏覽器在顯示大圖時會有些問題。Flinto自己也會自動去重置頁面的大小，但這可能會導(dǎo)致圖片出現(xiàn)無法想象的模糊。所以，盡量保證你的圖片小些。

2)狀態(tài)欄樣式

如果你做的是iPhone或者iPad的原型，即iOS系統(tǒng)設(shè)備的原型，這里還有個狀態(tài)欄樣式的設(shè)置項 ，有三種樣式可供選擇，分別是黑色不透明(Black Opaque)、黑色半透明(Black Translucent)、白色半透明(White Translucent)。

這里注意：如果你選擇的是黑色不透明，那么你設(shè)計的頁面需要去掉40px(for Retina)高的狀態(tài)欄(以iPhone 6為例)，即最佳尺寸為750x1294 px。如果選擇的是透明的狀態(tài)欄，你的屏幕需要擴(kuò)展頭部高度為1136px(給狀態(tài)欄留出40px高度的背景空間)。明白了吧。

3)文件格式

Flinto支持 PNG、JPG、GIF動畫以及PSD格式的圖像。

4)同步Dropbox

Flinto支持從Dropbox中添加圖片到你的Flinto中，并且保持和Dropbox中的同步。你只需要在第一次使用點擊左側(cè)工具欄的“ Connect Dropbox”按鈕，并在Dropbox里選擇同意訪問即可。當(dāng)你改變了你的原型，Dropbox會和Flinto保持同步，而這一切都是實時的。

5)更新頁面

當(dāng)你在迭代你的原型時，可能需要更新或者替換掉現(xiàn)有的頁面，這時候你只需要在Flinto編輯器中，把新的頁面拖拽到舊的頁面上面即可替換。

如果你有好幾個頁面需要更新，而且新的頁面與舊的頁面文件名相同，你可以將它們都拖拽到編輯器中，文件名相同的頁面會被替換掉，新的文件名頁面會增加為新的屏幕。

6)選擇頁面

想要選擇某個頁面，你只需點擊該頁面(這時候頁面邊緣會顯示出藍(lán)色邊框以表示該頁面被選中)，你也可以按住Shift鍵加選頁面。

當(dāng)你選擇了一個或多個頁面后，在編輯器的左側(cè)下部會出現(xiàn)一個工具欄，這里你可以進(jìn)行頁面的刪除、固定頁面頭部和底部(詳見下文第3條-固定區(qū)域設(shè)置)、剪掉頁面狀態(tài)欄等操作來優(yōu)化你的交互。

7)刪除頁面

選中需要刪除的頁面，按下鍵盤上的Delete鍵或者在左側(cè)工具欄中點擊刪除按鈕即可刪除掉頁面。需要注意的是，一旦頁面被刪除將無法恢復(fù)，所以需要謹(jǐn)慎操作，不過好在你可以通過新增頁面來快速加入誤刪的頁面。

8)頁面重命名

選擇你想要命名的頁面，雙擊頁面的標(biāo)題或者雙擊工具欄中的標(biāo)題都可以快速重命名頁面的標(biāo)題。你還可以按Tab鍵直接跳到下一個頁面繼續(xù)給下一頁面重命名，非常高效。

9)編輯狀態(tài)欄高度(非常實用)

相信我們很多人輸出的效果圖都是帶有狀態(tài)欄的，F(xiàn)linto可以自動嘗試去探測你的頁面是否帶有狀態(tài)欄并嘗試去除它，但是有時不起作用，這時候你可以選擇一個或多個頁面，在工具欄中手動減去狀態(tài)欄的高度。再次為flinto開發(fā)者點贊，非常貼心。

4、固定區(qū)域設(shè)置(固定頭部和底部)--非常實用

為了創(chuàng)建固定的頭部和底部，F(xiàn)linto的開發(fā)人員花費了大量的時間為我們增添了切片功能。

1)創(chuàng)建切片

如下圖紅色區(qū)域所示，你可以用鼠標(biāo)分別拖動這兩個圖標(biāo)到合適的位置來固定你的頭部和底部區(qū)域(移動時會出現(xiàn)放大鏡，幫助你快速和精確移動到指定位置)。接著試試滾動一下你的頁面吧(可以使用預(yù)覽功能-快捷鍵P)，你會發(fā)現(xiàn)頭部和底部是固定的呢。

你還可以在設(shè)計頁面的時候在頁面頭部和底部加上透明度(延伸頭部和底部高度如下圖示例)，這樣你就可以實現(xiàn)半透明的標(biāo)題和浮動按鈕。

2)精確定位

你可以非常精確的移動切片工具，按箭頭方向鍵一次移動1px，按住shift的同時按方向鍵一次移動10px。另外您還可以在工具欄中輸入具體的值來一步精確到位。

3)多個切片

如果你有多個頁面具有相同的頭部，選擇這些頁面(或者Cmd+A)，然后調(diào)整它們其中的一個切片位置，相同的切片位置將會應(yīng)用到你選中的所有頁面中(誰會知道你竟然會如此快速的設(shè)置好切片，自己偷偷樂吧，嘿嘿)。

4)切片點擊設(shè)置

Flinto嘗試去理解你的設(shè)計思路并智能計算出你可能會將切片設(shè)置在頁面的哪個位置。所以有時你可能會看見一個灰色的切片手柄(如下圖紅色區(qū)域所示)，當(dāng)你拖拽切片到該灰色手柄附近時切片會自動吸附上去。你也可以雙擊你要移動的切片手柄來直接跳到該位置，很快速吧。

“看到這里，你是不是有點想要關(guān)閉頁面的感覺，別著急，下面的‘鏈接頁面’才是我們的重中之重，平時我們都是使用它來完成頁面之間的跳轉(zhuǎn)，而且它還有非常炫酷的效果，保證物有所值。”

5、鏈接頁面

通過以上幾步，相信你的頁面都已經(jīng)準(zhǔn)備好了，那么賦予這些頁面生命的時候到了，使用鏈接讓這些靜態(tài)的頁面動起來吧。Flinto的開發(fā)者已經(jīng)讓鏈接功能簡單到極致。下面我們一起來看看吧。

1)繪制點擊區(qū)域并鏈接目標(biāo)頁面

在頁面上點擊并拖拽出一個區(qū)域(你還可以按住option鍵自動檢測這些區(qū)域)，并連接到目標(biāo)頁面上，你可以多次操作該步驟，直到你所有頁面都鏈接完成，而這可能僅需花費你幾分鐘的時間。

2)返回鏈接(非常實用)

返回按鈕大家都清楚，觸發(fā)后會返回到前一個頁面。但是當(dāng)有多個入口都進(jìn)入到該頁面時，那么我們的返回鍵到底返回到哪個頁面呢，因為我們不可能在同一個返回區(qū)域設(shè)置多個返回功能。

Flinto幫大家解決了這個問題。你只需要拖拽出返回區(qū)域并將箭頭連接到工具欄中的“Link Back”按鈕上(如下圖所示)，而不是鏈接到某個頁面上，F(xiàn)linto會自動識別你是從哪個入口進(jìn)去的。好了，不管你從哪里進(jìn)去的，頁面都會正常返回。

3)忽略歷史鏈接

選擇一個鏈接，然后點擊工具欄中“Ignore History”按鈕，當(dāng)你點擊此鏈接進(jìn)入到下一級頁面的時候再點擊返回，你會發(fā)現(xiàn)Flinto會自動忽略掉設(shè)置了“Ignore History”的頁面，這個在你想要去一些非常相似但有不同狀態(tài)的頁面時非常有用。貌似理解起來有的困難，但是當(dāng)你動手去實用它的時候，你會立刻理解它的作用。

4)選擇鏈接

你可以通過單擊來選擇某個鏈接(按住Shift來加選)，然后再次單擊選中的鏈接來重定向目標(biāo)頁面(我個人習(xí)慣雙擊鏈接來重定向)。

5)移動鏈接和重置鏈接大小

點按鏈接并拖拽鏈接區(qū)域內(nèi)部可以移動鏈接。點按鏈接并拖拽鏈接區(qū)域邊角可以重置它的大小。

6)復(fù)制鏈接

拖拽一個鏈接時按住option(alt)鍵可以復(fù)制鏈接，并且鏈接功能也被復(fù)制過去。

7)轉(zhuǎn)場動畫 --必不可少

當(dāng)你拖拽出一個鏈接或者選擇了一個鏈接時，你可以在左側(cè)的工具欄里設(shè)置你想要的轉(zhuǎn)場效果。Flinto為我們提供了七種轉(zhuǎn)場過渡效果，已經(jīng)足夠我們實現(xiàn)一般的交互效果。這七種效果分別是：溶解、向左推出，向右推出，向上滑動，向下滑動，向左翻轉(zhuǎn)進(jìn)入，向右翻轉(zhuǎn)進(jìn)入，具體效果你試用一下就會知道，保證是你喜歡的。是不是感覺Flinto好有愛 有木有。

ps：你可以按鍵盤上的“T”鍵來循環(huán)切換你要的過渡效果哦。

8)定時器鏈接

在每個屏幕的右上角有一個時鐘圖標(biāo)，可以用來設(shè)置一定時間后執(zhí)行下一個動作(顯示下一個頁面)，比如你可以設(shè)置一定的時間來實現(xiàn)過渡動畫。而你只需要像使用普通的鏈接一樣去使用它，并在工具欄中設(shè)置好定時時間即可(如下圖所示)。具體使用方法你還可以觀看官方演示視頻。

9)快速鏈接(LinkSnap)

這個標(biāo)題實在不知道怎么翻譯了，不過它的作用確實是讓你更加快速，閃電般的做好鏈接。

和普通鏈接的區(qū)別是，快速鏈接能夠自動探測并分析頁面中的按鈕邊緣，快速實現(xiàn)鏈接區(qū)域的繪制。而這一切你只需要在繪制鏈接時按住option(alt)鍵后點擊就可以了，快而精準(zhǔn)。

10)給連接編組

如果你發(fā)現(xiàn)自己在手動給每個頁面添加一系列相同的鏈接(我在看guideline之前一直是這么干的)，趕快停止。Flinto為我們提供了非常方便的鏈接編組功能，這個功能我一般在給Tab Bar做鏈接時用，這樣可以復(fù)用到多個頁面的Tab Bar上。

編組使用方法：

在一個頁面上設(shè)置好一系列鏈接，然后選擇這些鏈接并拖拽到頁面右側(cè)的空白區(qū)即可將這些鏈接編組，或者直接將這些鏈接拉進(jìn)另一個頁面中也可以快速編組，編組后的鏈接區(qū)域會出現(xiàn)一個灰色或藍(lán)色(選中狀態(tài)下)的小圓點代表這個鏈接處于編組狀態(tài)(如下圖所示)。

你可以對組中的單個鏈接進(jìn)行移動、調(diào)整大小甚至重新定位，當(dāng)你做了改變后，所有使用到該組鏈接的頁 面都會跟著更新，是不是很省體力活。

當(dāng)你刪除掉一個編組鏈接中的某個鏈接，所有頁面中的該鏈接都會被刪除。有刪就有加，F(xiàn)linto還為我們提供了給編組增加單獨鏈接的功能，你只需要在一個頁面中畫好鏈接A，然后同時選擇你想要添加到的鏈接編組1中的任意一個鏈接B，點擊左側(cè)工具欄中的“Add to Group”按鈕(如下圖)，即可添加該鏈接到編組1中。

不止這些，F(xiàn)linto還提供解組功能。選擇某個頁面上的鏈接，點擊工具欄中的“Select Group”按鈕選擇該編組中的所有鏈接，然后再點擊“ungroup”按鈕即可取消該組鏈接的編組。

Tips：

1、選擇編組中的所有鏈接：選擇某一個鏈接，點擊左側(cè)工具欄中的“Select Group”按鈕，即可選中該編組中所有鏈接。

2、刪除編組中某一個鏈接：Delete鍵。

“是不是有點累呢?你可以稍作休息后繼續(xù)前進(jìn)，或者保存該頁面到書簽下次繼續(xù)，我在文章的頭部提供了快速鏈接，這樣你可以快速進(jìn)入到文章相應(yīng)位置。”

6、原型相關(guān)設(shè)置

點擊工具欄“Settings”按鈕(快捷鍵",")進(jìn)入設(shè)置界面如下圖所示。

你會看到三個Tab面板，分別為：常規(guī)選項設(shè)置面板、分享預(yù)覽設(shè)置面板、動作設(shè)置面板。下面我們分別介紹下這三個面板。

常規(guī)選項設(shè)置面板：

設(shè)置App啟動圖標(biāo)，如果你做的是iOS原型，你還可以設(shè)置啟動頁面。你可以點擊demo圖片或直接把圖片拖拽到相應(yīng)demo圖片區(qū)域即可添加你的啟動圖標(biāo)和界面。

分享預(yù)覽設(shè)置面板：

這個面板里面你可以設(shè)置狀態(tài)欄的樣式(針對iOS原型)、設(shè)置演示設(shè)備的外觀樣式(如iPhone可以選擇黑色、金色或白色的外觀樣式)、設(shè)置激活鏈接時是否高亮顯示鏈接區(qū)域(交互更逼真)等。這些你只要試用一下就明白了，很方便。(ps：Flinto還針對iOS和Android分別做了不同的設(shè)置選項呢，趕快看看吧)。

動作設(shè)置面板：

在這個面板里你可以復(fù)制、刪除你的原型。

復(fù)制原型：如果你想要保存當(dāng)前的原型版本，那么你可以選擇復(fù)制原型。

刪除原型：如果你想徹底的移除掉某個原型，你可以選擇刪除操作，但是請謹(jǐn)慎使用該功能，因為你一旦選擇刪除操作，原型就再也找不回來了。

7、原型分享和安裝

你應(yīng)當(dāng)根據(jù)你要測試的設(shè)備類型，在Flinto上選擇合適的設(shè)備尺寸來做你的原型，以保證效果最大化接近真實場景。iOS原型應(yīng)該安裝在iOS設(shè)備上，Android 原型應(yīng)該安裝在Android設(shè)備上。

點擊“Share & Install”按鈕可以打開分享和安裝設(shè)置彈窗。這個彈窗也有三個Tab面板，分別如下：

分享原型：

這里你可以發(fā)送原型鏈接到自己或他人的手機(jī)上、郵件里。如果你想給多個人同時發(fā)送，可以用逗號來隔開每個接受者。每個收件人都會收到一個獨一無二的鏈接，這樣你可以在歷史記錄(接下來會說到)面板中查看你所發(fā)送的收件人有沒有預(yù)覽你的原型并進(jìn)行相應(yīng)的操作。

歷史記錄：

在“history”欄里，你可以看到分享的原型被查看了多少次，你還可以給接受者重新發(fā)送分享鏈接或者撤銷鏈接。

密碼設(shè)置：

為了安全，你可以在“Password”欄設(shè)置密碼，這樣任何想要訪問你原型的人都需要輸入密碼才可訪問，否則它只可以看到原型的標(biāo)題。實際上Flinto正常的分享鏈接已經(jīng)非常安全了， 它生成的是隨機(jī)的鏈接碼，所以幾乎不會被猜到，密碼在這里起到了額外的一層安全防護(hù)。

快速分享鏈接：

如果你不想通過手機(jī)號和郵箱賬號發(fā)送鏈接，你可以使用快速鏈接(一個鏈接地址)。缺點是你無法對它進(jìn)行跟蹤，因為每個人使用的快速鏈接地址是相同的。 如果你刷新了這個鏈接，你需要重新發(fā)送新的鏈接給那些安裝了原型的用戶。

網(wǎng)頁快速預(yù)覽：

除了通過安裝鏈接在你的設(shè)備上安裝原型，你也可以直接在瀏覽器里預(yù)覽，而鏈接地址是相同的，非常方便。