{产品名称} - 设计说明书 V1.0

文档说明：

• 本文档是UI设计阶段的产出物，用于明确界面设计规范和交互细节
• 配合UI设计稿（Figma/Sketch）使用，详细说明设计规范和交互逻辑
• {} 包裹的内容为占位符，请替换为实际内容
• 引用块 > 中的文字为填写指导，填写后可删除

1. 文档信息 (Document Info)

1.1 版本记录

1.2 文档责任人

1.3 关联文档

2. 设计规范参考 (Design System Reference)

2.1 设计系统

参考视觉与交互DNA规范

本文档遵循《{产品名称}-视觉与交互DNA规范》，包括：

• 色彩系统
• 字体系统
• 间距系统
• 圆角系统
• 阴影系统
• 图标系统
• 交互设计规范

详细规范请参考：视觉与交互DNA规范模板

3. 页面设计说明 (Page Design)

3.1 {页面名称 - 例如：首页}

3.1.1 页面结构

描述页面的整体布局结构

页面布局：

┌─────────────────────────┐
│  顶部导航栏（固定）      │
├─────────────────────────┤
│  搜索框                  │
├─────────────────────────┤
│  Banner轮播区            │
├─────────────────────────┤
│  内容区域（可滚动）      │
│  ...                    │
└─────────────────────────┘
│  底部导航栏（固定）      │
└─────────────────────────┘

3.1.2 设计细节

详细说明每个区域的设计规范，包含尺寸、间距、颜色等具体数值

顶部导航栏：

• 高度：44px（状态栏高度 + 导航栏高度）
• 背景色：白色 #FFFFFF
• 标题：居中，20px，Semibold，颜色 #000000
• 分割线：底部1px，颜色 #E5E5E5

搜索框：

• 位置：顶部导航栏下方，左右边距16px
• 高度：40px
• 背景色：#F5F5F5
• 圆角：20px（高度的一半，形成胶囊形状）
• 图标：搜索图标，16px，颜色 #999999，左侧内边距16px
• 文字：默认显示”全域用户运营课程”，18px，Regular，颜色 #999999

Banner轮播区：

• 高度：180px（根据设计稿调整）
• 左右边距：16px
• 圆角：12px
• 指示器：底部居中，小圆点，当前Banner高亮（主色），其他灰色
• 轮播间隔：3秒

【交互布局规范】

• 布局: Header + KingKong + Content List
• Header (头部):
  • 高度 120px (含状态栏)。背景品牌色。
  • 元素: 用户头像 (48px), 消息入口 (24px), 今日概览文字。
• King Kong (金刚区):
  • 悬浮卡片样式，向上负 Margin 20px 覆盖 Header。
  • 4宫格布局，图标 40px，文字 12px。
• Content (列表):
  • 卡片 Margin 16px，圆角 12px，阴影 blur 10px。
• FAB: 右下角 Fixed，距离底部 80px，直径 56px，阴影层级高。

3.1.3 交互说明

说明页面的交互逻辑

搜索框交互：

• 点击搜索框：跳转到搜索结果页
• 搜索框为只读状态，不可直接输入

Banner交互：

• 自动轮播：每3秒切换一张
• 支持左右滑动切换
• 点击Banner：跳转到配置的URL

3.1.4 设计稿链接

提供设计稿链接

• Figma设计稿：{Figma链接}
• Sketch设计稿：{Sketch链接}
• 设计稿版本：V1.0

3.2 {页面名称 - 例如：订单大厅}

3.2.1 页面结构

描述页面的整体布局结构

页面布局：

┌─────────────────────────┐
│  顶部导航栏（固定）      │
│  "首页"标题              │
├─────────────────────────┤
│  订单状态Tab（固定）      │
│  待接单(10) 待服务(5)... │
├─────────────────────────┤
│  筛选排序栏（固定）      │
│  综合排序 ▼              │
├─────────────────────────┤
│  订单列表（可滚动）      │
│  ┌───────────────────┐  │
│  │  订单卡片1         │  │
│  └───────────────────┘  │
│  ┌───────────────────┐  │
│  │  订单卡片2         │  │
│  └───────────────────┘  │
│  ...                    │
└─────────────────────────┘

3.2.2 设计细节

详细说明每个区域的设计规范

订单状态Tab：

• 高度：44px
• 背景色：白色 #FFFFFF
• Tab项：
  • 正常状态：文字颜色 #666666，字体18px，Regular
  • 选中状态：文字颜色 #007AFF，字体18px，Semibold，底部2px蓝色下划线
• 数量标签：显示在Tab文字右侧，格式”(10)”
  • 正常状态：文字颜色 #999999，字体16px
  • 选中状态：文字颜色 #007AFF，字体16px

订单卡片：

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

订单卡片内容布局：

