UI設計筆記工具篇:Flow-神器!動態做好Code 就完成!

Laura Lin
AAPD — As A Product Designer
6 min readNov 6, 2017

讓設計師、工程師快速完成 App 動態的神器介紹

今天想分享一個自己覺得蠻好用的小工具: Flow

痛點:

一直以來我都在找能夠快速製作 App 動態效果的工具,身在一間新創公司,動態效果的優先度總是被擺在最後;因為一來工程師修 Bug 都來不及,哪那麼多時間跟你做動畫;二來我幾乎一次同時進行三、四個專案,還花時間開 AE 做動畫,不免有些浪費時間……雖說這是良好用戶體驗中不可或缺的一環,但以我目前工作的緊繃狀態來看,總是先求有再求好、實話說沒辦法花多少心力在這一塊,所以對我來說:

1. 想找一個能簡單、快速做動態效果的軟體

不需要像 AE 那樣功能強大,只要可以用就好了

2. 希望可以由 Sketch 匯入

之前用過 Framer 和 Principle,覺得都很優異,Framer 可以由 Sketch 匯入,可以做出很多動態,個人蠻喜歡,可是要寫扣;Principle 隨說是罐頭動畫但其實已經蠻好用,不用寫扣、設計師可以輕易上手

3. 輸出工程師可用的 Code

這就不多見了,只有看過 Airbnb 的 Lottie 有這樣的功能,但還是要用 AE (囧

Flow 快速介紹:

Flow 可以幫你解決:

  1. 真正把設計師做的動態轉成 Code
  2. 用 Sketch 匯入、快速輕巧
  3. 順便幫你輸出影片

Flow(Beta) 的限制:

  1. Code 目前只能供 iOS 使用
  2. 看起來一次最多只能做兩個畫面的轉場,圖層結構要一致

在這邊下載(可以抖內一下聊表心意)

https://download.createwithflow.com/

大概介紹一下使用步驟:

選擇新專案

把 Sketch 匯入,注意圖層結構必需相同(如果按了 Cancel 之後要匯入檔案的話,直接把 Sketch 檔拖進去就好了)

以官方展示的檔案為例,在左邊的格子中放入開始畫面,在右邊的格子中放入觸發後的畫面;小視窗向下滑動可以看 Sketch 中其他分頁的內容

選好後一開始會是無任何動態效果的兩個畫面,在 0.5 秒時跳轉;可以自己點選物件調整數值(如下圖右邊),在 Timeline 中可以調整時間長度,會用剪輯軟體的話就不難上手,因此這裡就不多贅述了

可以直接在 Timeline 上調整淡入淡出

做完後可以輸出成 iOS 可用的 Code,目前好像還不支援 Android;除此之外可以輸出 mp4 影片

輸出之後會得到一個資料夾,因為不懂程式,這邊只稍微讓大家瞇一下

限制:

除了暫不支援 Android 之外,有一個當初我使用公司專案來試作時,卡關很久的問題,就是圖層結構要一致這點,這是官方提供的檔案:

我自己試做時發現就算群組名稱與順序一致、群組裡面的圖層也要一致;我當時的專案無法這樣做,所以只能先把不一致的地方壓成圖片檔,換句話說不一定能使用原本的 Sketch 檔套用在 Flow,必要時可能需要針對單獨頁面另做一個專門的檔案;官方在做這兩個不同頁面轉換前,其實也是把一個大畫面複製、拆分成兩個

不過 Flow 已經在這些動效工具中,是最接近我心目中想要的工具了!我也非常看好他們的後續發展!

今天的示範檔案來自官方的教學文:

官方的 Medium:

--

--