來點小巧思,讓 Figma Prototype 大躍進 | Proto Uncle #EP2

Proto Uncle,給設計師、產品經理學習製作 UI Prototype 的系列分享活動。透過 Figma + Framer,將腦中所構思的想法、互動操作具體呈現出來。每週的 Proto Uncle 包含有實作練習、小撇步、以及額外讀物,期待暑假過後,完成系列分享的你將會對 Prototyping 更熟稔 🍺 。

💡 Intro

回顧

嗨各位朋友,第一週的內容還適應嗎? 如果對於 Smart Animate 還不是很熟悉的話,可以先左轉把 EP1 的內容稍微複習後再繼續閱讀。EP1 收到一位讀者的作品,安摳覺得挺棒的,希望大家在每次分享有所收穫,做出自己也會開心的設計:



今日目標: 三種不同類型的 Interaction

首先各位讀者先從這裡複製這次的範例設計稿到自己的 Draft Folder,這週會延續 Smart Animate 的使用,並增加下列的互動行為,結束後各位讀者應該能製作更完整的流程,同時也更清楚一些實作上的限制:

  1. Loading and gif: 頁面之間稍作等待,並播放一些等待的動畫
  2. Overlay & Modal: 側邊欄、彈出視窗形式的互動原型
  3. Drag: 除了點擊外,也來看看不同類型的操作行為

📚 Lesson

Loading and gif: 製造等待的體驗

在使用者操作某些流程時,時常會需要一個 loading 畫面來告訴使用者「嘿,這裡需要你耐心稍待一下,我們正在更新資源...」,在 Figma Prototype 裡可以透過新增一個 "After Delay" 行為來製作類似概念的 loading 效果。

after-delay

從左側切換分頁到 #1-1 loading smart: animate animate 並切換右側設定列到 Prototype tab 開始製作流程。你會看到 canvas 上有四個 Frame,首先我們先把四個畫面從左到右一個連上旁邊一個,接著按下右上角的播放三角形查看第一個版本的樣子,基本上手指點幾下會把整個流程走完。

聰明如你大概知道接下來應該怎麼做了吧! loading 就是要忽略使用者主動 tap, click 的行為,轉而透過等待的方式讓流程一頁頁跳轉,首先點選 Frame1 在 Interaction 裡面把點擊行為改成 "After Delay",並在下面設定 Animation 為 "Smart Animate",你可以調整需要等待的時間,經過等待時間後,才會觸發 Smart Animate 的行為。

after-delay-setting

如果你希望這個轉場效果馬上進行,可以把等待的時間改為 1ms 😎 接著再麻煩你把四個 Frame 都做相對應的更新,讓使用者可以 "等過" 前三個 Frame 的動畫,而這頁面之間的形變,都交給 Figma 的 Smart Animate 來自動處理,毋須擔心!

雖然 Smart Animate 可以處理元件形變,但他仍對複雜元件的動畫表現還不是很好。以下為例,同時要做到來回反覆旋轉又有伸縮的情況,我們就需要 gif 的幫忙,不然光在 Figma 裡面拉 Frame 做這些就累死了 😅 你可以直接在 Frame 上放一個製作好的 gif 檔案,再像上面的練習一樣加入 "After Delay" 的行為,讓頁面在特定秒數後切到下一張,這可是省時又聰明的小撇步!

Overlay and Modal: 那些網路新聞上惱人的蓋板廣告

你有多少次在看新聞時被蓋版廣告惹怒呢? 這種 彈出式的視窗互動 稱作 Modal Overlay。通常使用對話式的介面,在於凸顯該內容的重要性,並給予使用者相對應的操作選項,在不離開當前頁面讓使用者專注完成某些行為 (推播通知確認、註冊登入表單等等...蓋版廣告要排除在外 😅) overlay

回到練習設計稿從左側切換分頁到 #2 overlay animate,這次來練習一個簡單的 Overlay 設計:

  1. 開啟 Prototype tab,從 Main Frame 連一條 Interaction 到 Bottom Sheet Frame
  2. 設定 Tap Interaction > Open Overlay
  3. Animation 設定改為 Move in,選擇彈出視窗滑進畫面的方式
  4. 點視窗右上角播放 icon 看看 Prototype Preview 結果

簡單的開啟 overlay 效果完成了!這裡你需要留意重要的一點,連接到的 Frame 尺寸只需要恰恰為 Overlay UI 大小就好 (也就是不用等於完整手機尺寸) 另外當你設定 Overlay 時,可以調整下面參數:

  1. Position: 設定 Overlay Frame 出現的相對位置,如果不滿意系統提供的幾個方位,你也可以調成 "Manual" 自由擺放
  2. Close when clicking outside: 點擊 Overlay 之外的範圍關閉 Overlay
  3. Add background behind overlay: Overlay 之外的部分會上淡淡的背景色,這層背景色會蓋在前一個 Frame 上方。 overlay-setting

