文武集
← 返回索引手艺分类 →

014 / 手艺

给健身网站挑配色：三套品牌方案

19 MIN文武集 Nº 2026.07

基于品牌设计系统专家 Skill 的 71 个品牌设计语言，为 FitLog / 健身网站精选三套配色方案。 设计日期：2026-06-02

方案一：NIKE 风 — 高能量运动品牌

设计哲学： 摄影说话，界面闭嘴。黑白极简框架 + 大胆排版 + 产品图/动作图作为唯一色彩来源。

CSS 变量

:root {
  /* 核心色 */
  --color-primary: #111111;
  --color-on-primary: #ffffff;
  --color-canvas: #ffffff;
  --color-soft-cloud: #f5f5f5;

  /* 文字 */
  --color-ink: #111111;
  --color-charcoal: #39393b;
  --color-mute: #707072;
  --color-stone: #9e9ea0;

  /* 语义色 */
  --color-sale: #d30005;        /* 仅用于热量赤字/燃脂标注 */
  --color-success: #007d48;     /* 达标/完成 */
  --color-info: #1151ff;        /* 提示链接 */
  --color-accent-teal: #0a7281; /* 运动类别点缀（有氧/户外） */

  /* 分割线 */
  --color-hairline: #cacacb;
  --color-hairline-soft: #e5e5e5;

  /* 圆角 */
  --radius-none: 0px;
  --radius-sm: 18px;
  --radius-md: 24px;
  --radius-lg: 30px;
  --radius-full: 9999px;

  /* 间距 */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 18px;
  --space-xl: 24px;
  --space-xxl: 30px;
  --space-section: 48px;

  /* 字体 */
  --font-display: 'Bebas Neue', 'Anton', sans-serif;
  --font-heading: 'Inter', -apple-system, sans-serif;
  --font-body: 'Inter', -apple-system, sans-serif;
}

关键组件

组件样式
主按钮#111 背景 + 白色文字 + 30px 圆角全胶囊，高度 48px
次按钮#f5f5f5 背景 + #111 文字，同上
训练卡片无圆角无阴影，#f5f5f5 底上放动作图，信息直接排下面
热量/赤字仅在价格行使用 #d30005 红色标注
搜索/筛选24px 圆角浅灰药丸
导航白色背景，56px 高，当前页底部 2px 黑线

适合场景

  • 高强度训练品牌（CrossFit、力量训练、HIIT）
  • 以动作摄影/视频为主要视觉的网站
  • 男性为主的硬核健身社区

页面示意

┌──────────────────────────────────────┐
│  NIKE 风 — 力量训练 APP              │
│                                      │
│  ████████████████████████████████████ │
│  █         大图：训练动作摄影        █ │
│  █     「推起极限」96px 粗体        █ │
│  █              [开始训练] 白胶囊    █ │
│  ████████████████████████████████████ │
│                                      │
│  今日训练                    查看全部→ │
│  ┌──────┐ ┌──────┐ ┌──────┐         │
│  │ 卧推 │ │ 深蹲 │ │ 硬拉 │         │
│  │ 图片 │ │ 图片 │ │ 图片 │         │
│  │ 5组  │ │ 4组  │ │ 3组  │         │
│  └──────┘ └──────┘ └──────┘         │
│                                      │
│  本周统计                            │
│  ████████████████████ 85% 达标       │
│  🔥 热量赤字 -3500kcal  (红色)       │
└──────────────────────────────────────┘

方案二：APPLE 风 — 极简高级感

设计哲学： 界面退后，内容上前。大量留白 + SF 风格字体 + 单一蓝色点缀 + 产品图悬浮阴影。像博物馆陈列展品一样展示健身数据。

CSS 变量

