---
title: "钱包登录与收藏功能 UI 设计需求（极简版）"
type: design-brief
date: 2026-06-01
scope: 登录弹窗、钱包入口、收藏按钮、我的收藏页面
---

# 钱包登录与收藏功能 UI 设计需求（极简版）

## 1. 设计目标

这份文档给 UI 设计师使用，目的是重新设计 Arkie Library 的「钱包登录」和「我的收藏」体验。

核心原则：**不要给用户太多选择。**

用户只需要理解：

1. 连接钱包。
2. 签名验证地址。
3. 收藏资源。
4. 在「我的收藏」里管理收藏。

钱包登录只用于验证地址：

- 不会发起交易。
- 不会产生 gas。
- 不会读取资产。
- 不需要切换链。

## 2. 最重要的设计决策

### 桌面端只显示「浏览器钱包」

桌面端登录弹窗只需要一个主要操作：

```text
使用浏览器钱包登录
```

适用：

- MetaMask 浏览器插件
- 其他浏览器注入钱包

原因：

- 电脑端用户主要使用浏览器插件钱包。
- 不要在桌面端同时展示 TokenPocket、MetaMask、imToken、扫码备用等多个入口。
- 过多选择会让用户觉得重复和困惑。

### 手机端显示「打开钱包 App」

手机端可以跳转钱包 App，因此手机端可以显示：

```text
打开 TokenPocket
打开 MetaMask
打开 imToken
```

如果用户已经在钱包内置浏览器中打开网站，则显示：

```text
使用当前钱包登录
```

### QR / Reown 不作为主设计

TokenPocket QR、Reown / WalletConnect QR 可以作为技术备用方案存在，但**不要作为默认主 UI 平铺展示**。

如果必须保留，可以放在：

```text
其他登录方式
```

或折叠项中。

默认设计不要同时展示：

- 浏览器钱包
- TokenPocket QR
- 打开 TokenPocket
- 打开 MetaMask
- 打开 imToken
- MetaMask / imToken QR 备用

这样会显得重复。

## 3. 需要设计的页面/组件

1. Header 钱包入口
2. Mobile menu 钱包入口
3. 钱包登录弹窗：桌面版
4. 钱包登录弹窗：手机版
5. 收藏按钮
6. 资源卡片上的收藏按钮位置
7. 我的收藏页面：未登录状态
8. 我的收藏页面：已登录列表状态
9. 我的收藏页面：空状态
10. 我的收藏页面：加载状态
11. 我的收藏页面：错误状态
12. 我的收藏页面：资源不可用状态

## 4. Header 钱包入口

### 未登录

显示：

```text
Connect Wallet
连接钱包
```

桌面端：

- 放在 Header 右侧。
- 是一个清楚的主按钮。
- 不需要在 Header 展示钱包品牌。

移动端：

- 放在 menu 中。
- 点击后关闭 menu，再打开登录弹窗。

### 已登录

显示短地址：

```text
0x12...ab34
```

点击后显示 dropdown：

- 完整钱包地址
- Disconnect / 断开连接

## 5. 钱包登录弹窗：桌面版

### 5.1 桌面版目标

桌面版只服务一个主要场景：

> 用户用浏览器插件钱包登录。

### 5.2 桌面版结构

建议结构：

1. 标题：连接钱包
2. 简短说明：签名仅用于验证地址，不会产生交易或 gas
3. 一个主按钮：使用浏览器钱包登录
4. 辅助说明：请确认浏览器已安装钱包插件
5. 关闭按钮

### 5.3 桌面版不要展示

默认不要展示：

- TokenPocket QR 登录
- Open TokenPocket
- Open MetaMask
- Open imToken
- MetaMask / imToken QR fallback
- WalletConnect / Reown 说明

这些对桌面用户来说会造成选择过多。

### 5.4 桌面版文案建议

标题：

```text
连接钱包
```

说明：

