Files

TerryM 4e33c7deef docs: add wallet/favorites UI redesign requirements brief

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@anthropic.com>

2026-06-02 10:42:57 +08:00

10 KiB

Raw Blame History

title, type, date, scope

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

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

1. 设计目标

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

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

用户只需要理解：

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

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

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

2. 最重要的设计决策

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

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

使用浏览器钱包登录

适用：

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

原因：

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

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

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

打开 TokenPocket
打开 MetaMask
打开 imToken

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

使用当前钱包登录

QR / Reown 不作为主设计

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

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

其他登录方式

或折叠项中。

默认设计不要同时展示：

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

这样会显得重复。

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

Header 钱包入口
Mobile menu 钱包入口
钱包登录弹窗：桌面版
钱包登录弹窗：手机版
收藏按钮
资源卡片上的收藏按钮位置
我的收藏页面：未登录状态
我的收藏页面：已登录列表状态
我的收藏页面：空状态
我的收藏页面：加载状态
我的收藏页面：错误状态
我的收藏页面：资源不可用状态

4. Header 钱包入口

未登录

显示：

Connect Wallet
连接钱包

桌面端：

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

移动端：

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

已登录

显示短地址：

0x12...ab34

点击后显示 dropdown：

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

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

5.1 桌面版目标

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

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

5.2 桌面版结构

建议结构：

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

5.3 桌面版不要展示

默认不要展示：

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

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

5.4 桌面版文案建议

标题：

连接钱包

说明：

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

按钮：

使用浏览器钱包登录

辅助说明：

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

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

6.1 手机版目标

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

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

6.2 手机版结构

建议结构：

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

6.3 手机版钱包按钮

显示三个按钮：

TokenPocket
MetaMask
imToken

设计建议：

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

6.4 手机版文案建议

标题：

连接钱包

说明：

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

当前钱包按钮：

使用当前钱包登录

钱包 App 分组标题：

打开钱包 App

按钮：

TokenPocket
MetaMask
imToken

7. QR / 备用方式处理

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

建议：

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

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

如果必须设计，注意：

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

8. 收藏按钮设计

状态

收藏按钮需要这些状态：

未收藏
已收藏
加载中
禁用/请求中

视觉建议

未收藏：

空心心形
低对比背景

已收藏：

实心心形
品牌金色

加载中：

spinner 或轻量 loading

行为

未登录用户点击收藏：

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

已登录用户点击收藏：

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

摆放要求

收藏按钮会出现在：

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

设计上需要避免：

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

9. 我的收藏页面

页面路径：

/favorites

9.1 未登录状态

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

需要包含：

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

9.2 已登录状态

页面需要包含：

页面标题
搜索框
排序
分类筛选
收藏资源列表
分页
清除筛选按钮

9.3 搜索/筛选区

支持：

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

排序选项：

最近收藏
最近发布
热门

桌面端：

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

移动端：

纵向堆叠。
不要太密。

9.4 收藏资源卡片

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

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

点击行为：

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

9.5 不可用资源状态

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

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

设计要求：

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

9.6 空状态

空状态包括：

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

需要显示：

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

9.7 加载状态

需要设计：

skeleton card
或列表 loading placeholder

要求：

不要让布局大幅跳动。

9.8 错误状态