Pokémon Web Screenshot Reference Board

Open source page
to view archived screenshot

1999CORE

Pokémon World

Official portal · 01 Early Web

portal3-columnindexpokedexpattern

Layout: 固定窄幅三栏：左侧目录 / 中央新闻 / 右侧 Pokédex
Pokémon usage: Pikachu、Charizard、Pokédex 直接承担导航与栏目识别
Reuse: Era Masthead、旧网页式 Index、1px divider、source metadata、小型 NEW 标识
Avoid: 不要复制小字号、重复背景覆盖正文、过量 GIF/闪烁效果

早期 Pokémon Web 的关键不是像素，而是“网页是一座可以探索的目录”。

Open source ↗

2002CORE

Pokémon.com

Official portal · 02 Portal / GBA

portalgridbannerbrand

Layout: 左侧纵向导航 + 大主视觉 + 规则化内容格
Pokémon usage: 角色图成为栏目入口与广告视觉，不只作为装饰
Reuse: Docs 首页 Portal 模式、Era Header、系列入口卡、顶部产品/来源 banner
Avoid: 正文不要使用整页高饱和红黄

Pokémon 官网从“网页目录”开始转向“品牌门户”。

Open source ↗

2003CORE

Serebii.net

Community news / database · 02 Portal / GBA

communitydensenewssidebar

Layout: 三栏高密度信息页：左侧巨大目录，中间更新流，右侧最近内容
Pokémon usage: Celebi 是站点身份，内容本身比品牌装饰更重要
Reuse: PokeAmice 的 Archive Index、密集资料目录、Recent / Related 区域
Avoid: 不要把这种密度搬进访谈正文

社区站的价值在“稳定、高密度、每天都能回来找东西”，不是现代品牌感。

Open source ↗

2004CORE

Pokémon Daisuki Club

Official fan community · 02 Portal / GBA

communityplaycharacter-guidescene

Layout: 场景插图 + 个人状态 + 新闻/游戏模块
Pokémon usage: Pokémon 是“陪伴者/引导者”，而不是背景贴纸
Reuse: 轻量 Discovery 元素、人物/宝可梦作为相关内容入口、页边提示
Avoid: 访谈页不要真的做成儿童游戏界面

Pokémon 特有的沉浸感来自“角色陪你找东西”。

Open source ↗

2005CORE

Daisuki Club — Summer Vacation Challenge

Official campaign / interactive · 02 Portal / GBA

campaignmap-navsignpostadventure

Layout: 整页场景化：岛屿/海岸即导航舞台
Pokémon usage: 角色位置本身暗示可互动区域
Reuse: 章节间的轻型“路标”语言、Archive Trail、下一份档案入口
Avoid: 不要加入假小游戏、积分、奖励系统来制造沉浸

DS 前夜的 Pokémon Web 把“Menu”改写成了“Adventure Route”。

Open source ↗

2006SECONDARY

Pokémon Diamond / Pearl Official Site

Game microsite · 03 DS / Play Web

gamemicrositenewsinteractive

Layout: 大顶图 + 左侧 News + 中央互动区 + What's New
Pokémon usage: Electivire 等角色直接驻留在栏目边缘，加强场景感
Reuse: 2006–09 Era 的 panel radius、NEW badge、source strip、模块标题条
Avoid: 不要复刻 Flash 区域和大面积动画

“新作官网”开始从静态宣传册变成持续更新的活动中心。

Open source ↗

2006CORE

Bulbapedia

Community knowledge base · 03 DS / Play Web

wikiknowledgeindexresearch

Layout: MediaWiki 左侧工具栏 + 大型内容索引区
Pokémon usage: 品牌只在 Logo，内容结构完全知识库化
Reuse: Docs 的研究模式、索引、实体页、引用/校对工具
Avoid: 不要让 Wiki 逻辑成为访谈默认阅读逻辑

这是“资料站”与“阅读页”必须拆开的最好反例/正例：找资料优秀，沉浸阅读并不适合。

Open source ↗

2008SECONDARY

PokémonCenter.com

Official commerce · 03 DS / Play Web

commercecatalogcardscollection

Layout: 顶部分类导航 + 主公告 + 商品格 + 右侧账户/搜索
Pokémon usage: 角色主图用来分区和建立购买情绪
Reuse: 杂志/扫描“陈列感”、分类色、Archive Shelf
Avoid: 访谈页不要卡片化每一段

收藏型内容适合借鉴商品陈列逻辑，但文章正文不适合。

Open source ↗

2010CORE

Pokémon.com

Official portal · 04 Connected Web

portalweb2tilestabs

