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