┌─────────────────────────┐
│ [标签]         ¥52.8    │  ← 订单类型标签（左上）、订单金额（右上）
├─────────────────────────┤
│ [图片]  服务名称         │  ← 商品封面图（左侧）、服务名称（右侧）
│         母乳护航         │
├─────────────────────────┤
│ 客户：张三               │  ← 客户信息
│ 电话：138****8888        │
├─────────────────────────┤
│ 服务时间：今天 15:00-17:00│  ← 服务时间
├─────────────────────────┤
│ 服务地址：杭州市余杭区... │  ← 服务地址
└─────────────────────────┘

3.2.3 交互说明

说明页面的交互逻辑

Tab切换交互：

• 点击Tab：切换订单列表数据
• 切换时有动画效果（列表滑动）
• 切换后自动滚动到列表顶部

订单卡片交互：

• 点击订单卡片：跳转到订单详情页
• 下拉刷新：显示刷新动画，刷新当前Tab的订单列表
• 上拉加载：显示加载动画，加载更多订单

3.2.4 设计稿链接

提供设计稿链接

• Figma设计稿：{Figma链接}
• Sketch设计稿：{Sketch链接}
• 设计稿版本：V1.0

4. 组件设计说明 (Component Design)

4.1 {组件名称 - 例如：订单卡片}

4.1.1 组件描述

描述组件的用途和功能

{例如：订单卡片用于展示订单的基本信息，包括订单类型、服务名称、订单金额、客户信息、服务时间、服务地址等。}

4.1.2 设计规范

详细说明组件的设计规范

尺寸：

• 宽度：屏幕宽度 - 32px（左右各16px边距）
• 高度：自适应（根据内容）

样式：

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

内容布局：

• 顶部：订单类型标签（左上角）、订单金额（右上角）
• 中间：商品封面图（左侧）、服务名称（右侧）
• 底部：客户信息、服务时间、服务地址

4.1.3 交互说明

说明组件的交互逻辑

• 点击卡片：跳转到订单详情页
• 点击态：显示阴影加深效果

4.1.4 设计稿链接

提供设计稿链接

• Figma设计稿：{Figma链接}
• Sketch设计稿：{Sketch链接}

5. 交互动效说明 (Animation Design)

5.1 页面转场动画

说明页面之间的转场动画

页面跳转：

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

弹窗弹出：

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

5.2 列表动画

说明列表的动画效果

下拉刷新：

• 动画：下拉时显示刷新图标旋转动画
• 颜色：主色 #007AFF
• 时长：刷新完成后0.5秒后隐藏

上拉加载：

• 动画：显示加载图标旋转动画
• 颜色：主色 #007AFF
• 提示：加载完成后显示”没有更多了”

5.3 按钮动画

说明按钮的动画效果

按钮点击：

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

6. 适配说明 (Adaptation)

6.1 屏幕适配

说明不同屏幕尺寸的适配方案

屏幕尺寸适配：

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

安全区域适配：

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

6.2 深色模式适配

说明深色模式的适配方案（如需要）

深色模式：

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

7. 切图规范 (Asset Export)

7.1 图片格式

说明图片的导出格式

图片格式：

• 图标：PNG格式，支持透明背景
• Banner：JPG格式，质量80%
• 占位图：PNG格式，支持透明背景

7.2 图片尺寸

说明图片的导出尺寸

图标尺寸：

• 1x：原始尺寸（如16px × 16px）
• 2x：2倍尺寸（如32px × 32px）
• 3x：3倍尺寸（如48px × 48px）

Banner尺寸：

• 宽度：750px（2倍图）或1125px（3倍图）
• 高度：根据设计稿确定
• 比例：16:9或根据设计稿确定

7.3 命名规范

说明图片的命名规范

命名格式：{模块}_{功能}_{状态}.{格式}

示例：

• home_banner_1.jpg - 首页Banner第1张
• order_card_bg.png - 订单卡片背景
• button_primary_normal.png - 主要按钮正常状态
• button_primary_pressed.png - 主要按钮按下状态

8. 开发还原度验收 (Design Implementation Review)

8.1 设计还原度标准

明确设计还原度的验收标准

1. ✅ 所有页面按照设计稿实现，还原度≥95%
2. ✅ 所有颜色、字体、间距按照设计规范实现
3. ✅ 所有组件按照组件设计规范实现
4. ✅ 所有交互动效按照交互动效说明实现
5. ✅ 所有适配按照适配说明实现

8.2 验收检查清单

提供验收检查清单

视觉还原：

• 颜色值完全一致
• 字体大小和字重一致
• 间距和布局一致
• 圆角和阴影一致
• 图标和图片一致

交互还原：

• 页面转场动画一致
• 按钮点击反馈一致
• 列表动画一致
• 弹窗动画一致

适配还原：

• 不同屏幕尺寸适配正确
• 安全区域适配正确
• 深色模式适配正确（如需要）

9. 附录 (Appendix)

9.1 设计工具

列出使用的设计工具

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

9.2 设计资源

列出设计资源链接

• 设计稿链接：{Figma/Sketch链接}
• 图标库：{图标库链接}
• 字体文件：{字体文件下载链接}

9.3 变更记录

记录设计变更的历史

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