qia/docs/ui-spec.md

掐日子（qia）UI 设计规范

版本：v1.0.0 更新日期：2026-01-29 设计风格：苹果公司风格，浅色系

---

1 设计原则

1.1 整体设计理念

掐日子的设计遵循"简洁、高效、温暖"三大核心理念，以苹果Human Interface Guidelines为设计准则，打造轻便易用的日期管理工具。

简洁性原则：去除一切不必要的视觉元素，让用户专注于核心内容。界面采用大量留白，通过清晰的层级结构引导用户视线，避免信息过载带来的认知负担。每一个设计决策都经过深思熟虑，确保每个元素都有其存在的必要性。

高效性原则：以用户任务为中心，优化操作流程，减少用户点击次数。AI智能解析功能让添加纪念日和提醒变得像发消息一样简单，自然语言交互降低了学习成本。快速响应和流畅的动效设计提升了整体使用效率。

温暖性原则：通过精心设计的细节传递产品的温度。倒计时显示让用户感受到时间的珍贵，贴心的到期提醒帮助用户不再错过重要日期。整体视觉风格采用温暖的浅色调，营造舒适愉悦的使用氛围。

1.2 视觉风格定义

掐日子采用苹果公司风格的浅色系设计语言，具体特征如下：

设计属性	规范定义
设计风格	苹果扁平化设计，轻拟物元素
主色调	系统蓝品牌色 #007AFF
背景色	浅灰白色 #FFFFFF / #F5F5F7
圆角风格	中等圆角，8px-16px
阴影效果	柔和投影，轻量级层级阴影
字体风格	系统字体，无衬线清晰可读
图标风格	线性图标，圆角处理

---

2 颜色系统

2.1 主色调（品牌色）

品牌色是产品视觉识别的核心，应用于主要操作按钮、链接、选中状态等关键元素。

颜色名称	色值	CSS变量	使用场景
品牌主色	#007AFF	--color-primary	主要按钮背景、链接、选中状态、图标填充
品牌浅色	#EAF3FF	--color-primary-light	背景色、悬停背景、选中框背景
品牌深色	#0056CC	--color-primary-dark	按下状态、disabled状态

2.2 辅助色

辅助色用于补充品牌色，在特定场景下传达特定含义。

颜色名称	色值	CSS变量	使用场景
紫色	#AF52DE	--color-purple	AI功能标识、特殊纪念日
绿色	#34C759	--color-green	完成状态、成功提示
橙色	#FF9500	--color-orange	警告提示、待处理提醒
红色	#FF3B30	--color-red	错误状态、删除操作、已错过提醒
黄色	#FFCC00	--color-yellow	提醒标识、重要日期高亮

2.3 中性色

中性色用于文字、背景、边框等基础UI元素，构建界面的层次结构。

颜色名称	色值	CSS变量	使用场景
文字主色	#1D1D1F	--color-text-primary	标题、重要内容
文字次色	#48484A	--color-text-secondary	正文内容
文字三级	#86868B	--color-text-tertiary	辅助说明、时间显示
文字占位	#C7C7CC	--color-text-placeholder	输入框占位符、空状态
背景白色	#FFFFFF	--color-bg-white	卡片、弹窗背景
背景浅灰	#F5F5F7	--color-bg-light	页面背景、分组标题背景
背景更深灰	#E5E5EA	--color-bg-darker	分割线、边框
边框颜色	#C6C6C8	--color-border	输入框边框、分隔线

2.4 功能色

功能色用于传达操作结果的反馈信息。

功能	色值	CSS变量	应用示例
成功	#34C759	--color-success	完成checkmark、创建成功提示
警告	#FF9500	--color-warning	即将过期提醒、需要注意
错误	#FF3B30	--color-error	删除确认、表单验证失败
信息	#007AFF	--color-info	普通提示、新功能引导

2.5 语义色

语义色用于区分不同类型的内容，增强信息的可识别性。

内容类型	色值	CSS变量	使用场景
纪念日色条	#AF52DE	--color-anniversary	纪念日卡片左侧色条
提醒色条	#007AFF	--color-reminder	提醒卡片左侧色条
便签色条	#34C759	--color-note	便签区域标识
AI对话色	#5856D6	--color-ai	AI消息气泡、对话框
农历标识	#FF9500	--color-lunar	农历日期文字颜色
法定节假日	#FF3B30	--color-holiday	节假日标签

