{产品名称} - 视觉与交互 DNA 规范 V1.0

文档说明：

• 本文档定义产品的视觉设计语言和交互设计规范，确保产品设计的一致性和品牌识别度
• DNA（Design & Navigation Architecture）规范是产品设计的核心指导原则
• {} 包裹的内容为占位符，请替换为实际内容
• 引用块 > 中的文字为填写指导，填写后可删除

1. 文档信息 (Document Info)

1.1 版本记录

1.2 文档责任人

2. 设计理念 (Design Philosophy)

2.1 设计原则

定义产品设计的核心原则

简洁高效：

• 界面简洁，信息层次清晰
• 操作流程高效，减少用户操作步骤
• 功能直达，减少导航层级

专业可信：

• 视觉风格专业，体现产品专业性
• 信息准确，数据可靠
• 交互稳定，减少错误

友好易用：

• 交互友好，符合用户习惯
• 反馈及时，操作有明确反馈
• 容错性强，支持撤销和重试

2.2 品牌调性

定义产品的品牌调性和视觉风格

品牌调性：

• 专业：体现产品的专业性和可靠性
• 高效：体现产品的高效性和便捷性
• 友好：体现产品的友好性和易用性
• 陪伴与成长：{例如：达卡鸭的设计不仅仅是工具，更是孩子的伙伴。设计语言应体现：趣味性、安全感、仪式感、简洁性}

视觉风格：

• 现代简约：采用现代简约的设计风格，突出内容
• 清晰明确：信息层次清晰，视觉引导明确
• 统一协调：色彩、字体、间距统一协调
• 多主题支持：{例如：支持探索版、梦幻版、少年版等多种主题，满足不同年龄段和性格偏好的用户需求}

3. 视觉设计规范 (Visual Design System)

3.1 色彩系统 (Color System)

3.1.1 主色调

定义产品的主色调，支持多主题模式

主题模式：

根据产品定位，可支持多种主题模式，满足不同用户群体需求

主色（默认主题）：

• 主色-主：#007AFF（蓝色）
  • 使用场景：主要按钮、链接、选中状态、重要信息
  • RGB：rgb(0, 122, 255)
  • HSL：hsl(210, 100%, 50%)

主色-浅：#E6F2FF（浅蓝色）

• 使用场景：背景、标签背景、选中状态背景
• RGB：rgb(230, 242, 255)

主色-深：#0051D5（深蓝色）

• 使用场景：按钮按下状态、链接悬停状态
• RGB：rgb(0, 81, 213)

色彩原则：

定义色彩使用的基本原则

1. 状态关联：完成/成功态使用绿色，待办/进行态使用淡橙色
2. 分色管理：不同功能入口采用淡彩色背景区分（如淡蓝、淡绿、淡紫）
3. 文字对比：主文字使用深灰，次要说明使用中灰

3.1.2 功能色

定义功能色（成功、警告、错误、信息）

成功色：

• 成功-主：#34C759（绿色）
  • 使用场景：成功提示、完成状态、正向操作
• 成功-浅：#E6F7ED（浅绿色）
  • 使用场景：成功状态背景

警告色：

• 警告-主：#FF9500（橙色）
  • 使用场景：警告提示、待处理状态、注意信息
• 警告-浅：#FFF4E6（浅橙色）
  • 使用场景：警告状态背景

错误色：

• 错误-主：#FF3B30（红色）
  • 使用场景：错误提示、失败状态、危险操作
• 错误-浅：#FFE6E6（浅红色）
  • 使用场景：错误状态背景

信息色：

• 信息-主：#5AC8FA（浅蓝色）
  • 使用场景：信息提示、说明文字
• 信息-浅：#E6F7FD（浅蓝色）
  • 使用场景：信息状态背景

3.1.3 中性色

定义中性色（文字、背景、分割线等）

文字颜色：

• 文字-主：#000000（黑色）
  • 使用场景：主要文字、标题
• 文字-次：#666666（深灰色）
  • 使用场景：次要文字、正文
• 文字-辅助：#999999（灰色）
  • 使用场景：辅助文字、说明文字
• 文字-禁用：#CCCCCC（浅灰色）
  • 使用场景：禁用状态文字

背景颜色：

• 背景-主：#FFFFFF（白色）
  • 使用场景：页面背景、卡片背景
• 背景-次：#F5F5F5（浅灰色）
  • 使用场景：列表背景、分割区域背景
• 背景-遮罩：rgba(0, 0, 0, 0.5)（半透明黑色）
  • 使用场景：弹窗遮罩、浮层遮罩

分割线颜色：

• 分割线-主：#E5E5E5（浅灰色）
  • 使用场景：列表分割线、卡片分割线
• 分割线-次：#F0F0F0（浅灰色）
  • 使用场景：区域分割线

3.2 字体系统 (Typography System)

3.2.1 字体家族

定义字体家族