除了 Click Overlay 之外的範圍關閉,我們也可以綁定按鍵行為來操作 Prototype! 先點到 Bottom Sheet 上的 close icon,設定第一個 Interaction,行為選擇 Key/Gamepad (Gamepad 指 Xbox 搖桿等等的遊戲手把,見範例),綁定案件 Esc,再按下 Interaction 旁邊的加號新增第二個 Interaction,這次使用 onTap / Close Overlay。 close-overlay

恭喜你完成簡單的 overlay prototype 了!這個 prototype 一共有三個關閉的方式,你發現了嗎 😛 打鐵趁熱,延續這個話題安摳留給你多重 overlay 的互動,到 #2-3 modal animate with swap 分頁探索看看吧!

Drag

到目前為止都還好吧,接下來是最後一個練習 Section 了!這次我們來看 Drag (拖曳),長按後將物件像任意方向拖行的行為。下面的範例在 #3 drag & swipe 分頁裡,讓使用者將至於中間的卡片向右下滑動,並套用 Smart Animate 讓 Frame 轉換時卡片本身變成半透明,同時背景轉為綠色: drag-example

在 prototype preview 玩玩看,你會發現 Smart Animate 不只照顧到形變過程,它同時也檢查要操作的元件(卡片)在前後兩個 Frame 的位置差異,只有當你的操作是 拖曳向右下 時才會觸發轉場行為:

另外一種 dragging 行為會用在 pagination & carousel (左右滑動切換頁面的設計,通常內容比容器還寬或高),在 #3-2 drag overflow content 範例,各位如果將過長的物件放進比較窄的 Frame 裡,多餘的部分是會被裁切掉的,想要看到全部內容可以到 design tab 反選 Clip Content,這樣你會更清楚狀況。一樣將內容物綁上 on Drag 的行為,連到另外一個 Frame,打開 prototype preview 看看。

呼~總算是介紹到一個段落了,設計稿裡有上面三個 Section 沒有說明到的小彩蛋們,各位讀者在走完練習後可以在設計稿裡多看看每個元件在 prototype preview 時的行為,想想為什麼他們會有這些行為,是因為圖層命名還是有更多不同的 Interactions 設定呢?不妨花點時間自己研究看看吧 😁

回家作業

ep2-homework

這兩週練習了多類型的 Prototype,並使用了不同的手勢行為來做操作,試著結合多種組合,建立出流程較完整的作品,以下面為例,安摳試著做做看 Twitter 的操作流程,其中就用了 overlay 側邊欄、等待畫面、左右 drag & swipe 的互動:

📌 Tips for you

更優雅面對 Smart Animate

  1. 增加 duration 的數值 (ex: 把原本 hover show overlay 事件的時間從 300ms 改為 3000ms),透過延長動畫的時間來確認行為是否如你所願
  2. Matching layers highlight: 掌握身處不同 Frame 卻有相同名稱元件的位置和狀況,通常在 Dragging prototype 時要查看被畫面儕切掉的內容時會用到:

    1. 從右側工具列選擇 Prototype tab
    2. Hover 過任何在 canvas 上的物件
    3. Figma 會自動幫你把同名字的物件標上註記

新增多個 Interaction

  1. 你可以在一個元件上新增多個 Interaction 事件,譬如一張卡片上綁著一個 click 行為加上一個 dragging 行為,不過要注意的是,After delay 只能設定一次。

🍜 Today's Special

Joey Banks 是 Figma 社群的推廣者,從個人的 Profile 進去後可以看到 Joey 各式各樣的作品,有簡單的 interface animation、或是面向團隊工作流程的分享:

  1. 圖文並茂把設計批判流程說明清楚 (事前準備 / 設定目標 / 蒐集意見反饋),並提出多種模型供人套用的 Remote design critiques
  2. Pair Designing 裡分享 Remote co-editing 時能做的引導與溝通技巧、也提出實際例子說明 Pair Design 與浪費資源之間的差異。

如果你好奇其他美國設計團隊的 remote design culture, Figma usage & tips,那你肯定會對 Joey 分享的有所興趣,下班後給自己一點時間尋寶,也許隔天你跟設計團隊就能有更多話題了呢!

好了,以上就是本次 Proto Uncle EP2 的分享,各位腦袋裡有開始浮現出更多有趣、想嘗試的設計了嗎?趕快把這些很酷的想法實際做出來吧,也歡迎把這些結果送給安摳來看看 🤟