H5 球員頁原型說明
此頁只把球員頁原型做成 H5 手機版型，其餘說明全部維持 web 寬版閱讀。原型上方新增足球 / 籃球切換，足球頁依梅西資料頁結構，籃球頁依雷速盧卡·東契奇頁結構。球員頁入口需承接自賽事詳情、陣容名單、單一球員名稱三個來源，點擊後皆進入同一球員頁。
入口說明
- 點擊賽事詳情內的球員名稱，進入球員頁。
- 點擊陣容頁的首發或替補球員，進入球員頁。
- 點擊任一單一球員卡片或名稱，進入球員頁。
本版比對重點
- 動態列表補縮圖，文章詳情補主圖。
- 資料頁補優勢 / 劣勢，年齡展示為 39歲。
- 足球保留技術統計頁；籃球改為比賽 / 投籃 / 能力值頁籤順序。
- 技術統計、投籃與比賽頁的賽事 chips 需可左右滑動。
H5 球員頁 PRD
資料來源統一規劃為 纳米数据群。前端以 H5 單頁渲染球員頁，頁籤切換可走本地快取與按需拉數據策略。此版 PRD 針對你剛追加的要求，補強了比賽、技術統計、資料與動態詳情的欄位與交互約束。
產品目標
- 用戶進頁 3 秒內掌握球員身份、身價、位置與近期狀態。
- 所有高頻資料在同一 H5 內完成切換，不強迫跳回上層。
- 資料密度與行動端滾動節奏，保持類似雷速的資訊站體驗。
目標使用者
- 直播場景用戶：比賽中快速查球員背景與近期賽事表現。
- 數據型用戶：比較能力值、賽季數據與近期比賽狀態。
- 內容型用戶：閱讀球員動態並延伸點擊文章詳情。
一、資訊架構
| 層級 | 模組 | 說明 |
|---|---|---|
| 固定頭部 | 球員頭像 / 中英文名 / 基礎資訊 / 關鍵四欄位 | 沿用雷速頭部節奏，重點展示國家/號碼、位置/慣用腳、球隊/號碼、身價。 |
| 頁籤 1 | 动态 | 文章流列表，點擊卡片後滑入文章詳情頁。 |
| 頁籤 2 | 资料 | 國旗、年齡、生日、合同到期、年薪、身價曲線、綜合能力、轉會、榮譽。 |
| 頁籤 3 | 技术统计 / 比赛 | 足球第 3 籤為技術統計；籃球第 3 籤為比賽，需保留左右滑動 chips。 |
| 頁籤 4 | 比赛 / 投篮 | 足球第 4 籤為比賽；籃球第 4 籤為投籃，需支援年份與賽別切換。 |
| 頁籤 5 | 能力值 | 雷達圖 + 六大分組能力條。 |
二、欄位與數據來源
| 模組 | 欄位 | 資料來源 | 備註 |
|---|---|---|---|
| 頭部 | 球員 ID、姓名、頭像、年齡、身高、體重、國家、號碼、位置、慣用腳、所屬球隊、身價 | 纳米数据群 / 球員基礎檔案 | 需支援按球員 ID 拉取。 |
| 动态 | 文章標題、來源、發佈時間、正文、跳轉識別 | 纳米数据群 / 球員動態與新聞聚合 | H5 先做站內詳情頁；後續可替換成真實文章頁。 |
| 资料 | 雙國籍、出生日期、合同到期、年薪、身價時間序列、轉會紀錄、榮譽 | 纳米数据群 / 球員資料、轉會、榮譽 | 榮譽需支援多分組展開。 |
| 技术统计 | 賽事分類、年份、出場、首發、進球、助攻、場均時間、進攻/傳球/防守/其他統計 | 纳米数据群 / 球員賽季統計 | 年份 picker 與賽事 chips 需前端狀態聯動。 |
| 比赛 | 賽事名、輪次、日期、時間、主客隊、比分、評分、首發/替補、上場分鐘、事件、隊徽 | 纳米数据群 / 比賽明細與球員事件 | 需支援依賽事類型篩選與首發信息開關。 |
| 能力值 | 綜合能力、速度、射門、傳球、盤帶、防守、身體、細項分數 | 纳米数据群 / 球員能力評級 | 細項分組對應進攻、防守、移動、技術、身體、戰術。 |
三、核心交互需求
| 交互 | 規則 | 優先級 |
|---|---|---|
| 頁籤切換 | 點擊與左右滑動皆可切換頁籤，active 樣式需同步更新。 | P0 |
| 文章詳情 | 點擊动态列表卡片後，從右側滑入詳情頁；返回後保持原列表滾動位置。 | P0 |
| 年份 picker | 技術統計頁右上角年份按鈕點擊展開選單，切換後整頁數據同步刷新。 | P0 |
| 聯賽 chips | 比賽與技術統計頁上方 chips 需支援左右滑動與 active 狀態。 | P0 |
| 首發信息開關 | 比賽頁切換後，可只保留含首發標記的比賽卡。 | P0 |
| 比賽詳情展開 | 每場比賽可點擊展開更多資訊，顯示事件、場地與隊伍補充資料。 | P1 |
| 隊伍詳情 | 點擊隊名或隊徽後，喚起底部球隊資訊卡。 | P1 |
| 轉會更多 / 榮譽展開 | 資料頁轉會列表支援更多切換，榮譽按分組展開收合。 | P1 |
四、狀態與例外
載入中
- 頭部與頁籤先出，內容區骨架延後填充。
- 切年份或賽事篩選時，僅刷新當前模組內容。
空狀態
- 文章無資料時顯示暫無球員動態。
- 某年度無技術統計時，保留年份選擇並展示無資料提示。
錯誤狀態
- 接口失敗時提供重試，只針對當前頁籤重刷。
- 圖表缺值時以純文字卡替代，不可留空白區。
效能要求
- 首屏資訊 1.5 秒內可見。
- 頁籤切換動畫控制在 300ms 內。
- 年份切換不可造成整頁白屏重排。
五、前後端實作建議
| 項目 | 建議 |
|---|---|
| 接口拆分 | 頭部、动态、资料、技术统计、比赛、能力值拆分為六個資源段，前端按頁籤加載。 |
| 快取策略 | 頁籤首次載入後緩存在記憶體；切回不重拉，手動刷新才更新。 |
| 年份與賽事狀態 | 建議以前端本地 state 管理，並允許 query/hash 保留當前視圖。 |
| 圖表方案 | 正式版建議接 ECharts；目前原型用 Canvas 重建以先確認結構與互動。 |