Skip to content

配置品牌色和皮肤色

品牌色统一系统控件和导航视觉。

概述

主题色控制按钮、页签、开关等组件主色。皮肤色控制 Web 主导航和移动端顶栏等局部区域颜色。管理员可以使用预置色,也可以配置自定义色值。

主题色控制的界面控件示例

皮肤色控制的导航和顶栏示例

开始之前

IMPORTANT

  • 权限要求:您需要拥有系统管理员权限。
  • 品牌要求:请准备企业品牌色值。
  • 可读性要求:请确认文字、图标和背景有足够对比度。

配置主题色

  1. 在管理后台中,打开 企业设置 > 品牌色
  2. 进入主题色配置区域。
  3. 选择系统预置主题色,或切换到自定义颜色。
  4. 如使用自定义颜色,请选择颜色或输入十六进制色值。
  5. 在右侧预览区中,查看按钮、页签和开关效果。
  6. 点击 立即使用

预置主题色配置

自定义主题色配置

NOTE

当主题色饱和度和明度过低时,系统提示修正。可使用校正颜色能力调整颜色。

配置 Web 主导航皮肤色

  1. 品牌色 页面中,进入皮肤色配置区域。
  2. 选择 WEB 主导航
  3. 选择预置色,或切换到自定义颜色。
  4. 如使用自定义颜色,请配置主导航底色。
  5. 配置应用默认颜色,包括文字和图标。
  6. 配置应用选中颜色,包括文字和图标。
  7. 在右侧预览区中,查看效果。
  8. 点击 立即使用

Web 主导航预置皮肤色

Web 主导航自定义皮肤色

配置移动端顶栏皮肤色

  1. 在皮肤色配置区域中,选择 移动端顶栏
  2. 选择预置色,或切换到自定义颜色。
  3. 如使用自定义颜色,请配置顶栏底色。
  4. 配置顶栏文案颜色。
  5. 在右侧预览区中,查看效果。
  6. 点击 立即使用

移动端顶栏预置皮肤色

移动端顶栏自定义皮肤色

颜色能力对照

能力控制区域配置方式原始资料说明
主题色按钮、页签、开关等系统控件。6 种预置色或自定义色。自定义色可输入十六进制色值。
Web 主导航皮肤色Web 主导航背景、文字和图标。预置色或自定义色。预置色包含中性色、浅色调和深色调。
移动端顶栏皮肤色移动端顶栏背景和文案。预置色或自定义色。支持右侧预览区实时预览。

注意事项

  • 预置皮肤色包含中性色、浅色调和深色调。
  • 自定义皮肤色需要重点检查文字和图标识别度。
  • 品牌色是企业级视觉配置,调整前建议先获得品牌负责人确认。

预期结果

主题色和皮肤色生效后,员工在 Web 端和移动端看到新的控件主色、主导航颜色和顶栏颜色。

相关主题