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 ElementsLogo / Poké Ball / Type Design TokensColor / Type / Radius ControlsForm / Button / Tabs Product ComponentsTeam / Battle / Dex

KANTO-025

NATIONAL DEX #025

Pikachu

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

HP 35

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

ATK

SPD

01 / Creative Direction

设计方向

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

Official First

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

Game UI, Web Quality

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

Bright, Not Noisy

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

System Completeness

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

02 / Official Elements

官方元素使用规范

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

Pokémon

TRAINER PASS Ash Ketchum Pallet Town · Badge 08

Poké Ball 用于图标、空状态、加载、徽章背景

Gym Badge 用于等级、成就、会员权益

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 YellowPrimary CTA / Logo fill#FFCB05

Pokémon BlueNavigation / Links#2A75BB

Deep BlueHeader / Text contrast#003A70

Poké RedUrgent / Ball top#EE1515

Ball BlackIcon stroke / Strong line#202124

Map MistPage background#F2F5FA

Type Badge Assets

large badges + small icons

横向徽章使用 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 和头像保持圆形。

Elevation

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

Soft rowReady

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

Selection Controls

Show shiny form Include regional forms

Bulbasaur Charmander Squirtle

Battle sound Compact mode

Capture chance

Potion count

Segmented / Tabs / Chips

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

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

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

05 / Data Display

数据展示组件

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

#025 Pikachu

HP 35

EXP68%

List Rows

Charizard

Fire / Flying · #006

Rare

Squirtle

Water · #007

Caught

Mewtwo

Psychic · #150

Locked

Stats / Progress

HP82 / 100

EXP44%

Catch rate18%

Snorlax Lv. 42HP

Data Table

Sortable / Filterable

Dex	Name	Type	Region	Status
`#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

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

Advanced Type Filter

Multi-select

Selected: Electric, Flying

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

Evolution Chain

Detail page

172

Pichu

High friendship

025

Pikachu

Thunder Stone

026

Raichu

Final form

Move Cards

Power / Accuracy / PP

Thunderbolt

May leave the target with paralysis.

SpecialPower 90Acc 100PP 15

Quick Attack

This move always goes first.

PhysicalPower 40Acc 100PP 30

Iron Tail

May lower the target's Defense stat.

PhysicalPower 100Acc 75PP 15

Electro Ball

The faster the user, the greater the power.

SpecialVariableAcc 100PP 10

Weakness Matrix

Electric / Flying sample

0.5x

Team Builder Slots

6 slots

Compare Panel

3-way compare

MetricPikachuRaichuJolteon

TypeElectricElectricElectric

HP356065

Attack559065

Speed90110130

AbilityStaticStaticVolt 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.

Open

18h

1Badge

＋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

Current section

Use blue fill for active destination.

‹ 1 2 3 … 9 ›

Mobile Bottom Nav

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

09 / Templates

页面模板

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

#025 Pikachu

#006 Charizard

#007 Squirtle

#133 Eevee

#143 Snorlax

#150 Mewtwo

Pikachu

Mouse Pokémon · Electric

HP 35

Friendship84%

Raichu Lv. 36HP 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);
}

Pokémon UI Library Design Guidelines v3

设计方向

Official First

Game UI, Web Quality

Bright, Not Noisy

System Completeness

官方元素使用规范

可进入 UI 库的元素

仍需控制的元素

视觉令牌

Type Badge Assets

Typography

Catch, Train, Explore

Shape

Elevation

控件库

Buttons

Inputs

Selection Controls

Segmented / Tabs / Chips

数据展示组件

List Rows

Stats / Progress

Data Table

Pokémon 专属组件

Pokémon Autocomplete

Advanced Type Filter

Evolution Chain

Move Cards

Weakness Matrix

Team Builder Slots

Compare Panel

Base Stats Radar

Battle Action Menu

Bag Item Card

Event / Reward

反馈与覆盖层

Alerts

Modal / Toast / Tooltip

No Pokémon found

Loading States

Motion Rules

导航模式

Desktop Shell

Mobile Bottom Nav

页面模板

Pikachu

交付规范

设计验收清单

前端验收清单