UI/UX Design Document: asset-light
版本: 1.0.0
日期: 2025-12-20
设计师: UX Designer Agent
1. 设计概述
1.1 设计目标
为 asset-light 打造一个专业、清晰、高效的桌面应用界面，让用户能够：
- 快速完成资产盘点操作
- 一目了然地了解配置偏离情况
- 轻松分析收益来源
1.2 设计原则
| 原则 | 说明 |
|---|---|
| 数据优先 | 财务数据是核心，设计服务于数据的清晰呈现 |
| 操作高效 | 减少点击次数，常用操作触手可及 |
| 视觉层次 | 重要信息突出，次要信息收敛 |
| 状态明确 | 偏离、正常、警告等状态有清晰的视觉区分 |
2. 视觉风格
2.1 色彩系统
主色调：深蓝专业风
Primary Colors (主色)
├── primary-900: #0F172A (深色背景/侧边栏)
├── primary-800: #1E293B (卡片背景)
├── primary-700: #334155 (次级背景)
├── primary-600: #475569 (边框)
├── primary-100: #F1F5F9 (浅色背景)
└── primary-50: #F8FAFC (页面背景)
Accent Colors (强调色)
├── accent-blue: #3B82F6 (主操作按钮、链接)
├── accent-cyan: #06B6D4 (图表高亮)
└── accent-purple: #8B5CF6 (次要强调)
Semantic Colors (语义色)
├── success: #10B981 (正常/正收益/低配可增加)
├── warning: #F59E0B (轻度偏离/注意)
├── danger: #EF4444 (严重偏离/负收益/超配需减少)
└── neutral: #6B7280 (中性/禁用)
Category Colors (类别专用色)
├── cash: #10B981 (现金类 - 绿色系)
├── stable: #3B82F6 (稳健类 - 蓝色系)
└── advanced: #8B5CF6 (进阶类 - 紫色系)
2.2 字体系统
Font Family
├── 中文: "PingFang SC", "Noto Sans SC", sans-serif
└── 数字: "JetBrains Mono", "SF Mono", monospace (金额专用)
Font Sizes
├── display: 32px / 40px (资产总额等大数字)
├── heading1: 24px / 32px (页面标题)
├── heading2: 18px / 24px (区块标题)
├── heading3: 16px / 22px (卡片标题)
├── body: 14px / 20px (正文)
├── caption: 12px / 16px (辅助文字)
└── micro: 10px / 14px (标签/徽章)
2.3 间距系统
Spacing Scale (4px 基准)
├── xs: 4px
├── sm: 8px
├── md: 16px
├── lg: 24px
├── xl: 32px
└── 2xl: 48px
Component Spacing
├── 页面内边距: 32px
├── 卡片内边距: 24px
├── 卡片间距: 16px
├── 列表项间距: 12px
└── 表单项间距: 16px
2.4 圆角和阴影
Border Radius
├── none: 0
├── sm: 4px (按钮、输入框)
├── md: 8px (卡片、模态框)
├── lg: 12px (大卡片)
└── full: 9999px (徽章、头像)
Box Shadow
├── sm: 0 1px 2px rgba(0,0,0,0.05)
├── md: 0 4px 6px rgba(0,0,0,0.07)
├── lg: 0 10px 15px rgba(0,0,0,0.1)
└── inner: inset 0 2px 4px rgba(0,0,0,0.05)
3. 布局结构
3.1 整体布局
┌──────────────────────────────────────────────────────────────┐
│ Window Title Bar │
├────────────┬─────────────────────────────────────────────────┤
│ │ │
│ │ │
│ Sidebar │ Main Content │
│ (220px) │ Area │
│ │ │
│ │ │
│ │ │
│ │ │
└────────────┴─────────────────────────────────────────────────┘
最小窗口尺寸: 1280 x 720
推荐窗口尺寸: 1440 x 900
3.2 侧边栏设计
┌────────────┐
│ ◉ asset │ <- Logo + App Name
│ light │
├────────────┤
│ │
│ ▣ 首页 │ <- Navigation Items
│ ▢ 资产 │ - Icon + Label
│ ▢ 历史 │ - Active state highlight
│ ▢ 配置 │ - Hover effect
│ ▢ 收益 │
│ │
├────────────┤
│ │
│ ⚙ 设置 │ <- Bottom actions
│ │
└────────────┘
Sidebar Specs:
- Width: 220px (fixed)
- Background: primary-900
- Text: white/gray
- Active item: accent-blue background
- Icon size: 20px
- Item height: 44px
- Item padding: 16px horizontal
4. 页面设计
4.1 首页 (资产总览)
页面目标: 一眼看清资产全貌和配置偏离情况
┌─────────────────────────────────────────────────────────────┐
│ 资产总览 上次盘点: 12-15 │
├─────────────────────────────────────────────────────────────┤
│ ┌─────────────────────────────────────────────────────────┐│
│ │ ¥ 1,234,567.89 ││
│ │ 资产总额 ││
│ │ 较上期 +¥12,345.67 (+1.01%) ↑ ││
│ └─────────────────────────────────────────────────────────┘│
├─────────────────────────────────────────────────────────────┤
│ ┌──────────────────────┐ ┌──────────────────────┐ │
│ │ 当前配置 │ │ 目标配置 │ │
│ │ ┌────────┐ │ │ ┌────────┐ │ │
│ │ │ │ │ │ │ │ │ │
│ │ │ 饼图 │ │ │ │ 饼图 │ │ │
│ │ │ │ │ │ │ │ │ │
│ │ └────────┘ │ │ └────────┘ │ │
│ │ ● 现金 25% │ │ ● 现金 20% │ │
│ │ ● 稳健 38% │ │ ● 稳健 40% │ │
│ │ ● 进阶 37% │ │ ● 进阶 40% │ │
│ └──────────────────────┘ └──────────────────────┘ │
├─────────────────────────────────────────────────────────────┤
│ 配置偏离分析 方案: 平衡型 ▾ │
│ ┌──────────┬──────────┬──────────┬──────────┬───────────┐ │
│ │ 类别 │ 当前 │ 目标 │ 偏离 │ 状态 │ │
│ ├──────────┼──────────┼──────────┼──────────┼───────────┤ │
│ │ 现金类 │ 25% │ 20% │ +5% │ ⚠️ 超配 │ │
│ │ 稳健类 │ 38% │ 40% │ -2% │ ✓ 正常 │ │
│ │ 进阶类 │ 37% │ 40% │ -3% │ ✓ 正常 │ │
│ └──────────┴──────────┴──────────┴──────────┴───────────┘ │
└─────────────────────────────────────────────────────────────┘
组件说明:
| 组件 | 规格 |
|---|---|
| 总额卡片 | 高度 160px, 居中布局, 金额使用 display 字号 |
| 饼图卡片 | 并列双卡片, 各占 50% 宽度, 饼图直径 180px |
| 偏离表格 | 全宽, 斑马纹背景, 状态列使用语义色 |
4.2 资产管理页
页面目标: 管理资产条目，执行盘点操作
┌─────────────────────────────────────────────────────────────┐
│ 资产管理 │
│ ────────────────────────────────── │
│ 共 10 项资产 总市值 ¥500,000.00 [开始盘点] [+ 新增] │
├─────────────────────────────────────────────────────────────┤
│ │
│ ▼ 现金类 3项 ¥100,000.00 │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ ◉ 余额宝 ¥50,000.00 │ │
│ │ 货币基金 [编辑] [删除] │ │
│ ├──────────────────────────────────────────────────────┤ │
│ │ ◉ 活期存款 ¥30,000.00 │ │
│ │ 银行活期 [编辑] [删除] │ │
│ ├──────────────────────────────────────────────────────┤ │
│ │ ◉ 定期存单 ¥20,000.00 │ │
│ │ 大额存单 [编辑] [删除] │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ ▼ 稳健类 2项 ¥150,000.00 │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ ... │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
│ ▼ 进阶类 5项 ¥250,000.00 │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ ... │ │
│ └──────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘
盘点模式:
┌─────────────────────────────────────────────────────────────┐
│ ⚡ 盘点模式 [完成盘点] [取消盘点] │
│ ─────────────────────────────────────────────────────── │
│ 请更新各资产的当前市值 │
├─────────────────────────────────────────────────────────────┤
│ │
│ ▼ 现金类 │
│ ┌──────────────────────────────────────────────────────┐ │
│ │ ◉ 余额宝 │ │
│ │ 上次: ¥50,000.00 → 当前: [¥ 51,234.56 ] │ │
│ ├──────────────────────────────────────────────────────┤ │
│ │ ◉ 活期存款 │ │
│ │ 上次: ¥30,000.00 → 当前: [¥ 30,100.00 ] │ │
│ └──────────────────────────────────────────────────────┘ │
│ ... │
└─────────────────────────────────────────────────────────────┘
盘点模式特殊样式:
- 顶部提示条: accent-blue 背景
- 输入框高亮: accent-blue 边框
- 上次市值: 灰色小字
4.3 新增/编辑资产表单
表单模态框设计:
┌─────────────────────────────────────────┐
│ 新增资产 ✕ │
├─────────────────────────────────────────┤
│ │
│ 资产名称 * │
│ ┌─────────────────────────────────┐ │
│ │ 请输入资产名称 │ │
│ └─────────────────────────────────┘ │
│ │
│ 资产类别 * │
│ ┌─────────────────────────────────┐ │
│ │ 请选择类别 ▾ │ │
│ └─────────────────────────────────┘ │
│ │
│ 子类别 │
│ ┌─────────────────────────────────┐ │
│ │ 可选，如"宽基指数" │ │
│ └─────────────────────────────────┘ │
│ │
│ 当前市值 * │
│ ┌─────────────────────────────────┐ │
│ │ ¥ 0.00 │ │
│ └─────────────────────────────────┘ │
│ │
│ 备注 │
│ ┌─────────────────────────────────┐ │
│ │ │ │
│ │ 可选备注信息 │ │
│ │ │ │
│ └─────────────────────────────────┘ │
│ │
├─────────────────────────────────────────┤
│ [取消] [保存资产] │
└─────────────────────────────────────────┘
Modal Specs:
- Width: 480px
- Padding: 24px
- Background: white
- Shadow: lg
- Border radius: md (8px)
4.4 盘点历史页
┌─────────────────────────────────────────────────────────────┐
│ 盘点历史 │
├─────────────────────────────────────────────────────────────┤
│ │
│ ┌─ 2025 ───────────────────────────────────────────────┐ │
│ │ │ │
│ │ ● 12月15日 │ │
│ │ ┌─────────────────────────────────────────────┐ │ │
│ │ │ 总市值 ¥1,234,567.89 │ │ │
│ │ │ 较上期 +¥12,345.67 (+1.01%) [>] │ │ │
│ │ └─────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ ● 11月15日 │ │
│ │ ┌─────────────────────────────────────────────┐ │ │
│ │ │ 总市值 ¥1,222,222.22 │ │ │
│ │ │ 较上期 +¥8,888.88 (+0.73%) [>] │ │ │
│ │ └─────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ ● 10月15日 │ │
│ │ ┌─────────────────────────────────────────────┐ │ │
│ │ │ 总市值 ¥1,213,333.34 │ │ │
│ │ │ 首次盘点 [>] │ │ │
│ │ └─────────────────────────────────────────────┘ │ │
│ │ │ │
│ └───────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘
时间线样式:
- 左侧垂直线: 2px, primary-600
- 时间节点: 12px 圆点, accent-blue
- 正收益: success 色 + ↑ 箭头
- 负收益: danger 色 + ↓ 箭头
4.5 配置方案页
┌─────────────────────────────────────────────────────────────┐
│ 配置方案 [+ 新建方案] │
├─────────────────────────────────────────────────────────────┤
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ ★ 平衡型 [当前激活] │ │
│ │ ───────────────────────────────────────────────── │ │
│ │ 适合追求稳健增长的投资者 │ │
│ │ │ │
│ │ ┌──────────────────────────────────────────────┐ │ │
│ │ │ ■ 现金类 20% ■ 稳健类 40% ■ 进阶类 40% │ │ │
│ │ │ ████████████████████████████████████████████ │ │ │
│ │ └──────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ [编辑] │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ 保守型 │ │
│ │ ───────────────────────────────────────────────── │ │
│ │ 适合风险厌恶型投资者 │ │
│ │ │ │
│ │ ┌──────────────────────────────────────────────┐ │ │
│ │ │ ■ 现金类 30% ■ 稳健类 50% ■ 进阶类 20% │ │ │
│ │ │ ████████████████████████████████████████████ │ │ │
│ │ └──────────────────────────────────────────────┘ │ │
│ │ │ │
│ │ [设为当前] [编辑] [删除] │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘
方案卡片:
- 激活方案: accent-blue 边框 + 星标
- 配置条: 横向堆叠条形图, 使用类别专用色
4.6 配置方案编辑器
┌─────────────────────────────────────────┐
│ 编辑配置方案 ✕ │
├─────────────────────────────────────────┤
│ │
│ 方案名称 * │
│ ┌─────────────────────────────────┐ │
│ │ 平衡型 │ │
│ └─────────────────────────────────┘ │
│ │
│ 方案描述 │
│ ┌─────────────────────────────────┐ │
│ │ 适合追求稳健增长的投资者 │ │
│ └─────────────────────────────────┘ │
│ │
│ ───────────────────────────────── │
│ 目标配置 总计: 100% │
│ ───────────────────────────────── │
│ │
│ 现金类 │
│ ○────────────●──────────○ 20% │
│ 0% 100% │
│ │
│ 稳健类 │
│ ○──────────────────●────○ 40% │
│ 0% 100% │
│ │
│ 进阶类 │
│ ○──────────────────●────○ 40% │
│ 0% 100% │
│ │
│ ┌─────────────────────────────────┐ │
│ │ [饼图预览] │ │
│ └─────────────────────────────────┘ │
│ │
├─────────────────────────────────────────┤
│ [取消] [保存方案] │
└─────────────────────────────────────────┘
配置编辑器:
- 滑块: accent-blue 轨道
- 总计 != 100% 时: 显示 danger 色警告
- 饼图: 实时预览配置分布
4.7 收益分析页
┌─────────────────────────────────────────────────────────────┐
│ 收益分析 │
│ ───────── │
│ 周期: [季度 ▾] 年份: [2025 ▾] 季度: [Q4 ▾] [自定义] │
├─────────────────────────────────────────────────────────────┤
│ │
│ ┌──────────────────────────┐ ┌──────────────────────────┐ │
│ │ 本期收益 │ │ 收益率 │ │
│ │ │ │ │ │
│ │ +¥ 12,345.67 │ │ +3.21% │ │
│ │ │ │ │ │
│ │ 10/01 → 12/20 │ │ 期初 ¥384,567 │ │
│ └──────────────────────────┘ └──────────────────────────┘ │
│ │
├─────────────────────────────────────────────────────────────┤
│ 收益归因 │
│ ┌──────────┬────────────┬──────────┬──────────┬─────────┐ │
│ │ 类别 │ 收益金额 │ 收益率 │ 贡献度 │ 可视化 │ │
│ ├──────────┼────────────┼──────────┼──────────┼─────────┤ │
│ │ 现金类 │ +¥1,234 │ +1.5% │ 10% │ ███ │ │
│ │ 稳健类 │ +¥3,456 │ +2.8% │ 28% │ ██████ │ │
│ │ 进阶类 │ +¥7,655 │ +5.2% │ 62% │ █████████│ │
│ └──────────┴────────────┴──────────┴──────────┴─────────┘ │
│ │
├─────────────────────────────────────────────────────────────┤
│ 资产趋势 │
│ ┌─────────────────────────────────────────────────────┐ │
│ │ ● │ │
│ │ ● │ │
│ │ ● │ │
│ │ ● │ │
│ │ ● │ │
│ │ ● │ │
│ ├─────────────────────────────────────────────────────┤ │
│ │ 10/15 10/30 11/15 11/30 12/15 12/20 │ │
│ └─────────────────────────────────────────────────────┘ │
│ │
└─────────────────────────────────────────────────────────────┘
收益卡片:
- 正收益: success 色 + 向上箭头
- 负收益: danger 色 + 向下箭头
- 折线图: accent-cyan 色, 数据点 8px 圆点
5. 组件库
5.1 按钮
Primary Button (主按钮)
┌──────────────────┐
│ 保存资产 │ bg: accent-blue, text: white
└──────────────────┘ hover: darken 10%
height: 40px, padding: 0 20px, radius: 4px
Secondary Button (次按钮)
┌──────────────────┐
│ 取消 │ bg: transparent, text: primary-700
└──────────────────┘ border: 1px primary-600
hover: bg primary-100
Danger Button (危险按钮)
┌──────────────────┐
│ 删除 │ bg: danger, text: white
└──────────────────┘ hover: darken 10%
Ghost Button (幽灵按钮)
┌──────────────────┐
│ 编辑 │ bg: transparent, text: accent-blue
└──────────────────┘ hover: bg accent-blue/10
5.2 输入框
Text Input (文本输入)
┌─────────────────────────────────┐
│ 请输入内容 │ height: 40px
└─────────────────────────────────┘ border: 1px primary-600
focus: border accent-blue
error: border danger
Number Input (数字输入 - 金额)
┌─────────────────────────────────┐
│ ¥ 12,345.67 │ font: monospace
└─────────────────────────────────┘ text-align: right
Select (下拉选择)
┌─────────────────────────────────┐
│ 请选择 ▾ │
└─────────────────────────────────┘
5.3 卡片
Base Card (基础卡片)
┌─────────────────────────────────┐
│ │ bg: white
│ │ border: 1px primary-100
│ │ radius: 8px
│ │ shadow: sm
│ │ padding: 24px
└─────────────────────────────────┘
Stat Card (统计卡片)
┌─────────────────────────────────┐
│ 标题 │ 居中布局
│ ────── │ 大数字突出
│ ¥ 1,234,567 │
│ 说明文字 │
└─────────────────────────────────┘
5.4 状态标签
Status Tags (状态标签)
[✓ 正常] bg: success/10, text: success, radius: full
[⚠️ 超配] bg: warning/10, text: warning, radius: full
[❗ 严重偏离] bg: danger/10, text: danger, radius: full
[当前激活] bg: accent-blue/10, text: accent-blue, radius: full
height: 24px, padding: 0 12px, font-size: 12px
5.5 模态框
Modal (模态框)
┌─────────────────────────────────────────┐
│ 标题 ✕ │ <- Header: border-bottom
├─────────────────────────────────────────┤
│ │
│ 内容区域 │ <- Body: padding 24px
│ │
├─────────────────────────────────────────┤
│ [次按钮] [主按钮] │ <- Footer: border-top
└─────────────────────────────────────────┘
width: 480px (form) / 640px (detail)
max-height: 80vh
背景遮罩: rgba(0,0,0,0.5)
6. 交互规范
6.1 加载状态
| 场景 | 交互 |
|---|---|
| 页面加载 | Skeleton 占位符 |
| 按钮加载 | 按钮内 spinner + 禁用 |
| 列表加载 | 列表区域 spinner |
| 保存操作 | 按钮文字变为"保存中..." |
6.2 反馈提示
Toast 消息 (右上角, 自动消失 3s)
┌────────────────────────────────┐
│ ✓ 资产保存成功 │ success
└────────────────────────────────┘
┌────────────────────────────────┐
│ ✕ 保存失败，请重试 │ danger
└────────────────────────────────┘
6.3 确认对话框
删除确认
┌─────────────────────────────────────────┐
│ 确认删除 ✕ │
├─────────────────────────────────────────┤
│ │
│ ⚠️ 确定删除资产「余额宝」吗？ │
│ │
│ 此操作不可撤销。 │
│ │
├─────────────────────────────────────────┤
│ [取消] [确认删除] │
└─────────────────────────────────────────┘
6.4 空状态
无资产时:
┌─────────────────────────────────────────┐
│ │
│ 📦 │
│ │
│ 暂无资产数据 │
│ │
│ 添加您的第一个资产，开始管理财富 │
│ │
│ [+ 添加资产] │
│ │
└─────────────────────────────────────────┘
7. 响应式考虑
| 窗口宽度 | 布局调整 |
|---|---|
| ≥ 1440px | 标准布局 |
| 1280-1439px | 内容区缩窄，保持比例 |
| < 1280px | 不支持（最小宽度限制） |
8. 深色模式 (P1)
深色模式色彩映射:
| 元素 | 浅色模式 | 深色模式 |
|---|---|---|
| 页面背景 | primary-50 | primary-900 |
| 卡片背景 | white | primary-800 |
| 正文颜色 | primary-900 | primary-100 |
| 边框颜色 | primary-200 | primary-700 |
| 强调色 | 保持不变 | 保持不变 |
修订历史
| 版本 | 日期 | 作者 | 变更说明 |
|---|---|---|---|
| 1.0.0 | 2025-12-20 | UX Designer | 初始版本 |