中文字体：

• iOS：PingFang SC
• Android：Microsoft YaHei（微软雅黑）
• Web：-apple-system, BlinkMacSystemFont, “Segoe UI”, “Microsoft YaHei”, sans-serif

英文字体：

• iOS：SF Pro Text
• Android：Roboto
• Web：-apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, sans-serif

3.2.2 字号规范

定义字号规范

3.2.3 行高规范

定义行高规范

• 单行文字：行高 = 字号 × 1.2
• 多行文字：行高 = 字号 × 1.5
• 列表项：行高 = 字号 × 1.8

3.3 图形与材质 (Graphics & Texture)

定义图形风格和材质效果

3D 粘土质感 (Claymorphism)：

• 说明：按钮和卡片应具有微小的内阴影和柔和的外阴影，模拟真实物理世界的触感
• 应用场景：按钮、卡片、弹窗等交互元素

圆角规范：

• 硬件端：12px - 24px（甚至全圆）
• 移动端：16px（卡片），8px（小按钮）
• Web端：8px（卡片），4px（小按钮）

图标风格：

• 风格：圆润的粗线条图标，避免尖锐边缘，增加安全感
• 尺寸：16px（小图标）、24px（中图标）、32px（大图标）

3.4 间距系统 (Spacing System)

3.3.1 基础间距单位

定义基础间距单位

基础间距单位：8px（所有间距应为8px的倍数）

3.3.2 间距规范

定义间距规范

3.3.3 页面边距

定义页面边距

• 页面左右边距：16px
• 页面上下边距：16px
• 卡片内边距：16px

3.5 圆角系统 (Border Radius System)

3.6 阴影系统 (Shadow System)

3.7 图标系统 (Icon System)

3.6.1 图标尺寸

定义图标尺寸

• 小图标：16px × 16px（用于列表项、标签）
• 中图标：24px × 24px（用于按钮、卡片）
• 大图标：32px × 32px（用于页面标题、重要操作）

3.6.2 图标风格

定义图标风格

• 线性图标：用于常规操作、导航
• 填充图标：用于选中状态、重要操作
• 图标颜色：跟随文字颜色或功能色

4. 交互设计规范 (Interaction Design System)

4.1 交互原则

定义交互设计原则

即时反馈：

• 用户操作后立即给出反馈
• 加载状态明确显示
• 操作结果清晰提示

容错设计：

• 支持撤销和重试
• 错误提示友好明确
• 操作确认机制完善

一致性：

• 相同功能使用相同交互方式
• 交互模式统一
• 操作习惯一致

4.2 交互动效

定义交互动效规范

4.2.1 页面转场动画

• 进入动画：从右侧滑入，时长300ms，缓动函数 ease-out
• 退出动画：向左侧滑出，时长300ms，缓动函数 ease-in

4.2.2 弹窗动画

• 进入动画：从底部向上滑入，时长300ms，缓动函数 ease-out
• 退出动画：向底部滑出，时长300ms，缓动函数 ease-in
• 背景遮罩：淡入淡出，时长300ms

4.2.3 按钮动画

• 按下动画：背景色变深，缩放0.98，时长100ms
• 释放动画：恢复原状，时长100ms

4.3 交互反馈

定义交互反馈方式

视觉反馈：

• 成功操作：所有的成功操作必须伴随”撒花”或”星星飞入”动画
• 按钮点击：显示点击态（颜色变化或阴影效果）
• 列表项点击：显示点击态，跳转页面
• 卡片点击：显示点击态，跳转详情页

听觉反馈：

• TTS语音：温暖的TTS回应（非机械音），用于重要操作确认
• 音效：轻快的音效（如Cha-ching!），用于成功操作

触觉反馈：

• 线性马达：短震动（Haptic），模拟真实按键感
• 应用场景：按钮点击、重要操作确认

加载反馈：

• 页面加载：显示Loading动画
• 列表加载：显示下拉刷新动画、上拉加载动画
• 操作提交：显示Loading提示，防止重复提交

成功反馈：

• 操作成功：显示Toast提示（如”抢单成功”、”切换成功”）
• 数据更新：自动刷新页面或列表

失败反馈：

• 网络异常：显示Toast提示”网络异常，请稍后重试”，支持重试
• 操作失败：显示Toast提示具体错误信息
• 数据加载失败：显示空状态，支持重试

4.4 跨端同步逻辑 (Cross-Terminal Logic)

定义跨端同步的交互逻辑

同步策略：

• 毫秒级反馈：{例如：家长在App修改设置后，硬件端需在3s内展示同步动效（如达卡鸭点头并说”收到啦”）}
• 冲突解决策略：{例如：家长指令优先级最高（Parent-First），冲突时提示”妈妈修改了计划哦”}

同步场景：

• 设置同步：App端修改设置，设备端实时同步
• 状态同步：设备端状态变更，App端实时更新
• 数据同步：离线数据同步，支持断点续传

