本文从 UI 设计的角度分析 ImportantDays 项目的视觉设计语言，包括色彩体系、排版规范、卡片设计、阴影与圆角、图标使用、空状态设计，以及如何在 ArkUI 声明式 UI 中实现一致的设计风格。

一、设计语言概述

ImportantDays 采用简约现代的 UI 设计风格，整体特点：

• 柔和色调：避免高饱和度，使用偏柔和的颜色
• 圆角设计：统一的圆角风格
• 卡片布局：信息以卡片形式组织
• 轻量阴影：轻微的阴影增强层次感
• 留白充足：合理的间距让信息呼吸

二、色彩体系

主题色

const PRIMARY_COLOR = '#FF6B6B';  // 珊瑚红

#FF6B6B 是一种柔和的红色，比纯红 #FF0000 更舒适，适合长时间观看。

辅助色

颜色	十六进制	用途
珊瑚红	#FF6B6B	主题色、强调
青色	#4ECDC4	次要强调
黄色	#F7DC6F	特别提示
浅红背景	#FFF0F0	倒数标签背景
浅青背景	#E8FAF8	正数标签背景

文字色阶

颜色	十六进制	用途
深灰	#333333	主标题
中灰	#666666	副文本
浅灰	#999999	辅助文本
更浅灰	#BBBBBB	备注文本
最浅灰	#CCCCCC	占位/非当月

背景色阶

颜色	十六进制	用途
白色	#FFFFFF	主背景
极浅灰	#FAFAFA	卡片背景
浅灰	#F5F5F5	输入框背景
更浅灰	#F0F0F0	分割线
最浅灰	#EEEEEE	分割线

色阶设计原则

文字色阶: #333333 → #666666 → #999999 → #BBBBBB → #CCCCCC
背景色阶: #FFFFFF → #FAFAFA → #F5F5F5 → #F0F0F0 → #EEEEEE

每级色阶有足够的对比度差异，确保视觉层次清晰。

三、排版规范

字体大小

大小	用途
28vp	统计卡片大数字
24vp	页面主标题
22vp	卡片天数数字
20vp	日历标题、统计数字
16vp	卡片标题、选中 Tab
15vp	表单文字
14vp	正文、设置项
13vp	辅助文本、按钮文字
12vp	日期文本、标签
11vp	操作按钮、统计标签
10vp	年视图星期、小日历
8vp	日历标题预览

字体粗细

粗细	用途
FontWeight.Bold	页面标题、统计数字
FontWeight.Medium	卡片标题、弹窗标题
FontWeight.Normal	正文

字体大小递进

8 → 10 → 11 → 12 → 13 → 14 → 15 → 16 → 20 → 22 → 24 → 28

每级递进 1-4vp，确保层次分明。

四、间距系统

统一间距

export const COMMON_PADDING = 12;
export const COMMON_PADDING_SMALL = 8;
export const COMMON_PADDING_LARGE = 16;

实际使用的间距

间距	用途
4vp	小间距（按钮内边距）
8vp	中间距（元素间距）
12vp	标准间距（左右边距）
16vp	大间距（页面边距）
20vp	统计卡片上下间距
32vp	头部上下间距

页面边距

所有页面统一使用 16vp 作为左右边距：

.padding({ left: 16, right: 16 })

五、圆角系统

圆角值

圆角	用途
4vp	小标签（倒数/正数）
8vp	卡片、输入框、日期格
12vp	设置项、统计卡片
22vp	添加按钮（胶囊形）

圆角设计原则

小元素 → 4vp
中元素 → 8vp
大元素 → 12vp
按钮   → 高度/2（胶囊形）

圆角值与元素大小成正比，视觉协调。

六、阴影设计

卡片阴影

.shadow({ radius: 2, color: '#10000000', offsetX: 0, offsetY: 1 })

参数	值	说明
radius	2	模糊半径
color	#10000000	6% 透明度黑色
offsetX	0	水平偏移
offsetY	1	垂直偏移 1vp

统计卡片阴影

.shadow({ radius: 4, color: '#10000000', offsetX: 0, offsetY: 2 })

比列表卡片阴影稍大，增强浮起感。

阴影设计原则

• 轻量：#10000000（6% 透明度）非常微妙
• 向下：offsetY 为正，模拟自然光照
• 无水平偏移：offsetX: 0，对称阴影

七、卡片设计

列表页卡片

