導航欄的顏色搭配直接影響用戶的視覺感知和操作效率，需遵循 功能性優(yōu)先、視覺舒適、品牌一致性 的原則。以下從 基礎原則、色彩心理學、搭配技巧、場景適配 四方面詳細說明：
- 背景與內容的對比度：
- 導航欄背景色與圖標 / 文字的對比度需符合 WCAG 無障礙標準（如 AA 級標準要求對比度≥4.5:1）。
- 示例：
- 深色背景（如 #333333）搭配淺色圖標（如 #FFFFFF），對比度達 7:1，清晰易讀。
- 淺色背景（如 #F5F5F5）搭配深灰色圖標（如 #333333），避免純白 / 純黑帶來的視覺刺激。
- 選中態(tài)與未選中態(tài)區(qū)分：
- 選中狀態(tài)的圖標 / 文字顏色需與未選中狀態(tài)形成明顯差異（如飽和度或明度差異≥30%），但避免過度鮮艷導致視覺疲勞。
- 示例：底部導航欄未選中圖標為 #999999，選中時切換為品牌主色（如 #1A73E8），并適當增加亮度（如 #4285F4）。
- 核心功能突出：
- 高頻操作入口（如首頁、購物車）可使用 品牌主色 或高飽和度顏色，次級功能采用低飽和度輔助色。
- 示例：電商 APP 將「購物車」圖標設為紅色（#FF4444），其他標簽使用灰色系（#666666）。
- 信息層級區(qū)分：
- 導航欄背景色與內容區(qū)背景色需形成微差（如導航欄深 5-10%），暗示層級關系，避免界面割裂。
- 示例：內容區(qū)為白色（#FFFFFF），導航欄為淺灰色（#F0F0F0），通過明度差異區(qū)分層級。
- 主色貫穿全局：
- 導航欄背景色或核心圖標顏色需與品牌 VI 主色相統(tǒng)一（如微信的綠色 #4CD964、抖音的紅色 #FF0000）。
- 延伸應用：品牌色可通過漸變、光影效果（如高斯模糊）優(yōu)化視覺層次，但需保持識別度。
- 輔助色適配場景：
- 根據(jù)不同頁面主題調整輔助色（如「我的」頁面使用溫和的藍色，「設置」頁面使用中性灰色），但導航欄基礎框架需保持品牌調性。
不同顏色會傳遞特定情緒，需結合產(chǎn)品定位選擇導航欄主色調：
| 顏色 |
心理感受 |
適用場景 |
案例參考 |
| 藍色 |
專業(yè)、信任、穩(wěn)定 |
金融類、工具類 APP（如支付寶、銀行 APP） |
支付寶底部導航藍色 |
| 紅色 |
激情、警示、促銷 |
電商類、社交類 APP（突出優(yōu)惠 / 互動） |
淘寶「購物車」紅色 |
| 綠色 |
安全、自然、健康 |
醫(yī)療類、環(huán)保類 APP |
薄荷健康綠色導航欄 |
| 黃色 |
活力、輕快、提醒 |
資訊類、兒童類 APP |
美團外賣黃色標簽 |
| 灰色 |
中性、簡約、百搭 |
極簡工具類、內容類 APP（避免干擾內容） |
Notion 灰色抽屜導航 |
| 黑色 |
高端、沉浸、聚焦 |
視頻類、閱讀類 APP（暗黑模式適配） |
Netflix 黑色頂部欄 |
- 純色系背景 + 對比色圖標：
- 導航欄采用單一純色背景（如 #1A73E8 藍色），圖標 / 文字使用白色（#FFFFFF），適用于功能簡潔的工具類 APP。
- 優(yōu)點：視覺統(tǒng)一，聚焦核心操作；缺點：缺乏層次感，需通過光影（如投影）增強立體感。
- 漸變背景 + 單色圖標：
- 背景使用品牌色漸變（如 #4285F4→#1A73E8），圖標保持單色（如白色），提升視覺動感。
- 適用場景：科技感、年輕化產(chǎn)品（如運動類 APP Keep）。
- 分段式配色：
- 底部導航欄不同標簽使用不同顏色（如「首頁」藍色、「消息」紅色），直觀區(qū)分功能模塊。
- 注意：顏色數(shù)量不超過 3 種，避免雜亂（如 Instagram 舊版底部導航采用藍、白、粉色分段）。
- 主色 + 輔助色組合：
- 核心標簽用主色（如 #1A73E8），次要標簽用輔助色（如 #FF9800），非活躍狀態(tài)統(tǒng)一為灰色（#666666）。
- 示例：美團底部導航「首頁」黃色、「外賣」橙色、其他灰色，功能優(yōu)先級一目了然。
- 深色背景 + 高對比圖標：
- 導航欄背景色采用深灰（#212121）或純黑（#000000），選中圖標使用品牌色（如 #4285F4），未選中圖標用淺灰（#9E9E9E）。
- 關鍵：避免純黑背景導致圖標邊緣模糊，可通過細微明度差異（如 #0F0F0F）提升層次感。
- 光影弱化層級：
- 暗黑模式下導航欄可添加輕微高斯模糊（如透明度 10% 的白色蒙層），與內容區(qū)形成虛實對比。
- 透明導航欄 + 毛玻璃效果：
- 導航欄背景半透明（如透明度 70% 的黑色），疊加高斯模糊，避免遮擋內容主體。
- 示例：騰訊視頻播放頁頂部透明導航欄，兼顧操作入口與視覺沉浸。
- 動態(tài)配色聯(lián)動：
- 根據(jù)當前內容主色調自動調整導航欄顏色（如圖片編輯 APP 根據(jù)素材顏色切換標簽欄色調）。
- 高飽和警示色突出關鍵按鈕：
- 購物車、下單等按鈕使用紅色（#FF4444），與導航欄基礎色（如灰色）形成強對比，引導用戶行為。
- 案例：京東 APP 底部導航「購物車」紅色圖標，在灰色背景中顯著突出。
- 手機端：導航欄高度適配拇指熱區(qū)（如底部導航欄高度 48-56px），顏色對比度優(yōu)先。
- 平板端：導航欄可采用側邊欄設計，顏色明度適當降低（如淺藍 #E3F2FD），避免視覺壓迫。
- 車機端：使用高對比度配色（如黑底黃字），圖標尺寸放大至 72px 以上，確保駕駛場景易讀。
- 避免色彩過載：導航欄顏色不超過 3 種主色，輔助色用于強調而非鋪滿。
- 警惕色盲友好性：
- 避免紅綠色直接對比（約 8% 男性存在紅綠色盲），可用「藍 + 黃」「紫 + 黃」等組合替代。
- 使用工具檢測配色（如 Coblis、Color Oracle），確保色盲用戶可區(qū)分選中態(tài)與未選中態(tài)。
- 適配系統(tǒng)主題：
- 支持 iOS/Android 系統(tǒng)默認的淺色 / 深色模式切換，導航欄顏色自動適配（如 iOS 的 Dynamic Color）。
導航欄配色需平衡 功能性、品牌性、美學性：
- 核心邏輯：通過色彩對比度引導操作路徑，用品牌色強化認知，輔助色區(qū)分功能層級。
- 實踐建議：先確定品牌主色作為導航欄基調，再根據(jù)場景需求選擇單色、漸變或多色方案，后通過用戶測試驗證不同光照環(huán)境下的可讀性（如強光、弱光場景）。
- 工具推薦：使用 Adobe Color、Coolors 生成配色方案，借助 Figma 的 Contrast Checker 插件檢測無障礙對比度。
