統一平台設計系統 · Unified Platform

比昨天
專業一點

以品牌「1.01 法則」為核心,將 B 系列後台管理與 T 系列訓練履歷重整為單一平台的設計語言。本文件重新定調品牌調色盤(金/銅/黑/米),修正既有雛形中與品牌牴觸的藍、黃用色,並提出 B×T 合併為單一後台的架構評估。

客戶動能運動科技 RisingFastball
製作優得文創設計有限公司
範圍B 系列 · T 系列 · F 系列
版本v2.0 — 2026/06
01 — PRINCIPLES

設計原則與品牌定位

品牌個性是「一個專業、可以信賴的人」:專業、穩重、年輕、高端、國際化、創新。視覺基調參考 Driveline、Tread Athletics、Prime Reaction — 強調線條、定調與設計感的高端運動科技形象,而非一般 SaaS 後台的明亮通用感。

01

科技驅動的克制

大量留白、清楚層次、可讀優先。資料密集介面仍維持冷靜的版面節奏,不靠裝飾搶話。

02

金屬質感作為訊號

金與銅是品牌的識別點綴,僅用於主要動作與重點,不淹沒介面;中性米黑承載絕大多數內容。

03

線條與運動感

採用 Saira 作為標題與大數字字體,帶來運動賽事般的精準節奏;以紅縫線紅作為品牌呼應。

04

一套語言,兩種模組

後台管理與訓練履歷共用同一套 token 與外殼,差異只在模組內容與權限,維護成本最低。

05

狀態先於風格

顏色服務於語意(可預約/已預約/高風險/效期),而非裝飾。語意色經品牌重構後仍清楚可辨。

06

淺色一致

米白淺色承載全平台所有後台畫面(B 系列+T 系列),包含數據監控頁,介面一致、無深色背景,降低切換成本。

02 — ARCHITECTURE

B 系列 × T 系列 合併評估

既有雛形中,B 系列與 T 系列已使用完全相同的設計 token 與側邊欄外殼(T-02 檔名甚至標註「統一側邊欄測試包」)。兩者共用身分認證,僅入口不同。結論很明確:

評估結論
適合合併為
單一平台
以頂部模組切換(後台管理 / 訓練履歷)+角色權限矩陣呈現,兩模組共用外殼、設計系統與登入。T 系列仍可保留獨立深連結入口。
技術可行性高
兩系列已共用同一套 CSS 變數、字體與側邊欄結構,合併不需重寫視覺。
身分一致
super_admin / coach 在兩系統皆存在;單一登入後依角色決定可見模組。
資料本就相通
B-12 點名、B-20 專案成員與 T 的選手、訓練履歷以 Person ID 串接,同殼減少跳轉。
!
需留意:權限範圍
選手 / 專案聯繫人僅能進入 T 模組受限視圖;模組切換需嚴格依 role + project_id 控管。
單一登入 · 共用外殼 · 角色決定可見模組
RisingFastball 統一平台外殼(Top Nav · 模組切換 · 側邊欄 · 搜尋 · 身分)
B後台管理
  • 工作台 · 前台工作台
  • 客戶 / 課程 / 點名 / 異動審核
  • 場地排程 / 儀器管理
  • 專案 / 成員
  • 金流發票 / 報表 / 系統 / 權限 / 薪資
T訓練履歷
  • 管理主頁 / 選手列表
  • 選手詳情 / 訓練歷史
  • 今日課表 / 課表開立 / 模組
  • 影片數據 / 儀器檢測匯入
  • 教練回饋 / 負荷監控 / 趨勢
身分認證單一 SSO
角色權限4+5 角色矩陣
設計系統共用 tokens.css
資料層Person ID 串接
03 — COLOR

色彩系統

品牌訪談明確指定金、金銅、黑、米,並要求迴避藍色與黃色。既有雛形大量使用藍(#378ADD)與黃/琥珀(#BA7517),與品牌牴觸。下方為重整後的品牌主色與語意色,並附上語意色重構對照。

品牌主色 · Brand
#B5852F
金 Gold主色/主要動作/品牌點綴
#A2693A
金銅 Copper次要點綴/漸層/圖騰
#211B12
暖黑 Warm Black主要文字/深色介面底
#ECE7DB
米色 Beige頁面底色/中性表面
語意色 · Semantic(品牌重構後)
成功 / 可預約
確認、可預約、進行中。採沉穩場地綠,非螢光綠。
可預約進行中
危險 / 已預約
高風險、已預約、刪除。取自棒球紅縫線,呼應品牌。
高風險已預約
警示 / 效期
效期將至、待確認、偏高。以銅棕取代原本的黃。
效期待確認
資訊 / 保留
課程/場地保留、說明。以低彩度灰青取代藍,極小量使用。
保留說明
超管 / 內部 / 專案
超管專屬、內部專屬球道、專案標籤。以石墨取代原本的紫。
超管內部
中性 / 停用
未開放、停用、次要資訊。
未開放停用
語意 / 情境既有雛形(牴觸品牌)重構後(品牌相容)理由
資訊 / 保留藍 #378ADD灰青 #5C6B6E品牌要求迴避藍色
警示 / 效期琥珀 #BA7517銅棕 #B07A2E品牌要求迴避黃色,改入金銅家族
超管 / 專案紫 #7F77DD石墨 #4A4438紫非品牌色,改用暖中性
主色 / CTA綠 #1D9E75金 #B5852F主要動作改用品牌金;綠保留給「成功」語意
04 — TYPE

字體系統

標題與大數字使用 Saira,帶來運動賽事般的精準與速度感;介面內文使用 Archivo 搭配 Noto Sans TC,兼顧國際化與繁體中文可讀性。最多三種字族,層次清楚。

Saira 92.4 mph
Saira
標題 / 大數字 / 數據 — 運動感、tabular
Archivo 訓練履歷
Archivo + Noto Sans TC
介面 / 內文 — 中性、清楚、國際化
Display / H1Saira 800 · 54px
比昨天更好
標題 / H2Saira 700 · 27px
負荷監控 / 趨勢報表
面板標題Saira 700 · 15px
本週已預約課程
內文 BodyArchivo / Noto 400 · 14px
教練視角:快速查看待辦、效期示警、場地概況與本週預約。
數據 NumericSaira tnum · 30px
NT$ 486,200
05 — COMPONENTS

核心元件

同一套元件套用於兩個模組。以下為實際渲染樣式。

Buttons
Tags / Status
品牌 可預約 已預約 效期將至 保留 超管 未開放
Stat Cards
本月營收
NT$ 486K
▲ 12.4% 較上月
場地使用率
67%
尖峰時段 82%
風險警示
3
負荷或肩肘 RPE 偏高
Progress / Athlete
林哲宇
L1 投手 · 高中
合約時數128 / 160 hr
06 — SCREENS

套用此系統的畫面

以下畫面示範設計系統如何套用於登入、儀表板與兩個模組的代表頁面。