🚗 Brand Grid · 品牌 Logo Grid

来源:Figma 「车品牌 (125)」+「车品牌-黑白」+「车品牌列表-12」+「汽车品牌」共 168+ 次实例抽取
通用化为"品牌 Logo 网格" · 4 个 view · 6/4/3 列网格 / 单列品牌列表 / A-Z 索引

① Grid 6 列 · 12 品牌

品牌墙 / App 选车入口 / 首页"找品牌"模块。6 列在 PC、3 列在 H5。鼠标悬停转黄底+上移 2px。

Nissan
Toyota
Honda
Volkswagen
Kia
Hyundai
MG
XPENG
BYD
Tesla
BMW
Audi

② Grid 4 列 · 单色版(黑白)

从 Figma 「车品牌-黑白」抽取,单色背景适合极简风页面。

Nissan
Toyota
Honda
Volkswagen
Kia
Hyundai
MG
Tesla

③ Brand List · 单列品牌列表(带车型数)

车型筛选的侧边栏 / 设置页面。每个品牌显示 Logo + 名称 + 车型数。

Nissan
日产 · 日本
3 款车型
Kia
起亚 · 韩国
2 款车型
Hyundai
现代 · 韩国
5 款车型
MG
名爵 · 上汽
2 款车型

④ Brand Index · A-Z 字母索引

从 Figma 「车品牌列表-12」抽取。字母分区 + 4 列 cell,适合品牌数量 > 30 的场景。

A
Audi
Acura
Alfa Romeo
Aston Martin
B
BMW
BYD
Bentley
Buick
T
Tesla
Toyota
Tiguan
Troller

🎨 对应 Design Tokens

元素用 Token
Cell 默认--white 背景 + --grey-100 边框
Cell hover--yellow-50 背景 + --yellow-500 边框 + 上移 2px
Cell active--yellow-50 背景 + 右上角 ✓
Cell 黑白版Logo 容器 --grey-900 + 白字
Logo 圆形容器48×48px 圆 + 字母 / 真实品牌色(可拓展)
Letter header--grey-50 背景 + --grey-600 文字 12px / 700
Letter cell hover--yellow-50 背景