一、基础配色原则

1. 对比度原则：确保信息可识别

• 背景与内容的对比度：
  • 导航栏背景色与图标 / 文字的对比度需符合 WCAG 无障碍标准（如 AA 级标准要求对比度≥4.5:1）。
  • 示例：
    • 深色背景（如 #333333）搭配浅色图标（如 #FFFFFF），对比度达 7:1，清晰易读。
    • 浅色背景（如 #F5F5F5）搭配深灰色图标（如 #333333），避免纯白 / 纯黑带来的视觉刺激。
• 选中态与未选中态区分：
  • 选中状态的图标 / 文字颜色需与未选中状态形成明显差异（如饱和度或明度差异≥30%），但避免过度鲜艳导致视觉疲劳。
  • 示例：底部导航栏未选中图标为 #999999，选中时切换为品牌主色（如 #1A73E8），并适当增加亮度（如 #4285F4）。

2. 层级引导原则：明确功能优先级

• 核心功能突出：
  • 高频操作入口（如首页、购物车）可使用 品牌主色 或高饱和度颜色，次级功能采用低饱和度辅助色。
  • 示例：电商 APP 将「购物车」图标设为红色（#FF4444），其他标签使用灰色系（#666666）。
• 信息层级区分：
  • 导航栏背景色与内容区背景色需形成微差（如导航栏深 5-10%），暗示层级关系，避免界面割裂。
  • 示例：内容区为白色（#FFFFFF），导航栏为浅灰色（#F0F0F0），通过明度差异区分层级。

3. 品牌一致性原则：强化认知记忆

• 主色贯穿全局：
  • 导航栏背景色或核心图标颜色需与品牌 VI 主色相统一（如微信的绿色 #4CD964、抖音的红色 #FF0000）。
  • 延伸应用：品牌色可通过渐变、光影效果（如高斯模糊）优化视觉层次，但需保持识别度。
• 辅助色适配场景：
  • 根据不同页面主题调整辅助色（如「我的」页面使用温和的蓝色，「设置」页面使用中性灰色），但导航栏基础框架需保持品牌调性。

二、色彩心理学应用

三、配色技巧与方案

1. 单色搭配：简洁高效

• 纯色系背景 + 对比色图标：
  • 导航栏采用单一纯色背景（如 #1A73E8 蓝色），图标 / 文字使用白色（#FFFFFF），适用于功能简洁的工具类 APP。
  • 优点：视觉统一，聚焦核心操作；缺点：缺乏层次感，需通过光影（如投影）增强立体感。
• 渐变背景 + 单色图标：
  • 背景使用品牌色渐变（如 #4285F4→#1A73E8），图标保持单色（如白色），提升视觉动感。
  • 适用场景：科技感、年轻化产品（如运动类 APP Keep）。

2. 多色搭配：功能区分

• 分段式配色：
  • 底部导航栏不同标签使用不同颜色（如「首页」蓝色、「消息」红色），直观区分功能模块。
  • 注意：颜色数量不超过 3 种，避免杂乱（如 Instagram 旧版底部导航采用蓝、白、粉色分段）。
• 主色 + 辅助色组合：
  • 核心标签用主色（如 #1A73E8），次要标签用辅助色（如 #FF9800），非活跃状态统一为灰色（#666666）。
  • 示例：美团底部导航「首页」黄色、「外卖」橙色、其他灰色，功能优先级一目了然。

3. 暗黑模式适配

• 深色背景 + 高对比图标：
  • 导航栏背景色采用深灰（#212121）或纯黑（#000000），选中图标使用品牌色（如 #4285F4），未选中图标用浅灰（#9E9E9E）。
  • 关键：避免纯黑背景导致图标边缘模糊，可通过细微明度差异（如 #0F0F0F）提升层次感。
• 光影弱化层级：
  • 暗黑模式下导航栏可添加轻微高斯模糊（如透明度 10% 的白色蒙层），与内容区形成虚实对比。

四、场景化配色策略

1. 沉浸式内容场景（如视频、阅读 APP）

• 透明导航栏 + 毛玻璃效果：
  • 导航栏背景半透明（如透明度 70% 的黑色），叠加高斯模糊，避免遮挡内容主体。
  • 示例：腾讯视频播放页顶部透明导航栏，兼顾操作入口与视觉沉浸。
• 动态配色联动：
  • 根据当前内容主色调自动调整导航栏颜色（如图片编辑 APP 根据素材颜色切换标签栏色调）。

2. 高频操作场景（如电商、工具 APP）

• 高饱和警示色突出关键按钮：
  • 购物车、下单等按钮使用红色（#FF4444），与导航栏基础色（如灰色）形成强对比，引导用户行为。
  • 案例：京东 APP 底部导航「购物车」红色图标，在灰色背景中显著突出。

3. 多设备适配（手机 / 平板 / 车机）

• 手机端：导航栏高度适配拇指热区（如底部导航栏高度 48-56px），颜色对比度优先。
• 平板端：导航栏可采用侧边栏设计，颜色明度适当降低（如浅蓝 #E3F2FD），避免视觉压迫。
• 车机端：使用高对比度配色（如黑底黄字），图标尺寸放大至 72px 以上，确保驾驶场景易读。

五、避坑指南

1. 避免色彩过载：导航栏颜色不超过 3 种主色，辅助色用于强调而非铺满。
2. 警惕色盲友好性：
   • 避免红绿色直接对比（约 8% 男性存在红绿色盲），可用「蓝 + 黄」「紫 + 黄」等组合替代。
   • 使用工具检测配色（如 Coblis、Color Oracle），确保色盲用户可区分选中态与未选中态。
3. 适配系统主题：
   • 支持 iOS/Android 系统默认的浅色 / 深色模式切换，导航栏颜色自动适配（如 iOS 的 Dynamic Color）。

总结

• 核心逻辑：通过色彩对比度引导操作路径，用品牌色强化认知，辅助色区分功能层级。
• 实践建议：先确定品牌主色作为导航栏基调，再根据场景需求选择单色、渐变或多色方案，后通过用户测试验证不同光照环境下的可读性（如强光、弱光场景）。
• 工具推荐：使用 Adobe Color、Coolors 生成配色方案，借助 Figma 的 Contrast Checker 插件检测无障碍对比度。