用 Framer Studio (framerjs) 做交互原型的體驗如何？
Framer – Innovative Prototyping
一位叫 Tony Jing 的設計師在他的 100 Days of Framer 項目中製作了 100 個 Framer 原型，然後錄製成視頻：
視頻中的案例能很好地證明我接下來想說的。
用 Framer 做原型有兩個特點：真實 自由。
在我接觸到的所有原型工具中，Framer 製作出來的原型最接近真實效果。它支持調用系統鍵盤，輸入真實的文本，然後作為數據被使用；它支持對音頻、視頻進行真實的控制與監聽；它可以調用一些感測器，比如麥克風、陀螺儀，所以你能做出一個真的可以用的「搖一搖」；它有邏輯處理機制，它甚至能通過網路獲取真實數據，比如實時顯示比特幣價格：
所謂「自由」，就是它極少會限制你的想像力，你能想到的它基本都能做得到。舉個例子，iPad 版的紐約時報有一個有趣的細節，當你滾動頁面的時候，如果視頻正在播放，音量會隨著視頻的可見區域減小而減小，直到視頻被完全遮擋，視頻就會自動暫停。Tony Jing 在 Day 8 的練習 中還原了這個設計。Framer 對視頻播放的支持，以及豐富的監聽事件，使得這個 idea 得以在原型中呈現。
我們需要交互原型，那是因為我們需要「真實」；設計師需要原型工具，那是因為設計師需要「自由」。「真實「能讓用戶測試更加到位，而「自由」能讓設計師在探索設計方案的時候更加敢於嘗試。
我至今很喜歡 Framer 早期官網上一句霸氣的 Slogan：In a world with no boundaries, what will you design? 當你使用 Framer 的時候，你不得不驚嘆於它的強大與靈活。
Framer 的強大來自於它對 HTML、CSS 以及 Javascript 的無縫支持，單是音頻和視頻，就有數十種屬性和事件可以拿來用（詳細看這裡）。
而 Framer 的靈活則是因為所有邏輯都由代碼搭建，以及它神奇的 Modules 機制。
如果你用過 Sketch，你一定會知道有很多插件可以提高你的工作效率。Modules 其實就是相當於 Sketch 的插件。在 Framer 中使用 Modules，就像是站在巨人的肩膀上，輕易就能做出很複雜的效果。
在很久之前做的一個相機原型里，我用到 Orientation Events 和 VR Component 兩個 Modules，分別監聽手機機身的角度和搭建 360° 全景的取景畫面（因為目前 Framer 在 iOS 上運行的時候還不能調用攝像頭）。整個調用過程，也就寥寥幾句代碼。
最近有個比較有意思的 Modules 叫 RemoteLayer，通過它你能在一台設備上控制另一台設備的原型。非常適合做 TV 產品的設計師。
作為一個在實際工作中用了兩年 Framer 的設計師，我做過的原型雖然不多，但每一次它都沒有讓我失望。而每一次版本更新，都確實能提高效率，時至今日，Framer 的設計繪圖能力已經非常接近 Sketch，未來充滿想像空間。
可惜的是，這麼優秀的一個工具，在國內實在太少人在用了……對了，如果你已經在學或者已經在工作中使用，不妨加入我們一點都不活躍的 Framer China 微信群：）微信號 georgecoix 請備註 Framer （不過如果你還只是處於好奇階段，建議先不要加群，最好先去多了解一下再做決定）
最近的Framer版本更新大大降低了學習門檻，我在這個問題下也答了，Framer（framerjs.com）如何入門？ - RiceMan 的回答，把答案貼過來。
--------
上個月的Facebook開發者大會Framer宣布了重大更新，Framer融入了一定的所見即所得的圖形界面設計能力，讓用Framer做原型開發一下子變得更容易，上手更快了，終於不再只有代碼編輯器啦！
我就用Framer官網（http://framerjs.com/）的例子搬來給大家介紹一下吧。下面這個簡單的圖片瀏覽Prototype，10分鐘不到就可以搞定。預覽地址：http://share.framerjs.com/hfr5wslx89n0/（Safari瀏覽器效果最佳）
1. 把素材圖直接拖進Framer，以下代碼就自動生成啦
然後再在右邊的預覽里把bottom_bar拖到你想要的位置（在這裡就是拖出屏幕啦）
top_bar也是一樣的做法，然後這幾行代碼就會出現了。這樣我們就為這兩個bar的動作做好了準備。
3. 接下來就是添加一張照片：先添加一個圖層。
然後唯一需要寫的一行代碼是，目的就是在這裡使用unsplash的API隨機調用一張圖片
image: "https://unsplash.it/800/"
剩下的諸如圖層位置、大小、圓角、甚至是圖片飽和度，這些工作可以全都在右邊的面板里像用Sketch, Photoshop之類的設計軟體一樣操作（設計師的大福音！！）
自動生成的代碼長這樣：
bottom_bar.states.next()
top_bar.states.next()
photo.states.next()
Framer.Defaults.Animation = curve: "spring(400,30,0)"
ok，大功告成啦~需要手動輸入的代碼量一共只有5行！總之，最近發布的這一版Framer大大降低了學習曲線，對設計師更為友好了！
學習鏈接：
1. Framer - Basics——學習一些Framer的基礎知識（20分鐘就可以掌握大部分基本概念了）2. Framer - CoffeeScript Basics
——Framer是基於CoffeeScript的，了解一些CoffeeScript基礎語法知識有助於開發更為複雜的原型3. Framer - Gallery——官方的示例非常多，可以下載下來看源碼，可能是最快的學習途徑了吧！我一直認為要用合適的工具做合適的事情。
有人說 Framer 對設計師太不友好，也有人說 Framer 釋放了設計師的想像力。脫離使用場景談 Framer 的使用體驗沒什麼意義，就我的使用經驗來看，Framer 比較適合做一些精細動效的打磨和傳統軟體不能實現的新場景（語音交互、TV 遠程遙控等）。
精細動效的打磨
如果你只是想畫一些頁面和頁面的跳轉邏輯，可以選擇 Axure、Flinto 等工具，但是對於一些精細的動效，藉助 Framer 的代碼可以進行更加精確的控制，還可以添加事件交互。不同於 AE 等基於時間軸的軟體，在 Framer 中你可以藉助內置的 State、Animation 去描述一個動畫，並通過動畫曲線調節效果，再藉助事件（觸摸、長按等）來設置動畫播放的觸發，還可以監聽動畫的開始和結束來做一些事情。
體驗地址：airpods
現在，結合第三方的一些模塊你可以使用 lottie-web ( 原 bodymovin ) 將動畫添加進 Framer ，並對其進行控制。
第三方 lottie 模塊：72/lottie-framer
新場景（語音交互、TV、VR 等）
由於 Framer 本身是基於 web 的，所以理論上在 web 中可以做的事情在 Framer 中都可以做。藉助於開放的 API 介面（比如語音識別介面、地圖數據等），你可以在 Framer 中進行真實的交互。比如 https://blog.framer.com/prototyping-speech-recognition-in-framer-js-9cbbbd01757 就是用了瀏覽器的語音介面，而 VR原型的快速製作|UI|交互/UE|大植子Daz_Qu - 原創作品 - 站酷 (ZCOOL) 則藉助於 webGL 實現了 VR 場景。
因為 js 代碼在 Framer 中是可以被兼容的，而 js 的場景在不斷擴大（從一開始的網頁腳本、到現在的後端 nodejs ，再到客戶端、移動端、硬體平台），所以我們能夠使用 Framer 做的事情越來越多。比如這個 Tv-Music ，用 Framer 做的 TV 遙控聯動。
當然，自由的代價是巨大的，Framer 對設計師來說學習門檻很高，但門檻高並不意味著學不會。Framer 內置了豐富的組件和各種事件，基本常見的如頁面滾動、頁面跳轉、雙指縮放等都可以用很短的代碼實現。Framer 最開始只能通過代碼實現效果，但現在經過不斷迭代已經基本能夠覆蓋整個工作流。你可以在設計模式下使用圖形化工具進行頁面的設計，再轉到代碼模式給元素添加交互。
但具體適不適合你的使用場景，難不難學還是要自己去嘗試。最後說一下我的 Framer 中文網，裡面有我翻譯自官網的文檔和入門資源。
Framer 中文網framercn.com
以及我之前關於如何入門的回答：李俊：Framer（framerjs.com）如何入門？
覺得體驗並不是很好，雖說Framer號稱prototype anything you can imagine，但我認為Framer對設計師並不友好，過多的代碼影響效率不說，也讓設計師不能專註於設計本身，個人更喜歡的是Hype，方便直接，這裡有幾個我用Hype做的動效：
格志動效臨摹 by Hype-UI中國iOS9 動效設計臨摹 by Hype-UI中國兩個動效設計 by Hype-UI中國每個動效的繪圖+製作的整個過程都不超過15分鐘，並不輸Framer。然而也許還會有人質疑我說Framer是做交互的，不是動效，那這樣說的話就更不合適了，Framer做的交互僅僅是短動效的交互，如果是做完整的互動式原型，還是離不開Axure，因此我認為，做做動效可以用Hype，如果做交互，推薦Sketch+Axure。Framer的話呢，呃…玩玩可以啊~順便推廣一下我個人博客：萬世奇的博客，裡面有交互、動效、產品等相關文章，有興趣可以來逛逛。我一直都建議產品或交互設計師用Framer把你的idea實現出來，做這件事所得的收益「完全值得」你去花費一點點時間在上面。
Framer.js-可操作交互原型在實戰中的角色 - Siwen Ren的文章 - 知乎專欄。我在這篇文章中詳細闡述了可操作交互原型的重要性及Framer的使用體驗。
A prototype is worth a thousand meetings
by Paul Stamatiou（Twitter PD）
目前用Framer的最新版本去做一個demo可能比視覺設計師設計一個界面還快（還是那句話：熟能生巧！）
FS（Framer Studio）的槽點主要在於它是「代碼式」的操作方式，正如某個問題的高票回答「設計師看到代碼就頭暈」，這直接讓好多同學還沒真正的深入了解到「代碼式」帶來的暢爽和超高的效率就直接放棄了學習，然後大家都擠上來各種吐槽。誠然「沒有計算機編程語言基礎」毋庸置疑是非常正確的理由，但是我覺得真正阻礙到大家去學習FS肯定不是這個問題，而是擋在代碼前面大傢伙對於「代碼」這東西的觀念問題。你認為代碼很難，確實，但是在FS這個小範疇裡面你都用不到真正被稱之為難得部分，不是因為不能，而是因為不需要。我個人認為學習FS的Coffeescript真的比學做菜都簡單。我以前也認為AE、QC、Form、Hype之流具有更加高的效率，但當我學會在FS裡面用for循環（通常只需要兩行代碼，熟悉幾回後寫出來10秒鐘都不需要）對一些物件進行批量交互方式處理的時候徹底被震驚。試想一下，比如說在QC裡面，假設你需要對每張圖片都加入「點擊放大」這個交互動作處理的時候你需要添加多少個節點？我自己來回答一下，至少十八個，加上運動曲線的設置，不敢想了，一個非常簡單的需求你要用差不多50步的操作來應付。FS裡面要多少？7行代碼一般就夠了，因為我們有循環，讓代碼幫我們對每張圖片都進行同樣的操作，熟悉了這個套路的人寫這七行代碼連2分鐘都不需要。所以如果大家想要追求效率的話，我我覺得選FS就對了。
2015年第一次用 Framer，它現在比以前好用多了。對於我來說，使用它獲得了幾個好處。
1、擴展想像力。
限制想像力的不是技術門檻，而是懶惰。當我第一次在Framer社區里查資料、搜方法，把我想像中的互動方式做出來的時候，我覺得這個才應該是我的設計的原貌，而不是一個虛假的視頻和腦補。
2、驗證可行性、可用性。
如果你沒把想法做出來過，你不會知道裡面存在什麼問題。Framer 真實的交互能讓你的設計接受考驗，它會幫你暴露問題。
3、更強的推動力和說服力。
當我把做出來的原型拿去review，或拿到工程師面前，讓他們體驗的時候。他們只會考慮時間來不來得及做，我不再聽到工程師說「不現實」「無法實現」等等。我離職以後還有工程師主動問我之前使用的可交互的設計軟體叫什麼名字，他要推薦給別人用。
4、更嚴密的思維，更懂自己的設計載體。
Framer 是我接觸編程的第一課。具備了代碼基礎以後我開始接觸 Processing 之類的東西。我越來越了解代碼實現，它們也是我的設計對象的載體。我覺得用戶體驗設計師應該去了解這些。
就像工業設計師需要了解工藝，服裝設計師需要了解面料，建築師需要了解建材。UX設計憑什麼不去了解代碼？反過來，我覺得國內UX設計師地位低的一個原因就是「你並沒有掌握你應該有的知識和能力」。
更嚴密的思維、更多的代碼知識、更好的設計創意、更詳細的交付件讓我在團隊里贏得尊重，包括在工程師的團隊。認同 = 推動力。當然不是說我使用 Framer 以後就立馬獲得了這些。Framer 對我來說是只是一把鑰匙。
老實說 Framer 這些年來發展的並不快。社區也不算活躍，插件資源也不多。可能還是門檻高了一些吧。
這個問題我在2015年剛剛接觸 Framer 的時候就看過，今天又在時間線冒了出來。現在想起來，還是很感謝 Framer 的。畢竟交了份子錢，不捧一下顯得我吃虧。
有一點點代碼基礎，感覺比QC好用；sketch分好圖層的話，幾十行代碼就可以寫一個逼真的下拉刷新背景圖放大等動效，QC（Form）做同樣的效果連線都連得煩人，AE的話因為用的是mac mini 渲染比較吃力 還是實時預覽的framer好用。打算過段時間再試試hype3實現效果如何
目前正在積極學習framer 無代碼基礎 學習起來非常費勁 但是一旦掌握一些方法 交互實現起來非常快 還原極高 代碼調試動畫比ae拖關鍵幀爽不知道多少個試衣間（個人喜歡打代碼的感覺）還能交互 來吧 少年 堅持下來 你會喜歡它的
目測framer也只能實現單個頁面的動效，跟pixate差不多。一個app所有地方的動效做下來得需要多少文件啊！
把玩了一下午，所有的交互都要用代碼實現，無法拉組件直接用，效率有些低。不過其交互動畫確實很贊。對於一般的需求還是湊活用axure吧，Framer的逼格太高啦
我們的設計師寫了篇文章，覺得挺好的。Framer Studio發布，移動交互設計的春天來了嗎？
推薦閱讀：