2020 Framer Taiwan Workshop #Spring 之高擬真原型運用思考
從企業營運、產品發展等之於設計師的角度思考原型工具；要不要參加Framer工作坊呢？照過來！照過來！
參加了2020/3/21、22為期兩天的Framer工作坊，在一個多月後的今天，一切仍然歷歷在目。本文以原型工具(prototyping tools)的選擇和著手學習Framer的小撇步、Framer工作坊的特點和體驗、Framer的資源分享、其他原型工具的使用狀況 四個面向分享，是立基於工作坊本身的延伸。
FramerX做為高擬真的模型工具，很好的彌合了設計師和工程師溝通的落差，而工作坊的作用，讓設計師跨越FramerX使用上看似困難的高門檻，更好地讓設計師開始瞭解工程師的思維，運用可使用的資源（簡單的程式和龐大的互動模型）來建構互動原型。
一、選擇工具的考量 和 學習Framer的小撇步
那麼，如何消弭設計師和工程師的溝通落差呢？
1.溝通是雙方的，這段雙人舞到底誰先踏步呢？設計師是否要學程式？這裏回溯到使用原型的目的提供幾點思考，詳細而言，落在三個面向：
1) [內部溝通方式] 設計師和工程師的協作：
I. 依部門大小評估：若設計師和工程師的占比太小（如≤1/10），設計師的權責在產出靜態視覺的比例會比較重，設計師在執行專案過程中，可能也對產品/專案決策的影響力較小，細節互動的溝通可能更傾向口頭討論後工程師實作。
II. 依團隊運作模式評估：若為小組模式運作，每小組人馬相對固定：1業務、1設計師、2工程師為一組，1位設計師會同時兼顧多小組，專案情況相對單純，換而言之，細節互動面不一定講究，很大可能也無需花費過多時間投入在互動效果裡。
III. 設計師欲發展能力和投入產出比：依興趣和吸收力好壞評估，提高與工程師合作效率的工具都是好工具，只要不影響結案。
相對於兩師間的矯情，[內部溝通方式]的思考更側向以可觀之現象，以此作為溝通模式的選擇依據。
2) [外部溝通方式] 公司互動原型的運用：
I. 公司服務對象的產業類型：這個面向需拔高來看，包含UX概念的服務設計開始成為具有資源但是高競爭產業的武器，如零售、金融、汽車、地產、家具等，在工具的選擇上，需結合產業習性和需求考量。譬如針對汽車行業VR app的原型測試，講究細微互動，若考量結合API運用規劃，串接真實資料的Framer可是不錯的選擇。
II. 公司的產品類型：這裏可以用使用者測試的可觸及性來切入，2B的產品除了終端使用者還需顧慮投資者、購買決策者等，亦要考慮商業機密的機密性。2C更要考量原型的測試目標，工具的使用跟所要解決的問題、研究方法和範圍、時程皆有關係，譬如若將原型用於美食地圖中使用者與地圖互動的判斷依據，選擇高擬真度的Framer測試效益大。
III. 公司的發展走向：未來是否會有產品轉型或調整服務供應對象的可能（結合前兩點）？即便公司方向不變，每一次原型測試的素材是否可以累積供下次使用？Framer的component，從設計到互動一體成型，相同效果迅速疊製，以呈現來說，微調整再單獨修改Instance即可；以互動來說，善用Override可以提高素材的重複使用率。
拜讀了Lichin Lin, Chris Chen, Way Chang, Wayne Li, Riven Li 等二十多篇與Framer相關之文章和粉絲頁之發文，[外部溝通方式]的思考結合工作坊實作，以產品本體為選擇依據。
3) [自我培養] 設計師的個人職能發展：
還是借用DITL唐玄輝老師總結的<2019設計產業個人淺見>來說明，工具的使用若侷限在工作情境中，難免太過侷限，應留心著眼未來：
I. T型化能力：除了專業深度外，知道如何整合前後端才能再上一層。
II. M型化現象：M型社會(M-shaped Society)是日本趨勢大師大前研一 05年所提出，主要說明中產階級消失，貧富兩級化的現象。結合前後文，相信唐老師這邊苦口婆心叮嚀的，是設計師所掌握的技能要多和知識面向要廣，要擁有足夠服務新富人和新窮人的能力。
現在的工作情境是公司導入工具的主要評估，掌握更多領域，是換位思考的關鍵和順利溝通的門票，最終，設計師要思考的是自己否擁有足以滿足應付各類型態公司、滿足未來市場消費者的綜合能力。
2. 基於上述，設計師若傾向多瞭解且選擇高擬真的Framer，會建議不要從React.js下手,請如Chris Chen在<從設計師角度學習 Framer> 一篇分享Framer學習歷程所言：
‘先從理解 Framer 本身架構，以及它所提供的參數與 Function 入門比較妥當。’-Chris Chen
1) 瞭解官網使用手冊
2) 著手瞭解基礎的程式互動原理
以上是 無程式基礎的設計師 跨越FramerX使用上高門檻的不二法門。Way Chang撰寫的<用 Framer 學習互動機制的設計與表達>，以程式語言拆解‘遙控器開電視’動作:
3) 著手瞭解API串接真實資料
FramerX的一項大優勢，是真實資料的串接，讓地圖、聊天等原本僅能用假圖呈現的原型，達到即時互動(Realtime interaction)。瞭解基礎功能如何運用後，建議著手釐清API的使用，讓Framer串接真實數據的功能最大化：
II. <API運用的範例引導>
二、Framer Taiwan 工作坊的特點：
工作坊(workshop)以學員實作為導向，內容和進程安排除了有講師個人特色以外，常常會依場況再做靈活調整。相較於講座(talk)、課程(class)、研討會(Seminar)，更側重運用情境，有助於學員自我檢測對新知的吸收狀況。
1. 任職於(Product Developer @MoBagel Inc. ) MoBagel的產品工程師林立秦(Lichin Lin)的個人魅力：穩健、迅速、熱忱
真的開始知道講師，是framer舉辦的Loupe2019年會的紀錄視頻：
和他洋洋灑灑的文章<第一次到荷蘭當講者，我們該如何思考設計的樣貌>
1) 穩健
這其中不單單因為林立秦(Lichin Lin)是講師，還有他全程紀錄其他講者的講座內容、投入聆聽的情況下，現場表現從容不迫的台風。
2) 迅速
仔細留意面對為期三天（8/19–21）的年會，立秦(Lichin)不到一週的時間便發表篇幅蠻長卻言簡意賅的乾貨！感恩！許多資料整合和發表都非常迅速。
3) 熱忱
對Framer及相關議題的熱忱，持續活躍於Taiwan UIUX Designers、Framer JS Taiwan等粉絲頁，為相關討論提出見解和回應，很有耐心。
2. 工作坊服務到位，講師留意個體差異：#Spring的這場，為期兩天，每天4小時，共8小時。以主辦方所提供的整段服務而言，遠遠超過表定時限：
1) 工作坊開始前(Pre-service)：
I. 溝通機制，傾向密集溝通：
- 郵件通知。
- 因每期工作坊會有人數限制，主辦方邀請對Framer感興趣的群眾至Framer Taiwan的Slack討論群，方便針對未來活動訊息、教學資源、問卷調查等做統一發佈。
II. 貼心提醒，軟體試用事宜：
- 提醒試用期14天的限制，建議鄰近工作坊時間再下載。
- 給尚未購買軟體的學員提供試用期的延長服務。
III. 課程內容，傾聽學員需求：課程開始前半個月，對於出席的學員開放課程許願池，可客製化。
- 資產線圖(Data rendering & Draggable data)：https://dribbble.com/shots/4027751-Fitness-tracking-app-concept-2-invitations
- 地圖(Mapbox components)：https://www.framer.com/blog/posts/mapboxs-new-components/
IV. 留意品質，控管參與人數：16人小班制，2人一組搭配開展易用性測試。
2) 工作坊進行時(During)：
I. 線上分享詳細講義和實作案例檔案：
- 快速瀏覽相關連結。
- 相關素材到位，重在功能訓練。
II. 無數個 概念闡述-任務講解-學員實作-講師解惑 的輪替，增強認知：
- Day1：頁面轉換 (Link) / 快速佈局 (Stack) / 頁面式動畫 (Pagination)的基本使用概念，講師還是費心另起示範案例，玩過官方導覽的人才不無聊。
- Day1：Framer的Components和Sketch中的Symbol類似，當示範案例進展到這個層面的運用時，展開元件主體(Master)和元件分支/運用實例(Instance)的運用比較。
- Day2：Framer的Components遠比Symbol更靈活，正是由於Framer可以賦予元件使用狀態(Override)。這部分對於無程式基礎的設計師可真是一片無涯，事前瀏覽官網系列課程Framer 101 Crash Course <Build an Animating Progress Bar>，真的差點沒退工作坊…講師解釋，Override是一種抽象函式(Function)，或是描述物件應該表現的方式。它提供單一元件針對不同互動方式做出不同應對的可能，可以理解為界定事件(Event)的功能，基於它將事件和元件分離，相同的 Override 可以套用多個元件上。以上比官網親民多了，開腦後，講師即便展開Override的密集轟炸，也顯得平易近人：
💡如果不懂程式沒關係，我們從React.js 中撰寫function的基本概念開始。
💡動態的Override要怎麼策劃？
💡不只要數值變化，如何因應使用者的Tap, Hover, Pan, Drag操作使用Override？
💡如何用Override做到元件們的溝通？
💡如何用Override玩元件的動畫？
- Day2：工作坊的重點一直都偏向靈活運用，過程中除了軟體實用的小撇步外，還有結合第三方服務的運用：
💡陸續更新的Framer Store裡已有1400多筆的互動Packages，你想做的效果（呈現或互動），可能早有人分享給大家使用。
💡在實際互動測試中，Enhanced、Airtable(量化數據檢測工具)、Hotjar(質性檢測工具)、Netlify(永久部署工具)等第三方服務的結合運用，可將原型的數據資料串接、易用性測試效果發揮到最大。
個人非常喜歡連結其他資源運用的實作和討論，具體細節，有興趣的可以詳見講師立秦(Lichin)出品之<Framer Taiwan Workshop#1 — 易用性測試中數據蒐集與洞察>一文。
III. 大魔王-易用性測試實作，協助學員快速檢測工作坊的學習效果：
- 任務目標：以名牌(Badge)設計師的身分設計使用者表單介面，兩兩一組交換扮演設計師及受測者，每次設計10分鐘加放聲測試3分鐘，三輪迭代後，驗收結果。
- 實作：兩天的新知，在緊湊的設計規劃和溝通討論，馬上意識到新知掌握度。諸如‘元素需成為Frame才能執行Link’，有可能情急時就還給講師了。若將Framer投入使用的意願很高，鞏固執行細節，著實刻不容緩。
- 討論/分享：回顧並反思永遠是最寶貴的經驗，同儕的壓力是種激勵。同樣的時間，除了最基本的表單輸入，有人還有機會留意簽名、拍照功能的規劃和測試細節，那麼個人在執行時是否有更多需要反思和調整的呢？
3) 工作坊結束後(Post-service)：
I. 整理照片、剪輯視頻
II. 更多的練習題!!!複習如工作坊中已投入使用的Draggable sheet, Nested scroll外，還有Sound effects, Perspective 3D等在工作坊中沒有提及的進階嘗試。
III. 鼓勵提問、樂於交流。
IV. 更新Framer狀況，如web beta狀況，web version的正式釋出。
3. 工作坊提供的相關資訊量大，便於設計師擷取自我所需；且透過講師指點，可以在瞭解整體狀況的情況下，知曉多個面向：
通過快慢交替的概念檢視(概念講到你懂、範例玩到你不懂)，讓你快速意識到自己的掌握的程度，
1) 從介面設計到原型製作是否使用FramerX一套軟體達成？
從使用介面設計到原型互動一體成型的Framer著重使用者體驗，相較於Sketch在設計細節上，有幾點優勢：
I. Stack：優於Sketch的Group，放置於Stack內的元件，可在拖拉中等距置換排列。
II. Layer：Sketch中拖拉時，僅有其他元素和Artboard存在自動從屬關係；Famer在拖拉時，Layer自動將小面積者歸附在大面積元素下，沒有限制元素類別，從屬關係明確。
III. Components：優於Sketch的Symbol，除了外觀，也涵蓋互動層面。
2) 若投入使用Framer，程式運用面要怎麼提高？
I. 先以 Framer 的基礎架構，以及它所提供的參數與Override的原理著手。
II. 進一步，不妨從Framer Store，以想做的互動套件為學習對象，瞭解、研讀並模仿程式碼。
3) 若投入使用Framer，哪些是自身要加強，哪些可能著重於運用資源協助達標即可？
I. 若以企業內部快速溝通為考量，在Framer Store若找不到互動資源，傾向以類概念套件套上再文字說明即可。
II. 為了補強工作坊時的生疏感，在公務實際上用不到的情況下，開了side project：優化Ziferblat app的onboarding experience，近期將發文，全文從經營者、使用者等面向，針對以時間計費的Ziferblat出品的app做分析優化，以Framer製作prototype。
‘你不用很厲害才能開始，但你必須開始才能很厲害’。同樣以軟體使用出發，相較於坊間開設的課程(class)型態，因授課時間長，反向降低了新知的衝擊，換而言之，工作坊(workshop)有其強度和力度對參與者產生認知或執行上的影響力，提高動手能力。
三、關於Framer的資源與分享：
針對此次學員的參與目的（提高企業合作效率、實現高擬真原型製作、自我挑戰與學習），整理了幾個大資源：
1. 創立Design+Code的Meng To撰寫的免費教學資源 ，雖然都是英文，但結合圖示、影片和可下載的素材，也不一定會卡在語言唷。
2. 以React為基礎的Framer，在LearnReact.design也有相關教學，只可惜免費課程較少。
3. 由Tony J自己創玩的100 Days of Framer項目，展現用Framer做出的100種互動，無程式基礎的設計師可以馬上瞭解可執行的互動效果，再做詳細研究。
4. 特別對於想要在公司導入FramerX提高團隊合作效率；具體可瞭解Dropbox的導入情況：
四、關於其他原型製作的工具：
1. 若看完文章，經評估，Framer並不適合您的使用情境，歡迎根據簡單的標籤選擇適合您的工具：https://www.prototypr.io/prototyping-tools/
29種工具唷，趕緊進來看看！
Adobe XD, Affinity Designer, Atomic, Axure, Balsamiq, Canvas Flip, HotGloo, InVision, Sketch, Form, Figma, Fluid UI, Flinto, Framer, Fuse, Marvel, Mockplus, Justinmind, Koncept, Kite Compositor, Origami, POP, Paper Prototyping, Principle, Proto.io, ProtoPie, Quant-UX, UX-App, UXPin
2. 彙整了Taiwan UI/UX Designers 粉絲頁中的討論熱題：‘大家平常在工作中會使用到的原型製作工具有哪些？’(2020/4/2貼文，為期2週的留言討論)，歡迎詳細瞭解業界原型工具的使用體驗分享：
本文是本人第一次發文，以此篇謝謝講師立秦(Lichin)和所有配合疫情戴口罩上課的童鞋們、場地提供PicCollage和MoBagel。若內容有不適之處，煩請告知，會趕緊做調整。
若有任何建議或欲進一步交流，歡迎以郵件聯絡 stella24168@gmail.com 或 follow 本人~
若覺得上文對您有幫助，可考慮拍手 👋唷～
另外，對時間(time)、咖啡廳(café)話題感興趣的朋友，請期待下次：優化Ziferblat app的onboarding experience的文章發表。
