🎨 UI Design System · Gallery

立即申请 预审 取消

01 · Button

按钮 / 按钮组

22 variant + 按钮组/单选/操作栏/浮动操作栏

CTA核心

02 · Input

输入框

4 variant · 文本/数字/密码/搜索

表单

评分 8.7 #1 SUV

03 · Tag

标签 / 分类标签

评分/排行 + 5 个分类变体

分类筛选

首页车型收藏

04 · Tabbar

底部导航

H5 主导航 · 3-5 tab

导航

✓ 认证 ⭐ 推荐

05 · Badge

徽章

认证 / 资质 / 状态标识

状态

弹窗标题

弹窗内容...

09 · Modal

模态弹窗

3 + Header/Footer slot 复合型

反馈表单

✓ 提交成功

10 · Toast

操作反馈

success / info / warning / error

反馈

选择品牌 ▾

12 · Select

下拉选择

基本 / 带搜索 / 多选

表单

13 · Checkbox

复选框

unchecked / checked / indeterminate / disabled

表单

14 · Radio

单选框

互斥选项

表单

15 · Switch

开关

立即生效设置

表单

← 返回Nissan Versa♡

06 · Top Nav

顶部导航

H5 简单 / H5 完整 / PC 顶栏

导航

18 · Progress ⭐

进度条 / 电量条

Linear + Battery + Circular + Stepper · Figma 缺口 #1

342 次最高频

Display

H2 · Section Title

H3 · Card Title

Body 16px · 段落正文

19 · Typography

字体层级

Display + H1-H6 + Body + 数字 + 字组

排版

✓ ✓ 3 4 5

20 · Steps

流程步骤

横排步骤 / 时间线 / 流程图节点

流程84 次

07 · Loading

加载占位

卡片 / 列表行 / 全页骨架

反馈

📭

暂无数据

08 · Empty State

空状态

无数据 / 无结果 / 错误

反馈

🔍 搜索品牌、车型...

11 · Search

搜索框

基本 / 带快捷键 / H5 嵌入

导航

N M K

16 · Avatar

头像

字母 / 图片 / 状态点 / 头像组

UI

🎉 9月购车节 · 最高优惠 $40,000

17 · Banner

横幅

公告 / 营销 / 警告

营销

综合 ▾ 价格 ▾ 已选 (3)

21 · Filter

筛选

Chip 行 / Sheet / Modal 三容器

筛选

N T K H MG

22 · Brand Grid

品牌 Logo 网格

6/4/3 列 + 黑白 + A-Z 索引

导航168+ 次

1 🚗 Nissan Versa

2 🚙 MG ZS

23 · Ranking

排行榜

标准榜 / 金银铜 / 条形榜

数据

♡ ♥

24 · Favorite

收藏切换

按钮 / 角标 / Tab / 列表行

交互

© 2026 Autocava · 隐私 · 条款

25 · Footer

页面底部

链接 / 简单 / 完整 / 移动 Tabbar

容器

1 🚗 Nissan Versa 2026

01 · Content Card

内容卡(榜单/资讯/商品)

排名 + 图 + 标题 + 价格 + 双 CTA

列表

🚙 简洁卡 · 列表

02 · Simple Card

简洁卡(列表/搜索)

极简信息 · 全宽 CTA

列表

N Nissan · 日产

03 · Brand Card

品牌入口卡

Logo + 品牌名 + 副标 + CTA

品牌

📰

2026 墨西哥汽车市场报告

04 · Article Card

文章 / 资讯卡

横/竖/紧凑/视频 4 视图

内容视频

🚗

Nissan Versa 2026

$389,900

05 · Product Card

商品 / 车型卡

标准/横版/极简/优惠 4 视图

商品促销

Recipe 01 · 反馈流

Modal + Toast + Loading + Empty State

用户点 CTA → 弹窗填表 → Loading → 成功 Toast / 失败 Empty State · 经典反馈闭环

09-modal · 10-toast · 07-loading · 08-empty-state

Recipe 02 · 进度流

Progress + Steps + Battery

多步骤表单 / 续航展示 / 上传进度 / 订单追踪

18-progress · 20-steps · 19-typography

Recipe 03 · 发现流

Brand Grid + Ranking + Filter + Favorite

选车 → 看销量榜 → 筛选条件 → 收藏到我的

22-brand-grid · 23-ranking · 21-filter · 24-favorite · cards/05-product-card

Recipe 04 · 内容卡组合

Content + Article + Product + Brand Card

首页/列表/详情/搜索 — 各种内容卡混排

cards/01-05