:root {
  /* 核心色 */
  --color-primary: #0066cc;          /* 唯一的交互蓝 */
  --color-primary-focus: #0071e3;
  --color-primary-on-dark: #2997ff;

  /* 表面色 */
  --color-canvas: #ffffff;
  --color-canvas-parchment: #f5f5f7; /* 苹果招牌米白 */
  --color-surface-pearl: #fafafc;

  /* 暗色表面（交替使用） */
  --color-surface-dark-1: #272729;
  --color-surface-dark-2: #2a2a2c;

  /* 文字 */
  --color-ink: #1d1d1f;
  --color-body: #1d1d1f;
  --color-body-on-dark: #ffffff;
  --color-body-muted: #cccccc;
  --color-ink-muted-80: #333333;
  --color-ink-muted-48: #7a7a7a;

  /* 分割线 */
  --color-divider-soft: #f0f0f0;
  --color-hairline: #e0e0e0;

  /* 圆角 */
  --radius-none: 0px;
  --radius-sm: 8px;
  --radius-md: 11px;
  --radius-lg: 18px;
  --radius-pill: 9999px;

  /* 间距 */
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 17px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-xxl: 48px;
  --space-section: 80px;

  /* 字体 */
  --font-display: 'SF Pro Display', 'Inter', -apple-system, sans-serif;
  --font-body: 'SF Pro Text', 'Inter', -apple-system, sans-serif;
}

关键组件

组件样式
主按钮#0066cc 蓝底 + 白色文字 + 全圆角胶囊，高 44px
次按钮透明 + #0066cc 文字 + 1px 蓝边框胶囊
亮色区块纯白 #fff 或米白 #f5f5f7，无圆角全宽，80px 上下内边距
暗色区块#272729 深灰，与亮色交替，营造节奏
数据卡片白底 + 18px 圆角 + 1px #e0e0e0 边框 + 24px 内边距
产品图阴影仅用于健身插图/设备图：rgba(0,0,0,0.22) 3px 5px 30px
导航顶部黑条 44px + 产品子导航 52px 毛玻璃效果

适合场景

  • 高端私教/瑜伽/普拉提品牌
  • 健康管理 App、身体数据追踪
  • 女性为主的精致健身平台

页面示意

┌──────────────────────────────────────┐
│  APPLE 风 — 健康追踪 APP             │
│                                      │
│  ┌────────────────────────────────┐  │
│  │                                │  │
│  │   你的身体，值得认真对待       │  │
│  │   每日数据 · 每周趋势 · 持续进步│  │
│  │                                │  │
│  │   [了解更多] [开始使用]        │  │
│  │              🏃‍♂️ (悬浮阴影插图) │  │
│  └────────────────────────────────┘  │
│                                      │
│  ┌────────────────────────────────┐  │
│  │ ██████████████████████████████ │  │
│  │ █    深色区块：本周亮点       █ │  │
│  │ █   🔥 燃脂 4200kcal          █ │  │
│  │ █   💪 训练 5/7 天            █ │  │
│  │ ██████████████████████████████ │  │
│  └────────────────────────────────┘  │
│                                      │
│  ┌──────┐ ┌──────┐ ┌──────┐         │
│  │ 体重 │ │ 体脂 │ │ 肌肉 │         │
│  │70.8kg│ │18.2% │ │62.3% │         │
│  │ ↓0.3 │ │ ↓0.1 │ │ ↑0.2 │         │
│  └──────┘ └──────┘ └──────┘         │
│  卡片：白底 18px圆角 1px浅灰边框     │
└──────────────────────────────────────┘

方案三：SPOTIFY 风 — 深色沉浸能量

设计哲学： 暗黑沉浸 + 单一能量绿 + 专辑封面式卡片。UI 退到阴影中，让运动数据和动作图示成为光源。

CSS 变量

:root {
  /* 核心色 */
  --color-primary: #1ed760;          /* 能量绿 — 仅用于播放/开始/活跃状态 */
  --color-primary-border: #1db954;

  /* 深色表面 */
  --color-bg-deep: #121212;          /* 最深背景 */
  --color-bg-card: #181818;          /* 卡片/容器 */
  --color-bg-surface: #1f1f1f;       /* 按钮/交互面 */
  --color-bg-elevated: #252525;      /* 悬浮卡片 */
  --color-bg-alt: #272727;

  /* 文字 */
  --color-text-primary: #ffffff;
  --color-text-secondary: #b3b3b3;
  --color-text-bright: #cbcbcb;
  --color-text-max: #fdfdfd;

  /* 语义色 */
  --color-negative: #f3727f;         /* 超标/警告 */
  --color-warning: #ffa42b;          /* 注意 */
  --color-announcement: #539df5;     /* 信息 */

  /* 边框 */
  --color-border: #4d4d4d;
  --color-border-light: #7c7c7c;

  /* 阴影 */
  --shadow-card: rgba(0,0,0,0.3) 0px 8px 8px;
  --shadow-dialog: rgba(0,0,0,0.5) 0px 8px 24px;
  --shadow-input-inset: rgb(18,18,18) 0px 1px 0px, rgb(124,124,124) 0px 0px 0px 1px inset;

  /* 圆角 */
  --radius-sm: 4px;
  --radius-md: 6px;
  --radius-lg: 8px;
  --radius-xl: 20px;
  --radius-pill: 500px;
  --radius-full: 9999px;
  --radius-circle: 50%;

  /* 间距 */
  --space-xs: 4px;
  --space-sm: 8px;
  --space-md: 12px;
  --space-lg: 16px;
  --space-xl: 20px;

  /* 字体 */
  --font-display: 'CircularSp', 'Inter', -apple-system, sans-serif;
  --font-body: 'CircularSp', 'Inter', -apple-system, sans-serif;
}

