學習 Framer

設計師 學習 Framer 第一章:前言與觀念

大約去年年中,我開始把 Framer 這套原型製作工具,導入 UI / UX 設計流程中。最主要是它能實現高擬真度,且可運用 Coding 做出許多設計變化(彈性大)。不過,也因為需要一些 Coding 的基礎知識,導致許多設計師不敢接觸,個人覺得有點可惜。所以在 " 設計師 學習 Framer " 這系列裡,我將會從設計師的角度跟大家分享一些學習心得,然後盡可能的把 Coding 這部分降到最低,以利大家學習。

在分享前,我想先簡單介紹一下 Framer 的特性~

原型文化

UI設計流程

 

製作原型最重要的目的就是 “溝通” !近年來,許多設計流程都開始重視 ”原型製作” 的重要性,例如 “設計思考(Design Tninking)" 的方法論中,就特別將 ”原型製作” 當成一個重要步驟。透過這些原型,可讓團隊進行最基礎的想法驗證,然後根據測試結果再來修正產品的設計方向。在這樣的測試循環裡,可有效降低部分設計的錯誤。

另外要記住一點,所有的原型都是可被破壞或放棄,千萬不要放入太大的感情在裡面,不然很容易被困住走不出來。換句話說,就是 “完美" 不是原型的重點,而是如何透過它得到驗證結果。

 

高擬真原型(High Fidelity Prototype)的好處與壞處

“喔,因為這只是測試,所以這邊不能點擊”     ~設計師~
“那你跟我說還有哪裡可以點?”     ~測試者~
“……(沈默)”     ~設計師~

 

大家應該都有這樣的經驗,當你拿著原型讓使用者測試,常因擬真度還沒那麼高,造成使用者操作不順。因此,驗證者還必須解釋非常多東西,讓整體測試體驗不連貫,而浪費許多寶貴時間。

相對的,高擬真原型因維持著近乎完整的互動性,能讓使用者測試更貼近真實情境,得到的回饋也更具價值。不過,它唯一的壞處,就是製作時間成本較大,所以如何在短時間內,產出高擬真的原型,我想會是各大工具未來的重點。如能降低製作難度與時間成本,或許高擬真還是低擬真,就不那麼重要了。

 

目前 Framer 不適合製作頁面流程

建議大家不要拿 Framer 來製作頁面流程的原型。因為有比 Framer 更適合的工具,像是 Prott、 Flinto 及 Invision 等。這些工具在頁面的串接上,遠比 Framer 直覺。但已經有許多人開始研究如何在 sketch 做一些設定,並匯入 Framer 自動產生頁面切換的效果。

 

CoffeeScript 咖啡語言

framer_part1_02

 

Framer 整體是架構在 JavaScript 下,但我們所撰寫的語言則是 CoffeeScript,它屬於高級語言的一種,因此程式碼是非常接近口語。網路上由 CoffeeScript 提供的 Function 與參數,原則上都可在 Framer 執行。但以設計師的角度,我會建議你不要從 CoffeeScript 下手來學習,應該先從理解 Framer 本身架構,以及它所提供的參數與 Function 入門比較妥當。

 

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:前言與觀念

本文章所屬設計大舌頭與作者所有,未經授權,不得轉載!如需轉載,煩請通知

如果你也喜歡我們的文章,請 Follow 我們的 Facebook 專頁,每天都會分享許多精選文章!

分享此文: