# Wpyw Mail 客户端界面设计系统

来源：用户提供的 Outlook 深色主题截图；目标平台为 WinUI 3，采用克制、简洁的邮件工作台布局。

## 视觉原则

- 以深黑灰为主，不使用大面积装饰图或强烈渐变。
- 信息架构优先：左侧导航、文件夹、中间邮件列表、右侧阅读区。
- 蓝色只用于当前状态、链接、未读提示和主操作。
- 圆角控制在 6–8px；分隔线比阴影更重要。
- 动画只承担状态变化反馈，时长约 160–220ms，不持续循环。

## 颜色

| 用途 | 值 |
| --- | --- |
| 页面背景 | `#1E1E1E` |
| 导航栏 | `#151515` |
| 内容表面 | `#252525` |
| 抬升表面 | `#2D2D2D` |
| 分隔线 | `#3A3A3A` |
| 主文字 | `#F2F2F2` |
| 次文字 | `#B7B7B7` |
| 辅助文字 | `#848484` |
| 强调色 | `#5BA7FF` |
| 未读底色 | `#263D55` |
| 错误色 | `#E77878` |

## 布局

- 顶栏 52px：品牌、搜索、账户和设置。
- 操作栏 44px：写信、刷新、连接状态。
- 主体四列：58px 图标栏、220px 文件夹、360px 邮件列表、剩余阅读区。
- 基础间距采用 4/8/12/18/26px，正文行高 24px。

## 组件

- 主按钮：蓝色实底、6px 圆角、短文本。
- 次按钮：透明底、灰色文字，仅在悬停或聚焦时显现背景。
- 邮件卡片：发件人、主题、预览、时间四级信息；未读使用轻微蓝色底和半粗文字。
- 阅读区：主题 26px，发件人 14px，正文 15px；不使用复杂富文本工具栏。

## 动画

- 登录成功后切换视图使用淡入/轻微位移。
- 阅读区加载使用一次性淡入。
- 搜索使用 260ms 防抖；不使用粒子、弹跳或持续动画。