買斷式網站案例

執業占星人，以希臘暨中世紀占星的嚴謹邏輯，帶你看懂命運的節奏

以「星盤解讀」作為核心服務，提供本命、流年、卜卦等不同面向的解讀方案。
同一站整合核心課程、工作坊與活動公告，讓想學習的人能直接找到報名入口。
用文章專欄建立信任，並提供免費/付費內容分層，適合長期經營與回訪。
CTA 以「Book a session / Ask Me」收斂行動，讓詢問與預約更集中。

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

CLIENT

Ridley de Taipei（瑞公子，占星）

INDUSTRY

命理學
|
命理諮詢

客製化版型設計

背景與挑戰

Challenge & Solution

建立一個能同時承接「專業占星服務」與「占星教學內容」的個人品牌平台，讓訪客從認識到行動有清楚路徑。

品牌定位強調希臘化時期暨中世紀占星，並把古老智慧轉成當代口語白話。
網站主架構以服務（星盤解讀）、教學（核心課程/工作坊/活動）與內容（文章專欄）三塊並行。
文章區具備分類與篩選（Free/付費限定），符合內容型品牌「先建立信任、再轉換」的策略。

在資訊量高、術語門檻高的占星領域，要讓不同需求的訪客「一眼找到自己要的入口」，並把行動（詢問/購買/報名）收斂得更短。

訪客需求多元：有人要直接買解讀服務、有人想先看文章、也有人只想找課程與講座資訊，必須做好導覽分流。
服務屬於「高信任決策」：需要用講師理念/方法論與內容輸出，降低第一次詢問的心理成本。
課程/活動具時間性：首頁要能快速露出近期資訊，讓回訪者不用再翻找。
會員/付費內容分層：要讓使用者理解哪些是免費可讀、哪些需要登入/權限，避免卡關。

Solution

打造「內容建立信任 → CTA 收斂詢問 → 服務商品化成交」的一站式占星品牌平台

資訊架構怎麼重整：
- 主選單以 Home／關於我（About Me）／星盤解讀／開課計劃（Workshops/Events）／Blog 做第一層分流，對應「了解品牌、買服務、找課、看內容」四種任務。
- 頁尾補上「精選服務」「會員中心」「文章分享」的快速入口，讓使用者隨時回到主路徑。
轉換流程怎麼縮短（CTA/表單/登入/購買）：
- 服務頁直接以商品卡呈現各種解讀方案（可選規格/價格區間），把「了解 → 選方案 → 加入購物車」做成同一段流程。
- 「Ask Me」作為統一詢問入口，承接課程細節、流程與合作洽談，減少分散私訊。
哪些功能整合到同一站：
- 服務商品化：星盤解讀服務頁列出多項解讀方案並可選擇規格。
- 活動/課程資訊：首頁露出近期活動/課程貼文，並有 Workshops / Events 分類入口。
- 內容分層：Blog 提供 Free / 付費限定與分類篩選。
- 會員與購物：站內有登入、購物車與會員中心入口。
- （從 CSS 變數可推定）Paid Memberships Pro（pmpro）、The Events Calendar（tec）、Tutor LMS（tutor）等外掛已被納入全站樣式系統，利於後續擴充會員/活動/課程功能。（來源：你提供的 CSS 片段）
行動裝置（RWD）怎麼優化：
- 使用全域可變字級（clamp）與 Kadence 全站變數控制字級/留白，讓不同螢幕尺寸可讀性更穩定。（來源：你提供的 CSS 片段 --global-kb-font-size-*）
- 行動版以「短段落＋清楚 CTA」呈現（Book a session / Ask Me），避免使用者滑很久還找不到入口。

8WK

開發週期

100%

RWD 適配

設計系統

主題屬於「理性、嚴謹的古典占星」，所以用偏沉穩的深藍/紫灰作為基底文字與按鈕背景，建立專業感與秩序感。
仍需要吸引點擊與行動，所以用亮暖橘作為主色高亮，讓 CTA、重點區塊與互動狀態更醒目。
主要受眾是中文讀者，所以選用 Noto Sans TC 作為全站標題與內文字體，確保中文閱讀密度與一致性。

Typography

‘Noto Sans TC’ (Headings)

‘Noto Sans TC’ (Body)

主要顏色

背景顏色

次要顏色

文字顏色

介面設計

Visual Showcase

首頁節奏：Hero 先講清楚專業定位與價值主張 → 三大主服務模組（Core Courses / Chart Reading / Workshop）分流 → 近期活動區塊（即將到來的活動）承接回訪者 → 文章專欄區用內容建立信任 → 頁尾再用「Book a session」與會員入口收斂行動。
元件語言：
- 服務採商品卡列表（方案名稱＋價格區間＋Select options），把「選擇」做成明確操作，不用讀一大段才知道怎麼買。
- 文章列表具分類/標籤與排序、搜尋，內容型網站的導覽效率高。
- 有登入、購物車與會員中心快速入口，符合「內容→商品→會員」的閉環設計。
行動版策略：使用 Toggle Menu（行動選單）縮短導覽層級；CTA（Book a session / Ask Me）在多頁反覆出現，降低找入口成本。
為什麼這樣設計：占星服務是高信任、高理解成本的品類，所以用內容與方法論建立專業度，再用一致的 CTA 把行動收斂到詢問/購買/報名，讓轉換更順、也更可長期經營。

電腦版首頁

手機版首頁

合作流程

Our Workflow

Step 01

需求訪談與架構規劃

需求訪談與規劃

透過 60–90 分鐘線上會議釐清品牌定位、課程產品與未來擴充方向，並協助整理初步網站架構（Sitemap）。

Step 02

頁面設計與功能建置

視覺設計與開發

依照確認後的線框圖與架構，完成首頁、主題頁、課程頁與名單收集頁，並串接必要的外掛與追蹤碼。

Step 03

測試、上線與操作教學

測試上線與教學

上線前進行跨裝置測試，確認表單、追蹤與速度表現，最後安排教學，確保客戶可以自行更新內容。

「網站把星盤解讀、課程活動跟文章內容整理得很清楚，第一次接觸的人也知道要從哪裡開始。」

瑞公子

Ridley de Taipei（瑞公子，占星）創辦人

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

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