规范说明

栅格系统

*UI 备注

此模块为须严格遵守设计规范的模块

空间布局是体系化视觉设计的起点，和传统的平面设计的不同之处在于，UI 界面的布局空间要基于「动态、体系化」的⻆度出发展开。

• 在设计过程中，建立了不同屏幕尺寸之间适配的概念，根据具体情况判断系统是否需要进行适配，以及哪些区块需要考虑动态布局。 据统计，使用中台系统的用戶的主流分辨率主要为 1920、1440和1366，个别系统还存在 1280 的显示设备。

• 间距采用 2 的 n 倍数来定义 (如4、8、16、24、32、48)，让界面更有节奏感和呼吸感;采用 24 栅格体系。 以左右布局为主框架，对内容区域进行 24 栅格的划分设置，如下图所示。我们为⻚面中栅格的 Gutter 设定了定值， 即浏览器在一定范围扩大或缩小，栅格的 Column 宽度会随之扩大或缩小，但 Gutter 的宽度值固定不变。

颜色

*UI 备注

此模块为须严格遵守设计规范的模块

为了避免系统的视觉效果有明显差异，使用一套特定的颜色规范，能够提供一致的外观视觉感受。

品牌色

品牌色取自基础色板的蓝色，Hex 值为#0066FF，应用场景包括:关键行动点，操作状态、重要信息高亮，图形化等场景。

/* 品牌色 */
--hnui-brand-color: #1f78ff;
--hnui-brand-color1: #005ce5;
--hnui-brand-color2: #4b83f7;
--hnui-brand-color3: #3384ff;
--hnui-brand-color4: #599bff;
--hnui-brand-color5: #80b2ff;
--hnui-brand-color6: #b2d1ff;
--hnui-brand-color7: #cce0ff;
--hnui-brand-color8: #d9e8ff;
--hnui-brand-color9: #ebf3ff;
--hnui-brand-color10: #f2f7ff;

/* 状态颜色 */
--hnui-brand-color-normal: var(--hnui-brand-color);
--hnui-brand-color-hover: var(--hnui-brand-color3);
--hnui-brand-color-active: var(--hnui-brand-color1);
--hnui-brand-color-elected: var(--hnui-brand-color9);
--hnui-brand-color-disabled: var(--hnui-brand-color7);

--hnui-brand-color-disabled-border: var(--hnui-brand-color6);
--hnui-brand-color-disabled-bg: var(--hnui-brand-color10);

功能色

功能色代表了明确的信息以及状态，比如成功（#52C41A）、出错（#FAAD14）、失败（#FF4D4D）、提醒（#8D97A6）、链接等。 功能色的选取需要遵守用戶对色彩的基本认知。我们建议在一套产品体系下，功能色尽量保持一致，不要有过多的自定义干扰用戶的认知体验。

/* 功能色 */
--hnui-success-color: #2ba471;
--hnui-success-hover-color: #51bd90;
--hnui-success-active-color: #2ba471;

--hnui-warning-color: #faad14;
--hnui-warning-hover-color: #ffc146;
--hnui-warning-active-color: #db960b;

--hnui-danger-color: #ff4d4d;
--hnui-danger-hover-color: #ff7676;
--hnui-danger-active-color: #d82a2a;

--hnui-info-color: #8d97a6;
--hnui-info-hover-color: #b2b7c0;
--hnui-info-active-color: #707a89;

渐变颜色

带搜索按钮的输入框，用于内容检索。

中性色

中性色主要被大量的应用在界面的文字部分，此外背景、边框、分割线等场景中也非常常⻅。在落地的时候是按照透明度的方式实现的

/* 中性色 */

/* 标题文字 */
--hnui-neutral-color-1: #2d2e33;

/* 正文、重要信息文字、按钮文字、输入框正常状态文字等 */
--hnui-neutral-color-2: #43454d;

/* 内容文字、说明叙述文字 */
--hnui-neutral-color-3: #5d606a;

/* 提示性文字、辅助文本 */
--hnui-neutral-color-4: #9298a0;

/* 禁用文本 */
--hnui-neutral-color-5: #b7bdc7;

/* 描边格描边、输入文本描边、下拉选择描边等 */
--hnui-neutral-color-6: #dfe2e7;

/* 全局背景、禁用状态、分割线等 */
--hnui-neutral-color-7: #f0f2f5;

/* 最低颜色等 */
--hnui-neutral-color-8: #fafbfc;

文字

*UI 备注

此模块为须严格遵守设计规范的模块

字体是体系化界面设计中最基本的构成之一。

