CMoney 線上課程平台設計

Project Background

專案背景

線上課程的平台的設計重點分成「購買前的銷售決策」與「購買後的學習體驗」。

使用者在購買前需要理解課程價值、價格與內容，要有地方可以讓用戶提前發問；購買後則需要方便觀看影片、切換單元、查看講義並進行課後討論。

因此這次設計的核心，是將課程頁從單一內容頁，整理成一套能支援不同使用者狀態、不同裝置與多種課程情境的平台體驗。

Design Goal

設計目標

我將設計目標整理為三個方向：

1. 讓未購買使用者能快速理解課程價值、價格方案與購買入口
2. 讓已購買使用者能順利觀看影片、切換單元、查看講義並參與討論
3. 建立一套可延展的頁面狀態與互動規格，支援免費試看、無權限、未開放、下架與附加課程等複雜情境。

透過這三個目標，課程頁不再只是單一內容頁，而是能依照使用者狀態，提供清楚下一步行動的學習平台。

User Flow

課程頁不同的體驗路徑

在開始設計介面前，我先整理使用者進入課程頁後可能遇到的不同狀態。課程頁不只會被未購買使用者瀏覽，也會被已購買學員反覆使用；同時，平台還需要處理免費試看、無觀看權限、課程未開放、內容下架與附加課程等情境。

因此我將使用者狀態拆分為「購買前」、「購買後」與「特殊狀態」三個主要路徑，分別定義每種狀態下的資訊重點與下一步行動。

在購買前，頁面需要降低理解成本，讓使用者快速掌握課程內容與價格；購買後，頁面則需要降低操作成本，讓學員能快速回到觀看與學習；特殊狀態則需要降低不確定感，讓使用者知道為什麼不能觀看，以及接下來可以怎麼做。

Before Purchase

購買前

在購買前，頁面需要協助使用者快速判斷課程是否符合需求，因此我將課程介紹影片、講師資訊、課程內容、價格方案與購買 CTA 放在較高優先級，讓使用者能在短時間內理解課程價值並完成決策。

最重要的購買引導在用戶往下滾動時，會持續固定在頁面底部，讓用戶隨時都可以點擊購買按鈕。

針對不同的購買狀態，盤點出所有不同的情境。

After Purchase

購買後

當使用者完成購買後，頁面的核心任務會從「促成購買」轉變為「降低學習成本」。

已購買使用者進入課程頁時，最重要的是能快速開始觀看影片、切換課程單元、查看講義，並在課後進入討論區提問或回覆。因此我將畫面重心從價格與購買 CTA，轉移到播放器、單元列表與學習輔助內容。

在 Desktop 版型中，播放器與單元列表能同時呈現，讓使用者一邊觀看、一邊確認課程進度；在 Tablet 與 Mobile 上，則優先保留影片觀看與單元切換，確保不同裝置下都能順利完成學習流程。

另外在下方課程討論區，由於用戶主要會以提出自己的問題為主，因此將發問的功能放在最上方，也加強其比重，讓用戶能快速提出問題。

Player

播放器元件設計

影片播放器是線上課程平台中使用頻率最高的元件，因此除了基本播放畫面，我也針對觀看過程中可能遇到的操作狀態進行整理。

播放器需要支援播放、暫停、進度拖曳、音量調整、字幕切換、倍速播放、Hover、Pressed、Loading 等狀態。這些細節如果沒有被明確定義，容易在實作時產生不一致，也會影響使用者觀看課程時的操作體驗。

因此我將播放器拆成可被工程實作的 UI Spec，定義控制列顯示方式、按鈕互動狀態、進度條回饋、字幕位置與不同螢幕尺寸下的操作區配置，讓播放器能在 Desktop、Tablet、Mobile 上維持一致且清楚的觀看體驗。

Discussion

課程討論區設計

線上課程的學習體驗不只發生在影片觀看當下，使用者在觀看後也會需要提問、補充資訊，或查看老師與其他學員的回覆。

因此我在購買後頁面中加入課程討論區，讓學員能在課程頁內直接提出問題、回覆留言，並透過圖片輔助說明問題內容。

討論區設計除了基本留言功能，也需要考慮老師回覆、使用者回覆、多層回覆、圖片上傳、檢舉、隱藏留言與空狀態等情境，讓課程互動能以一致規則運作，避免每個課程都產生不同的討論體驗。

RWD Design

多裝置響應式設計

線上課程平台會被使用者在不同裝置中開啟，因此 RWD 設計不只是將桌機版等比例縮小，而是需要依照螢幕尺寸與使用情境重新安排內容順序。

在 Desktop 上，使用者通常有較完整的瀏覽空間，因此我讓影片、課程資訊、價格卡片與單元列表能並排呈現，幫助使用者快速掌握完整資訊。

到了 Mobile，畫面改為單欄式閱讀，優先呈現影片、課程標題、價格與主要 CTA，讓使用者在較小螢幕中仍能清楚完成觀看、購買或切換單元。

我在 RWD 設計中優先保留使用者當下最需要的行動：購買前是理解課程與完成購買，購買後則是開始觀看與切換單元。不同裝置的版型變化，都是圍繞這個優先順序重新排列。

Outcome & Reflection

成果與反思

這次設計將 CMoney 線上課程頁從單一內容展示頁，整理成一套能支援購買前決策、購買後學習、課後討論與多種權限狀態的平台體驗。

透過購買前與購買後的資訊架構拆分，使用者能在不同階段快速找到當下最重要的行動：未購買時理解課程價值並完成購買，已購買後則能順利觀看影片、切換單元、查看講義與參與討論。

同時，我也補齊播放器、討論區、RWD、權限狀態與 UI Spec，讓設計不只停留在畫面呈現，而是能被工程實作、被營運套用，並支援後續更多課程內容擴充。

這個專案讓我更深刻理解，平台型產品的設計重點不只在主要流程，而是要把大量邊界狀態整理成使用者能理解、團隊能執行的規則。好的課程體驗不只是讓影片可以被觀看，而是讓使用者在每個狀態下，都清楚知道自己能做什麼，以及下一步該去哪裡。

Key Takeaways