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