# <!-- 由 BMAD™ Core 驱动 -->
template:
  id: frontend-spec-template-v2
  name: UI/UX规范
  version: 2.0
  output:
    format: markdown
    filename: docs/front-end-spec.md
    title: "{{project_name}} UI/UX规范"

workflow:
  mode: interactive
  elicitation: advanced-elicitation

sections:
  - id: introduction
    title: 引言
    instruction: |
      在开始规范之前，请审查提供的文档，包括项目简报、PRD和任何用户研究，以收集背景信息。重点是了解用户的需求、痛点和期望的结果。

      建立文档的目的和范围。保留以下内容，但确保正确替换项目名称。
    content: |
      本文档定义了{{project_name}}用户界面的用户体验目标、信息架构、用户流程和视觉设计规范。它作为视觉设计和前端开发的基础，确保提供一个有凝聚力的、以用户为中心的体验。
    sections:
      - id: ux-goals-principles
        title: 整体UX目标与原则
        instruction: |
          与用户一起建立和记录以下内容。如果尚未定义，请促成一次讨论以确定：

          1. 目标用户画像 - 启发细节或确认PRD中已有的画像
          2. 关键可用性目标 - 了解用户成功的样子
          3. 核心设计原则 - 建立3-5个指导原则
        elicit: true
        sections:
          - id: user-personas
            title: 目标用户画像
            template: "{{persona_descriptions}}"
            examples:
              - "**高级用户：** 需要高级功能和效率的技术专业人员"
              - "**普通用户：** 偶尔使用，优先考虑易用性和清晰指导的用户"
              - "**管理员：** 需要控制和监督能力的系统管理员"
          - id: usability-goals
            title: 可用性目标
            template: "{{usability_goals}}"
            examples:
              - "易学性：新用户可以在5分钟内完成核心任务"
              - "使用效率：高级用户可以以最少的点击次数完成频繁的任务"
              - "防错性：为破坏性操作提供清晰的验证和确认"
              - "易记性：不常使用的用户可以无需重新学习即可返回"
          - id: design-principles
            title: 设计原则
            template: "{{design_principles}}"
            type: numbered-list
            examples:
              - "**清晰优于巧妙** - 优先考虑清晰的沟通，而不是美学创新"
              - "**渐进式披露** - 只在需要时显示所需内容"
              - "**一致的模式** - 在整个应用程序中使用熟悉的UI模式"
              - "**即时反馈** - 每个操作都应有清晰、即时的响应"
              - "**默认可访问** - 从一开始就为所有用户设计"
      - id: changelog
        title: 变更日志
        type: table
        columns: [日期, 版本, 描述, 作者]
        instruction: 跟踪文档版本和变更

  - id: information-architecture
    title: 信息架构 (IA)
    instruction: |
      与用户协作创建全面的信息架构：

      1. 构建一个显示所有主要区域的站点地图或屏幕清单
      2. 定义导航结构（主导航、次导航、面包屑）
      3. 使用Mermaid图进行可视化表示
      4. 考虑用户的心理模型和预期的分组
    elicit: true
    sections:
      - id: sitemap
        title: 站点地图/屏幕清单
        type: mermaid
        mermaid_type: graph
        template: "{{sitemap_diagram}}"
        examples:
          - |
            graph TD
                A[主页] --> B[仪表板]
                A --> C[产品]
                A --> D[账户]
                B --> B1[分析]
                B --> B2[最近活动]
                C --> C1[浏览]
                C --> C2[搜索]
                C --> C3[产品详情]
                D --> D1[个人资料]
                D --> D2[设置]
                D --> D3[账单]
      - id: navigation-structure
        title: 导航结构
        template: |
          **主导航：** {{primary_nav_description}}

          **次导航：** {{secondary_nav_description}}

          **面包屑策略：** {{breadcrumb_strategy}}

  - id: user-flows
    title: 用户流程
    instruction: |
      对于PRD中确定的每个关键用户任务：

      1. 明确定义用户的目标
      2. 规划出所有步骤，包括决策点
      3. 考虑边缘情况和错误状态
      4. 使用Mermaid流程图以求清晰
      5. 如果有详细的流程图，则链接到外部工具（Figma/Miro）

      为每个主要流程创建子部分。
    elicit: true
    repeatable: true
    sections:
      - id: flow
        title: "{{flow_name}}"
        template: |
          **用户目标：** {{flow_goal}}

          **入口点：** {{entry_points}}

          **成功标准：** {{success_criteria}}
        sections:
          - id: flow-diagram
            title: 流程图
            type: mermaid
            mermaid_type: graph
            template: "{{flow_diagram}}"
          - id: edge-cases
            title: "边缘情况与错误处理："
            type: bullet-list
            template: "- {{edge_case}}"
          - id: notes
            template: "**说明：** {{flow_notes}}"

  - id: wireframes-mockups
    title: 线框图与模型
    instruction: |
      澄清将在何处创建详细的视觉设计（Figma、Sketch等），以及如何引用它们。如果需要低保真线框图，请提议帮助为关键屏幕构思布局。
    elicit: true
    sections:
      - id: design-files
        template: "**主要设计文件：** {{design_tool_link}}"
      - id: key-screen-layouts
        title: 关键屏幕布局
        repeatable: true
        sections:
          - id: screen
            title: "{{screen_name}}"
            template: |
              **目的：** {{screen_purpose}}

              **关键元素：**
              - {{element_1}}
              - {{element_2}}
              - {{element_3}}

              **交互说明：** {{interaction_notes}}

              **设计文件参考：** {{specific_frame_link}}

  - id: component-library
    title: 组件库/设计系统
    instruction: |
      讨论是使用现有的设计系统还是创建一个新的。如果创建新的，请确定基础组件及其关键状态。注意，详细的技术规范属于前端架构。
    elicit: true
    sections:
      - id: design-system-approach
        template: "**设计系统方法：** {{design_system_approach}}"
      - id: core-components
        title: 核心组件
        repeatable: true
        sections:
          - id: component
            title: "{{component_name}}"
            template: |
              **目的：** {{component_purpose}}

              **变体：** {{component_variants}}

              **状态：** {{component_states}}

              **使用指南：** {{usage_guidelines}}

  - id: branding-style
    title: 品牌与风格指南
    instruction: 链接到现有的风格指南或定义关键品牌元素。如果存在公司品牌指南，请确保与其保持一致。
    elicit: true
    sections:
      - id: visual-identity
        title: 视觉识别
        template: "**品牌指南：** {{brand_guidelines_link}}"
      - id: color-palette
        title: 调色板
        type: table
        columns: ["颜色类型", "十六进制代码", "用途"]
        rows:
          - ["主色", "{{primary_color}}", "{{primary_usage}}"]
          - ["次色", "{{secondary_color}}", "{{secondary_usage}}"]
          - ["强调色", "{{accent_color}}", "{{accent_usage}}"]
          - ["成功色", "{{success_color}}", "积极反馈、确认"]
          - ["警告色", "{{warning_color}}", "警告、重要通知"]
          - ["错误色", "{{error_color}}", "错误、破坏性操作"]
          - ["中性色", "{{neutral_colors}}", "文本、边框、背景"]
      - id: typography
        title: 排版
        sections:
          - id: font-families
            title: 字体家族
            template: |
              - **主要字体：** {{primary_font}}
              - **次要字体：** {{secondary_font}}
              - **等宽字体：** {{mono_font}}
          - id: type-scale
            title: 字号比例
            type: table
            columns: ["元素", "大小", "字重", "行高"]
            rows:
              - ["H1", "{{h1_size}}", "{{h1_weight}}", "{{h1_line}}"]
              - ["H2", "{{h2_size}}", "{{h2_weight}}", "{{h2_line}}"]
              - ["H3", "{{h3_size}}", "{{h3_weight}}", "{{h3_line}}"]
              - ["正文", "{{body_size}}", "{{body_weight}}", "{{body_line}}"]
              - ["小号", "{{small_size}}", "{{small_weight}}", "{{small_line}}"]
      - id: iconography
        title: 图标
        template: |
          **图标库：** {{icon_library}}

          **使用指南：** {{icon_guidelines}}
      - id: spacing-layout
        title: 间距与布局
        template: |
          **网格系统：** {{grid_system}}

          **间距比例：** {{spacing_scale}}

  - id: accessibility
    title: 可访问性要求
    instruction: 根据目标合规级别和用户需求定义具体的可访问性要求。要全面但实用。
    elicit: true
    sections:
      - id: compliance-target
        title: 合规目标
        template: "**标准：** {{compliance_standard}}"
      - id: key-requirements
        title: 关键要求
        template: |
          **视觉：**
          - 颜色对比度：{{contrast_requirements}}
          - 焦点指示器：{{focus_requirements}}
          - 文本大小：{{text_requirements}}

          **交互：**
          - 键盘导航：{{keyboard_requirements}}
          - 屏幕阅读器支持：{{screen_reader_requirements}}
          - 触摸目标：{{touch_requirements}}

          **内容：**
          - 替代文本：{{alt_text_requirements}}
          - 标题结构：{{heading_requirements}}
          - 表单标签：{{form_requirements}}
      - id: testing-strategy
        title: 测试策略
        template: "{{accessibility_testing}}"

  - id: responsiveness
    title: 响应式策略
    instruction: 定义不同设备尺寸的断点和适应策略。同时考虑技术约束和用户上下文。
    elicit: true
    sections:
      - id: breakpoints
        title: 断点
        type: table
        columns: ["断点", "最小宽度", "最大宽度", "目标设备"]
        rows:
          - ["手机", "{{mobile_min}}", "{{mobile_max}}", "{{mobile_devices}}"]
          - ["平板", "{{tablet_min}}", "{{tablet_max}}", "{{tablet_devices}}"]
          - ["桌面", "{{desktop_min}}", "{{desktop_max}}", "{{desktop_devices}}"]
          - ["宽屏", "{{wide_min}}", "-", "{{wide_devices}}"]
      - id: adaptation-patterns
        title: 适应模式
        template: |
          **布局变更：** {{layout_adaptations}}

          **导航变更：** {{nav_adaptations}}

          **内容优先级：** {{content_adaptations}}

          **交互变更：** {{interaction_adaptations}}

  - id: animation
    title: 动画与微交互
    instruction: 定义动效设计原则和关键交互。牢记性能和可访问性。
    elicit: true
    sections:
      - id: motion-principles
        title: 动效原则
        template: "{{motion_principles}}"
      - id: key-animations
        title: 关键动画
        repeatable: true
        template: "- **{{animation_name}}:** {{animation_description}} (持续时间: {{duration}}, 缓动: {{easing}})"

  - id: performance
    title: 性能考虑
    instruction: 定义影响UX设计决策的性能目标和策略。
    sections:
      - id: performance-goals
        title: 性能目标
        template: |
          - **页面加载：** {{load_time_goal}}
          - **交互响应：** {{interaction_goal}}
          - **动画FPS：** {{animation_goal}}
      - id: design-strategies
        title: 设计策略
        template: "{{performance_strategies}}"

  - id: next-steps
    title: 下一步
    instruction: |
      完成UI/UX规范后：

      1. 建议与利益相关者审查
      2. 建议在设计工具中创建/更新视觉设计
      3. 准备交接给设计架构师进行前端架构设计
      4. 注意任何悬而未决的问题或需要做出的决定
    sections:
      - id: immediate-actions
        title: 立即行动
        type: numbered-list
        template: "{{action}}"
      - id: design-handoff-checklist
        title: 设计交接清单
        type: checklist
        items:
          - "所有用户流程已记录"
          - "组件清单已完成"
          - "可访问性要求已定义"
          - "响应式策略清晰"
          - "品牌指南已纳入"
          - "性能目标已建立"

  - id: checklist-results
    title: 清单结果
    instruction: 如果存在UI/UX清单，请根据此文档运行并在此处报告结果。