買斷式網站案例

夢想到現實：室內設計教學線上課程｜SketchUp 繪圖・證照考試

整合室內設計繪圖、證照考照與實務課程，讓你從零開始一路學到能用。
課程總覽用卡片式列表呈現，快速比較課程、時數與價格，直接加入購物車/報名。
註冊後以學員控制台承接登入學習，並提供信箱驗證機制，讓帳號權限與學習流程更一致。
搭配直播與內容文章持續導流，把官網做成可長期經營的招生入口。

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

CLIENT

魔力達設計學苑

INDUSTRY

室內設計
|
職涯輔導

客製化版型設計

背景與挑戰

Challenge & Solution

魔力達以「室內設計學習者」為核心受眾，提供從入門到證照、再到 AI 實作的線上教學平台。

網站要同時承接品牌故事、課程銷售與學員學習，不能只是形象頁而已。
課程涵蓋 SketchUp/AI 實戰、室內設計乙級考照、室內裝修工程管理等不同需求族群，必須讓使用者快速選到適合的課。
講師端也需要一套可長期更新內容、可支援學員提問的教學機制，把「買課」延伸成「有人帶你學」。

把「內容很深、課程很多、族群很廣」的室內設計教學，做成新手也能一眼看懂、三步完成註冊與購買。

選課門檻高：需要在同一頁就讓人比較課程（價格/時數/分類/導師），避免看半天還是不知道從哪開始。
轉換要順：使用者要能從課程頁直接加入購物車/報名，並快速完成註冊與登入學習。
學習服務要落地：課程要能重複觀看、隨更新調整，並提供群組提問與遠端協助，降低退費與抱怨風險。
內容導流要可持續：直播/文章需要能回到課程或考照班，形成長期招生漏斗。

Solution

打造「課程銷售 × 學員學習 × 內容導流」的一站式室內設計學苑平台

資訊架構怎麼重整：主選單用「課程總覽／文創商品／媒體採訪／關於魔力達／部落格／直播」把使用者最常找的入口固定在上方，降低迷路成本。
轉換流程怎麼縮短：
- 課程總覽頁直接列出課程卡片（分類、導師、時數、價格），並提供「加入購物車/報名課程」的即時動作。
- 註冊頁提供完整欄位與「信箱驗證開通」提醒，降低帳號開通的斷點。
- 學員入口（Dashboard）提供登入與「立即註冊」引導，並加上避免同時登入多裝置的提示，減少常見登入問題。
哪些功能被整合到同一站：
- 線上課程銷售與內容呈現（課程頁包含課程介紹、章節/你會學到什麼、最終成果與 Q&A）。
- 學習支援機制：課程強調可重複觀看、內容持續更新、群組提問/錄影回覆/遠端協助。
- 電商區（文創 T-shirt）與購物車入口，讓品牌除了課程也能延伸周邊營收。
- （加值）聯盟分潤入口：首頁揭露「鐵粉聯盟」分潤機制，並設有專用頁面（需登入）。

5WK

開發週期

100%

RWD 適配

設計系統

課程內容屬於「專業技能＋考照」路線，所以以高對比深色文字建立閱讀底盤，讓長文與規則型內容更耐讀。
需要清楚引導「加入購物車/報名/登入」，所以用亮橘作為主色點綴在 CTA 與重點資訊上，視線會自然被拉去下一步。
品牌氛圍偏「溫暖實務派」，所以背景採米白/淡暖色系，讓整體更像教室與工作台，而不是冷冰冰的工具站。

Typography

‘Noto Sans TC’ (Headings)

仿宋體 (Body)

主要顏色

背景顏色

次要顏色

文字顏色

介面設計

Visual Showcase

首頁節奏：先用「夢想到現實」的情境文案把受眾抓住 → 直接說清楚學苑涵蓋的學習範圍（繪圖、考照、裝修證照、系統櫃等） → 用導覽列把人帶去「課程總覽」或「登入」 → 下方用大量教學內容與搜尋導引，滿足「先查問題再決定買課」的行為。
元件語言：頂部固定「購物車/搜尋/登入」三件事，搭配課程卡片（評分、時數、導師、價格、加入購物車/報名）
行動版策略（保守描述）：以卡片與短段落為主、重點資訊（價格/按鈕/登入）維持在可視範圍，使用者滑動不需要反覆回頂部找入口。
為什麼這樣設計：目標不是「看起來很漂亮」而已，而是讓新手在第一次進站就能完成兩件事：① 找到適合的課；② 順利完成註冊/登入並開始學。