2.6 颜色令牌汇总

:root {
  /* 品牌色 */
  --color-primary: #007AFF;
  --color-primary-light: #EAF3FF;
  --color-primary-dark: #0056CC;

  /* 辅助色 */
  --color-purple: #AF52DE;
  --color-green: #34C759;
  --color-orange: #FF9500;
  --color-red: #FF3B30;
  --color-yellow: #FFCC00;

  /* 中性色 */
  --color-text-primary: #1D1D1F;
  --color-text-secondary: #48484A;
  --color-text-tertiary: #86868B;
  --color-text-placeholder: #C7C7CC;
  --color-bg-white: #FFFFFF;
  --color-bg-light: #F5F5F7;
  --color-bg-darker: #E5E5EA;
  --color-border: #C6C6C8;

  /* 功能色 */
  --color-success: #34C759;
  --color-warning: #FF9500;
  --color-error: #FF3B30;
  --color-info: #007AFF;

  /* 语义色 */
  --color-anniversary: #AF52DE;
  --color-reminder: #007AFF;
  --color-note: #34C759;
  --color-ai: #5856D6;
  --color-lunar: #FF9500;
  --color-holiday: #FF3B30;
}

---

3 字体系统

3.1 字体家族

采用系统默认字体，确保在不同平台上的最佳可读性和一致性。

字体类型	字体名称	CSS声明	说明
主字体	-apple-system	font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, sans-serif	iOS/macOS系统字体
中文字体	PingFang SC	'PingFang SC', 'Microsoft YaHei', sans-serif	苹方字体（Mac）/微软雅黑（Windows）
等宽字体	SF Mono	font-family: 'SF Mono', Monaco, Menlo, monospace	用于代码展示

3.2 字号层级

建立清晰的字号层级体系，确保信息层次的视觉区分。

字号名称	字号大小	行高	字重	CSS变量	使用场景
超大标题	34px	41px	700	--font-size-xxl	宣传页主标题
大标题	28px	34px	700	--font-size-xl	页面主标题
中标题	22px	28px	600	--font-size-lg	区域标题、卡片标题
小标题	18px	24px	600	--font-size-md	分组标题、重要内容
正文字	16px	24px	400	--font-size-base	正文内容、输入文字
小正文	14px	20px	400	--font-size-sm	次要说明、卡片内容
辅助文字	12px	16px	400	--font-size-xs	时间标签、占位符
最小文字	10px	14px	400	--font-size-xxs	徽章标签、数量标识

3.3 字重规范

字重	CSS值	使用场景
700 (Bold)	700 / bold	大标题、区域标题、数字强调
600 (Semibold)	600	小标题、卡片标题、需要强调的文字
400 (Regular)	400 / normal	正文内容、辅助说明

3.4 行高规范

行高与字号保持合理比例，确保文本的可读性。

字号范围	推荐行高	行高/字号比例
28px及以上	字号 + 6-8px	约 1.2
18-22px	字号 + 6px	约 1.3
14-16px	字号 + 8px	约 1.5
12px及以下	字号 + 4px	约 1.4

3.5 字体令牌汇总

:root {
  /* 字号 */
  --font-size-xxl: 34px;
  --font-size-xl: 28px;
  --font-size-lg: 22px;
  --font-size-md: 18px;
  --font-size-base: 16px;
  --font-size-sm: 14px;
  --font-size-xs: 12px;
  --font-size-xxs: 10px;

  /* 行高 */
  --line-height-xxl: 41px;
  --line-height-xl: 34px;
  --line-height-lg: 28px;
  --line-height-md: 24px;
  --line-height-base: 24px;
  --line-height-sm: 20px;
  --line-height-xs: 16px;
  --line-height-xxs: 14px;

  /* 字重 */
  --font-weight-bold: 700;
  --font-weight-semibold: 600;
  --font-weight-regular: 400;
}

---

4 间距系统

4.1 基础间距单位