Layout: 顶部 Tab + 大媒体区 + 彩色功能 tile + 右侧内容列
Pokémon usage: Pokédex、小游戏、动画、TCG 各自拥有独立模块语言
Reuse: 2010–12 的 tab、module title、轻 dashboard、状态 badge
Avoid: 不要复刻厚重渐变与光泽按钮

2010 左右是从 Portal 向 Service Dashboard 过渡的关键节点。

Open source ↗

2011CORE

Pokémon Global Link

Official connected service · 04 Connected Web

servicedashboardprofileconnected

Layout: 左侧个人状态 + 中央地图/数据 + 底部服务入口 + 顶部全局导航
Pokémon usage: Pokémon 与玩家数据绑定，角色不再只是广告图
Reuse: 2010–12 Archive Record、人物/游戏实体关联、metadata dashboard
Avoid: 正文绝不进入 Dashboard

PGL 的核心设计理念是：网页已经成为游戏世界的一部分。

Open source ↗

2012CORE

Pokémon Daisuki Club — 2012 redesign

Official editorial / open site · 04 Connected Web

editorialhorizontalmagazineopen

Layout: 横向杂志式内容卡 + 大面积天空/草地背景
Pokémon usage: 底部角色群像把“内容平台”重新连接到 Pokémon 世界
Reuse: Docs 首页 timeline / archive carousel、杂志内容地图
Avoid: 长篇正文不要横向滚动

这是从封闭社区到开放 Editorial Media 的重要转折。

Open source ↗

2014SECONDARY

Slowpoke Paradise / ヤドンパラダイス

Character microsite · 05 Editorial Web

charactermicrositeheroeditorial

Layout: 单一角色大 Hero + 极少导航 + 世界观背景
Pokémon usage: 一只 Pokémon 就是整个站的视觉人格
Reuse: 人物/宝可梦实体页的 accent、专题页，不适合作为通用访谈模板
Avoid: 不要让每篇访谈都绑定一只 Pokémon mascot

现代 Pokémon 网页越来越敢于“少说一点，让角色本身建立气氛”。

Open source ↗

2015CONTRAST

PokéBeach

Community forum / news · 05 Editorial Web

communityforummodernizedidentity

Layout: 大品牌头图 + 常规水平导航 + 论坛分区卡
Pokémon usage: 品牌插图主要集中在 header，内容区更克制
Reuse: 社区/投稿入口、分区页面、讨论区，而非访谈正文
Avoid: 不要把论坛卡片结构当成文章结构

社区站现代化后依然可以保留长年形成的身份，而不必变成官方品牌站。

Open source ↗

2016SECONDARY

Pokémon Global Link — Sun / Moon

Official connected service · 05 Editorial Web

servicedashboardflatdata

Layout: 三栏 Dashboard：功能菜单 / News+统计 / Calendar+Ranking
Pokémon usage: Pokémon 出现在任务、奖励与战绩语境中
Reuse: Research mode、状态字段、筛选/排行等数据页面
Avoid: 不要把数据卡塞进阅读层

2016 的 PGL 已从 Web 2.0 视觉转向更清晰的应用界面。

Open source ↗

2019CORE

Pokémon Sword / Shield Official Site

Game microsite · 06 Switch Microsite

gameheroregionminimal-nav

Layout: 全宽 Hero + 极简顶栏 + 下方卡片式 Topics
Pokémon usage: Zacian / Zamazenta 与 Galar 景观直接构成页面舞台
Reuse: 2017–21 的大图标题、章节 lead、版本双色 accent
Avoid: 访谈页不要首屏占满整屏 Hero

Switch 时代的官方站不再靠按钮证明“这是 Pokémon”，而靠世界观本身。

Open source ↗

2021CONTRAST

Pokémon UNITE

Game / service microsite · 06 Switch Microsite

gamelandingdynamicmodern

Layout: 斜切大 Hero + 顶部细导航 + TOPICS 纵向内容
Pokémon usage: 战斗动作直接成为版式方向性
Reuse: 活动页/赛事页可借鉴动势与大图，但不适合历史访谈默认页
Avoid: 不要把强运动视觉应用到历史档案

现代 Pokémon 产品站越来越接近标准高质量产品 Landing Page。

Open source ↗

2026CORE

Pokémon Official Website — refreshed design

Official portal · 07 Modern Archive

portalmoderncleanimage-first

Layout: 轻量顶栏 + 大卡片轮播 + Pick Up / Topic 纵向区块
Pokémon usage: 品牌已足够成熟，不需要密集 Pokémon 装饰
Reuse: PokeAmice 2026 默认层：安静、现代、Entity/Archive 优先
Avoid: 不要为了“宝可梦感”强行恢复旧时代装饰

2026 的终点应该是：怀旧退到内容关系里，界面本身成熟而安静。

Open source ↗