UI設計筆記工具篇:Flow-神器!動態做好Code 就完成!
讓設計師、工程師快速完成 App 動態的神器介紹
今天想分享一個自己覺得蠻好用的小工具: Flow
痛點:
一直以來我都在找能夠快速製作 App 動態效果的工具,身在一間新創公司,動態效果的優先度總是被擺在最後;因為一來工程師修 Bug 都來不及,哪那麼多時間跟你做動畫;二來我幾乎一次同時進行三、四個專案,還花時間開 AE 做動畫,不免有些浪費時間……雖說這是良好用戶體驗中不可或缺的一環,但以我目前工作的緊繃狀態來看,總是先求有再求好、實話說沒辦法花多少心力在這一塊,所以對我來說:
1. 想找一個能簡單、快速做動態效果的軟體
不需要像 AE 那樣功能強大,只要可以用就好了
2. 希望可以由 Sketch 匯入
之前用過 Framer 和 Principle,覺得都很優異,Framer 可以由 Sketch 匯入,可以做出很多動態,個人蠻喜歡,可是要寫扣;Principle 隨說是罐頭動畫但其實已經蠻好用,不用寫扣、設計師可以輕易上手
3. 輸出工程師可用的 Code
這就不多見了,只有看過 Airbnb 的 Lottie 有這樣的功能,但還是要用 AE (囧
Flow 快速介紹:
Flow 可以幫你解決:
- 真正把設計師做的動態轉成 Code
- 用 Sketch 匯入、快速輕巧
- 順便幫你輸出影片
Flow(Beta) 的限制:
- Code 目前只能供 iOS 使用
- 看起來一次最多只能做兩個畫面的轉場,圖層結構要一致
在這邊下載(可以抖內一下聊表心意)
https://download.createwithflow.com/
大概介紹一下使用步驟:
選擇新專案
把 Sketch 匯入,注意圖層結構必需相同(如果按了 Cancel 之後要匯入檔案的話,直接把 Sketch 檔拖進去就好了)
以官方展示的檔案為例,在左邊的格子中放入開始畫面,在右邊的格子中放入觸發後的畫面;小視窗向下滑動可以看 Sketch 中其他分頁的內容
選好後一開始會是無任何動態效果的兩個畫面,在 0.5 秒時跳轉;可以自己點選物件調整數值(如下圖右邊),在 Timeline 中可以調整時間長度,會用剪輯軟體的話就不難上手,因此這裡就不多贅述了
可以直接在 Timeline 上調整淡入淡出
做完後可以輸出成 iOS 可用的 Code,目前好像還不支援 Android;除此之外可以輸出 mp4 影片
輸出之後會得到一個資料夾,因為不懂程式,這邊只稍微讓大家瞇一下
限制:
除了暫不支援 Android 之外,有一個當初我使用公司專案來試作時,卡關很久的問題,就是圖層結構要一致這點,這是官方提供的檔案:
我自己試做時發現就算群組名稱與順序一致、群組裡面的圖層也要一致;我當時的專案無法這樣做,所以只能先把不一致的地方壓成圖片檔,換句話說不一定能使用原本的 Sketch 檔套用在 Flow,必要時可能需要針對單獨頁面另做一個專門的檔案;官方在做這兩個不同頁面轉換前,其實也是把一個大畫面複製、拆分成兩個
不過 Flow 已經在這些動效工具中,是最接近我心目中想要的工具了!我也非常看好他們的後續發展!
今天的示範檔案來自官方的教學文:
官方的 Medium: