一站整合：課程 × 論命諮詢 × 優惠佈告 × 內容文章
這個專案的核心是「定期定額會員制課程系統」。
我們把分級會員、定期扣款訂閱、課程觀看權、會員登入與學習入口整合在同一站。
訪客可以快速選擇方案 → 註冊/登入 → 完成訂閱付款 → 立刻開始看課。
同時把諮詢服務與會員優惠整合，讓平台不只賣課，也能帶動高價服務轉換。
CLIENT
星星福利舍 LOQUIASTRA © ACADEMY
INDUSTRY
- 命理諮詢
01
背景與挑戰
Challenge & Solution
把紫微斗數教學從零散內容，升級成可收費、可分階、可長期營運的線上學院。
-
品牌提供紫微斗數相關教學內容，並同時有論命諮詢服務需求。
-
站內導覽同時包含課程、文章、關於我們、活動公告等內容入口，需要一個「統一入口」讓使用者不迷路。
-
課程本身以「階段」方式組織（例如二階/三階分類），需要更直覺的選課理解。
讓使用者一眼看懂「怎麼加入、怎麼看課、怎麼進階、怎麼預約諮詢」，並把流程做短。
-
課程內容多、且有階段差異（例如二階/三階），需要清楚的分類與指引。
-
會員權限要跟課程觀看掛鉤（加入對應方案即可觀看），避免學員搞不清楚該買哪個。
-
論命諮詢要能在同一站完成導流與成交，不要讓使用者跳去外部再回來。
-
需要一個明確的登入/學習入口，降低學員回站學習的摩擦。
打造「分階課程＋會員解鎖＋諮詢導流」的一站式學習與服務平台
-
資訊架構重整：以導覽列把核心入口固定為「課程／諮詢／文章／關於／活動」，讓新訪客先找到最重要的行動。
-
課程分階清楚化：在課程列表直接呈現階級與課程資訊（例如二階/三階分類、時長等），降低選課成本。
-
轉換流程縮短：主動線聚焦在「看課程 → 加入會員（解鎖）/ 購買 → 登入學習」，同時保留「預約諮詢」作為高單價服務入口。
-
功能整合到同一站：把課程學習（LMS）、會員/方案（Membership）、諮詢商品（可分類呈現）、內容文章與公告集中管理，避免多平台分散。
-
行動裝置（RWD）優化：以卡片式列表與清楚字級層級呈現課程與 CTA，讓手機使用者也能快速完成「選課/登入/購買」。（未提供可直接驗證的頁面截圖，屬保守描述）
8WK
開發週期
100%
RWD 適配
設計系統
-
因為內容型教學需要長時間閱讀與反覆回看，所以整體採「高可讀性」的字體策略：正文與標題一致、字級與行距偏舒適。
-
因為課程與會員是主要轉換點，所以用高對比的強調色做 CTA，讓「加入/購買」在列表與按鈕上更醒目。
-
因為平台屬於學員日常會回來使用的系統，所以底色採偏淺的中性灰，降低視覺疲勞、也更耐看。
Typography
Aa
Noto Sans TC (Headings)
Aa
Noto Sans TC (Body)
主要顏色
背景顏色
次要顏色
文字顏色
02
介面設計
Visual Showcase
-
首頁/導覽節奏：導覽列直接給出主要入口（課程、諮詢、文章、關於、活動），讓首次訪客先選「我要學」或「我要問」。
-
課程呈現：課程列表用「階級分類＋卡片式資訊」降低選課負擔，並把「加入會員即可觀看」這種權限邏輯直接寫在課程層級上，避免學員買錯方案。
-
元件語言（從 CSS 變數可推）：以 Kadence 的 Global Palette 統一全站色彩、Tutor LMS 課程區塊統一學習介面，按鈕 hover 以次色強調（palette2）形成可預期的互動回饋。（可再用截圖驗證更精準）
-
行動版策略（保守描述）：以單欄卡片與清楚 CTA 按鈕優先，讓手機使用者能快速完成登入與找課。（未提供可直接驗證的頁面截圖）
-
為什麼這樣設計：把「理解成本」壓到最低（先分流：課程 vs 諮詢），再用會員解鎖機制把轉換路徑變短，讓平台既像內容網站，也像可日常回訪的學習系統。
電腦版首頁
手機版首頁
03
合作流程
Our Workflow
需求訪談與規劃
視覺設計與開發
測試上線與教學
課程分階跟會員解鎖的設計很直覺，減少學員詢問『我到底該買哪個』的狀況。
琥珀 & Zona
星星福利舍 LOQUIASTRA © ACADEMY 創辦人