关键组件

组件样式
主按钮（开始训练）#1ed760 能量绿 + 黑色图标/文字 + 50% 圆形 或 500px 大胶囊
次按钮#1f1f1f 深灰底 + 白字 + 9999px 全胶囊，8px 16px 内边距
描边按钮透明 + 白字 + 1px #7c7c7c 边框，9999px
训练卡片#181818 底 + 6-8px 圆角，hover 时 rgba(0,0,0,0.3) 阴影
搜索#1f1f1f 底 + 500px 胶囊 + 内嵌阴影边框
导航#121212 侧边栏，活跃项白字 700，非活跃 #b3b3b3 400
底部播放条模拟 Spotify 底部 Now Playing 条 — 可显示当前训练计时器

适合场景

  • 年轻化健身 App、运动音乐结合平台
  • 夜间训练/晨练打卡社区
  • 需要强沉浸感的个人训练追踪

页面示意

┌──────────────────────────────────────┐
│  SPOTIFY 风 — 训练追踪 APP           │
│  ┌──────┬───────────────────────────┐│
│  │ 导航 │                           ││
│  │ 训练 │  今日训练                  ││
│  │ 记录 │                           ││
│  │ 统计 │  ┌───────┐ ┌───────┐     ││
│  │ 计划 │  │ 胸部  │ │ 背部  │     ││
│  │      │  │ 🏋️   │ │ 🏋️   │     ││
│  │      │  │ 5动作 │ │ 4动作 │     ││
│  │      │  └───────┘ └───────┘     ││
│  │      │                           ││
│  │      │  热门计划                  ││
│  │      │  ┌───────┐ ┌───────┐     ││
│  │      │  │5×5计划│ │PPL分化│     ││
│  │      │  └───────┘ └───────┘     ││
│  │      │                           ││
│  │      │  ═══════════════════════  ││
│  │      │  🟢 今日训练进行中...     ││
│  │      │  卧推 60kg × 12           ││
│  │      │  ═══════════════════════  ││
│  └──────┴───────────────────────────┘│
└──────────────────────────────────────┘

三套方案快速对比

维度方案一：NIKE 风方案二：APPLE 风方案三：SPOTIFY 风
底色白 #fff白/米白交替深黑 #121212
主色黑 #111蓝 #0066cc绿 #1ed760
氛围硬核、运动、张扬精致、克制、高级沉浸、能量、年轻
字体气质粗壮 Futura 96px → Bebas NeueSF Pro 负字距 → InterCircularSp 紧凑 → Inter
圆角30px 全胶囊9999px 全胶囊500px~9999px 胶囊 + 50% 圆
阴影❌ 无阴影✅ 仅产品图一处✅ 重阴影多层
卡片无边框无阴影18px 圆角 + 细边框6-8px 圆角 + 阴影
适合力量训练/CrossFit瑜伽/普拉提/健康管理综合健身App/年轻社区
适合 FitLog⭐⭐⭐⭐⭐⭐⭐⭐

推荐

如果 FitLog 定位是"简单专注、无社交/广告"，布布推荐：

  • 主力选方案三（SPOTIFY 风）：深色主题省电、护眼，适合训练时查看；绿色=能量/开始，语义明确；暗黑风格在健身 App 中辨识度高。
  • 备选方案一（NIKE 风）：如果想走硬核路线，黑白框架+动作摄影非常有力。
  • 方案二（APPLE 风）：适合走高端健康管理路线，但留白过多可能不太适合健身场景的信息密度。

配色方案基于 brand-design-style Skill 中的 Nike、Apple、Spotify 品牌设计系统。

← 返回索引