视觉规范 Visual Guidelines

颜色 Color

1. 灰度色
2. 文本颜色
3. 辅助色与阶梯色
4. Vue.js Reference
5. React Native Reference

色彩是视觉体验中的关键元素。为使设计语言完整统一，我们规定了主色、辅助色、灰度色和阶梯色。规范化的颜色使用能帮助用户更有效地建立清晰的信息层级和视觉导向。

主色和辅助色如下，在使用颜色时应首先考虑使用主色和辅助色。

主色

云闪付 App 的主色为银联云闪付的品牌色红色，即 #ED171F。 主色用于强调核心元素及传达品牌形象。当小面积使用主色时，例如用于按钮及核心界面元素的高亮状态下，必须以纯色的方式应用。而当作为背景色大面积烘托氛围时，则应以渐变色的方式，在以下色阶中取色，使界面视觉效果更富有变化。

灰度色

针对内容、正文、分割线、背景等界面元素，系统中提供了 7 种灰度色。需要根据场景使用正确的灰度来体现不同的信息层级，以及分隔不同内容区块。

• Gray：正文内容主要文字的颜色，也是文字中可以使用最深的颜色。
• Gray-1：正文内容中次级信息的颜色。与 Gray 搭配使用，体现不同的信息层级。
• Gray-2：链接按钮的颜色，和未被选中状态下的界面元素颜色。
• Gray-3：不可用文字和元素颜色。
• Gray-4：在 Gray-5 背景上分割线的颜色。
• Gray-5：在界面中出现纯白色背景卡片时做为背景色，同时也是白色背景上分割线的颜色。
• White：白色被用作背景色和 Gray-5 交替使用，表达不同内容章节的区分。同时白色也被用作深色背景上的文字颜色。当使用白色文字时需要注意保证可读性。

文本颜色

文本默认颜色应是灰度色中的颜色，当有特别需要用户注意的信息时可以使用带颜色的文本，但切勿滥用。

辅助色与阶梯色

为丰富云闪付 App 设计的视觉系统，进一步完善设计语言的表达，在主色的基础上增添来 6 种辅助色，帮助用户建立更直观的信息逻辑。 同时，每个辅助色也有对应阶梯色，其中：

• 后缀为 6 即最右端的颜色通常在图标的圆形背景（如账单交易、生活便利）等情况下出现，其色值等于对应主要辅助色的 9% 不透明度。
• 当界面需要使用渐变色时，可以根据情况选择使用阶梯色中的颜色。其中，大面积渐变背景色可跨两个梯度，小面积渐变背景色仅可跨一个梯度。
• 如界面中有宣传图或者插画出现，设计时应尽可能地选择使用阶梯色中的颜色，维持界面色调的一致性。

Vue.js Reference

设计系统的色盘颜色被定义为不同的 CSS Hepler 类名，可以通过使用这些类名来控制文字或背景的颜色。

<div class="has-text-primary">颜色</div>

主色

辅助色 红色

辅助色 橙色

辅助色 黄色

辅助色 绿色

辅助色 青色

辅助色 蓝色

灰度颜色

React Native Reference

设计系统中的不同颜色被定义为 Theme 类的常量，可以在实现中引用这些常量来控制不同 Component 的颜色，例如：Theme.primaryColor。

import {Theme} from 'up-qp-dls';

<View style={{backgroundColor:Theme.primaryColor, width:30, height:30}} />}/>

主色

辅助色 红色

辅助色 橙色

辅助色 黄色

辅助色 绿色

辅助色 青色

辅助色 蓝色

灰度颜色