以品牌「1.01 法則」為核心,將 B 系列後台管理與 T 系列訓練履歷重整為單一平台的設計語言。本文件重新定調品牌調色盤(金/銅/黑/米),修正既有雛形中與品牌牴觸的藍、黃用色,並提出 B×T 合併為單一後台的架構評估。
品牌個性是「一個專業、可以信賴的人」:專業、穩重、年輕、高端、國際化、創新。視覺基調參考 Driveline、Tread Athletics、Prime Reaction — 強調線條、定調與設計感的高端運動科技形象,而非一般 SaaS 後台的明亮通用感。
大量留白、清楚層次、可讀優先。資料密集介面仍維持冷靜的版面節奏,不靠裝飾搶話。
金與銅是品牌的識別點綴,僅用於主要動作與重點,不淹沒介面;中性米黑承載絕大多數內容。
採用 Saira 作為標題與大數字字體,帶來運動賽事般的精準節奏;以紅縫線紅作為品牌呼應。
後台管理與訓練履歷共用同一套 token 與外殼,差異只在模組內容與權限,維護成本最低。
顏色服務於語意(可預約/已預約/高風險/效期),而非裝飾。語意色經品牌重構後仍清楚可辨。
米白淺色承載全平台所有後台畫面(B 系列+T 系列),包含數據監控頁,介面一致、無深色背景,降低切換成本。
既有雛形中,B 系列與 T 系列已使用完全相同的設計 token 與側邊欄外殼(T-02 檔名甚至標註「統一側邊欄測試包」)。兩者共用身分認證,僅入口不同。結論很明確:
品牌訪談明確指定金、金銅、黑、米,並要求迴避藍色與黃色。既有雛形大量使用藍(#378ADD)與黃/琥珀(#BA7517),與品牌牴觸。下方為重整後的品牌主色與語意色,並附上語意色重構對照。
| 語意 / 情境 | 既有雛形(牴觸品牌) | 重構後(品牌相容) | 理由 | |
|---|---|---|---|---|
| 資訊 / 保留 | 藍 #378ADD | → | 灰青 #5C6B6E | 品牌要求迴避藍色 |
| 警示 / 效期 | 琥珀 #BA7517 | → | 銅棕 #B07A2E | 品牌要求迴避黃色,改入金銅家族 |
| 超管 / 專案 | 紫 #7F77DD | → | 石墨 #4A4438 | 紫非品牌色,改用暖中性 |
| 主色 / CTA | 綠 #1D9E75 | → | 金 #B5852F | 主要動作改用品牌金;綠保留給「成功」語意 |
標題與大數字使用 Saira,帶來運動賽事般的精準與速度感;介面內文使用 Archivo 搭配 Noto Sans TC,兼顧國際化與繁體中文可讀性。最多三種字族,層次清楚。
同一套元件套用於兩個模組。以下為實際渲染樣式。
以下畫面示範設計系統如何套用於登入、儀表板與兩個模組的代表頁面。