digital-pilates/docs/headerbar-design-system.md

HeaderBar 组件设计系统

概述

HeaderBar 组件已经与 Colors.ts 中的设计系统完全集成，提供了多种变体和优美的 UI 效果。

设计理念

颜色系统集成

• 完全基于 Colors.ts 中定义的语义化颜色系统
• 支持浅色和深色主题自动切换
• 使用透明度创建层次感和视觉深度

三种变体设计

1. Default 变体 (默认)

• 背景: 透明或卡片背景
• 返回按钮: 绿色强调色背景 (20% 透明度)
• 图标颜色: 白色 (确保在绿色背景上清晰可见)
• 适用场景: 标准页面导航

2. Elevated 变体 (提升)

• 背景: 卡片背景
• 返回按钮: 主色背景 (15% 透明度) + 边框 (20% 透明度)
• 图标颜色: 主色
• 边框: 实线边框
• 适用场景: 重要页面、模态框、需要突出显示的导航

3. Minimal 变体 (简约)

• 背景: 页面背景色
• 返回按钮: 中性色背景 (80% 透明度)
• 图标颜色: 次要文本色
• 适用场景: 内容页面、列表页面、需要最小化视觉干扰的场景

颜色搭配详解

背景色系统

// 透明背景
transparent: 'transparent'

// 卡片背景 (浅色主题)
card: palette.gray[25] // #fcfcfd

// 页面背景 (浅色主题)
background: palette.base.white // #ffffff

按钮背景色

// Default 变体
backgroundColor: `${theme.accentGreen}20` // 绿色 20% 透明度

// Elevated 变体
backgroundColor: `${theme.primary}15` // 主色 15% 透明度
borderColor: `${theme.primary}20` // 主色 20% 透明度

// Minimal 变体
backgroundColor: `${theme.neutral100}80` // 中性色 80% 透明度

文本颜色

// 主标题
color: theme.text // 主要文本色

// 次要文本
color: theme.textSecondary // 次要文本色

// 按钮图标
color: theme.onPrimary // 主色上的文字/图标颜色

使用示例

基础用法

// 默认透明背景
<HeaderBar
  title="页面标题"
  onBack={() => navigation.goBack()}
/>

// 卡片背景
<HeaderBar
  title="页面标题"
  onBack={() => navigation.goBack()}
  transparent={false}
  showBottomBorder={true}
/>

变体使用

// Elevated 变体 - 重要页面
<HeaderBar
  title="重要操作"
  onBack={() => navigation.goBack()}
  variant="elevated"
  showBottomBorder={true}
/>

// Minimal 变体 - 内容页面
<HeaderBar
  title="内容列表"
  onBack={() => navigation.goBack()}
  variant="minimal"
/>

自定义右侧内容

<HeaderBar
  title="编辑页面"
  onBack={() => navigation.goBack()}
  right={
    <TouchableOpacity onPress={handleSave}>
      <Text style={{ color: theme.primary }}>保存</Text>
    </TouchableOpacity>
  }
  variant="elevated"
/>

自定义标题

<HeaderBar
  title={
    <View>
      <Text style={{ color: theme.text, fontSize: 18, fontWeight: '700' }}>
        主标题
      </Text>
      <Text style={{ color: theme.textSecondary, fontSize: 12 }}>
        副标题
      </Text>
    </View>
  }
  onBack={() => navigation.goBack()}
  variant="elevated"
/>

视觉层次

阴影效果

• 返回按钮添加了微妙的阴影效果
• 增强按钮的立体感和可点击性
• 在浅色和深色主题下都有良好的表现

间距系统

• 使用 8px 的基础间距单位
• 标题容器有适当的内边距确保居中
• 按钮有足够的触摸区域 (32x32)

字体系统

• 标题字体大小: 18px
• 字重根据变体调整 (700-800)
• 字母间距优化 (-0.3) 提升可读性

主题适配

浅色主题

• 使用 palette.gray[900] 作为主要文本色
• 使用 palette.gray[25] 作为卡片背景
• 绿色强调色用于默认按钮

深色主题

• 使用 palette.gray[25] 作为主要文本色
• 使用 palette.gray[800] 作为卡片背景
• 自动调整透明度和对比度

最佳实践

1. 选择合适的变体: 根据页面重要性和视觉需求选择变体
2. 保持一致性: 在同一应用中保持 HeaderBar 风格的一致性
3. 考虑可访问性: 确保颜色对比度符合可访问性标准
4. 响应式设计: 在不同屏幕尺寸下测试显示效果
5. 性能优化: 避免在 HeaderBar 中放置复杂的交互元素

技术实现

颜色计算

使用模板字符串和透明度后缀来创建半透明颜色：

`${theme.primary}15` // 15% 透明度
`${theme.accentGreen}20` // 20% 透明度

动态样式

根据变体和主题动态计算样式，确保视觉一致性：

const getBackButtonStyle = () => {
  switch (variant) {
    case 'elevated':
      return { backgroundColor: `${theme.primary}15` };
    // ...
  }
};

这种设计确保了 HeaderBar 组件与整个应用的设计系统完美融合，提供了优美且一致的用户体验。