Foundations
Foundations 定义了构成 Components 和 Patterns 的基础样式与指南，是产品的 UI 基础，相当于使用此系统进行设计的产品的「品牌指南」。其中主要包含 Icons 、Colors、Typography、Illustration 和 Layout 共 5 个部分。
Icons 图标
设计原则
使用简单、高辨识度的图形。清晰、直观的图标更能明确指代含义、便于识别与记忆。
保持图标之间一致的风格和表现方式，如，在透视、笔画权重和圆角大小等方面保持一致。
根据不同的图标形状类型使用不同的轮廓线。
保持简洁、平面的风格，避免让图标具有多维度空间感或充满细节。
适时通过对基本元素规格进行微调，以达到图标的平衡感。
与文本搭配使用时，图标尺寸和字体尺寸保持一致，图标颜色与字体颜色保持一致（表示状态的除外）。
特别说明：此系统目前仅提供一部分的系统图标（如下图所示）。
系统图标通常用于表示常用的操作，如，删除、保存、编辑等等，也可用于表示一个文件或者状态。除系统图标外，还可根据后台业务的不同设计不同的业务图标。业务图标本身不带功能性的操作，而是辅助配合文案的一个抽象化图形。
以上设计原则均针对系统图标，业务图标的设计原则与系统图标基本一致，但在细节处理上可视具体场景而定，通常细节更为丰富，使用的尺寸也较大。
Colors 颜色
作为业务复杂的数据密集型产品，后台产品的用色主要偏向于简洁实用，以保证清晰高效。此系统中一共定义了 25 种颜色，以及它们分别对应的默认使用场景。
设计原则
品牌色主要用于关键行动点、操作状态、重要信息高亮、图形化等场景。同时衬以大面积的中性色，可让用户聚焦到任务本身，从而提高任务的执行效率。
灰色是比较稳定的中性色，使用场景较广泛，有利于关键内容的衬托和功能的引导。主要用于背景、边框、分割线、或次级信息、操作等。
功能色一般具有特定的含义，用于传递功能信息或代表某种状态。主要包含成功色绿色、信息色蓝色、警告色黄色和出错色红色，应用于消息通知、反馈提醒、表单校验这类场景中的成功、提醒、出错、失败等状态。
其他指南
用色尽量避免面积过大或种类过多，以免造成用户视觉疲劳，建议不超过 3 种（数据图表和图形插画除外）。
操作类的色彩搭配应遵守 WCAG 2.0 的标准，满足颜色对比值 3:1 的最低标准，以保证易识别性。
图形插画和 logo 可不必遵循系统中的颜色定义，但图形插画需保持相近的色系。
特别说明： 红色是具有强烈情感因素的颜色，在后台管理系统的设计中通常用作功能色，突出危险信号、错误提示等，有时也用于图表中。若使用红色作为后台产品的主色，可能导致与功能色混淆，无法准确传达信息、提供清晰反馈。而蓝色则比较清新，传递出的情绪相对稳定、可靠、友好，常用作专业类、管理类的后台管理系统设计的主色。
因此，此系统中采用了蓝色作为主色，而不是有车以后的品牌色红色。
Typography 字体排版
字体家族
优先使用系统默认的界面字体，同时提供一套备用字体库，以确保不同平台及浏览器显示下字体的可读性与易读性。
字体大小
此系统中的主字体为 14px。默认字体为 14px ，表格内容字体为 13px ，说明文字为 12px。
字阶与行高
字阶的选择尽量控制在 3-5 种之间。
默认行高为 1.5em，即「字号 x 1.5」，可根据实际情况在此基础上进行调整。如，主字体 14px 对应的行高为 22px。
字重
多数情况下，只使用 regular 与 medium 两种字体重量。
字体颜色
避免文本颜色与背景颜色过于接近，使文本难以阅读。可参考 WCAG 的标准，设置正文文本、标题和背景色之的对比度。
字段间距与段落间距
字段间距为 8px；标题与段落之间间距为 16px；段落和段落之间间距为字体字号的 1 倍。
其他建议
避免无意义地使用大量字阶、字重、颜色去强调视觉重点或对比关系。在视觉展现上使用尽量少的样式去实现设计目的。
Illustration 插画
此系统中共提供了 8 种不同含义的插画，主要用于页面空状态，包括 403、404、500、重新登录、审核中、提交成功、提交失败与操作确认。
设计指南
图形插画应与系统设计风格保持一致，使用系统主色相近的色系。
用于页面空状态的图形插画应保持中性或幽默的基调，避免使用表达紧迫感或困惑的插画。
Layout 布局
整体布局
目前仅提供一种整体界面布局，内容区域宽度为 1200px 的静态布局，水平居中。暂不涉及动态布局相关的适配、网格、栅格等。
元素间距
纵向间距有以下三种规格：
小号间距为 8px，用于同类组件之间。
中号间距为 16px，用于相关联但不同类的组件之间。
大号间距为 24px，用于不关联也不同类的组件之间。
若以上间距无法满足信息划分等级，可按实际需要在原有基础上增减 8 的倍数（y=8+8*n (n>0) ，8 是基础间距，y 是纵向间距）。或通过增加元素来拉开信息层次，例如增加「分割线」。
由于目前未使用栅格布局，横向间距可根据实际情况而定。
Last updated
