<Image src="https://res.cloudinary.com/dfa4rxtnc/image/upload/v1750397092/Use%20Case/Screenshot_2025-06-20_at_1.24.47_PM_gjdrl1.png" caption="INFCON 2024 主視覺與 Inflearn Banners 李炳基" />

## INFCON 2024 主視覺與 Inflearn Banners  
**李炳基（Inflab 產品設計師）**

Inflab 每年都會舉辦 **INFCON**，這是一場線下 IT 專業人士齊聚一堂的年度盛會。2024 年，我們跳脫以往只聚焦開發者的限制，擴大涵蓋設計、PM、PO 等角色，完整呈現產品開發全貌，並大幅擴編規模，預計參與人數超過 2,000 人。在這樣的背景下，我接下了活動主視覺設計與氛圍定調的挑戰。**核心主題：擴張與擴散**。

為了詮釋這些抽象概念，我們嘗試了「無限宇宙」、「黑洞與蟲洞」、「快速擴張的能量」等視覺隱喻。很快地我們發現，靜態圖像無法傳達所需的張力，必須透過動態、可互動的設計。傳統 After Effects + Lottie 外掛的流程太慢又不易反覆調整，於是我們改用 **Phase**，快速又靈活。

結果 Phase 表現得非常出色。即使活動網頁瞬間湧入大量流量，JSON 輸出的動畫依然穩定順暢，畫面細節完美呈現。向量圖形也能無損放大，完全對應現場大型 LED 顯示。

事實上，我早在 Phase 韓國上線時就參加過 **Phase Challenge**（連結），親自驗證過它的實用性。從那之後，只要需要在 Inflearn 登入頁面表達抽象概念，我幾乎都用 Phase 來快速產出。

---


<Image src="https://res.cloudinary.com/dfa4rxtnc/image/upload/v1750397497/Use%20Case/Screenshot_2025-06-20_at_1.31.32_PM_gs06ki.png" caption="Inflearn App - 植物培養導覽 朴俞里" />

## Inflearn App - 植物培養導覽  
**朴俞里（Inflab 產品設計師）**

我們在 Inflearn App 中推出了「植物培養」系統，透過每日學習來養成習慣並提高留存率。使用者在學習的過程中照顧植物，最終還能收穫果實作為獎勵。為了讓這個新功能更容易理解並提升參與感，我們需要一支簡單直觀的導覽動畫。

最關鍵的目標是推動 Widget 安裝，但 Android 和 iOS 的安裝流程差異大，必須為不同平台設計專屬流程。若用文字解釋太冗長，於是我們用 **Phase**，在短短 7～8 秒內把核心概念講清楚。輕量的 .json 格式也讓載入快速、動畫在實際運行中依舊流暢。

---

<Image src="https://res.cloudinary.com/dfa4rxtnc/image/upload/v1750397689/Use%20Case/Screenshot_2025-06-20_at_1.34.42_PM_msnnt7.png" caption="Rallit - My Log 功能導覽 金寶景" />

## Rallit - My Log 功能導覽  
**金寶景（Inflab 產品設計師）**

**Rallit**（連結）是一個以職涯為核心的招募平台，幫助使用者透過經驗、技能、薪資數據獲得專屬的職涯洞察，找到更好的機會，同時也協助企業找到理想人才。

「My Log」功能讓使用者記錄職涯軌跡，並透過薪資變化圖表可視化，幫助理解和管理自己的職涯進程。然而，這個功能藏得較深，且一進去就直接跳出登入視窗，對新手來說體驗不佳。因此，我們利用 **Phase** 製作導覽動畫，好好介紹這個功能並提升使用意願。

---

## 🚀 為什麼選擇 Phase

#### 我們最愛 Phase 的幾個原因：

- **動畫能有效溝通**  
  當需要解釋抽象概念或引導使用者時，動畫遠比靜態文字與圖片有說服力。一個流暢的動態畫面就能完整講好整個故事。

- **操作直覺、功能強大**  
  Phase 的關鍵幀系統比 After Effects 輕巧、易上手。只要熟悉 Figma 原型的人都能快速掌握並直接產出可用版本。檔案複製也很方便，對於需要同時製作淺色／深色版特別實用。

- **高效輸出格式**  
  .json（Lottie）、.lottie、.dot 已經是微互動與網頁動畫的標準格式，對專注於網頁效能的數位產品設計師來說，Lottie 幾乎是首選。

- **對韓國用戶友善**  
  Phase 韓國團隊提供即時在地支援與完整的韓文教學資源，讓學習與導入毫無障礙。在國際化的同時，韓國社群也發展得很活躍，使用者之間交流順暢。

inflearn_logo.svg

Inflearn 如何善用 Phase 加速設計與動畫工作流程

Pitcrew 開發了 **Pillo**，這是一款專為經常忘記吃藥或覺得管理用藥麻煩的人設計的用藥提醒 App。我們幫助需要同時服用多種藥物的使用者，養成穩定的用藥習慣。目前，我們的主要市場聚焦在北美地區。

