用 Framer 學習互動機制的設計與表達
作為一個「UIUX」或「互動」設計師，需要有能力清楚地表達自己所設計的「互動機制」，特別是在跟工程師溝通的時候。如何能用「有邏輯」「工程師能懂的文法」來表達，就是設計師需要學習的部分了。
Framer 作為一個 Prototype 原型設計工具，因為需要用程式語言來撰寫，恰巧成為了一個很適合拿來練習設計互動機制的工具，並且能夠提升互動邏輯的表達。
接下來會從設計時的白話文思考，一路演進到程式語言的表達，還好 Framer 用的是很白話的 CoffeeScript ，所以只要你會一些基本的英文，相信這樣的轉譯並不難。
基礎互動
首先，我們先來談一下日常生活中的互動，舉電視遙控器為例，它的基本互動會是：
（遙控器的）電源鍵被點擊時，就打開電視
用我們文法結構的方式來分析～
（感應器：）電源鍵 → （感應到）被點擊 → （執行動作）打開電視
數位世界的互動也是相同邏輯，我們先來一個很簡單的互動例子，能方便待會示範的例子～
當按鈕被點擊時，按鈕變成紅色拆解文法成～當（感應器：）按鈕 →（感應到）被點擊時 → （執行動作）按鈕變紅色
所以，在這樣互動機制中，會有幾個基本元素：
- 反應物件（感應器）：按鈕
- 反應邏輯：被點擊時
- 執行動作：按鈕變紅色
在我們翻譯成程式語言之前，先翻譯成英文：
- 反應物件（感應器）：button
- 反應邏輯：tap
- 執行動作：button → red
接著翻譯成 Framer 的 CoffeeScript 語言：
button.onTap -> # 當按鈕被點擊時
button.backgroundColor = "red" # 按鈕變紅色Framer Project: https://framer.cloud/NYCUO
中階互動
在初階互動中，反應邏輯很單純，像是用「被點擊」這樣簡單的行為來驅動某個動作，所以，我們要再更進一步地來豐富「反應邏輯」這部分。
舉例：『 當頁面被下拉超過 100 時，就關閉頁面，不然就回到原位 』
這時候，不再只是「被下拉」這樣簡單的行為就能進行互動行為，還多了「超過 100 時」這樣的條件。於是，我們必須在頁面被下拉的過程當中，「判斷」頁面的高度位置是否有超過 100。
白話的說：
當頁面被下拉時，如果頁面高度位置超過 100，就關閉頁面，不然就回到原位Framer 版本：
page.onDragEnd ->
if page.y > 100
close_page()
else
page.animate
y: 0當然，在這互動機制之前，還要先設定好一些東西：
- page 要能垂直拖曳
page.draggable.enabled = true # 讓頁面可被拖曳
page.draggable.horizontal = false # 讓頁面無法被水平拖曳- 設定關閉頁面的行為（ “close_page” function → page 下滑超出畫面）
close_page = ->
page.animate
y: Screen.heightFramer Project: https://framer.cloud/vPDeY
互動機制的架構
從以上的範例我們可以觀察到，所謂的互動，都會有一個像是感應器一樣的「反應物件」，此物件本身的「反應邏輯」會定義好「觸發邏輯」與「條件」，一旦都被滿足，就會執行某個「反應行為」
以中階互動的例子套用到上面「互動機制」的架構中：
置換某些字詞，作為撰寫程式前的準備：
逐步修正互動機制
從白話的思考一路轉譯到程式語言，中間就是摸索的過程，我們再回到遙控器的例子，剛剛說的白話邏輯是：
（遙控器的）電源鍵被點擊時，就打開電視如果往下做到最後，就會發現～咦？好像少了什麼？ 沒錯～少了判斷現在電視是否是開的或是關的。所以你會發現你只能打開電視，不能關掉電視。於是應該調整成：
（遙控器的）電源鍵被點擊時，如果電視是開的，就關掉；如果是關的，就打開。程式大概會長得類似下面這樣（虛構）：
power_button.onTap ->
if tv.status is "on"
turn_off_tv()
else
turn_on_tv()透過把互動機制實作化，能幫助自己釐清整體互動機制的細節，藉由實作的驗證，來確保設計時考慮得足夠全面，接著回頭修正自己的白話文版本，然後就能很周全地傳達給工程師。（讓他們把你設計的互動機制再翻譯成打造產品所用的程式語言）
設計師究竟需要不要寫程式？
我個人的答案是～可以會，但不是要你去當工程師。
過去，時常聽到一個問題～「設計師如何跟工程師溝通」，其實，能夠順利溝通的關鍵，就是站在對方的立場，用對方的邏輯和語言來思考與表達。
當然這個說法，最好的情況就是你會寫工程師在寫的程式，但這太強人所難了。
然而，真正的運用在實際產品上的程式，其實遠遠超過我們所想像的，包括資訊架構，設計模式（Design Pattern），記憶體管理⋯等等。有許多東西其實與互動設計、UIUX 沒有太多直接相關，而個人認為設計師所需要會的程式能力，不需要這麼地全面與專業。
隨著近年來互動設計的需求愈來愈多，互動設計工具也一個接著一個問世，而這其中的 Framer ，是唯一使用程式語言來撰寫的工具（雖然現在有 Design Mode 幫助你建構素材，但是互動的部分還是使用程式來控制），並且它所選用的程式語言是 CoffeeScript ，相當淺顯易懂易學的語言。
而 Framer 所提供的程式環境，恰恰剛好很適合設計師，包含 CoffeeScript 的特性是讓你不必花時間關注括弧要怎麼用，只要縮排（tab 鍵）就好。豐富的元件也能讓你不必一堆東西要自己寫，甚至後來的新功能 Design Mode ，更能讓許多設計師在建構素材時，能用自己熟悉的方式的製作。
Framer 所使用的 CoffeeScript 與它所提供的元件，讓設計師能夠專注在互動機制的設計上。於是現在，設計師確實有了一個很好的機會，可以透過學習簡單的程式來建構互動原型，同時更能幫助你理解程式語言的運作邏輯，藉此讓你能更加理解工程師的思維。
最後，或許有人會好奇，為啥此篇有了初階互動與中階互動，但卻沒有高階互動？ 這是因為，我還在想到底怎樣算是高階互動，老實說，大部分的情況下，初中階的互動已經能應付多數情況了，稍微難一點的情況可能會是同時有很多互動行為在原型當中，可能需要考慮互相干擾的情況。
如果有想到適合的範例，到時會在整理成文的。
也歡迎大家在 Framer Taiwan 社團提問與交流，如果有不錯的問題，我也會直接寫文回應，感謝！
