作者：Charlie Deets? 、原地址
早期的設(shè)計(jì)過(guò)程中帕识，制作Framer原型圖可以表達(dá)出最終產(chǎn)品的模樣隧甚，我發(fā)現(xiàn)工作中使用Framer是有好處的，因?yàn)樗鼤?huì)促使我通過(guò)一個(gè)很實(shí)際的方法去徹底想清楚設(shè)計(jì)中的的邏輯盒流程渡冻。
構(gòu)建一個(gè)原型也會(huì)讓我體會(huì)到一些工程師在構(gòu)建一個(gè)產(chǎn)品時(shí)的感受戚扳，如果很難理解Framer中的交互，這也許在設(shè)計(jì)中會(huì)有一些根本性的缺陷和含糊不清族吻。
我構(gòu)建過(guò)許多原型圖帽借，而且它們?cè)诓煌臓顟B(tài)下往往會(huì)有很長(zhǎng)的流程，通過(guò)預(yù)期一些后期程序中一般會(huì)出現(xiàn)的事件超歌，我已經(jīng)建立了一個(gè)非常迅速的方法來(lái)將設(shè)計(jì)轉(zhuǎn)化為一個(gè)穩(wěn)健的的原型砍艾，我打算把我的方法步驟寫(xiě)下來(lái)作為一種讓你如何用Framer去處理原型工作流程。我確定巍举，隨著時(shí)間的推移脆荷，步驟過(guò)程會(huì)越來(lái)越快。
第一步：靜態(tài)設(shè)計(jì)
我們以在Monments和Tinder中見(jiàn)過(guò)的可滑動(dòng)堆積卡片作為案例懊悯。這些卡片可能是會(huì)喜歡或者不予考慮蜓谋。任何一張卡片都能夠一張列表的形式展示內(nèi)容。
靜態(tài)頁(yè)面的設(shè)計(jì)應(yīng)該非常相似的的部分炭分，徹底的思考一些可以在Sketch中導(dǎo)出的狀態(tài)桃焕。一旦你感覺(jué)你完全把握可能，那下一步你將要準(zhǔn)備進(jìn)行下一步捧毛。
補(bǔ)充：Framer現(xiàn)在支持導(dǎo)出1倍圖观堂。1倍圖的設(shè)計(jì)，有利于你后期給工程師交與規(guī)格的時(shí)候會(huì)給讓你變的更順暢呀忧。
第二步： ?寫(xiě)出動(dòng)效文案
這是神器的一步师痕。這一步節(jié)省了我許多時(shí)間，而預(yù)防了自己在后期用一種沒(méi)有效率的方法去來(lái)回的尋找原因而账。
在純文本中胰坟，寫(xiě)出該出現(xiàn)的原型
嘗試寫(xiě)出人們?cè)谠涂赡軙?huì)使用所有的動(dòng)作和動(dòng)作發(fā)生后的結(jié)果。許多流程趨向于一些線性時(shí)間線福扬，所以寫(xiě)出后期會(huì)出現(xiàn)的理想狀態(tài)腕铸。你將會(huì)解決其他一些比較極端的問(wèn)題。
這些純文本邏輯會(huì)結(jié)束創(chuàng)建虛擬代碼铛碑。這也提醒下一步狠裹，你如何創(chuàng)建你將要導(dǎo)出到Framer中的Sketch文件。創(chuàng)建一個(gè)非常清晰的導(dǎo)出文件將會(huì)節(jié)省你許多時(shí)間汽烦。
下面是我們的案例中純文本邏輯的大概的樣子：
-點(diǎn)擊圖標(biāo)打開(kāi)應(yīng)用到主要頁(yè)面
-卡片的加載
-向左滑動(dòng)標(biāo)記完成
-向右滑動(dòng)標(biāo)記喜歡
-輕觸任何卡片的的打開(kāi)按鈕去展開(kāi)
-被選中的卡片列表出現(xiàn)
-輕觸關(guān)閉按鈕離開(kāi)列表視圖
-在最后一張卡片中涛菠，顯示完成動(dòng)畫(huà)
-輕觸重新加載按鈕去重新加載卡片
現(xiàn)在回到這個(gè)工作的流程中來(lái)，并寫(xiě)下每一次用戶交互界面和反應(yīng)后的頁(yè)面動(dòng)作：
-點(diǎn)擊圖標(biāo)（用戶動(dòng)作）打開(kāi)應(yīng)用到主要頁(yè)面（放大動(dòng)效）
-卡片的加載（加載動(dòng)效）
-向左滑動(dòng)（用戶動(dòng)作）標(biāo)記完成（取消標(biāo)記）并載入剩余的卡片到新的位置（動(dòng)效）
-向右滑動(dòng)（用戶動(dòng)作）標(biāo)記喜歡（喜歡動(dòng)效）并載入剩余的卡片到新的位置（動(dòng)效）
-輕觸任何卡片（用戶動(dòng)作）的的打開(kāi)按鈕去展開(kāi)（卡片全屏動(dòng)效）
-被選中的卡片列表出現(xiàn)（表單主題放大而且退出按鈕出現(xiàn)）
-輕觸關(guān)閉（用戶動(dòng)作）按鈕離開(kāi)列表視圖（表單和退出按鈕放大撇吞，全屏顯示卡片）
-在最后一張卡片滑動(dòng)（用戶動(dòng)作）俗冻，顯示完成動(dòng)畫(huà)（完成動(dòng)效放大）
-輕觸重新加載按鈕（用戶動(dòng)作）去重新加載卡片（加載動(dòng)效）
意識(shí)到所有的視覺(jué)改變和是什么觸發(fā)了這個(gè)動(dòng)作是同等的重要，用戶的動(dòng)作將會(huì)是你的動(dòng)作事件牍颈，交互界面的動(dòng)作將是以最終的動(dòng)效迄薄，現(xiàn)在嘗試著去將他們?nèi)肯氤鰜?lái)，在可以的情況下煮岁，你能夠識(shí)別和建立可以重復(fù)運(yùn)用其中的一個(gè)讥蔽。如果你可以確定你在這里需要什么，那么所有的事情將會(huì)變得容易了画机。
第三步： 完整你的Sketch導(dǎo)出文件到Framer
在這一步中冶伞，我們將Sketch的源文件標(biāo)明不同的體驗(yàn)驗(yàn)狀態(tài)，并將將它轉(zhuǎn)化為用來(lái)導(dǎo)入到Framer中一個(gè)新文件步氏。
我習(xí)慣于根據(jù)不同體驗(yàn)狀態(tài)在高保真的狀態(tài)下是如何顯示的响禽，來(lái)將它們分層。在最后代碼中荚醒，有助于我盡可能避免過(guò)多的調(diào)整圖層狀態(tài)芋类，不會(huì)造成測(cè)試緩慢和產(chǎn)生過(guò)多的疑惑。我把大部分的圖層放在它們將會(huì)出現(xiàn)和離開(kāi)的頁(yè)面界阁。
我嘗試著簡(jiǎn)潔準(zhǔn)確地表達(dá)出我所命明的場(chǎng)景梗肝，通常都是和我在的純文本邏輯相同的命名，移除空格和用camelCase代替铺董。我所選擇的名稱是平淡無(wú)奇但是很明顯巫击，我就不會(huì)來(lái)回的打開(kāi)我的Sketch文件，這些名稱應(yīng)該總能夠描述元件的目的精续。比如坝锰，你也許只有一個(gè)按鈕，是用來(lái)重新加載視覺(jué)的重付，但是會(huì)命名它為“重新加載按鈕”而不是“按鈕”顷级。這將會(huì)很容易避免以后如果你想添加其他的按鈕所造成的困惑。
確保移除Sketch文件中不會(huì)出現(xiàn)在原型中的圖層确垫，這將會(huì)使得查尋特定的分組變的容易起來(lái)弓颈，而且會(huì)使你的原型變的越來(lái)越真實(shí)帽芽。為了更好的性能，有時(shí)候我會(huì)在項(xiàng)目的最后將不需要操作的元件拼合起來(lái)翔冀，但是由于最大限度的操作自由导街，我不會(huì)過(guò)早的在項(xiàng)目中拼合它們。
第四步：導(dǎo)出和再使用
現(xiàn)在進(jìn)行最有趣的一步纤子，將Sketch文件導(dǎo)入到Framer中合適的分辨率搬瑰。為圖層添加交互內(nèi)容，也就是可以拖動(dòng)和滑動(dòng)這些控硼。設(shè)置不在視圖中圖層的初始位置泽论，添加放大屬性等等】ㄇ基本上翼悴，讓你的項(xiàng)目進(jìn)入到當(dāng)它被觸動(dòng)時(shí)候的開(kāi)始的狀態(tài)。
這兒有個(gè)我所排版案例的部分內(nèi)容：
現(xiàn)在從偽代碼中拿出用戶的第一個(gè)動(dòng)作幔妨，然后用Framer的代碼語(yǔ)言寫(xiě)出來(lái)抄瓦。按照列表中的順序，用你的方式把代碼寫(xiě)出來(lái)陶冷。根據(jù)你的經(jīng)驗(yàn)钙姊，為了最終效果怎么樣，你可能會(huì)在這一步中有點(diǎn)反反復(fù)復(fù)調(diào)試埂伦。在你的Sketch文件中不要害怕調(diào)整和另保存圖層煞额，如果你在這一步能夠做的很好，那么這將會(huì)為你以后在Framer中的修改方便不少沾谜。
我常常會(huì)因?yàn)檫@些圖層的位置和大小轉(zhuǎn)回到Sketch文件中膊毁。我總是以2倍圖將Sketc文件導(dǎo)入到Framer。所以我要盡量不要忘記Framer中的值要雙倍的值基跑。
第五步：調(diào)整到你想要的狀態(tài)
這些僅僅是調(diào)整的事情婚温。如果你有可以重復(fù)利用的運(yùn)動(dòng)曲線值和動(dòng)畫(huà)值，后期你在調(diào)整的時(shí)候會(huì)變的簡(jiǎn)單起來(lái)媳否。嘗試著不同的感覺(jué)栅螟，盡可能的編輯和重新導(dǎo)出你的Sketch文件，你也許會(huì)發(fā)現(xiàn)一些讓你做出改變的事情篱竭。
我從制作原型中獲得最大的樂(lè)趣時(shí)候就是這一步了力图，我發(fā)現(xiàn)Sketch和Framer在這一點(diǎn)做到了很好的結(jié)合，我喜歡在這2個(gè)軟件之間來(lái)回調(diào)整掺逼，讓原型更加逼真吃媒。
我通常會(huì)用Screenflick去記錄我的原型想法，我喜歡這個(gè)應(yīng)用是因?yàn)樗芸刂埔曨l記錄的分辨率和文件導(dǎo)出的分辨率一樣。它讓我可以控制我的應(yīng)用用戶的交互視覺(jué)赘那。相比用Quicktime去記錄刑桑，而且我發(fā)現(xiàn)用Screenflick去記錄原型會(huì)保留更多的性能。
對(duì)許多演示募舟，我把我的原型放在設(shè)備上祠斧，并用相機(jī)去記錄交互。我一般會(huì)用Frames或者Frameless.我很喜歡Frames無(wú)需網(wǎng)絡(luò)就可以將原型保存到本地的這個(gè)功能胃珍。在你一整天需要隨意的展示你的原型的時(shí)候梁肿，這將會(huì)變的很有用蜓陌。
一些建議
視頻圖層
如果我有視頻圖層觅彰，我一般會(huì)為視頻將會(huì)在原型中出現(xiàn)的組建立個(gè)名叫“holder”的圖層組，這樣偽靜態(tài)圖層看起來(lái)會(huì)像個(gè)視頻钮热。這個(gè)好處有兩個(gè)理由填抬，我可以參考Sketch文件中的位置和大小。當(dāng)我將真正的視頻導(dǎo)入到層級(jí)當(dāng)中時(shí)隧期，我只需要簡(jiǎn)單將視頻層添加在“holder”圖層組的上方去處理它飒责。
建立片段代碼
隨著時(shí)間的推移，你最終會(huì)養(yǎng)成使用Framer的方式來(lái)幫助于你的工作仆潮，能使你處理起來(lái)更快的最好的辦法就是將它們做成片段代碼宏蛉，這樣你就可以使用現(xiàn)成的了。很快你就會(huì)出個(gè)原型因?yàn)閹缀醪粚?xiě)任何代碼性置，而僅僅是將東西拼起來(lái)和根據(jù)你工作和系統(tǒng)的邏輯去調(diào)整它們拾并。
下面是我最喜歡的片段代碼，它能夠讓動(dòng)畫(huà)慢下來(lái)鹏浅，這樣我就可以對(duì)動(dòng)畫(huà)進(jìn)行微調(diào)：
// Slow down animations?
Framer.Loop.delta = 1 / 240