```text
签名验证钱包地址，不会发起交易，也不需要 Gas。
```

按钮：

```text
使用浏览器钱包登录
```

辅助说明：

```text
请使用已安装钱包插件的浏览器，例如 MetaMask。
```

## 6. 钱包登录弹窗：手机版

### 6.1 手机版目标

手机版主要服务两个场景：

1. 用户在普通手机浏览器打开网站，需要跳转钱包 App。
2. 用户已经在钱包内置浏览器打开网站，可以直接使用当前钱包。

### 6.2 手机版结构

建议结构：

1. 标题：连接钱包
2. 简短说明：签名仅用于验证地址，不会产生交易或 gas
3. 如果检测到当前浏览器已有钱包：显示「使用当前钱包登录」
4. 否则显示「选择钱包 App 打开」
5. 钱包 App 按钮列表
6. 关闭按钮

### 6.3 手机版钱包按钮

显示三个按钮：

- TokenPocket
- MetaMask
- imToken

设计建议：

- 使用列表或大按钮。
- 每个按钮只展示钱包名称和图标。
- 不需要额外解释每个钱包的技术路径。

### 6.4 手机版文案建议

标题：

```text
连接钱包
```

说明：

```text
请在钱包 App 中打开本站并签名登录。
```

当前钱包按钮：

```text
使用当前钱包登录
```

钱包 App 分组标题：

```text
打开钱包 App
```

按钮：

```text
TokenPocket
MetaMask
imToken
```

## 7. QR / 备用方式处理

如果产品仍希望保留 QR 备用能力，设计上应弱化处理。

建议：

- 不默认展开。
- 放在底部小字链接：`其他登录方式`。
- 点击后才显示 QR / WalletConnect 相关内容。

但第一版 UI redesign 可以不设计 QR 主流程。

如果必须设计，注意：

- TokenPocket QR 是中国用户较稳定路径。
- MetaMask / imToken QR 依赖 Reown / WalletConnect，在部分中国网络可能不稳定。
- 这些说明不应占据主弹窗视觉中心。

## 8. 收藏按钮设计

### 状态

收藏按钮需要这些状态：

1. 未收藏
2. 已收藏
3. 加载中
4. 禁用/请求中

### 视觉建议

未收藏：

- 空心心形
- 低对比背景

已收藏：

- 实心心形
- 品牌金色

加载中：

- spinner 或轻量 loading

### 行为

未登录用户点击收藏：

- 打开钱包登录弹窗。
- 登录成功后自动完成收藏。

已登录用户点击收藏：

- 立即反馈状态变化。
- 失败时恢复原状态并提示。

### 摆放要求

收藏按钮会出现在：

- 推荐资源卡片
- 最新资源卡片
- 热门列表
- 资源内容流
- 我的收藏页面卡片

设计上需要避免：

- 挡住主要内容。
- 和下载/预览按钮混淆。
- 点击收藏时误触进入详情页。

## 9. 我的收藏页面

页面路径：

```text
/favorites
```

### 9.1 未登录状态

用户未连接钱包时，页面显示引导。

需要包含：

- 收藏图标或插画
- 标题：我的收藏 / My Favorites
- 说明：连接钱包后可以查看和管理收藏资源
- 主按钮：Connect Wallet / 连接钱包

### 9.2 已登录状态

页面需要包含：

1. 页面标题
2. 搜索框
3. 排序
4. 分类筛选
5. 收藏资源列表
6. 分页
7. 清除筛选按钮

### 9.3 搜索/筛选区

支持：

- 搜索收藏内容
- 按分类筛选
- 排序

排序选项：

- 最近收藏
- 最近发布
- 热门

桌面端：

- 搜索、排序、分类可以一行展示。

移动端：

- 纵向堆叠。
- 不要太密。

### 9.4 收藏资源卡片

每个收藏资源卡片建议展示：

- 封面图
- 标题
- 简短描述
- 分类
- 类型
- 更新时间
- 收藏数
- 收藏按钮