5. 组件设计规范 (Component Design System)

5.1 按钮组件

定义按钮组件规范

主要按钮（Primary Button）：

• 背景色：主色 #007AFF
• 文字颜色：白色 #FFFFFF
• 圆角：8px
• 高度：44px（最小点击区域）
• 字体：18px，Medium

次要按钮（Secondary Button）：

• 背景色：透明或浅灰色背景
• 文字颜色：主色 #007AFF
• 边框：1px，主色 #007AFF
• 圆角：8px
• 高度：44px

5.2 输入框组件

定义输入框组件规范

文本输入框：

• 背景色：白色 #FFFFFF
• 边框：1px，颜色 #E5E5E5
• 圆角：8px
• 高度：44px
• 字体：18px，Regular

搜索框：

• 背景色：#F5F5F5
• 圆角：20px（高度的一半，形成胶囊形状）
• 高度：40px

5.3 卡片组件

定义卡片组件规范

订单卡片：

• 背景色：白色 #FFFFFF
• 圆角：12px
• 内边距：16px
• 阴影：小阴影 0 2px 8px rgba(0,0,0,0.08)
• 间距：卡片之间间距16px

5.4 列表组件

定义列表组件规范

订单列表：

• 背景色：#F5F5F5（列表背景）、白色（卡片背景）
• 间距：卡片之间间距16px
• 下拉刷新：显示刷新动画，颜色主色 #007AFF
• 上拉加载：显示加载动画，颜色主色 #007AFF

5.5 弹窗组件

定义弹窗组件规范

确认弹窗：

• 背景遮罩：rgba(0,0,0,0.5)，点击遮罩关闭弹窗
• 弹窗背景：白色 #FFFFFF
• 圆角：12px（顶部）
• 宽度：屏幕宽度 - 64px（左右各32px边距）
• 内边距：24px

6. 适配规范 (Adaptation Guidelines)

6.1 屏幕适配

定义屏幕适配规范

屏幕尺寸适配：

• 小屏（iPhone SE，375×667）：内容正常显示，字体和间距按比例缩放
• 中屏（iPhone 12，390×844）：内容正常显示
• 大屏（iPhone 14 Pro Max，430×932）：内容正常显示，左右边距适当增加

安全区域适配：

• 底部安全区域：操作按钮栏需要适配底部安全区域（iPhone X及以上机型）
• 顶部安全区域：状态栏高度适配（刘海屏、灵动岛）

6.2 深色模式适配

定义深色模式适配规范（如需要）

深色模式：

• 背景色：深色背景 #000000
• 文字颜色：浅色文字 #FFFFFF
• 卡片背景：深灰色 #1C1C1E
• 分割线：深灰色 #38383A

6. 教育心理学应用 (Educational Strategy)

定义基于教育心理学的设计策略

去排名化：

• 不设排行榜，只设”自我超越”成就
• 强调个人成长，而非与他人比较

正面反馈：

• 失败时采用鼓励语（”下次再试试”），而非警示音
• 强调过程而非结果，培养成长型思维

延迟满足：

• 愿望清单需累积星星兑换，培养长期主义意识
• 通过目标设定和倒计时，培养时间管理能力

仪式感设计：

• 打卡操作需要长按或特定手势，增强仪式感
• 重要成就解锁时，使用动画和音效增强成就感

7. 品牌应用 (Brand Application)

7.1 Logo使用规范

定义Logo使用规范

Logo尺寸：

• 最小尺寸：24px × 24px
• 标准尺寸：48px × 48px
• 大尺寸：96px × 96px

Logo使用场景：

• 应用图标
• 启动页
• 关于页面

7.2 品牌色彩应用

定义品牌色彩应用规范

主色应用：

• 主要按钮、链接、选中状态
• 重要信息高亮
• 品牌标识

功能色应用：

• 成功状态使用成功色
• 警告状态使用警告色
• 错误状态使用错误色
• 信息提示使用信息色

8. 设计工具与资源 (Design Tools & Resources)

8.1 设计工具

列出使用的设计工具

• UI设计：Figma / Sketch
• 原型设计：Figma / Axure
• 切图工具：Figma / Sketch / Photoshop

8.2 设计资源

列出设计资源

• 设计系统文件：{Figma/Sketch链接}
• 图标库：{图标库链接}
• 字体文件：{字体文件下载链接}
• 色彩工具：{色彩工具链接}

9. 附录 (Appendix)

9.1 参考文档

列出参考的相关文档

• UI设计说明书模板
• 需求分析模板
• PRD文档模板

9.2 变更记录

记录设计规范变更的历史

文档版本：V1.0.0
创建时间：{YYYY-MM-DD}
最后更新：{YYYY-MM-DD}
文档状态：✅ 设计中 / ✅ 待评审 / ✅ 评审通过 / ✅ 已完成