Authorized Pokémon Product System

# Pokémon UI Library Design Guidelines v3

针对已获得授权的 Pokémon 网页、活动页、会员中心、图鉴工具和电商体验，建立一套可落地的 UI 库。v3 在基础控件之上补齐 Team Builder、Evolution Chain、Move Data、Weakness Matrix、Battle Menu、Bag、Event 和 Reward 等产品专属组件。

▶查看控件库 ★查看专属组件 ▦查看页面模板
Official Elements Logo / Poké Ball / Type Design Tokens Color / Type / Radius Controls Form / Button / Tabs Product Components Team / Battle / Dex
KANTO-025
NATIONAL DEX #025 Electric

### Pikachu

Mouse Pokémon · Height 0.4 m · Weight 6.0 kg

HP 35

作为授权项目的核心示例，图鉴界面可以使用官方名称、类型、编号、HP 与 Pokédex 信息结构。视觉需要保证清晰可读，不能让装饰压过任务。

ATK
55
SPD
90
SP
50
01 / Creative Direction

## 设计方向

旧版的问题是过度抽象成泛怪兽风。新版以授权 Pokémon 产品为前提，明确使用官方视觉元素，但把它们工程化为可复用的 UI 语言。

01

### Official First

可使用 Pokémon、Poké Ball、Pokédex、官方角色名、类型体系、HP/EXP、Gym Badge 等授权资产语言。

02

### Game UI, Web Quality

借用游戏中的状态、收集、队伍、战斗和背包结构，但网页控件必须保持可访问、可扫描、可响应。

03

### Bright, Not Noisy

黄色、蓝色、红色用于关键动作和品牌识别；大面积阅读区域仍使用白色、浅蓝灰和明确分割线。

04

### System Completeness

从按钮、表单、筛选、Tab、弹窗、Toast 到图鉴卡、数据表、页面模板，全部使用同一套 tokens。

02 / Official Elements

## 官方元素使用规范

授权场景下可以使用官方元素，但需要把“品牌资产”和“UI 控件”分层管理。Logo 和角色图优先作为内容资产，Poké Ball、类型色、徽章和图鉴框架可以进入组件体系。

Pokémon
T
TRAINER PASS Ash Ketchum Pallet Town · Badge 08
Poké Ball 用于图标、空状态、加载、徽章背景
8 Gym Badge 用于等级、成就、会员权益
Fire Type System 筛选、标签、属性、状态分类
DEX #150 Pokédex ID 列表编号、详情标识、收藏序号

### 可进入 UI 库的元素

- Poké Ball 作为系统图标、加载器、选择状态、空状态主符号。
- 使用 `frontend/public/types/` 中的 Type 图片资产作为筛选、标签、数值、卡片边缘和图表标识；CSS 类型色保留为 token 和兜底。
- Pokédex 屏幕、训练家卡、Gym Badge、HP/EXP Bar 作为组件构型。
- 官方角色名和编号可用于样例数据，如 Pikachu #025、Charizard #006、Eevee #133。

### 仍需控制的元素

- Logo 不作为普通按钮图标反复出现，只用于品牌区域、授权说明和首屏识别。
- 角色官方插画不应被裁切到无法识别，也不应被当作装饰纹理平铺。
- 高饱和类型色必须配合文字对比策略，Electric、Ice、Ground、Steel 等浅色标签用深色字。
- 战斗 UI 可以借鉴状态结构，不建议直接把主机游戏画面一比一搬到网页任务流。

03 / Design Tokens

## 视觉令牌

Tokens 要覆盖品牌色、类型色、基础表面、描边、阴影、圆角和组件状态。这里采用 8px 卡片圆角，强调专业网页质感，而不是过度玩具化。

Pokémon Yellow Primary CTA / Logo fill`#FFCB05`
Pokémon Blue Navigation / Links`#2A75BB`
Deep Blue Header / Text contrast`#003A70`
Poké Red Urgent / Ball top`#EE1515`
Ball Black Icon stroke / Strong line`#202124`
Map Mist Page background`#F2F5FA`

### Type Badge Assets

large badges + small icons
Normal Fighting Flying Poison Ground Rock Bug Ghost Steel Fire Water Grass Electric Psychic Ice Dragon Dark Fairy Stellar

横向徽章使用 `frontend/public/types/1.png` 至 `frontend/public/types/19.png`；紧凑网格、筛选器、矩阵和卡片内图标使用 `frontend/public/types/small/1.png` 至 `frontend/public/types/small/18.png`。文件映射：1 Normal, 2 Fighting, 3 Flying, 4 Poison, 5 Ground, 6 Rock, 7 Bug, 8 Ghost, 9 Steel, 10 Fire, 11 Water, 12 Grass, 13 Electric, 14 Psychic, 15 Ice, 16 Dragon, 17 Dark, 18 Fairy, 19 Stellar.

