上一頁
買斷式網站案例

免費開始學 C4D，用「支持創作者計畫」解鎖更完整的學習體驗

課程內容與 YouTube 同步公開，零門檻就能開始學。
在網站學習可獲得更好的觀看品質，並下載課程專屬素材檔，練習更完整。
提供「無須付款」與「支持創作者計畫」兩種入口，讓學員按需求選擇。
搭配常見問題與聯絡表單/客服信箱，讓新手少卡關、問題有人接。

預約免費諮詢 看看這個網站
CLIENT

PainnMyGraphic 我的動態圖形

INDUSTRY
  • 教育訓練
  • |
  • 系統教學
客製化版型設計

01

背景與挑戰

Challenge & Solution

將動態圖形與 Cinema 4D 教學內容平台化，讓新手能免費入門、進階者能付費支持並獲得更完整的學習資源。

網站定位清楚：免費課程同步公開，但在站內學習能提供更高品質觀看與素材下載。
講師介紹強調影視後製與電視包裝實務經歷，建立專業背書。
平台以課程頁為核心，提供「課程總覽、單一課程頁、同學回饋、FAQ、聯絡表單」等關鍵節點，支援完整學習旅程。

同時要服務「只想先免費看的人」與「願意付費支持、要更完整資源的人」，必須把入口分流做清楚，流程還要短。

  • 首次訪客要在很短時間理解：免費在哪看、付費支持能多拿到什麼（素材/更好觀看/諮詢）。

  • 課程頁資訊量大（單元多、時數長），需要可掃讀的段落結構（關於課程／你會學到什麼／課程內容）。

  • 購買與會員行為要銜接順：課程加入購物車後，登入/註冊流程不能卡住。

  • 新手常見問題（註冊、試學、進度保存、證書、是否可下載）需要集中回答，減少客服負擔。

  • 需要明確的支援出口（客服信箱/表單/LINE），讓技術問題不會變成流失點。

Solution

打造「免費試學 → 付費支持 → 會員學習」的一站式課程銷售與學習平台

  • 資訊架構重整：主選單以「首頁／關於我們／開始課程／聯絡我們」做第一層導覽，讓使用者直接對應任務（了解品牌、找課、詢問、登入）。

  • 轉換流程縮短（CTA/登入/購買）：

    • 首頁直接提供「加入計畫（US$15）」與「註冊」等明確 CTA，先把路徑收斂。

    • 課程總覽頁提供「類別篩選＋加入購物車」，並在同頁顯示登入/註冊入口，減少跳頁。

  • 功能整合到同一站（你可寫進作品集的功能清單）：

    • 課程系統：課程頁（課程資訊/評價/更多）＋單元清單（章節/影片時長）。

    • 電商導購：課程加入購物車、購物車檢視（Review Cart）。

    • 會員系統：會員登入/註冊、課程控制台/繼續上課/帳號設定。

    • 支援系統：FAQ 集中回答＋聯絡表單＋客服信箱/電話/LINE。

  • 行動裝置（RWD）優化方向：站內有行動版「Toggle Menu（漢堡選單）」與簡化導覽節奏，行動端以「分段短句＋明確 CTA」優先。

8WK

開發週期

100%

RWD 適配

設計系統

內容屬於「3D/動態圖形」偏技術導向，所以用高對比黑白作為閱讀基底，並以亮黃色做品牌高亮色，讓 CTA 與重點資訊更醒目、辨識度更高。
課程頁資訊量大，所以字體選擇偏中性、易讀的無襯線（標題/內文一致系統），搭配清楚的層級與留白，讓使用者能快速掃讀「你會學到什麼」與章節清單。
需要鼓勵行動（註冊/加入購物車/加入計畫），所以按鈕用「亮黃底」承接主 CTA，hover 轉成更柔和的淺黃，維持一致的互動語言。

Typography

Aa

Poppins (Headings)

Aa

‘Open Sans’ (Body)

主要顏色

背景顏色

次要顏色

文字顏色

02

介面設計

Visual Showcase

  • 首頁節奏：Hero 先講清楚「免費公開＋支持計畫」與主 CTA（加入計畫），接著用講師介紹做背書，再用課程分區（四大課程段落）引導到課程頁，後段放同學回饋與 FAQ 解除疑慮，最後補合作夥伴與再次導流到課程/官網諮詢。

  • 元件語言：

    • 課程頁採「段落式資訊架構」：關於課程 → 核心價值 → 你會學到什麼 → 課程內容（章節清單），讓高資訊量仍可掃讀。

    • 課程總覽以「分類篩選＋加入購物車」作為主要操作元件，直接把轉換行為放在列表層。

    • CTA 色彩策略：以亮黃作為按鈕背景（主色），hover 轉淺黃（次色），在視覺上非常「像按鈕」，降低猶豫成本。

  • 行動版策略：站內有「Toggle Menu」顯示行動導覽模式，適合把重要入口（開始課程/聯絡/登入）固定在最短路徑，避免使用者在小螢幕迷路。

  • 為什麼這樣設計：這個站的核心不是「看漂亮」，而是要讓學員快速知道：我現在能不能免費開始？如果支持計畫，我會多拿到什麼？問題要去哪問？因此節奏先收斂入口，再補信任與FAQ，最後把行動（註冊/加入購物車/聯絡）做成可見、可點、可完成。

電腦版首頁

手機版首頁

03

合作流程

Our Workflow

Step 01
需求訪談與架構規劃
需求訪談與規劃
透過 60–90 分鐘線上會議釐清品牌定位、課程產品與未來擴充方向，並協助整理初步網站架構（Sitemap）。
Step 02
頁面設計與功能建置
視覺設計與開發
依照確認後的線框圖與架構，完成首頁、主題頁、課程頁與名單收集頁，並串接必要的外掛與追蹤碼。
Step 03
測試、上線與操作教學
測試上線與教學
上線前進行跨裝置測試，確認表單、追蹤與速度表現，最後安排教學，確保客戶可以自行更新內容。

「把課程、會員入口、FAQ、聯絡方式都整理在同一站後，整體學習體驗順很多，也更像一個能長期經營的平台。」

Painn

PainnMyGraphic 我的動態圖形 創辦人

準備好升級您的品牌網站了嗎？

預約免費諮詢 查看更多案例