買斷式網站案例

孩子教養路上不再孤單的賦能學習平台

領域專家直播講座，快速掌握重點與方法。
影音課程可反覆觀看，建立可持續的學習節奏。
精選文章與主題分類，讓你更快找到需要的資源。
需要更深入協助時，提供一對一課程與遠距心理諮商入口。

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

CLIENT

心保Empower（心身健康賦能平台）

INDUSTRY

心理健康
|
醫療科技

客製化版型設計

背景與挑戰

Challenge & Solution

將親子教養與心理健康知識，整合成「可學、可用、可持續」的數位賦能平台。

平台聚焦家長與照顧者的教養需求，內容涵蓋 ADHD、睡眠管理、霸凌、ASD 等主題。
以直播講座與影音課程提供系統化學習，並以精選文章補足日常知識更新。
除內容學習外，也整合量表評測入口與一對一服務，形成完整支持網。
平台屬於 MentalWe 相關服務體系的一部分（舊平台升級至新平台的脈絡在 FAQ 有明確說明）。

內容量大且服務多元，需要同時做到「好找、好買、好上課、好求助」。

需要把直播、影音、文章、組合優惠做清楚分流，避免使用者找不到入口。
轉換流程要短：從瀏覽到加入購物車、結帳、登入/註冊都要直覺。
新舊平台切換時，必須清楚交代帳號是否共用、課程是否轉移與客服管道。
合作方案/兌換券類的購買情境，要能在結帳流程順利完成兌換。

Solution

打造「內容分流清楚＋購物車結帳＋學習與服務入口整合」的賦能平台

資訊架構怎麼重整：用主選單把服務切成四大塊——課程與文章（直播/影音/文章/組合）、一對一服務、量表評測、公益專區，再加商城與企業專區，讓使用者一眼知道該往哪走。
轉換流程怎麼縮短：全站提供「加入購物車」與「帳號登入/註冊」的明確入口，讓使用者在想買/想上課的當下能立刻完成下一步。
哪些功能被整合到同一站：
- 內容學習：直播講座、影音課程、精選文章、組合優惠
- 服務延伸：一對一課程、遠距心理諮商、督導/顧問
- 工具入口：量表評測（連到 apps/sleep 子網域）
- 電商：商城商品列表與價格呈現（營養品/睡眠記錄儀等）
- 兌換機制：課程頁明確引導在結帳頁輸入兌換券號碼
行動裝置（RWD）怎麼優化：以「卡片式課程列表＋短段落標題層級＋醒目的 CTA」降低手機閱讀負擔。

6 WK

開發週期

100%

RWD 適配

設計系統

因為目標族群是家長與照顧者，閱讀情境常在碎片時間，所以整體視覺以「乾淨、穩定、好讀」為優先：大行高＋清楚字級，降低理解成本。
平台同時承載內容與服務轉換，所以用明確的藍色系主色做導引，搭配淺灰底提升留白與舒適度，讓 CTA 不需要用太重的裝飾也能被看見。

Typography

Helvetica (Headings)

Helvetica (Body)

主要顏色

背景顏色

次要顏色

文字顏色

介面設計

Visual Showcase

首頁節奏：Hero/捷徑入口（心動全台灣、離島早療、直播、影音、文章）→ 直播講座列表 → 影音課程列表 → 組合優惠 → 精選文章 → 公益計畫區塊 → 其他服務（1v1/遠距諮商/督導顧問/工作坊），以「先找內容、再選方案、最後延伸服務」的節奏引導。
元件語言：大量使用卡片式內容模組（課程卡/文章卡），每張卡片包含主題標籤、標題、講者與時長/價格等關鍵資訊，讓使用者掃一眼就能決定要不要點進去。
按鈕與互動：以「更多⇀」「加入購物車」「登入/註冊」「忘記密碼」等明確動作文字降低猶豫成本；兌換券流程也用條列步驟寫在課程頁，避免使用者卡在結帳。
行動版策略：透過較大的字級與行高確保手機閱讀舒適；導覽以可展開子選單承載大量分類，避免一次塞滿。
為什麼這樣設計：心理健康/教養議題的內容「信任與可讀性」優先於花俏視覺；因此用穩定藍色系建立專業感，用清楚分類與短 CTA 讓使用者更快走到「報名/購買/預約」。