全 App 統一的元件庫(黑灰毛玻璃 + 土耳其藍)。每個元件先在這裡定案,之後在 Flutter 建成共用元件(A* 命名)+ 主題,一次套用到所有畫面。下面每張卡=一個元件,含實際外觀、命名、規格。命名前綴 A 可改。
色彩 Tokens
語意用色:acc=主互動(土耳其藍) · loss=危險/敗 · gold/silver=段位。中性層:text→sub→muted。玻璃層:line/line2/border 為白色透明度。
字級 Type
AText.title 22/600大標題 Big title
AText.head 16/600區塊標題 Section
AText.body 15/500內文 Body medium
AText.body 14/400內文 Body regular
AText.label 12/muted小標籤 Label muted
AText.num tabular1,046 · 88% · 3/5
系統字(SF/PingFang)。兩種字重:400 / 500–600。數字一律 tabular-nums 對齊。不用超粗(700+ 少用)。
按鈕 Buttons
主要動作。acc 填色 + on-acc 深字,radius 13。一個畫面最多一顆。
次要。半透明白底 + 細邊。
膠囊版(radius 999),用於名片/社交。
毛玻璃圓鈕 44px。返回/定位/更多。地圖上長駐版用假毛玻璃(不即時模糊,省電)。
列內小動作。acc-soft / 灰底。審核、加減。
破壞性動作。loss 色系,淡底。
綁定 →
文字連結。acc 色。
膠囊 / 徽章 Chips & Badges
白銀 1黃金
段位。金屬色(銅/銀/金/白金…)依 tier。
已報名直播中
賽事/狀態標。acc-soft。
隊長教練
角色標(隊長/副/經理/教練)。
MVP 7
榮譽(MVP/Kudos)。icon + 標 + 數。
3
未讀紅點數字。掛在圖示右上。
成就徽章。解鎖=acc,未解鎖=灰。
卡片 / 表面 Cards
毛玻璃卡片
內容區,細邊+半透明白底
基礎卡。field 底 + line 邊 + radius 14。
12
好友84
場次88%
勝率三欄統計。icon+值+小標,細直線分隔。
清單列 List rows
加好友
可開場名額
出席 17 次 · 加成 +6
附近揪團通知
7
陳建豪 隊長
1046 RP · 勝率 88%
ALinkRow — icon + 標 + chevron。設定/入口。
AInfoRow — icon + 標/副 + 右值。數據列。
ASwitchRow — 右側開關。偏好設定。
AMemberRow — 隊號圈 + 名 + 角色 + 戰績 + 更多。
輸入 / 分頁 Inputs & Tabs
field 底,focus 時 acc 邊。cursor acc。
搜尋體育館…
搜尋列。radius 14。
文字分頁(Apple Sports 風),active 底線。
膠囊分段,active acc 填色。
頭像 / 隊徽 Avatar & Crest
球員頭像圓。有照用照,無照給性別預設。土耳其藍光環。
雷
隊徽方圓。有 logo 用 logo,無則隊色漸層+首字。
羽球
籃球
排球
場館球場縮圖。深底 + acc 場線,依球種畫法(羽/籃/排…)。清單/場館卡取代泛用 icon,一眼認出是球場。
羽球3/6
6 面
空
使用中=acc 脈動點 + 占用數(3/6);多面場=網格 + 面數;空場=灰場線。場館列即時狀態。
數據 / 圖表 Data viz
進度條。acc 漸層。升段/上傳。
1,046RP
大數字+小單位。
六角能力值+拉線標註。球員/戰隊卡背面。
環形(勝率/額度)。
彈窗 / 狀態 Overlay & States
選項標題
選項一
選項二
Bottom sheet。#16181c 底,頂圓角22+把手。
解散戰隊?
此動作無法復原。
取消解散
確認框。危險動作用 loss。
操作回饋。深底。
目前沒有報名中的賽事
載入轉圈(acc)+ 空狀態文案。
結構 Structure
能力值綜合 69
區塊標題 + 右輔助。
細線分隔。line2。
換照片白銀
頁面頂部毛玻璃 chip 列(返回/動作/段位)。
✦ 有趣元件 / 特殊互動 Playful & Special
為 ArenaMate 這種「約球 / 賽事 / 社交」場景設計的高互動元件 — 用起來要有手感、有反饋、有一點爽感。下面的元件都可以直接玩玩看(點/按)。
主隊
0
:
客隊
0
點數字 +1,±鈕微調。改變時數字彈跳 + acc 閃光,配震動回饋。臨場計分核心。
58
42
兩隊氣勢拉鋸條。得分/連續攻勢時平滑推移,白色分界會滑動。賽事直播頭。
雷
雷霆
VS
火
火舞
對戰頭。兩隊徽向中間傾斜,hover 時各自發光。約戰 / 賽程卡頂。
點中央鈕快捷動作放射展開(開場/約時間/揪人),交錯彈出。地圖 FAB。
陳林王李+5
參加者疊頭像。點一下攤開看清楚有誰,再點收合。名額/出席。
7連勝
連勝火焰。火苗持續微跳,點一下 +1 火焰放大。榮譽 / streak。
場上位置選取。點區域選擅長區,亮 acc。建球員檔 / 戰術。
+0RP
積分跳動。點結算數字從 0 快速跳到 +24,▲ 浮出 + acc 發光。升段回饋。
銅
銀
金 III
白金
鑽石
段位階梯。已達=滿條,當前=進度動畫填充到下一階。個人 / 戰隊牌位。
點一下灑彩帶。勝利 / 解鎖成就 / 完成報名的一次性慶祝。克制使用。
✦ 計分頁 / 排球 Scoring
排球記分場景 — 有輪轉、發球權、局分這些天生會動的東西,拿來做成有手感的即時 UI。下面都能玩。
排球六人輪轉場。點按鈕:六名球員順時針滑動一格輪轉,發球員(位置 1)亮 acc、排球移到底線。位置號固定在場上。全排球計分頁的核心。
●主隊
21
第 3 局
客隊●
18
點哪隊 +1,數字彈跳;排球計分「得分即發球」→ 球權 ● 自動移到得分隊。上方局點。
主隊
客隊
發球權膠囊。點一下換發,acc 膠囊 + 排球滑到發球隊。簡版可獨立用在任何對戰。
25局 1
22局 2
25局 3
18局 4
逐局比分。勝局 acc、敗局 loss、當前局高亮框。賽事卡 / 直播下方帶。
主隊
暫停
客隊
暫停
暫停次數。點掉一格=用掉一次暫停,變灰。也可套用換人次數。
✦ 計分頁 II / 進階互動 Advanced
再往有趣推 — 連續得分火苗、賽末點呼吸、鷹眼挑戰、拖拉換人、整場球權飛行、籃球 24 秒、羽球發球格。都能玩。
主隊
15
0
客隊
13
0
連點同隊 +1,連續得分冒火苗「連 N 分」,對手一得分就熄火。氣勢視覺化。
23
加到 24 → acc 呼吸光圈 +「賽末點」;25 → 定格發光「勝!」。緊張感。
挑戰
點「挑戰」看鷹眼回放
鷹眼挑戰。掃描線判定 IN/OUT,判失敗扣一次挑戰。裁判/直播用。
7
4
12
↑ 場上 · 板凳 ↓ · 把板凳球員拖上場換人
9
15
拖板凳球員到場上位置換人(pointer 拖拉,場上格亮 acc)。號碼互換。
2
3
4
5
6
1
整場雙半場 + 網。換發排球從發球角拋物線飛過網到對面。直播主視覺。
24
籃球 24 秒。點圓環開始/暫停倒數,環同步消退,≤5 秒轉紅+跳動。24/14 重置。
羽球/桌球發球區指示。依分數單雙數,發球格 + 對角接發格自動切換(acc/淡)。