以 4px 作为基础间距单位，所有间距值均为 4px 的倍数。

间距名称	间距值	CSS变量	用途
间距-xs	4px	--spacing-xs	元素内部最小间距
间距-sm	8px	--spacing-sm	紧密相关的元素间距
间距-md	16px	--spacing-md	标准间距
间距-lg	24px	--spacing-lg	较大间距
间距-xl	32px	--spacing-xl	大间距
间距-2xl	48px	--spacing-2xl	区块间距
间距-3xl	64px	--spacing-3xl	页面边距

4.2 组件内间距

组件类型	水平 padding	垂直 padding	CSS变量
卡片类	16px	12px	--card-padding
按钮类	16px	8px	--button-padding
输入框	12px	10px	--input-padding
弹窗内容	24px	20px	--modal-padding
分组标题	16px	8px	--section-padding

4.3 组件间距

场景	间距值	CSS变量
卡片之间	12px	--gap-card
分组之间	24px	--gap-section
列表项之间	8px	--gap-item
表单项之间	16px	--gap-form
按钮之间	12px	--gap-button
图标与文字	8px	--gap-icon-text
标题与内容	8px	--gap-title-content

4.4 页面边距

页面类型	水平边距	垂直边距	最大宽度
宣传页	24px	0	1200px
登录/注册页	24px	0	400px
Home页	24px	0	1200px
弹窗	24px	0	480px

4.5 间距令牌汇总

:root {
  /* 基础间距 */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 32px;
  --spacing-2xl: 48px;
  --spacing-3xl: 64px;

  /* 组件内间距 */
  --card-padding: 16px 12px;
  --button-padding: 8px 16px;
  --input-padding: 10px 12px;
  --modal-padding: 24px 20px;
  --section-padding: 8px 16px;

  /* 组件间距 */
  --gap-card: 12px;
  --gap-section: 24px;
  --gap-item: 8px;
  --gap-form: 16px;
  --gap-button: 12px;
  --gap-icon-text: 8px;
  --gap-title-content: 8px;

  /* 页面边距 */
  --page-margin: 24px;
  --page-max-width: 1200px;
}

---

5 圆角与阴影

5.1 圆角层级

建立统一的圆角规范，不同场景使用不同层级的圆角。

圆角层级	圆角值	CSS变量	使用场景
圆角-sm	4px	--radius-sm	小按钮、徽章、标签
圆角-md	8px	--radius-md	卡片、输入框、弹窗
圆角-lg	12px	--radius-lg	大卡片、分组容器
圆角-xl	16px	--radius-xl	弹窗、侧边栏
圆角-full	9999px	--radius-full	头像、圆形按钮、Pill标签

5.2 阴影规范

阴影用于表现层级关系和交互状态，层级越高阴影越明显。

阴影层级	阴影值	CSS变量	使用场景
阴影-sm	0 1px 2px rgba(0, 0, 0, 0.05)	--shadow-sm	微小投影、分隔线
阴影-md	0 2px 8px rgba(0, 0, 0, 0.08)	--shadow-md	卡片悬停、按钮按下
阴影-lg	0 4px 16px rgba(0, 0, 0, 0.1)	--shadow-lg	弹窗、下拉菜单
阴影-xl	0 8px 32px rgba(0, 0, 0, 0.12)	--shadow-xl	重要弹窗、模态框
阴影-inner	inset 0 2px 4px rgba(0, 0, 0, 0.06)	--shadow-inner	输入框内陷效果

5.3 交互状态阴影

交互状态	阴影效果	说明
默认状态	0 1px 3px rgba(0, 0, 0, 0.06)	基础卡片投影
悬停状态	0 4px 12px rgba(0, 122, 255, 0.15)	品牌色微光效果
按下状态	0 0 0 3px rgba(0, 122, 255, 0.2)	品牌色边框扩散
选中状态	0 0 0 2px var(--color-primary)	品牌色描边

5.4 圆角与阴影令牌汇总

:root {
  /* 圆角 */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* 阴影 */
  --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
  --shadow-md: 0 2px 8px rgba(0, 0, 0, 0.08);
  --shadow-lg: 0 4px 16px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 8px 32px rgba(0, 0, 0, 0.12);
  --shadow-inner: inset 0 2px 4px rgba(0, 0, 0, 0.06);
}

