颜色 Color

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

    颜色类型

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

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

    通用色板

    中性灰

    中性灰色系列在我们的 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 更合适),这会引起一些诵读困难症患者的不适。