### Typography

标题使用圆润粗体，正文使用系统无衬线。Pokémon wordmark 只用于品牌展示，不替代正文或按钮文字。

### Catch, Train, Explore

正文保持 16px 以上，行高 1.55 至 1.7，保证儿童和成人用户都能快速阅读。

CAPTION / DEX ENTRY

### Shape

卡片半径 8px，控件半径 8px，Pill 只用于 type chips、HP、status badges。Poké Ball 和头像保持圆形。

Water

### Elevation

主 CTA 和游戏化面板可使用硬阴影，普通信息卡使用柔和阴影。阴影不可替代清晰边框。

Soft row Ready
04 / Controls

## 控件库

控件覆盖按钮、图标按钮、输入、选择、开关、范围、步进器、分段控制、Tabs 和筛选标签。所有控件最小点击高度不低于 44px。

### Buttons

Default / Hover / Active / Disabled

### Inputs

A11y ready
Search Pokémon
Trainer name 可用名称
Region
Friend code
ID GEN 1
需要 12 位数字代码。
Dex note Pikachu stores electricity in the electric sacs on its cheeks.

### Selection Controls

Show shiny form Include regional forms
Bulbasaur Charmander Squirtle
Battle sound Compact mode
Capture chance
64
Potion count
3

### Segmented / Tabs / Chips

Base tab 显示编号、分类、身高、体重、能力和基础数值。

Moves tab 显示 Thunderbolt、Quick Attack、Iron Tail 等技能列表。

Evolution tab 显示 Pichu → Pikachu → Raichu 的进化路径。

Electric Fire Water Grass
05 / Data Display

## 数据展示组件

Pokémon 产品通常需要承载大量收集、列表、数值和状态。展示组件应优先保证对比和扫描效率，再加入品牌趣味。

25
#025 Pikachu
HP 35
Electric
EXP 68%

### List Rows

Charizard

Fire / Flying · #006

Rare
Squirtle

Water · #007

Caught
Mewtwo

Psychic · #150

Locked

### Stats / Progress

HP 82 / 100
EXP 44%
Catch rate 18%
Snorlax Lv. 42 HP

### Data Table

Sortable / Filterable

Dex | Name | Type | Region | Status | Action
--- | --- | --- | --- | --- | ---
`#001` | Bulbasaur | Grass | Kanto | Caught |
`#004` | Charmander | Fire | Kanto | Seen |
`#007` | Squirtle | Water | Kanto | Caught |

06 / Pokémon Product Components

## Pokémon 专属组件

v3 新增一组真正贴近 Pokémon 产品场景的组件：搜索联想、进阶 Type 筛选、进化链、技能数据、弱点矩阵、队伍构建、对比面板、战斗菜单、背包、活动和奖励体系。

### Pokémon Autocomplete

Combobox
Search Pokémon

- Pikachu#025 · Mouse Pokémon
  Electric
- Raichu#026 · Mouse Pokémon
  Electric
- Pichu#172 · Tiny Mouse Pokémon
  Electric
- Charizard#006 · Flame Pokémon
  Fire

用于 Pokédex、Team Builder、Shop search。结果项建议包含编号、名称、分类和 Type badge。

### Advanced Type Filter

Multi-select
Selected: Electric, Flying

支持多选、清空、组合筛选和弱点模式。

### Evolution Chain

Detail page
172
Pichu Electric

High friendship

025
Pikachu Electric

Thunder Stone

026
Raichu Electric

Final form

### Move Cards

Power / Accuracy / PP
Thunderbolt Electric

May leave the target with paralysis.

Special Power 90 Acc 100 PP 15
Quick Attack Normal

This move always goes first.

Physical Power 40 Acc 100 PP 30
Iron Tail Steel

May lower the target's Defense stat.

Physical Power 100 Acc 75 PP 15
Electro Ball Electric

The faster the user, the greater the power.

Special Variable Acc 100 PP 10

### Weakness Matrix

Electric / Flying sample
Ground 2x
Rock 2x
Ice 2x
Fighting 0.5x
Flying 0.5x
Steel 0.5x
Bug 0.5x
Grass 0.5x
Electric 0.5x
Ghost 1x
Dragon 1x
Fairy 1x

### Team Builder Slots

6 slots

### Compare Panel

3-way compare
Metric Pikachu Raichu Jolteon
Type Electric Electric Electric
HP 35 60 65
Attack 55 90 65
Speed 90 110 130
Ability Static Static Volt Absorb

### Base Stats Radar

SVG tokenized

雷达图适合详情页摘要；精确对比仍建议使用条形图或 Compare Panel。

### Battle Action Menu

### Bag Item Card

＋
Hyper Potion

Restores 120 HP to one Pokémon.

Qty 12
Ultra Ball

A high-performance Ball with a better catch rate.

Qty 4