2025 年，我們訂立了新的使命：「讓慢性病用藥管理既簡單又有趣，達到最佳療效。」在思考如何將遊戲化、角色設計與動態元素融入使用者體驗的過程中，我們剛好遇見了 **Phase**。我們不只是要解決功能性問題，更希望創造愉悅的互動體驗，加深品牌好感。


## 1) 新手引導 - 鬧鐘設定動畫

<Image src="https://res.cloudinary.com/dfa4rxtnc/image/upload/v1750398120/Use%20Case/pillo-loading-sm_spgyzk.gif" caption="新手引導 - 鬧鐘設定動畫" />

**Remix 連結**  
[**https://app.phase.com/preview/fe6957fc-e525-44f3-ac1b-a66ec783b7ee**](https://app.phase.com/preview/fe6957fc-e525-44f3-ac1b-a66ec783b7ee)

這支鬧鐘設定動畫就是我們的新嘗試。以前，我們只使用單純的時鐘動畫，沒有充分發揮角色的潛力。這次，我們讓 **Pillo 角色** 親自調整時針與分針，給予使用者清楚的視覺回饋，確保鬧鐘時間已成功記錄。

這段動畫會根據使用者選擇的時間動態顯示，自然傳達設定已正確儲存。不只是單調的載入畫面，而是讓角色「準備鬧鐘」，增強了使用者對功能的信任，也拉近了品牌情感連結。成果也很顯著：新用戶的流失率大幅降低，初次使用體驗也更正向。


## 2) 愛心禮物盒動畫

<Image src="https://res.cloudinary.com/dfa4rxtnc/image/upload/v1750398110/Use%20Case/Gift_wvg3xv.gif" caption="愛心禮物盒動畫" />

**Remix 連結**  
[**https://app.phase.com/preview/fa93228a-2d3d-4977-bceb-9e96890ff0ce**](https://app.phase.com/preview/fa93228a-2d3d-4977-bceb-9e96890ff0ce)

我們也用 Phase 製作了愛心獎勵動畫，讓使用者打開禮物盒時有驚喜感。Phase 讓我們能快速完成輕量、直覺的開盒動畫與愛心飛出的效果，既強化了獎勵體驗，也維持了開發效率。

Phase 最令我們驚豔的地方？就是它的 **極速與輕量**！身為唯一負責產品體驗的設計師，我必須盡量減少繁瑣流程，把時間花在真正有影響力的設計上。過去用 After Effects 做簡單動畫，感覺太重、太慢；但 Phase 採用向量技術，既輕巧又流暢，非常適合行動裝置上的互動動畫。而且操作介面直覺，懂一點動態設計的設計師就能立即上手，幾乎不需要學習曲線。

Phase 完美支援了我們「讓用藥管理變得簡單又愉快」的願景。我們很期待在更多使用者接觸點擴大 Phase 的應用。


📱 **Pillo App**：  
[https://play.google.com/store/apps/details?id=xyz.rtrvr.pillo&hl=en&gl=US&referrer=inviter%3Dpillo_care](https://play.google.com/store/apps/details?id=xyz.rtrvr.pillo&hl=en&gl=US&referrer=inviter%3Dpillo_care)

🌐 **Pillo 官網**：  
[https://www.angrypillbox.com/](https://www.angrypillbox.com/)


small_image 1 (1).png

thumbnail_image 1 (1).png

image 1 (1).png

AngryPillbox 如何運用 Phase 打造高水準的動態設計系統

Phase 對 UI/UX 設計師來說非常直覺，和其他複雜的動畫工具不同。真的十分容易上手!

Bowlon Wang

medium_IMG_6650 (1).jpg

small_IMG_6650 (1).jpg

thumbnail_IMG_6650 (1).jpg

IMG_6650 (1).jpg

動畫師 @ PoMotion

Phase的簡單介面讓設計師能夠快速、輕鬆地創建生動的動畫，提升設計的整體視覺吸引力！

Eva Cheng

large_Eva-min.jpg

medium_Eva-min.jpg

small_Eva-min.jpg

thumbnail_Eva-min.jpg

Eva-min.jpg

Freelancer

做UX時一直都覺得小動畫很煩心，自己做費時，市場上的又不容易滿意。能夠接觸到phase是令人振奮人心的期待，尤其是熟悉的操作介面及簡單容易的製作流程。

Alex KW Chen

thumbnail_Alex Chen Profile Pic.jpeg

Alex Chen Profile Pic.jpeg

UI/UX 設計師 @ TSMC

看看誰在使用 Phase

案例研究

Inflearn 如何善用 Phase 加速設計與動畫工作流程

AngryPillbox 如何運用 Phase 打造高水準的動態設計系統

看看其他人怎麼說

Bowlon Wang

開始你的第一個原型

產品

原型設計

動畫

共同合作

程式碼匯出

Figma 外掛

學習中心

教學影片

案例研究

資源

關於

人才招募

社群

版本說明

常見問題

法務相關

隱私政策

服務條款