足迹地图 - 功能与交互设计规范

1. 功能元素详细描述

1.1 头部标题栏

功能描述：

• 显示页面标题，提供清晰的页面识别
• 提供侧边栏切换控制按钮
• 固定在页面顶部，方便快速访问控制功能

交互方式：

• 点击侧边栏切换按钮，切换侧边栏的显示/隐藏状态
• 在移动端，点击按钮从左侧滑出侧边栏
• 在桌面端，根据屏幕宽度自适应控制侧边栏状态

视觉设计规范：

• 颜色：背景色 --header-bg-color (白色)，文字颜色 --header-text-color (深灰色)
• 字体：标题使用 --font-bold (600权重)，18px大小
• 阴影：底部有轻微阴影 --header-shadow (rgba(0, 0, 0, 0.08))
• 图标：使用Font Awesome fa-bars 图标，18px大小，颜色与文字一致
• 间距：标题与按钮间距为20px，左右内边距为20px

1.2 侧边栏

功能描述：

• 显示足迹列表，方便用户浏览和选择所有足迹
• 提供搜索筛选功能，快速定位特定足迹
• 展示统计信息，提供整体数据概览
• 移动端可折叠，节省空间

交互方式：

• 点击侧边栏头部关闭按钮关闭侧边栏
• 在足迹列表中点击任意项，显示该项的详细信息
• 列表项支持滚动浏览
• 点击统计信息区域无特定交互，但提供视觉反馈

视觉设计规范：

• 颜色：背景色 --sidebar-bg-color (白色)，文字颜色 --sidebar-text-color (深灰色)
• 边框：右侧有1px边框 --sidebar-border (浅灰色)
• 阴影：右侧有阴影 --sidebar-shadow (rgba(0, 0, 0, 0.08))
• 圆角：无圆角，保持方形外观
• 过渡动画：滑入/滑出动画持续时间300ms，使用ease-in-out缓动函数

1.3 筛选器

功能描述：

• 提供文本搜索功能，根据足迹名称、地址或类型进行筛选
• 实时过滤地图上的标记点和侧边栏中的列表

交互方式：

• 输入文本时实时更新筛选结果（带300ms防抖）
• 支持键盘输入和粘贴
• 清空输入框时恢复显示所有数据

视觉设计规范：

• 颜色：输入框背景色 --filter-bg-color (浅灰色)，文字颜色 --filter-text-color (深灰色)
• 边框：1px边框 --filter-border (中灰色)，聚焦时边框色变为 --primary-color (蓝色)
• 圆角：8px圆角
• 图标：可在左侧添加搜索图标 fa-search，但当前设计中为了简洁未添加
• 占位符：浅灰色占位符文本

1.4 统计信息

功能描述：

• 展示足迹数据的统计概览
• 包括总地点数、国家数和城市数

交互方式：

• 仅作为信息展示，无直接交互功能
• 数据会根据筛选结果动态更新

视觉设计规范：

• 颜色：数字使用 --stat-number-color (主色调蓝色)，标签使用 --stat-label-color (灰色)
• 字体：数字使用大号字体22px并加粗，标签使用12px正常字体
• 间距：各统计项之间垂直间距12px
• 布局：使用Flexbox垂直居中对齐

1.5 足迹列表

功能描述：

• 显示所有足迹的列表视图
• 每个列表项包含足迹名称、类型、地址和访问时间
• 支持点击选择单个足迹

交互方式：

• 点击列表项，高亮显示该项并打开详情模态框
• 滚动浏览所有列表项
• 列表内容根据筛选结果动态更新

视觉设计规范：

• 颜色：正常状态背景色透明，文字颜色 --sidebar-text-color
• 高亮状态：选中项背景色 --sidebar-active-bg (浅蓝色)，文字颜色 --primary-color
• 边框：列表项之间有1px分割线 --list-divider (浅灰色)
• 字体：名称使用14px加粗，其他信息使用12px正常字体
• 间距：列表项内部元素间距8-12px，项之间无额外间距
• 滚动条：自定义滚动条样式，宽度6px，颜色 --scrollbar-color

1.6 地图显示区

功能描述：

• 显示交互式地图，展示所有足迹的地理位置
• 支持地图缩放、平移等操作
• 显示足迹标记点，点击可查看详情

交互方式：

• 鼠标滚轮/触摸缩放地图
• 拖拽地图平移
• 点击标记点显示提示框，点击提示框中的按钮打开详情模态框
• 支持键盘导航（方向键移动，+/-键缩放）

视觉设计规范：

• 地图背景：使用ECharts地图，默认区域颜色 --map-area-color (浅蓝色背景)
• 标记点：圆形，直径20px，默认颜色 --marker-color (蓝色)，选中时变为 --marker-active-color (红色)
• 标记点阴影：默认有8px阴影，选中时阴影扩大到12px
• 提示框：自定义样式，白色背景，圆角，阴影

1.7 地图控制按钮

功能描述：

• 提供地图常用操作快捷按钮
• 包括重置地图、显示全部、添加足迹和导出数据功能

交互方式：

• 点击重置按钮：恢复地图到初始状态和位置
• 点击显示全部按钮：缩放地图以显示所有标记点
• 点击添加足迹按钮：未来将打开添加足迹表单
• 点击导出数据按钮：下载当前足迹数据为JSON文件

视觉设计规范：

• 颜色：按钮背景色 --control-btn-bg (白色)，图标颜色 --control-btn-icon (深灰色)
• 悬停状态：背景色变为 --control-btn-hover (浅蓝色)，图标颜色变为 --primary-color
• 尺寸：桌面端44x44px，移动端40x40px
• 圆角：50%圆形
• 阴影：8px阴影 --control-btn-shadow
• 图标：使用Font Awesome图标，16px大小