我们的用戶通过文本来理解内容和完成工作，科学的字体系统将大大提升用戶的阅读体验及工作效率。在中后台视觉体系中定义字体系统，我们建议从下面五个方面出发:

1. 字体家族
2. 字阶与行高
3. 字重
4. 字体颜色

字体家族

系统字体家族中优先使用系统默认的界面字体，同时提供了一套利于屏显的备用字体库，来适配在不同平台以及浏览器的显示下，字体始终保持良好的易读性和可读性，体现了友好、稳定和专业的特性。另外，在中后台系统中，数字经常需要进行纵向对比展示，我们单独将数字的字体设置为等宽字体D-DIN。

数字字体使用代码示例：

@font-face {
  font-family: 'DIN';
  src: url('/fonts/D-DIN-PRO/D-DIN-PRO.woff2') format('woff2'),
    url('/fonts/D-DIN-PRO/D-DIN-PRO.woff') format('woff'),
    url('/fonts/D-DIN-PRO/D-DIN-PRO.ttf') format('truetype'),
    url('/fonts/D-DIN-PRO/D-DIN-PRO.eot') format('embedded-opentype'),
    url('/fonts/D-DIN-PRO/D-DIN-PRO.svg') format('svg');
  font-weight: normal;
  font-style: normal;
}

/* 使用数字字体 */
.use-font {
  font-family: DIN;
}

下载地址： D-DIN-PRO.zip

字体大小与行高

在本系统的视觉体系中，我们建议的主要字体为14，与之对应的行高为22。其余的字阶的选择可根据具体情况进行自由的定义。 建议在一个系统设计中(展示型⻚面除外)，字阶的选择尽量控制在 3-5 种之间，保持克制的原则。

字阶和行高决定着一套字体系统的动态与秩序之美。字阶是指一系列有规律的不同尺寸的字体。行高可以理解为一个包裹在字体外面的无形的盒子。建议行高在1.2左右

受到目前互联网 UI 设计规范的启发，定义了 10 个不同尺寸的字体以及与之相对应的行高。

字重

字重的选择同样基于秩序、稳定、克制的原则。多数情况下，只出现regular以及medium的两种字体重量，分别对应代码中的400和500。在英文字体加粗的情况下会采用semibold的字体重量，对应代码中的600。

字体颜色

文本颜色如果和背景颜色太接近就会难以阅读。但系统内的文本颜色可按原系统的配色使用，不做设计效果的强制要求。

阴影

*UI 备注

此模块为须严格遵守设计规范的模块

阴影来源于现实生活的反映物体与物体之间距离的物理现象。在界面中，我们往往通过模拟元素的投影直截了当的来告诉用戶，元素之间的高度距离与层次关系。 阴影是由两个不同阶层的平面产生，且强度由两者之间的距离决定。所以物体的高度直接影响物体的阴影，对象离地面越远阴影越大，模糊值越高。 我们将系统分为无、低、中、高四个 UI 层级，各自分布在不同的高度层级，阴影属性也有所不同。

阴影值

• 阴影向下:主要应用于组件内部或组件本身，是比较常规场景的用法
• 阴影向上:主要应用于底部导航或工具栏等
• 阴影向左:主要应用于右边导航栏、抽屉组件或固定表格栏
• 阴影向右:主要应用于左边导航栏、抽屉组件或固定表格栏

一级投影

二级投影

三级投影

/* 一级投影（默认向下） */
.hnui-box-shadow {
  box-shadow: 0px 6px 16px 6px rgba(0, 0, 0, 0.18);
}
.hnui-box-shadow.hover,
.hnui-box-shadow:hover {
  box-shadow: 0px 6px 16px 6px rgba(31, 120, 255, 0.18);
}

/* 二级投影（默认向下） */
.hnui-box-shadow_l2 {
  box-shadow: 0px 6px 16px 6px rgba(0, 0, 0, 0.12);
}
.hnui-box-shadow_l2.hover,
.hnui-box-shadow_l2:hover {
  box-shadow: 0px 6px 16px 6px rgba(31, 120, 255, 0.12);
}

/* 三级投影（默认向下） */
.hnui-box-shadow_l3 {
  box-shadow: 0px 6px 16px 6px rgba(0, 0, 0, 0.06);
}
.hnui-box-shadow_l3.hover,
.hnui-box-shadow_l3:hover {
  box-shadow: 0px 6px 16px 6px rgba(31, 120, 255, 0.06);
}

边框/分割线

区隔内容的分割线。

何时使用:

• 对不同章节的文本段落进行分割
• 对行内文字/链接进行分割，例如表格的操作列