来源:Figma 「车品牌 (125)」+「车品牌-黑白」+「车品牌列表-12」+「汽车品牌」共 168+ 次实例抽取
通用化为"品牌 Logo 网格" · 4 个 view · 6/4/3 列网格 / 单列品牌列表 / A-Z 索引
品牌墙 / App 选车入口 / 首页"找品牌"模块。6 列在 PC、3 列在 H5。鼠标悬停转黄底+上移 2px。
从 Figma 「车品牌-黑白」抽取,单色背景适合极简风页面。
车型筛选的侧边栏 / 设置页面。每个品牌显示 Logo + 名称 + 车型数。
从 Figma 「车品牌列表-12」抽取。字母分区 + 4 列 cell,适合品牌数量 > 30 的场景。
| 元素 | 用 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 背景 |