從設計師角度學習 Framer Part 1：前言與觀念
*Note: 此系列文章不適合套用在 Framer X 。
大約去年年中，我個人開始把 Framer 這套原型製作工具，導入在我的 UI / UX 設計流程。最主要的原因，就是他的高擬真度，並且可運用 Coding 做出許多設計變化。但也因為它需要一些 Coding 的基礎知識，導致許多設計師不敢接觸，個人覺得有點可惜。
所以在這系列裡，我將會從設計師的角度跟大家分享一些學習心得， 然後盡可能的把 Coding 這部分降到最低，以利大家學習。在心得分享之前，我想先跟各位簡單介紹一下 Framer 的特性～
原型文化
製作原型最重要的目的就是 “溝通” ！近年來許多設計流程裡，開始重視”原型製作”的重要性，例如設計思考中，就有特別將”原型製作”當成一個重要環節。透過這些原型，可讓你進行最基礎的想法驗證，然後根據測試結果再來修正你的設計方向。 這樣的測試循環，可有效降低部分設計錯誤。
要記住一點，所有的原型應該都是可被破壞或丟棄，千萬不要放入太大的感情在裡面，不然很容易被困在裡面走不出來。完美不是原型的重點，而是如何透過它得到驗證結果。
高擬真原型（High Fidelity Prototype）的好處與壞處
“喔，因為這只是測試，所以這邊不能點擊” 設計師
“那你跟我說還有哪裡可以點？” 測試者
“……(沈默)” 設計師大家應該都有這樣的經驗，當你拿著原型讓使用者測試的時候，常常會因為使用者，在你的原型上東卡西卡，造成必須解釋非常多東西，讓整個測試體驗不連貫，因此浪費許多寶貴時間。
高擬真原型因為維持著近乎完整的互動性，它可讓使用者測試更貼近真實情境，使我們得到的回饋更有價值。但它唯一的壞處，就是製作時間耗費較長，所以如何在短時間內，產出高擬真的原型，我想在未來會是個各大工具的重點，到時，或許高擬真還是低擬真，就不那麼重要了。
Framer 不適合製作頁面流程 (更正)
建議大家不要拿 Framer 來製作頁面流程的原型。因為有比 Framer 更方便的工具，像是 Prott, Flinto 以及 Invision 等等。這些工具在頁面串接上，遠比 Framer 直覺許多。但已經陸續有人在研究如何在 Sketch 做一些設定，然後匯入到 Framer 自動產生頁面切換的效果。
補充：最新版本的 Framer 已經有支援快速製作頁面瀏覽的元件囉，詳細可以參考 Framer Flow 初體驗 這篇文章。
Coffee Script 咖啡語言
Framer 整體是架構在 JavaScript 下。但我們所撰寫的語言則是 CoffeeScript，它屬於高級語言的一種，因此它的程式碼是非常接近口語。網路上由 CoffeeScript 提供的 Function 與參數，原則上都可在 Framer 執行。但以設計師的角度來看，會建議你不要從 CoffeeScript 下手來學習。先從理解 Framer 本身架構，以及它所提供的參數與 Function 入門比較妥當。
Framer JS Doc：http://framerjs.com/docs/
Coffee Script：http://coffeescript.org
Framer 的延伸性
由前面提到的，Framer 支援許多 JavaScript 提供的服務，像是 MapBox, Hammer JS 這些原本提供給網頁使用的第三方服務，都可以銜接進你的原型，讓整體的完整度更高。它更是少數第一個支援 VR 原型製作的工具喔！ 而網路上也有許多高手提供 CoffeeScript 的 Module（模組)，有效地利用都可加速原型製作的時間喔！
Framer 社團的活躍與支援
有別與其他的原型工具，在 Framer 官方社團裡，除了本身 Framer 開發者外，還有很多經驗豐富互動設計師（任職於 Facebook, Google 等等）在上面進行案例分享。Framer 能夠做到這種規模的活絡，主要是因為公開分享的功能，只要點擊 Share 按鈕，就可隨時隨地傳 WEB 連結給任何人進行測試。當然也因為開放學習以及熱於分享的文化促使之下，讓許多知名設計師不吝嗇的分享他們的設計流程與成果。目前亞洲這邊比較活躍的有 Framer JS Korea，而台灣這邊的 Framer JS Taiwan 則是最近才成立，有興趣的朋友歡迎一同加入研究討論！
Framer JS Taiwan：https://www.facebook.com/groups/framejs.taiwan/
了解 Framer 的特性後，下一篇就讓我們從 Sketch 到 Framer 匯入流程開始吧！ （歡呼聲！！）