1.8 足迹详情模态框

功能描述：

• 显示选中足迹的详细信息
• 包括图片、名称、地址、类型、访问时间
• 提供查看游记和导航功能

交互方式：

• 点击关闭按钮关闭模态框
• 点击模态框外部区域关闭模态框
• 按下ESC键关闭模态框
• 点击查看游记链接打开相关文章
• 点击导航按钮打开外部地图应用进行导航

视觉设计规范：

• 颜色：背景色 --modal-bg-color (白色)，文字颜色 --modal-text-color (深灰色)
• 边框：12px圆角
• 阴影：16px阴影 --modal-shadow
• 布局：使用Flexbox垂直布局，图片在上，信息在下
• 按钮：主要操作按钮使用 --primary-color，次要操作使用 --secondary-color
• 过渡动画：淡入淡出和缩放动画，持续时间200ms

1.9 侧边栏遮罩层

功能描述：

• 在侧边栏打开时覆盖背景内容
• 增强侧边栏的视觉层次
• 提供点击关闭侧边栏的额外区域

交互方式：

• 点击遮罩层任意位置关闭侧边栏
• 在桌面端通常隐藏，移动端显示

视觉设计规范：

• 颜色：半透明黑色 rgba(0, 0, 0, 0.4)
• 过渡动画：淡入淡出动画，持续时间300ms
• z-index：99（侧边栏之下，其他内容之上）

2. 交互设计原则

2.1 响应式交互

• 桌面端：使用鼠标悬停、点击等交互方式
• 平板端：结合触摸和鼠标交互
• 移动端：优化触摸体验，增大点击区域（最小44x44px）
• 键盘导航：确保所有功能可通过键盘访问和操作

2.2 即时反馈

• 所有可交互元素在悬停时提供视觉反馈
• 点击操作立即响应，避免延迟感
• 加载状态显示加载指示器
• 错误状态提供明确的错误提示

2.3 状态管理

• 选中状态：当前选中的足迹在地图和列表中同步高亮
• 筛选状态：筛选器输入保持，列表和地图同步更新
• 布局状态：侧边栏的打开/关闭状态在交互过程中保持

2.4 动画效果

• 平滑过渡：侧边栏滑入滑出、模态框显示隐藏使用平滑动画
• 微交互动画：按钮点击、列表项选中使用微动画增强体验
• 加载动画：数据加载时显示加载指示器
• 地图动画：地图缩放和平移使用缓动函数

3. 视觉设计规范

3.1 颜色系统

主色调：

• 主色（蓝色）：#4A6CF7 - 用于主要按钮、高亮状态、标记点
• 辅助色（红色）：#FF5252 - 用于选中状态、重要提示
• 成功色（绿色）：#52C41A - 用于成功状态、积极反馈
• 警告色（黄色）：#FAAD14 - 用于警告信息
• 错误色（红色）：#FF4D4F - 用于错误信息

中性色：

• 背景色：#F0F2F5 - 页面背景
• 卡片/侧边栏背景：#FFFFFF - 白色背景
• 文本主色：#333333 - 主要文本
• 文本次要色：#666666 - 次要文本
• 文本提示色：#999999 - 辅助文本
• 边框色：#E8E8E8 - 边框和分割线

3.2 字体规范

字体家族：

• 主要字体：-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif
• 备选字体：'Microsoft YaHei', 'Hiragino Sans GB', 'WenQuanYi Micro Hei', 'sans-serif'

字体大小：

• 大标题：24px
• 中标题：18px
• 小标题：16px
• 正文：14px
• 小文本：12px
• 极小文本：10px

字重：

• 标题：600-700
• 正文：400-500
• 强调文本：500-600

3.3 图标规范

• 图标库：Font Awesome 6.x
• 图标风格：使用实心图标 (fas) 保持一致性
• 图标大小：
  • 大型图标：24px（用于头部、主要操作）
  • 中型图标：16px（用于列表项、模态框）
  • 小型图标：12px（用于小文本、标签）
• 颜色：与相邻文本颜色保持一致，主要操作使用主色调

3.4 间距和边距

• 8px网格系统：所有间距和尺寸基于8px的倍数
• 组件间距：
  • 大组件间距：24px
  • 中组件间距：16px
  • 小组件间距：12px
  • 内边距：
    • 大型容器：24px
    • 中型容器：16px
    • 小组件：8-12px

3.5 圆角规范

• 卡片/容器：12px
• 按钮：8px（矩形按钮），50%（圆形按钮）
• 输入框：8px
• 模态框：12px
• 图片：8px

4. 可访问性设计

4.1 键盘可访问性

• 所有交互元素支持键盘焦点
• 清晰的焦点指示器样式
• 逻辑的Tab键顺序
• 快捷键支持（如ESC关闭模态框）

4.2 屏幕阅读器支持

• 为所有交互元素提供aria属性
• 合理的标签和描述
• 模态框显示时自动聚焦到标题或关闭按钮
• 动态内容变化提供aria-live区域

4.3 对比度

• 文本与背景对比度符合WCAG AA标准
• 正常文本：对比度至少4.5:1
• 大文本：对比度至少3:1
• 交互元素在所有状态下保持足够对比度

4.4 响应式适配

• 支持不同屏幕阅读器和辅助技术
• 高对比度模式支持
• 文本大小调整不会破坏布局
• 触摸目标足够大（至少44x44px）

通过以上详细的功能、交互和视觉设计规范，确保足迹地图页面不仅具有美观的视觉效果，还提供良好的用户体验和可访问性。