大約去年年中，我開始把 Framer 這套原型製作工具，導入 UI / UX 設計流程中。最主要是它能實現高擬真度，且可運用 Coding 做出許多設計變化（彈性大）。不過，也因為需要一些 Coding 的基礎知識，導致許多設計師不敢接觸，個人覺得有點可惜。所以在 ” 設計師 學習 Framer ” 這系列裡，我將會從設計師的角度跟大家分享一些學習心得，然後盡可能的把 Coding 這部分降到最低，以利大家學習。
在分享前，我想先簡單介紹一下 Framer 的特性～
原型文化
製作原型最重要的目的就是 “溝通” ！近年來，許多設計流程都開始重視 ”原型製作” 的重要性，例如 “設計思考（Design Tninking）” 的方法論中，就特別將 ”原型製作” 當成一個重要步驟。透過這些原型，可讓團隊進行最基礎的想法驗證，然後根據測試結果再來修正產品的設計方向。在這樣的測試循環裡，可有效降低部分設計的錯誤。
另外要記住一點，所有的原型都是可被破壞或放棄，千萬不要放入太大的感情在裡面，不然很容易被困住走不出來。換句話說，就是 “完美” 不是原型的重點，而是如何透過它得到驗證結果。
高擬真原型（High Fidelity Prototype）的好處與壞處
“喔，因為這只是測試，所以這邊不能點擊” ~設計師~
“那你跟我說還有哪裡可以點？” ~測試者~
“……(沈默)” ~設計師~
大家應該都有這樣的經驗，當你拿著原型讓使用者測試，常因擬真度還沒那麼高，造成使用者操作不順。因此，驗證者還必須解釋非常多東西，讓整體測試體驗不連貫，而浪費許多寶貴時間。
相對的，高擬真原型因維持著近乎完整的互動性，能讓使用者測試更貼近真實情境，得到的回饋也更具價值。不過，它唯一的壞處，就是製作時間成本較大，所以如何在短時間內，產出高擬真的原型，我想會是各大工具未來的重點。如能降低製作難度與時間成本，或許高擬真還是低擬真，就不那麼重要了。
目前 Framer 不適合製作頁面流程
建議大家不要拿 Framer 來製作頁面流程的原型。因為有比 Framer 更適合的工具，像是 Prott、 Flinto 及 Invision 等。這些工具在頁面的串接上，遠比 Framer 直覺。但已經有許多人開始研究如何在 sketch 做一些設定，並匯入 Framer 自動產生頁面切換的效果。
CoffeeScript 咖啡語言
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/
衍伸閱讀
本文章已獲得作者 Chris Chen 授權，原文：從設計師角度學習 Framer Part 1：前言與觀念
本文章所屬設計大舌頭與作者所有，未經授權，不得轉載！如需轉載，煩請通知。
