作者：Charlie Deets? 、原地址
早期的設(shè)計(jì)過程中，制作Framer原型圖可以表達(dá)出最終產(chǎn)品的模樣，我發(fā)現(xiàn)工作中使用Framer是有好處的，因?yàn)樗鼤偈刮彝ㄟ^一個(gè)很實(shí)際的方法去徹底想清楚設(shè)計(jì)中的的邏輯盒流程。
構(gòu)建一個(gè)原型也會讓我體會到一些工程師在構(gòu)建一個(gè)產(chǎn)品時(shí)的感受，如果很難理解Framer中的交互，這也許在設(shè)計(jì)中會有一些根本性的缺陷和含糊不清。
我構(gòu)建過許多原型圖，而且它們在不同的狀態(tài)下往往會有很長的流程，通過預(yù)期一些后期程序中一般會出現(xiàn)的事件，我已經(jīng)建立了一個(gè)非常迅速的方法來將設(shè)計(jì)轉(zhuǎn)化為一個(gè)穩(wěn)健的的原型，我打算把我的方法步驟寫下來作為一種讓你如何用Framer去處理原型工作流程。我確定，隨著時(shí)間的推移，步驟過程會越來越快。
第一步：靜態(tài)設(shè)計(jì)
我們以在Monments和Tinder中見過的可滑動堆積卡片作為案例。這些卡片可能是會喜歡或者不予考慮。任何一張卡片都能夠一張列表的形式展示內(nèi)容。
靜態(tài)頁面的設(shè)計(jì)應(yīng)該非常相似的的部分，徹底的思考一些可以在Sketch中導(dǎo)出的狀態(tài)。一旦你感覺你完全把握可能，那下一步你將要準(zhǔn)備進(jìn)行下一步。
補(bǔ)充：Framer現(xiàn)在支持導(dǎo)出1倍圖。1倍圖的設(shè)計(jì)，有利于你后期給工程師交與規(guī)格的時(shí)候會給讓你變的更順暢。
第二步： ?寫出動效文案
這是神器的一步。這一步節(jié)省了我許多時(shí)間，而預(yù)防了自己在后期用一種沒有效率的方法去來回的尋找原因。
在純文本中，寫出該出現(xiàn)的原型
嘗試寫出人們在原型可能會使用所有的動作和動作發(fā)生后的結(jié)果。許多流程趨向于一些線性時(shí)間線，所以寫出后期會出現(xiàn)的理想狀態(tài)。你將會解決其他一些比較極端的問題。
這些純文本邏輯會結(jié)束創(chuàng)建虛擬代碼。這也提醒下一步，你如何創(chuàng)建你將要導(dǎo)出到Framer中的Sketch文件。創(chuàng)建一個(gè)非常清晰的導(dǎo)出文件將會節(jié)省你許多時(shí)間。
下面是我們的案例中純文本邏輯的大概的樣子：
-點(diǎn)擊圖標(biāo)打開應(yīng)用到主要頁面
-卡片的加載
-向左滑動標(biāo)記完成
-向右滑動標(biāo)記喜歡
-輕觸任何卡片的的打開按鈕去展開
-被選中的卡片列表出現(xiàn)
-輕觸關(guān)閉按鈕離開列表視圖
-在最后一張卡片中，顯示完成動畫
-輕觸重新加載按鈕去重新加載卡片
現(xiàn)在回到這個(gè)工作的流程中來，并寫下每一次用戶交互界面和反應(yīng)后的頁面動作：
-點(diǎn)擊圖標(biāo)（用戶動作）打開應(yīng)用到主要頁面（放大動效）
-卡片的加載（加載動效）
-向左滑動（用戶動作）標(biāo)記完成（取消標(biāo)記）并載入剩余的卡片到新的位置（動效）
-向右滑動（用戶動作）標(biāo)記喜歡（喜歡動效）并載入剩余的卡片到新的位置（動效）
-輕觸任何卡片（用戶動作）的的打開按鈕去展開（卡片全屏動效）
-被選中的卡片列表出現(xiàn)（表單主題放大而且退出按鈕出現(xiàn)）
-輕觸關(guān)閉（用戶動作）按鈕離開列表視圖（表單和退出按鈕放大，全屏顯示卡片）
-在最后一張卡片滑動（用戶動作），顯示完成動畫（完成動效放大）
-輕觸重新加載按鈕（用戶動作）去重新加載卡片（加載動效）
意識到所有的視覺改變和是什么觸發(fā)了這個(gè)動作是同等的重要，用戶的動作將會是你的動作事件，交互界面的動作將是以最終的動效，現(xiàn)在嘗試著去將他們?nèi)肯氤鰜恚诳梢缘那闆r下，你能夠識別和建立可以重復(fù)運(yùn)用其中的一個(gè)。如果你可以確定你在這里需要什么，那么所有的事情將會變得容易了。
第三步： 完整你的Sketch導(dǎo)出文件到Framer
在這一步中，我們將Sketch的源文件標(biāo)明不同的體驗(yàn)驗(yàn)狀態(tài)，并將將它轉(zhuǎn)化為用來導(dǎo)入到Framer中一個(gè)新文件。
我習(xí)慣于根據(jù)不同體驗(yàn)狀態(tài)在高保真的狀態(tài)下是如何顯示的，來將它們分層。在最后代碼中，有助于我盡可能避免過多的調(diào)整圖層狀態(tài)，不會造成測試緩慢和產(chǎn)生過多的疑惑。我把大部分的圖層放在它們將會出現(xiàn)和離開的頁面。
我嘗試著簡潔準(zhǔn)確地表達(dá)出我所命明的場景，通常都是和我在的純文本邏輯相同的命名，移除空格和用camelCase代替。我所選擇的名稱是平淡無奇但是很明顯，我就不會來回的打開我的Sketch文件，這些名稱應(yīng)該總能夠描述元件的目的。比如，你也許只有一個(gè)按鈕，是用來重新加載視覺的，但是會命名它為“重新加載按鈕”而不是“按鈕”。這將會很容易避免以后如果你想添加其他的按鈕所造成的困惑。
確保移除Sketch文件中不會出現(xiàn)在原型中的圖層，這將會使得查尋特定的分組變的容易起來，而且會使你的原型變的越來越真實(shí)。為了更好的性能，有時(shí)候我會在項(xiàng)目的最后將不需要操作的元件拼合起來，但是由于最大限度的操作自由，我不會過早的在項(xiàng)目中拼合它們。
第四步：導(dǎo)出和再使用
現(xiàn)在進(jìn)行最有趣的一步，將Sketch文件導(dǎo)入到Framer中合適的分辨率。為圖層添加交互內(nèi)容，也就是可以拖動和滑動這些。設(shè)置不在視圖中圖層的初始位置，添加放大屬性等等。基本上，讓你的項(xiàng)目進(jìn)入到當(dāng)它被觸動時(shí)候的開始的狀態(tài)。
這兒有個(gè)我所排版案例的部分內(nèi)容：
現(xiàn)在從偽代碼中拿出用戶的第一個(gè)動作，然后用Framer的代碼語言寫出來。按照列表中的順序，用你的方式把代碼寫出來。根據(jù)你的經(jīng)驗(yàn)，為了最終效果怎么樣，你可能會在這一步中有點(diǎn)反反復(fù)復(fù)調(diào)試。在你的Sketch文件中不要害怕調(diào)整和另保存圖層，如果你在這一步能夠做的很好，那么這將會為你以后在Framer中的修改方便不少。
我常常會因?yàn)檫@些圖層的位置和大小轉(zhuǎn)回到Sketch文件中。我總是以2倍圖將Sketc文件導(dǎo)入到Framer。所以我要盡量不要忘記Framer中的值要雙倍的值。
第五步：調(diào)整到你想要的狀態(tài)
這些僅僅是調(diào)整的事情。如果你有可以重復(fù)利用的運(yùn)動曲線值和動畫值，后期你在調(diào)整的時(shí)候會變的簡單起來。嘗試著不同的感覺，盡可能的編輯和重新導(dǎo)出你的Sketch文件，你也許會發(fā)現(xiàn)一些讓你做出改變的事情。
我從制作原型中獲得最大的樂趣時(shí)候就是這一步了，我發(fā)現(xiàn)Sketch和Framer在這一點(diǎn)做到了很好的結(jié)合，我喜歡在這2個(gè)軟件之間來回調(diào)整，讓原型更加逼真。
我通常會用Screenflick去記錄我的原型想法，我喜歡這個(gè)應(yīng)用是因?yàn)樗芸刂埔曨l記錄的分辨率和文件導(dǎo)出的分辨率一樣。它讓我可以控制我的應(yīng)用用戶的交互視覺。相比用Quicktime去記錄，而且我發(fā)現(xiàn)用Screenflick去記錄原型會保留更多的性能。
對許多演示，我把我的原型放在設(shè)備上，并用相機(jī)去記錄交互。我一般會用Frames或者Frameless.我很喜歡Frames無需網(wǎng)絡(luò)就可以將原型保存到本地的這個(gè)功能。在你一整天需要隨意的展示你的原型的時(shí)候，這將會變的很有用。
一些建議
視頻圖層
如果我有視頻圖層，我一般會為視頻將會在原型中出現(xiàn)的組建立個(gè)名叫“holder”的圖層組，這樣偽靜態(tài)圖層看起來會像個(gè)視頻。這個(gè)好處有兩個(gè)理由，我可以參考Sketch文件中的位置和大小。當(dāng)我將真正的視頻導(dǎo)入到層級當(dāng)中時(shí)，我只需要簡單將視頻層添加在“holder”圖層組的上方去處理它。
建立片段代碼
隨著時(shí)間的推移，你最終會養(yǎng)成使用Framer的方式來幫助于你的工作，能使你處理起來更快的最好的辦法就是將它們做成片段代碼，這樣你就可以使用現(xiàn)成的了。很快你就會出個(gè)原型因?yàn)閹缀醪粚懭魏未a，而僅僅是將東西拼起來和根據(jù)你工作和系統(tǒng)的邏輯去調(diào)整它們。
下面是我最喜歡的片段代碼，它能夠讓動畫慢下來，這樣我就可以對動畫進(jìn)行微調(diào)：
// Slow down animations?
Framer.Loop.delta = 1 / 240
