Framer Flows 初體驗

Framer 不適合製作頁面流程 (暫時)
建議大家不要拿 Framer 來製作頁面流程的原型。因為有比 Framer 更方便的工具,像是 Prott、Flinto 以及 Invision 等等。

還記得在開始寫 Framer 教學時,曾寫下上述的建言,而那時不知為何在句子後面加上了 ”暫時” 兩個字,也許隱約察覺到 Framer 團隊遲早會針對頁面流程,提出更好的解決方案。而就在前一陣子,他們推出了 Framer Flows !

問題點

在了解 Framer Flows 有多方便之前,先講一下過去做頁面切換到底有痛苦。以下是我歸納出幾個比較惱人的問題:

  1. 因為 Framer 會抓 Sketch Artboard 的絕對座標(參考:Framer Part 2),都必須多寫一行程式重新歸位到正確地進入位置。
  2. 然後寫一行進入畫面的動畫程式。
  3. 當新畫面進入後,還必須把後面的頁面 visible 關掉,不然該頁面上的 Event 還是會被觸發。

寫了這麼多的程式,只是完成了一個頁面的切換… 後續還有其他返回鍵等等的行為要加上去… 超級麻煩。

 

Framer Flow

Framer Flow 最厲害的地方就是,只需要寫上非常簡短的程式,就可以做出常看到的頁面切換效果,以下就是要分享給大家的範例。

 

從範例影片,可以發現左邊程式非常簡短,但右邊的頁面切換卻還是非常完整,現在就讓我們來看一下 Framer Flow 如何使用吧!

Sketch to framer flows
Sketch Files

 

首先,先仔細看一下這次範例的 Sketch 檔案規劃,注意到最左邊的頁面是 musicPlayerPage ,所以匯入 Framer 時,它將會是我們所看到的第一個頁面。但是,理論上應該要讓 albumPage 作為使用者第一個看到的頁面,方法有兩個:1)在 Sketch 裡面調換這兩個畫面的位置、2)透過 Framer Flow 來做。

sketch = Framer.Importer.load(“imported/musicPlayer@1x”)
flow = new FlowComponent
flow.showNext(sketch.albumPage)

 

我們在匯入 Sketch 檔的程式碼下,加入一個 FlowComponent 的物件,而這個物件我們就叫 flow。透過 FlowComponet 裡面的函式 showNext(),就可直接指定希望顯示的下個頁面,在此範例則是 albumPage。

一般來說,在使用 showNext() 的時候,它會自動加入由左到右頁面切換的效果,但如果是整個 flow 裡面的第一頁,系統會當成預設頁面,這就是為什麼開啟原型,就會看到 albumPage 直接在畫面上,而不是 musicPlayerPage。

sketch.playPanel.onTap ->
flow.showOverlayBottom(sketch.musicPlayerPage)

 

接下就是把其他頁面串接起來,當點擊下方操控介面時,musicPlayerPage 能夠從底下升上來,這邊就可以使用 showOverlayBottom () 這個函式

sketch.downBtn.onTap ->
flow.showPrevious()

 

升上來後,我們希望能夠在 albumPage 與 musicPlayerPage 兩頁之間自由切換,這時我們只要在 musicPlayerPage 那頁的左上角的 downBtn 加上點擊事件,並執行 showPrevious() ,就會自動產生剛剛進入效果的相反效果,也就是說,從下面上來的頁面,會被推回到下面去。

sketch.menuButton.onTap ->
flow.showOverlayLeft(sketch.menu)

sketch.album1.onTap ->
flow.showNext(sketch.detailPage)

sketch.backBtn.onTap ->
flow.showPrevious()

 

剩下的程式也是重複在做一樣的事情,唯一比較特別 flow.showOverlayLeft(sketch.menu),這其實是在模擬 Android Drawer 的行為,在 albumPage 底下其實有個 menu 的圖層被隱藏起來,而我是透過 FlowComponet 把它開啟的。

FlowComponet 還有其他像是 header 與 footer 的運用,你可以透過這兩個函式把想要的圖層固定住,就可以很快速做出像是 Tab 或是 Naviation bar 的元件行為。

Framer Project 檔案:https://framer.cloud/B1X5RiPVe/

 

以上就是 Framer Flow 一些簡單的介紹,如果有相關問題,隨時歡迎大家到 Framer Taiwan 詢問喔:)

 

衍伸閱讀

 

本文章已獲得作者 Chris Chen 授權,原文:FRAMER FLOW 初體驗

 

 

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

訂閱設計大舌頭

隨時關注第一手 UX、UI、科技、設計新知

Facebook
LinkedIn
Telegram
Twitter