48 lines
1.7 KiB
Markdown
48 lines
1.7 KiB
Markdown
# 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 防抖；不使用粒子、弹跳或持续动画。
|