軟件介紹

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

特色功能

設(shè)計(jì)自定義動(dòng)畫(huà)轉(zhuǎn)場(chǎng)和交互

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

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

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

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

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

使用教程

1、創(chuàng)建原型

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

2、編輯器介紹

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

1)添加頁(yè)面功能

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

2)預(yù)覽功能

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

3)分享和安裝功能

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

4)縮放功能

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

5)設(shè)置功能

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

3、添加屏幕/頁(yè)面

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

你可以直接將圖片拖到Flinto編輯器中或者從Dropbox(在線存儲(chǔ)工具)中同步過(guò)來(lái)。而這些速度都非常快，以至于你都不需要等待文件上傳就可以開(kāi)始原型制作，非常酷吧。

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

1)屏幕(頁(yè)面)大小

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

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

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

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

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

3)文件格式

Flinto支持 PNG、JPG、GIF動(dòng)畫(huà)以及PSD格式的圖像。

4)同步Dropbox

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

5)更新頁(yè)面

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

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

6)選擇頁(yè)面

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

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

7)刪除頁(yè)面

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

8)頁(yè)面重命名

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

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

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

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

為了創(chuàng)建固定的頭部和底部，F(xiàn)linto的開(kāi)發(fā)人員花費(fèi)了大量的時(shí)間為我們?cè)鎏砹饲衅�功能�?/p>

1)創(chuàng)建切片

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

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

2)精確定位

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

3)多個(gè)切片

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

4)切片點(diǎn)擊設(shè)置

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

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

5、鏈接頁(yè)面

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

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

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

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

返回按鈕大家都清楚，觸發(fā)后會(huì)返回到前一個(gè)頁(yè)面。但是當(dāng)有多個(gè)入口都進(jìn)入到該頁(yè)面時(shí)，那么我們的返回鍵到底返回到哪個(gè)頁(yè)面呢，因?yàn)槲覀儾豢赡茉谕�一個(gè)返回區(qū)域設(shè)置多個(gè)返回功能。

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

3)忽略歷史鏈接

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

4)選擇鏈接

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

5)移動(dòng)鏈接和重置鏈接大小

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

6)復(fù)制鏈接

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

7)轉(zhuǎn)場(chǎng)動(dòng)畫(huà) --必不可少

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

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

8)定時(shí)器鏈接

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

9)快速鏈接(LinkSnap)

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

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

10)給連接編組

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

編組使用方法：

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

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

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

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

Tips：

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

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

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

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

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

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

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

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

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

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

動(dòng)作設(shè)置面板：

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

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

刪除原型：如果你想徹底的移除掉某個(gè)原型，你可以選擇刪除操作，但是請(qǐng)謹(jǐn)慎使用該功能，因?yàn)槟阋坏┻x擇刪除操作，原型就再也找不回來(lái)了。

7、原型分享和安裝

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

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

分享原型：

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

歷史記錄：

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

密碼設(shè)置：

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

快速分享鏈接：

如果你不想通過(guò)手機(jī)號(hào)和郵箱賬號(hào)發(fā)送鏈接，你可以使用快速鏈接(一個(gè)鏈接地址)。缺點(diǎn)是你無(wú)法對(duì)它進(jìn)行跟蹤，因?yàn)槊總�(gè)人使用的快速鏈接地址是相同的。 如果你刷新了這個(gè)鏈接，你需要重新發(fā)送新的鏈接給那些安裝了原型的用戶。

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

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