每一個畫面，都被反覆打磨
從線稿到上線，連一個間距、一種狀態都不放過。
關鍵績效指標
面球場的 3D 點選，連動同一份場地排程
種上場方式：場地預約、課程報名與揪打
頁式場館官網，由後台欄位設定內容
專案資訊
專案說明
匹克球場館的服務，往往從一句「週六晚上有空場嗎？」開始。訂場、教練課程與球友揪打各有名額和時段，如果分散在聊天訊息與表格裡，館方就得反覆確認，球友也不容易知道下一步。恆遠團隊因此打造「場邊 Courtside」場館預約與管理系統，把詢問、預約、報名和場館介紹整理成館方與球友都能直接操作的畫面。預約頁以 Three.js 建立可旋轉與點選的四場球館示意，左側固定 3D 選場，右欄獨立捲動，整合場地、日期時段與付款；雙向選場保留有效時段和填寫資料，已占用場地會阻擋選入。官網也提供立體導覽入口。
系統以四面室內球場的示範場館呈現營運情境。管理者可查看每日場地排程、建立代客訂場、登記收款、辦理報到與取消預約。場地預約、已發布課程和已確認活動共用排程檢查；取消整筆預約或整場活動後，對應時段會重新開放。球友則能選擇日期、場地與連續時段，確認費用，再完成示範付款與訂單建立。
LINE 預約助理採官方帳號聊天室風格，展示時間詢問、可訂場地回覆與預約確認動線。揪打 Flex 卡片呈現報名人數、剩餘名額和成團門檻，點進詳情能查看同意公開的參加暱稱。已發送卡片保留當時快照，更新人數會產生新卡片。揪團意願不先保留球場，達成門檻後由館方確認空場，才進入待付款與後續管理。
課程功能包含單堂與系列課、教練及場地安排、學員報名、候補遞補與逐堂點名。場館另有一頁式官網，首頁照片、場館簡介、各場地介紹、營業時間及聯絡資訊都可由後台欄位設定；儲存後即可預覽，並從官網進入訂場、課程與揪打。
目前展示版使用虛構姓名與場館資訊，LINE 官方帳號、線上金流與跨裝置資料同步以示範畫面呈現。正式導入時，會依場館實際需求確認串接方式、人員權限與交易規則。
案例故事
挑戰
空場詢問與預約內容散在聊天訊息，館方需重複確認日期、時段及費用。
訂場、教練課程與揪打各自安排時段，難以同時確認場地占用與名額。
球友想加入揪打，卻不清楚目前人數、參加者及是否已經成團。
場館需要對外介紹各場地與聯絡方式，網站內容卻容易和營運資料分開維護。
解法
設計 LINE 對話預約流程，將需求補問、空場回覆、費用確認與訂單建立串成動線。
將 3D 選場連到共用排程檢查，搭配課程開課、學員名額、逐堂點名及活動場地確認操作。
以 Flex 卡片顯示報名快照，詳情頁讀取最新名額與公開暱稱，支援成團門檻與候補。
建立由後台欄位驅動的一頁式官網，設定照片、場地介紹、營業時間及聯絡資訊，並提供 3D 球館導覽。
成果
完成 4 面球場的 3D 雙向選場、固定模型與右欄付款流程，驗證占用阻擋及預約、課程、活動共用排程。
以 1 頁式場館官網連結訂場、課程、揪打 3 種入口，並驗證後台設定與預覽同步。
完成 LINE 預約與 Flex 名額、參加名單的操作流程，正式 LINE 與金流串接可依場館需求導入。
核心功能
3D 球館互動選場
以 Three.js 呈現可旋轉、縮放與點選的球館。左側固定模型，右欄整合選場、時段與付款，雙向同步並保留有效時段與表單。
共用場地排程管理
以同一份示範排程呈現訂場、已發布課程與已確認活動，檢查撞期，並在取消後釋出場地。
LINE 對話預約
在官方帳號風格聊天室內體驗需求補問、空場與費用確認，連接訂場操作，尚未接入真實 LINE。
開課與學員管理
安排單堂或系列課程，管理學員報名、待付款、候補與逐堂點名，發布前檢查場地和教練衝突。
揪打與候補管理
公開成團進度、剩餘名額與經同意的暱稱，區分意願登記及場地確認，並示範候補遞補。
場館官網內容設定
由後台設定首頁照片、各場地介紹、營業時間和聯絡資訊，儲存後預覽一頁式官網及服務入口。
相關作品
想做類似的？告訴我們你的情況
看完這個案例有想法了嗎？直接告訴我們你的情況，第一封回信就給你「怎麼做、要多久、大概多少錢」。 不想填表的話，加 LINE 傳一句「想做類似 3D 匹克球預約與場館管理系統」就好。