颜色

颜色是用户感知界面内容及产品特性的直观方式和媒介,合理且和谐的颜色搭配能够提高界面的可用性,为我们的界面带来统一且可识别的一致性,提升用户体验和感知。

颜色类型

范围 类别 描述
主题色板 主题品牌色 每个主题独有的主色,常用于强调视觉重量,如作为主要按钮的底色,文字链接色。
主题辅助色 除主色外服务于特定主题的其他色相,用于增加视觉区分度和页面整体视觉感受。部分主题没有辅助色需求
主题功能色 各主题可基于默认功能色进行微调
通用色板 默认功能色 这类色彩起到传递功能信息、代表某种状态等作用。主要应用于消息通知、反馈提醒、表单校验这类场景中的信息传达
灰色 用于基础区域的视觉区分,如背景色、分隔线... 包含中性灰,及冷调灰、暖调灰这类拥有色彩倾向的灰色。

每个主题有各自的色板,包含品牌色、辅助色与功能色。功能色可选用默认功能色或微调来满足主题个性化需求。通用色板则可以服务于多个主题:

通用色板

中性灰

中性灰色系列在我们的 UI 中占主导地位,利用明度的微妙变化来帮助将内容组织到不同的区域。

可以看到明度曲线在浅色域较平缓,这是考虑到浅色灰的使用场景(如背景区分、分割线),以及行业内屏幕显示效果越来越好,我们对浅色灰的细微辨识度会愈加敏锐。

在深色域(用于文字、正文排版)则需要拉开明度的差距,营造界面的整体层次感。

灰色将会在 UI 中扮演以下角色:

色阶 色号 角色
G0 #FFFFFF 纯白背景
G10 #F7F7F7 浅灰背景
G20 #F0F0F0 分隔线(浅)
G30 #E5E5E5 分隔线(深)
G40 #D9D9D9 可交互组件的描边色,如 input
G50 #BFBFBF 占位文字、禁用状态文字。对应 T4 文字类型
G60 #8C8C8C 辅助文字。对应 T3 文字类型
G70 #595959 正文文字。对应 T2 文字类型
G80 #262626 标题/正文文字。对应 T1 文字类型

冷调灰

适用于主题色为冷色调的界面,增强了可否响应信息使用灰色的区分度,让界面更具对比度和风格。

冷调灰使用逻辑:图形和文字用色逻辑统一;常规使用「主」用色,在适当的场景里设计师可以使用「次」用色。

色阶 色号 逻辑
G0 #FFFFFF 主背景色
G10 #F6F7F9 次背景色
G20 #ECEEF2 辅助色
G30 #DBDEE6 主分割线/引导文字色
G40 #C7CBD5 次分割线/辅助色
G50 #8A909F 主不可响应/正文色
G60 #6C717D 次响应/标题色
G70 #4D525C 次响应/标题色
G80 #393C42 主响应/标题色

Teambition 场景默认品牌色

蓝色 #1B9AEE

设计体系默认品牌色

蓝色 #3F90FF

色相范围:202-218

60 同时满足 AA White 与 AA Black。

色阶 角色
B20 带有载体的填充底色
B30 面性图形的浅色填充色
B40 线性图形的浅色填充色
B50 面性图形主色
B60 文字主色/线性图形/面性图形 hover
B70 文字 hover/线性图形 hover/面性图形 clicked
B80 文字 clicked/线性图形 clicked

功能色

这类色彩起到传递功能信息、代表某种状态等作用。主要应用于消息通知、反馈提醒、表单校验这类场景中的成功、出错、失败、提醒、链接等状态。

红色(Red)

色相范围:360-7

能够快速吸引用户的注意力,因此常用于需要用户额外注意的元素或信息,也可用于传达危险、消极的含义。有可能会引起紧张感,需谨慎考量,不要大面积使用。

60 同时满足 AA White 与 AA Black

橙色(Orange)

色相范围:41-27

用途与红色相似,也用于获取用户注意力,但优先级弱于红色。传达一级警告、警示的含义。

琥珀色(Amber)

色相范围:60-46

用途与橙色相似,但优先级弱于橙色。传达二级警告、警示的含义。

绿色(Green)

色相范围:120-138

用于传达成功、积极的含义。

功能色将会在 UI 中扮演以下角色:

功能色色阶 角色
绿色 成功信息
红色 失败信息
橙色 一级警告信息
琥珀色 二级警告信息
主题品牌色 提示信息

WCAG 视觉无障碍标准

Text Normal/Light Semibold/Bold Ratio AA Ratio AAA
Small <24px <19px 4.5:1 7:1
Large >24px >19px 3:1 4.5:1

标准文本:标准文本和图像的对比度必须至少为4.5:1。

大字号文本:大字号文本 (至少 24px regular 和 light / 19px semibold) 必须具有 3:1 的对比度。

用于指示 UI 组件状态和边界的视觉信息必须与相邻颜色的对比度为 3:1。

在渐变背景或图像上渲染文本时,确保文本颜色在出现的所有位置都满足对比度标准。 这对于视差应用程序或动画尤其重要,因为文本和背景是相互独立移动的。

以下情况的文本无需最低对比度限制:

  • 未激活的(inactive)用户界面组件的一部分(按钮或菜单选项);

  • 表单字段的占位符 (placeholder) 或 ghost text ;

  • 只是纯粹的装饰;

  • 对任何人都不可见的内容;

  • 文本作为「包含其他重要视觉内容图片」的一部分;

  • 文本作为 logo 或品牌名称的一部分。

为了使界面达到最佳的可用性,我们要求:

色板色阶 要求
20-50 AA Large
60-80 AA / AAA Large
  • 文字在非固定颜色上(如渐变背景)时,需要保证其在该背景所有位置都能达标

  • 请勿使用 #000000 搭配 #FFFFFF,这个组合达到了最高对比度 21(最高对比在 16-18 更合适),这会引起一些诵读困难症患者的不适。