557 lines
10 KiB
Markdown
557 lines
10 KiB
Markdown
|
---
|
|||
|
|
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 状态组件
|