---

6 组件设计规范

6.1 纪念日卡片

纪念日卡片用于展示用户的重要日期，支持倒计时显示和重复规则标识。

布局结构：

┌─────────────────────────────────────────────────────────┐
│ [左侧色条]  纪念日名称（主标题）                    [标识] │
│            倒计时 + 日期信息（副标题）                    │
└─────────────────────────────────────────────────────────┘

尺寸规范：

属性	规范值
卡片高度	60px
左侧色条宽度	4px
圆角	8px
内边距	12px 16px

样式规范：

元素	字号	字重	颜色
纪念日名称	16px	600	--color-text-primary
倒计时	14px	400	--color-text-secondary
日期信息	12px	400	--color-text-tertiary
色条颜色	-	-	--color-anniversary (#AF52DE)

状态定义：

状态	视觉效果
默认	白色背景，轻微阴影
悬停	背景色变浅，品牌色微光阴影
即将到来（30天内）	高亮显示，倒计时文字使用品牌色
今日	背景色为 --color-primary-light，倒计时显示"今日"

重复标识：

重复类型	图标/标识	说明
仅一次	无标识	不重复
年度重复	循环图标 (360度旋转箭头)	每年重复
月度重复	双循环图标	每月重复

农历/节假日标识：

类型	样式
农历	橙色文字"农历"，带月亮图标
法定节假日	红色"节假日"标签

6.2 提醒卡片

提醒卡片用于展示待办任务，支持完成标记和过期状态。

布局结构：

┌─────────────────────────────────────────────────────────┐
│ [checkbox]  提醒内容（主标题）                    [时间] │
└─────────────────────────────────────────────────────────┘

尺寸规范：

属性	规范值
卡片高度	50px
checkbox尺寸	20px x 20px
圆角	8px
内边距	10px 16px

样式规范：

元素	字号	字重	颜色
提醒内容	14px	400	--color-text-primary
时间信息	12px	400	--color-text-tertiary
色条颜色	-	-	--color-reminder (#007AFF)

Checkbox 样式：

属性	规范值
未选中	灰色边框，圆角4px
选中	绿色背景 + 白色checkmark
悬停	边框加深

分组样式：

分组名称	标题颜色	标题字号
今天	--color-text-primary	14px
明天	--color-text-primary	14px
更久之后	--color-text-secondary	14px
已错过	--color-error	14px

完成状态：

状态	视觉效果
未完成	正常显示
已完成	内容灰色划线，时间显示完成时间，移至分组底部
已过期	红色高亮，显示在"已错过"分组顶部

6.3 便签编辑器

便签区域提供富文本编辑能力，采用 Quill 编辑器组件。

布局结构：

┌─────────────────────────────────────────────────────┐
│  [便签标题]                              [清空按钮] │
├─────────────────────────────────────────────────────┤
│  ┌───────────────────────────────────────────────┐ │
│  │              富文本编辑器容器                   │ │
│  │              （可编辑区域）                     │ │
│  └───────────────────────────────────────────────┘ │
│                              [保存状态：已保存]      │
└─────────────────────────────────────────────────────┘

尺寸规范：

属性	规范值
便签区域高度	占右侧区域的50%
编辑器最小高度	200px
工具栏高度	40px
圆角	8px

工具栏按钮：

按钮	图标	用途
H1	标题1	一级标题
H2	标题2	二级标题
B	粗体	加粗文字
I	斜体	斜体文字
U	下划线	添加下划线
S	删除线	添加删除线
链接	链接图标	插入链接
有序列表	数字列表	有序列表
无序列表	圆点列表	无序列表

保存状态指示：

状态	颜色	位置
已保存	--color-success	右上角
保存中	--color-text-tertiary + 加载动画	右上角
离线保存	--color-warning	右上角

空状态：

状态	显示内容
便签为空	"开始记录你的想法..."，灰色文字 --color-text-placeholder

6.4 AI对话框

AI对话区域是产品的核心特色，采用聊天气泡形式展示对话历史。

布局结构：

┌─────────────────────────────────────────────────────┐
│  [AI区域标题]                                        │
├─────────────────────────────────────────────────────┤
│  ┌───────────────┐  ┌─────────────────────────────┐ │
│  │               │  │ AI消息气泡                  │ │
│  │    AI头像     │  │ （自然语言解析结果）         │ │
│  │               │  └─────────────────────────────┘ │
│  └───────────────┘                                  │
│  ┌─────────────────────────────┐  ┌───────────────┐ │
│  │ 用户消息气泡                 │  │               │ │
│  │ （用户输入内容）             │  │    用户头像   │ │
│  └─────────────────────────────┘  │               │ │
│                                   └───────────────┘ │
├─────────────────────────────────────────────────────┤
│  ┌─────────────────────────────────────────────────┐│
│  │  [输入框：输入描述要添加的纪念日或提醒...] [发送] ││
│  └─────────────────────────────────────────────────┘│
└─────────────────────────────────────────────────────┘

气泡样式：

气泡类型	背景色	圆角	最大宽度
AI气泡	--color-bg-light (浅灰)	16px	280px
用户气泡	--color-primary-light (浅蓝)	16px	280px
解析确认卡片	白色 + 边框	12px	100%

气泡内边距：12px 16px

发送按钮：

状态	背景色	效果
默认	--color-primary	蓝色圆形
悬停	--color-primary-dark	颜色加深
disabled	--color-text-placeholder	灰色不可点击

解析确认卡片：

元素	样式
卡片背景	白色，边框2px实线 --color-primary-light
卡片圆角	12px
确认按钮	主要按钮样式
修改按钮	次要按钮样式

6.5 详情弹窗

点击纪念日或提醒卡片时弹出详情弹窗，支持二次编辑。

布局结构：

┌─────────────────────────────────────────────────────┐
│  [X]  编辑纪念日 / 编辑提醒                     [删除]│
├─────────────────────────────────────────────────────┤
│  ┌───────────────────────────────────────────────┐ │
│  │  表单字段区域                                  │ │
│  │  - 输入框/选择器                               │ │
│  │  - 开关/下拉选择                               │ │
│  └───────────────────────────────────────────────┘ │
├─────────────────────────────────────────────────────┤
│            [取消]                    [保存]          │
└─────────────────────────────────────────────────────┘

尺寸规范：

属性	规范值
弹窗宽度	400px - 480px
弹窗最大高度	80vh
圆角	16px
头部高度	52px
底部按钮区高度	60px

头部样式：

元素	样式
标题	中标题 18px，字重 600，颜色 --color-text-primary
关闭按钮	20px x 20px，灰色图标
删除按钮	红色文字按钮，字重 500

表单控件样式：

控件类型	样式规范
输入框	高度 40px，圆角 8px，边框 --color-border，聚焦边框 --color-primary
标签	小正文 14px，颜色 --color-text-secondary，上方留白 8px
开关	iOS样式，圆角 16px，滑块白色
下拉选择	右侧下拉箭头，高度 40px，圆角 8px

操作按钮：

按钮类型	样式
保存按钮	主要按钮，蓝色背景，白色文字
取消按钮	次要按钮，灰色边框，黑色文字
删除按钮	危险按钮，红色文字，无背景

6.6 按钮样式

按钮是用户操作的主要入口，需要清晰区分主次和危险操作。

主要按钮：

属性	规范值
背景色	--color-primary (#007AFF)
文字颜色	白色
高度	36px - 44px
圆角	8px
字重	600
字重	14px
内边距	0 20px
悬停背景	--color-primary-dark (#0056CC)

次要按钮：

属性	规范值
背景色	透明
文字颜色	--color-text-primary
边框	1px solid --color-border
高度	36px - 44px
圆角	8px
字号	14px
内边距	0 20px
悬停背景	--color-bg-light

文字按钮：

属性	规范值
背景色	透明
文字颜色	--color-primary
高度	36px
圆角	无（0px）
字号	14px
内边距	0 12px
悬停背景	--color-primary-light

危险按钮（删除/清除）：

属性	规范值
背景色	透明
文字颜色	--color-error
边框	1px solid --color-error
高度	36px - 44px
圆角	8px
字号	14px
内边距	0 20px
悬停背景	--color-error + 10% opacity

按钮尺寸变体：

变体	高度	字号	用途
小按钮	28px	12px	工具栏、徽章
中按钮	36px	14px	表单操作
大按钮	44px	16px	主要行动按钮
大号按钮	52px	17px	宣传页CTA

---

7 页面布局规范

7.1 宣传页布局

宣传页采用极简设计，分为三个主要区域。

布局结构：

┌─────────────────────────────────────────────────────────┐
│  [Logo: 掐日子 + Slogan]                     [登录][注册]│
├─────────────────────────────────────────────────────────┤
│                                                         │
│              让重要日期不再错过                          │
│                                                         │
│        AI智能解析  ·  轻松管理纪念日  ·  即时提醒        │
│                                                         │
│                      [开始使用]                         │
│                                                         │
├─────────────────────────────────────────────────────────┤
│     © 2025 掐日子    隐私政策    服务条款                │
└─────────────────────────────────────────────────────────┘

区域规范：

区域	高度	背景色
顶部导航区	60px	白色
内容展示区	自适应（最小600px）	白色
底部信息区	60px	--color-bg-light

Logo规范：

元素	样式
产品名称	20px，字重 700，品牌色
Slogan	14px，灰色 --color-text-tertiary

CTA按钮：

属性	规范值
尺寸	大号按钮（高度52px）
圆角	26px (pill形状)
文字	"开始使用"

7.2 登录/注册页布局

登录和注册采用同一页面布局，通过Tab切换。

布局结构：

┌─────────────────────────────────────────────────────┐
│                                                     │
│                    [Logo]                           │
│                                                     │
│              [登录]        [注册]                   │
│                                                     │
│  ┌─────────────────────────────────────────────┐   │
│  │  邮箱地址                                    │   │
│  └─────────────────────────────────────────────┘   │
│  ┌─────────────────────────────────────────────┐   │
│  │  密码                                        │   │
│  └─────────────────────────────────────────────┘   │
│                                                     │
│               [登录按钮]                            │
│                                                     │
│          还没有账号？点击注册                        │
│                                                     │
└─────────────────────────────────────────────────────┘

卡片规范：

属性	规范值
卡片宽度	400px
卡片圆角	16px
卡片背景	白色
卡片阴影	--shadow-lg

输入框规范：

属性	规范值
高度	44px
圆角	8px
边框	1px solid --color-border
间距	下边距 16px

Tab样式：

状态	视觉效果
激活	下边框2px实线 --color-primary，文字品牌色
未激活	文字灰色 --color-text-tertiary，无下划线

7.3 Home页四区布局

Home页面采用三栏布局，总宽度1200px居中显示。

布局结构：

┌─────────────────────────────────────────────────────────────────────┐
│                         顶部导航栏（60px）                            │
├───────────────┬───────────────────────────────────────┬─────────────┤
│               │                                       │             │
│  纪念日列表   │              主内容区                  │   便签区    │
│  （40%宽度）  │              （40%宽度）              │  （20%）    │
│               │                                       │             │
│  + 纪念日     │                                       │  ┌─────────┐│
│  + 提醒列表   │                                       │  │  便签   ││
│  （40%宽度）  │                                       │  │  编辑器 ││
│               │                                       │  └─────────┘│
│               │                                       │             │
│               │                                       │  ┌─────────┐│
│               │                                       │  │  AI     ││
│               │                                       │  │  对话   ││
│               │                                       │  │  区域   ││
│               │                                       │  └─────────┘│
│               │                                       │             │
├───────────────┴───────────────────────────────────────┴─────────────┤
│                         底部版权信息                                  │
└─────────────────────────────────────────────────────────────────────┘

顶部导航栏：

属性	规范值
高度	60px
背景色	白色
内容	Logo + 用户邮箱 + 登出按钮

左侧区域（纪念日 + 提醒）：

属性	规范值
宽度占比	40%（约480px）
纪念日区域高度	50%
提醒区域高度	50%
分割线	1px solid --color-bg-darker

主内容区（便签 + AI对话）：

属性	规范值
宽度占比	60%（约720px）
便签区域高度	50%
AI对话区域高度	50%
便签与AI之间	16px间距

底部版权信息：

属性	规范值
高度	40px
背景色	--color-bg-light
文字	12px，灰色 --color-text-tertiary

7.4 响应式适配规则

断点	屏幕宽度	布局变化
xs	< 768px	单栏堆叠布局
sm	768px - 1024px	两栏布局（左侧合并，右侧保留）
md	1024px - 1200px	三栏布局（宽度压缩）
lg	1200px - 1440px	标准三栏布局
xl	> 1440px	三栏布局（内容居中，最大宽度1440px）

移动端适配方案：

场景	适配方案
导航栏	折叠为汉堡菜单
三栏布局	改为Tab切换（纪念日/提醒/其他）
弹窗	全屏显示
卡片	占据全宽

---

8 交互动效规范

8.1 悬停效果

交互元素在鼠标悬停时应有明确的视觉反馈。

元素类型	悬停效果
主要按钮	背景色加深5%，轻微上移2px
次要按钮	背景色变为 --color-bg-light
卡片	阴影加深，轻微上移，cursor变为pointer
链接	颜色变为 --color-primary-dark，下划线显示
表格行	背景色变为 --color-bg-light

8.2 点击反馈

用户点击操作应有即时的视觉反馈。

元素类型	点击效果
按钮	背景色变暗10%，轻微下沉
卡片	阴影消失，按下效果
checkbox	立即显示选中状态，checkmark动画
链接	颜色变化，无动画
图标按钮	灰色圆形背景闪烁

checkbox动画：

阶段	动画效果
点击瞬间	缩放0.8倍
选中完成	缩放1.0倍 + 绿色背景填充
checkmark	从中心向外展开的线条动画

8.3 过渡动画

元素状态变化时使用平滑的过渡动画。

通用过渡：

transition: all 0.2s ease-out;

具体场景动画：

场景	进入动画	离开动画
弹窗显示	fadeIn + scale(0.95) -> fadeIn + scale(1)	fadeOut + scale(1) -> fadeOut + scale(0.95)
下拉菜单	slideDown (200ms)	slideUp (150ms)
列表项增删	fadeIn + slideIn	fadeOut + slideOut
卡片悬停	scale(1.02)	scale(1)
按钮点击	scale(0.95)	scale(1)

AI消息动画：

阶段	动画效果	时长
消息出现	渐显 + 打字机效果	300ms
解析中	气泡呼吸动画	持续
发送中	发送按钮旋转	持续

保存状态指示：

状态切换	动画效果
保存中 -> 已保存	绿色对勾从小到大的缩放动画
离线保存	黄色警告图标闪烁

8.4 动画令牌

:root {
  /* 动画时长 */
  --duration-fast: 150ms;
  --duration-base: 200ms;
  --duration-slow: 300ms;
  --duration-slower: 500ms;

  /* 动画缓动 */
  --ease-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-in: cubic-bezier(0, 0, 0.2, 1);
  --ease-in-out: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-bounce: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

---

9 图标规范

9.1 图标风格

图标采用线性风格（Outline），与苹果设计语言保持一致。

属性	规范定义
线条粗细	1.5px - 2px
圆角	2px（线条端点）
颜色	与文字颜色一致
尺寸	16px, 20px, 24px, 32px
风格	线性、空心、圆角矩形框

9.2 图标尺寸

尺寸	CSS变量	使用场景
16px	--icon-size-sm	表格内图标、标签旁图标
20px	--icon-size-md	卡片内图标、按钮图标
24px	--icon-size-lg	区域标题图标、独立图标
32px	--icon-size-xl	Logo、空状态图标

9.3 图标使用场景

图标名称	图标形状	用途
添加	加号 (+)	添加按钮
删除	垃圾桶	删除操作
编辑	铅笔	编辑操作
保存	磁盘/对勾	保存操作
关闭	X号	关闭弹窗
日历	日历形状	纪念日/日期相关
闹钟	闹钟形状	提醒相关
星星	星星形状	重要标记
循环	循环箭头	重复规则
月亮	月亮形状	农历标识
旗帜	旗帜形状	节假日标识
勾选	对勾	完成、确认
发送	箭头	发送消息
用户	用户头像	个人中心
登出	退出箭头	登出操作
AI	机器人头像	AI对话区域
便签	文档形状	便签区域

9.4 图标颜色规则

场景	图标颜色
普通操作	--color-text-secondary
主要操作	--color-primary
完成状态	--color-success
警告状态	--color-warning
危险操作	--color-error
禁用状态	--color-text-placeholder

9.5 图标令牌

:root {
  /* 图标尺寸 */
  --icon-size-sm: 16px;
  --icon-size-md: 20px;
  --icon-size-lg: 24px;
  --icon-size-xl: 32px;

  /* 图标颜色 */
  --icon-color-primary: var(--color-primary);
  --icon-color-secondary: var(--color-text-secondary);
  --icon-color-tertiary: var(--color-text-tertiary);
  --icon-color-success: var(--color-success);
  --icon-color-warning: var(--color-warning);
  --icon-color-error: var(--color-error);
  --icon-color-disabled: var(--color-text-placeholder);

  /* 图标线条粗细 */
  --icon-stroke-width: 1.5px;
}

---

10 设计资源

10.1 组件速查表

组件名称	高度	圆角	字号	主要颜色
纪念日卡片	60px	8px	16px/14px	--color-anniversary
提醒卡片	50px	8px	14px	--color-reminder
主要按钮	36-44px	8px	14-16px	--color-primary
次要按钮	36-44px	8px	14px	透明+边框
输入框	40px	8px	14px	--color-border
弹窗	自适应	16px	16px	白色
聊天气泡	自适应	16px	14px	浅灰/浅蓝

10.2 常见颜色组合

场景	背景色	文字色	边框色
主要按钮	#007AFF	#FFFFFF	无
次要按钮	透明	#1D1D1F	#C6C6C8
纪念日卡片	#FFFFFF	#1D1D1F	无
提醒卡片	#FFFFFF	#1D1D1F	无
AI气泡	#F5F5F7	#1D1D1F	无
用户气泡	#EAF3FF	#1D1D1F	无
弹窗	#FFFFFF	#1D1D1F	无
错误提示	#FFF2F2	#FF3B30	#FF3B30

10.3 快捷开发样式类

/* 按钮类 */
.btn-primary {
  background: var(--color-primary);
  color: white;
  height: 40px;
  border-radius: 8px;
  font-weight: 600;
  transition: all 0.2s ease;
}

.btn-secondary {
  background: transparent;
  color: var(--color-text-primary);
  border: 1px solid var(--color-border);
  height: 40px;
  border-radius: 8px;
  transition: all 0.2s ease;
}

/* 卡片类 */
.card {
  background: white;
  border-radius: 8px;
  padding: 12px 16px;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s ease;
}

.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

/* 输入框类 */
.input {
  height: 40px;
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 0 12px;
  font-size: 14px;
  transition: all 0.2s ease;
}

.input:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px var(--color-primary-light);
}

/* 弹窗类 */
.modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  animation: fadeIn 0.2s ease;
}

.modal {
  background: white;
  border-radius: 16px;
  max-width: 480px;
  width: 90%;
  max-height: 80vh;
  overflow: auto;
  animation: scaleIn 0.2s ease;
}

---

11 附录

11.1 设计决策记录

决策项	决策内容	理由
圆角值	8px作为标准圆角	与苹果设计语言一致，视觉平衡
主色调	系统蓝 #007AFF	用户熟悉度高，易于识别操作入口
卡片高度	纪念日60px，提醒50px	纪念日信息更多，需要更大空间
间距单位	4px	与Tailwind CSS一致，便于开发
图标风格	线性图标	与苹果风格一致，清晰易读

11.2 待确认事项

以下事项需要在设计评审中确认：

1. 倒计时超过365天时是否显示"还有X年"还是统一显示天数
2. 法定节假日是否需要特殊视觉效果（如红色高亮）
3. AI对话区域的聊天记录是否需要持久化存储
4. 便签是否支持多种颜色标签或主题

11.3 更新日志

版本	日期	更新内容	更新人
v1.0.0	2026-01-29	初稿完成	UI设计师