Flinto交互設計軟件 v27.2 中文免費版

軟件介紹

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

特色功能

設計自定義動畫轉場和交互

通過直接操作手勢瀏覽您的應用程序原型

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

通過我們的免費配套iOS應用程序實時查看您的成果

直接從Sketch導入屏幕設計，或者直接在應用程序中繪制簡單的用戶界面

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

使用教程

1、創建原型

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

2、編輯器介紹

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

1)添加頁面功能

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

2)預覽功能

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

3)分享和安裝功能

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

4)縮放功能

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

5)設置功能

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

3、添加屏幕/頁面

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

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

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

1)屏幕(頁面)大小

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

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

2)狀態欄樣式

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

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

3)文件格式

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

4)同步Dropbox

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

5)更新頁面

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

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

6)選擇頁面

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

當你選擇了一個或多個頁面后，在編輯器的左側下部會出現一個工具欄，這里你可以進行頁面的刪除、固定頁面頭部和底部(詳見下文第3條-固定區域設置)、剪掉頁面狀態欄等操作來優化你的交互。

7)刪除頁面

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

8)頁面重命名

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

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

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

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

為了創建固定的頭部和底部，Flinto的開發人員花費了大量的時間為我們增添了切片功能。

1)創建切片

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

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

2)精確定位

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

3)多個切片

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

4)切片點擊設置

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

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

5、鏈接頁面

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

1)繪制點擊區域并鏈接目標頁面

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

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

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

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

3)忽略歷史鏈接

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

4)選擇鏈接

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

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

點按鏈接并拖拽鏈接區域內部可以移動鏈接。點按鏈接并拖拽鏈接區域邊角可以重置它的大小。

6)復制鏈接

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

7)轉場動畫 --必不可少

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

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

8)定時器鏈接

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

9)快速鏈接(LinkSnap)

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

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

10)給連接編組

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

編組使用方法：

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

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

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

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

Tips：

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

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

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

6、原型相關設置

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

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

常規選項設置面板：

設置App啟動圖標，如果你做的是iOS原型，你還可以設置啟動頁面。你可以點擊demo圖片或直接把圖片拖拽到相應demo圖片區域即可添加你的啟動圖標和界面。

分享預覽設置面板：

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

動作設置面板：

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

復制原型：如果你想要保存當前的原型版本，那么你可以選擇復制原型。

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

7、原型分享和安裝

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

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

分享原型：

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

歷史記錄：

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

密碼設置：

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

快速分享鏈接：

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

網頁快速預覽：

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