点击行为：

- 可用资源：点击卡片进入详情。
- 不可用资源：不能进入详情，但可以移除收藏。

### 9.5 不可用资源状态

用户收藏过的资源可能之后被下架或隐藏。

这种资源仍然要显示在收藏列表里。

设计要求：

- 显示 unavailable / 不可用标签。
- 降低视觉权重。
- 不显示可点击详情行为。
- 保留移除收藏按钮。

### 9.6 空状态

空状态包括：

1. 用户还没有收藏。
2. 搜索/筛选没有结果。

需要显示：

- 空状态图标
- 简短说明
- 如果是筛选无结果，需要提供清除筛选入口

### 9.7 加载状态

需要设计：

- skeleton card
- 或列表 loading placeholder

要求：

- 不要让布局大幅跳动。

### 9.8 错误状态

需要设计：

- 加载失败提示
- 重试或刷新建议

## 10. 响应式要求

### Desktop

- Header 显示完整导航。
- 钱包入口在右侧。
- 登录弹窗只显示浏览器钱包登录。
- 我的收藏页面内容宽度适中。
- 搜索/筛选尽量横向排列。

### Mobile

- Header 使用 menu。
- 钱包入口在 menu 中。
- 登录弹窗显示当前钱包登录或钱包 App 跳转。
- 我的收藏页面单列展示。
- 搜索/筛选纵向排列。
- 收藏按钮容易点击。

## 11. 视觉方向

当前网站视觉基调：

- 深色背景
- 金色品牌色
- 圆角卡片
- 半透明/轻玻璃质感
- 移动端偏 App 化体验

UI redesign 可以优化：

- 登录弹窗更简单
- 桌面端只给一个主操作
- 手机端强调打开钱包 App
- 收藏按钮更清楚
- 我的收藏页面筛选区更轻量
- 空状态更友好

## 12. 多语言注意事项

UI 需要支持：

- 繁体中文
- 简体中文
- 英文
- 韩文
- 日文
- 越南文
- 印尼文
- 马来文

设计时需要预留文字长度差异。

尤其注意：

- 英文按钮可能较长。
- 越南文/印尼文/马来文文本可能比中文长。
- 移动端按钮不要因为文本过长而溢出。

## 13. 设计验收清单

### 钱包登录

- [ ] 桌面 Header 有 Connect Wallet。
- [ ] 手机 menu 有 Connect Wallet。
- [ ] 桌面登录弹窗只有一个主操作：使用浏览器钱包登录。
- [ ] 手机登录弹窗可以打开 TokenPocket / MetaMask / imToken。
- [ ] 签名无交易、无 gas 的说明清楚。
- [ ] 已登录状态能显示短地址。
- [ ] 用户可以断开连接。

### 收藏功能

- [ ] 收藏按钮状态清楚。
- [ ] 未收藏和已收藏容易区分。
- [ ] loading 状态明确。
- [ ] 收藏按钮不会和卡片点击冲突。
- [ ] 未登录点击收藏会引导连接钱包。

### 我的收藏页面

- [ ] 未登录状态有明确 CTA。
- [ ] 已登录页面有搜索、排序、分类筛选。
- [ ] 收藏资源卡片信息足够。
- [ ] 不可用资源状态清楚且可移除。
- [ ] 空状态、加载状态、错误状态完整。
- [ ] Desktop 和 mobile 都有设计稿。

## 14. 设计交付建议

建议 UI 交付这些画面：

1. Desktop Header：未登录
2. Desktop Header：已登录 dropdown
3. Mobile menu：未登录
4. Desktop wallet modal：只显示浏览器钱包登录
5. Mobile wallet modal：打开钱包 App
6. Favorites page：未登录状态
7. Favorites page：已登录有列表
8. Favorites page：空状态
9. Favorites page：不可用资源卡片
10. Mobile Favorites page
11. Favorite button 状态组件