┌──────┬──────────────────────────┬──────────┐
│      │ 标题              📌     │ 置顶      │
│ 天数 │ 日期                     │ 编辑      │
│ 标签 │ 显示文本                  │ 删除      │
│      │ 备注                     │          │
└──────┴──────────────────────────┴──────────┘
背景: #FAFAFA  圆角: 8vp  阴影: 轻微

日历页卡片

┌─┬───────────────────────────────┬──────┐
│ │ 标题                          │ 标签  │
│ │ 日期 · 显示文本                │      │
└─┴───────────────────────────────┴──────┘
背景: #FAFAFA  圆角: 8vp

统计卡片

┌────────────────────────────────────┐
│   12        5        1        6    │
│  全部     即将      今天     已过   │
└────────────────────────────────────┘
背景: #FFFFFF  圆角: 12vp  阴影: 中等

八、按钮设计

浮动添加按钮

Button() {
  Row() {
    Text('+').fontSize(28).fontColor('#FFFFFF')
    Text('添加').fontSize(14).fontColor('#FFFFFF').margin({ left: 4 })
  }
}
.width(100).height(44)
.borderRadius(22)  // 胶囊形
.backgroundColor('#FF6B6B')

倒数/正数切换按钮

Button('倒数 (还有X天)')
  .height(40)
  .borderRadius(8)
  .backgroundColor(this.isCountdown ? this.selectedColor : '#F5F5F5')

设置项

Row() {
  Text('通知提醒')...
  Toggle({ type: ToggleType.Switch, isOn: this.notificationEnabled })
    .selectedColor('#FF6B6B')
}
.height(52)
.backgroundColor('#FFFFFF')
.borderRadius(12)

九、空状态设计

Column() {
  Text('🗓').fontSize(60).margin({ bottom: 16 })
  Text('还没有重要日').fontSize(16).fontColor('#999999')
  Text('点击右下角添加你的第一个重要日')
    .fontSize(13).fontColor('#CCCCCC').margin({ top: 4 })
}

空状态设计原则

1. 视觉元素：emoji 作为图标，无需图片资源
2. 主文本：说明当前状态
3. 引导文本：指导用户下一步操作
4. 居中布局：占据剩余空间，视觉平衡

十、日历日期项设计

月视图日期项

┌────────┐
│   15   │  ← 16vp 数字
│ ● ●    │  ← 5vp 圆点
│ 妈妈生日│  ← 8vp 标题预览
└────────┘
高度: 52vp

年视图日期项

┌─────┐
│ •15 │  ← 11vp 数字 + 4vp 圆点
└─────┘
高度: 22vp

日期项的视觉层次

选中背景圆（36vp）
    ↓
今天边框圆（36vp）
    ↓
日期数字
    ↓
重要日圆点
    ↓
标题预览

多层视觉元素通过 Stack 叠加，每一层条件渲染。

十一、Toggle 开关设计

Toggle({ type: ToggleType.Switch, isOn: this.notificationEnabled })
  .selectedColor('#FF6B6B')

Toggle 设计

• 开关类型：Switch（滑动开关）
• 选中颜色：主题色 #FF6B6B
• 与设置项在同一行，右对齐

十二、设计一致性检查

颜色使用一致性

元素	颜色	一致性
主题按钮	#FF6B6B	✓
选中 Tab	#FF6B6B	✓
Toggle 选中	#FF6B6B	✓
今天日期	#FF6B6B	✓
添加按钮	#FF6B6B	✓

圆角使用一致性

元素	圆角	一致性
列表卡片	8vp	✓
日历卡片	8vp	✓
输入框	8vp	✓
设置项	12vp	✓（更大元素更大圆角）
统计卡片	12vp	✓

间距使用一致性

场景	间距	一致性
页面左右边距	16vp	✓
卡片间距	8vp	✓
按钮内边距	4vp	✓

十三、总结

ImportantDays 的 UI 设计体现了以下原则：

1. 色彩柔和：所有颜色偏柔和，不刺眼
2. 层次分明：文字和背景都有 5 级色阶
3. 圆角统一：按元素大小递进的圆角系统
4. 阴影轻量：6% 透明度的微妙阴影
5. 间距规律：4/8/12/16/32vp 的间距系统
6. 空状态友好：emoji + 引导文字
7. 设计一致：同类元素在所有页面保持一致

这套设计语言在 ArkUI 声明式 UI 中得到了完整的实现，每个设计决策都有对应的代码支撑。