### Event / Reward

Electric Spotlight Weekend

Featured Pokémon, bonus candy, limited raid tasks.

Electric Open
18h
1 Badge
＋Potion
Ball
?Locked
★Secret
07 / Feedback & Overlays

## 反馈与覆盖层

反馈组件需要清晰表达系统状态。Poké Ball 可以作为提示图标，但错误、成功、等待、解锁仍要配合文字和颜色。

### Alerts

✓
Pokémon caught!

Pikachu has been added to your Pokédex.

!
Bag almost full

You have 2 slots left. Transfer items before the next battle.

×
Connection lost

Battle data will retry automatically.

### Modal / Toast / Tooltip

捕获率提示需要解释公式来源和影响因素。

### No Pokémon found

调整类型筛选或搜索其它区域。

### Loading States

### Motion Rules

- 按钮 hover 上浮 2px，active 下压 2px，时长 120ms 至 180ms。
- 捕获、升级、徽章解锁可使用 300ms 左右的弹性动效。
- 列表筛选和 Tab 切换不使用大幅移动，避免影响扫描。
- 必须支持 `prefers-reduced-motion`，关闭闪烁和持续动画。

08 / Navigation

## 导航模式

Pokémon 产品常见信息架构包括 Pokédex、Team、Bag、Battle、Events、Shop 和 Trainer Profile。桌面端可用侧边导航，移动端使用底部导航。

### Desktop Shell

### Mobile Bottom Nav

- 底部导航最多 5 项，当前项使用浅黄色背景和深蓝文字。
- 图标下方标签必须保留，不能只靠图标表达目的地。
- 一级导航和页面内 Tabs 分离，避免把筛选项放入全局导航。
- 活动页可使用顶部锚点导航，核心工具优先使用 App Shell。

09 / Templates

## 页面模板

以下模板把控件组合成可直接落地的页面结构，覆盖图鉴列表、详情页、战斗状态和背包网格。

Pokédex Listing
Search
Electric Fire Water Grass
#025 Pikachu Electric
#006 Charizard Fire
#007 Squirtle Water
#133 Eevee Normal
#143 Snorlax Normal
#150 Mewtwo Psychic
Pokémon Detail #025

### Pikachu

Mouse Pokémon · Electric

Electric HP 35
Friendship 84%
Battle & Bag Live
Raichu Lv. 36 HP 62/90
Poké Ball
＋Potion
★Rare Candy
◈Badge
10 / Delivery Guidelines

## 交付规范

设计稿和前端实现需要以 token 与官方资产目录为唯一来源，避免组件各自写死颜色和尺寸。Logo、角色图、商品图与 Type 图片必须有授权来源和版本记录。

### 设计验收清单

- 所有页面使用同一套 Pokémon brand tokens、type assets、type tokens、surface tokens。
- Logo、角色图、官方插画、商品图均标注授权来源和使用范围。
- 核心控件覆盖 default、hover、active、focus、disabled、loading、error 状态。
- 图鉴列表、详情、Team Builder、Move Data、Weakness Matrix、背包、战斗状态、活动卡片均有桌面和移动端布局。
- Type 展示优先使用 `frontend/public/types/` 图片资产，隐藏文本和 CSS 类型色作为语义与兜底。

### 前端验收清单

- CSS 变量集中声明，不在组件内硬编码品牌色和类型色。
- 控件高度不低于 44px，键盘焦点清晰，弹窗有 focus 管理和 ESC 关闭。
- Tab、Modal、Toast、Switch、Range、Combobox、Type Filter、Team Slot 等控件具备基础 ARIA 语义。
- 支持明暗主题与 reduced motion，动画不会阻塞主要任务流程。
- 表格、列表、图鉴网格在 320px 宽度下不产生内容重叠。

    :root {
      --pokemon-yellow: #ffcb05;
      --pokemon-blue: #2a75bb;
      --pokemon-blue-deep: #003a70;
      --pokemon-red: #ee1515;
      --line-strong: #1f2a3b;
      --radius-card: 8px;
      --radius-control: 8px;
      --shadow-control: 0 3px 0 var(--line-strong);
    }

    .btn.primary {
      min-height: 44px;
      border: 2px solid var(--line-strong);
      border-radius: var(--radius-control);
      background: var(--pokemon-yellow);
      color: #172036;
      box-shadow: var(--shadow-control);
    }

Item added

Potion has been added to your Bag.

### 授权项目使用说明

这版 guidelines 默认项目已被允许使用 Pokémon 官方元素。落地时请把 Logo、角色图、商品图等官方素材作为独立资产管理，并在组件层使用 tokens、type 图片资产、Poké Ball、Pokédex、Team、Battle 和 Reward 结构保持一致性。

!
资产与组件分离

官方插画不要直接写进组件 CSS；组件只依赖尺寸、颜色、状态和插槽。