我睡着的时候不困唉

后台管理 UI 规范

TIP

为后台管理 UI 设计提供规范参考

栅格

栅格布局（解决自适应和响应式问题，采用 24 列栅格系统实现，以满足 2，3，4，5，6 分比布局等多种情况，固定宽度 Column，将间隔 Gutter 进行动态缩放）

  1. 栅格定义
  2. 间隔定义
$max-interval: 8px;
$min-interval: 4px;
  1. 尺寸设定
$lay-top-height: 56px; //顶部栏高度
$lay-left-width-min: 56px; //侧边栏收缩状态宽度
$lay-left-width-max: 200px; // 侧边栏宽度
$lay-right-suspended: 400px; //右侧侧浮窗宽度

图标

图标，图标分为，线性图标和面性图表，一般一个系统中，采用相同风格 $icon-element: '';

标准色

  1. 品牌色（品牌色的应用场景包括操作状态、按钮色、可操作图标等） $brand-color : #4886ff;
  2. 辅助色（辅助色用于提示其他场景，比如成功、失败、警告、无效等）
$serve-color1: #6fc643;
$serve-color2: #ecac4a;
$serve-color3: #f85c5d;
$serve-color4: #b2b3b5;
  1. 中性色（中性色常用于文本、背景、边框、分割线等，需要考虑深色背景和浅色背景的差异，可以选择同一色相控制透明度变化，用来表现不同的层级结构）
$neuter-color1: #333333;
$neuter-color2: #616266;
$neuter-color3: #a2a2a2;
$neuter-color4: #e5e5e5;
$neuter-color5: #f2f2f2;
$neuter-color6: #ebeef5;
$neuter-color7: #fafafa;
$neuter-color8: #f7fbfe;
$neuter-color9: #ffffff;

字号

常用字号设置

$font-size12: 12px;
$font-size13: 13px;
$font-size14: 14px;
$font-size16: 16px;
$font-size18: 18px;
$font-size20: 20px;
$font-size24: 24px;
$font-size30: 30px;

行高

常用字号对应行号（一般行高 = 文字大小 + 6px/8px ）这里按照（文字大小+8px 计算）

$line-height-size12: 20px;
$line-height-size13: 21px;
$line-height-size14: 22px;
$line-height-size16: 24px;
$line-height-size18: 26px;
$line-height-size20: 28px;
$line-height-size24: 32px;
$line-height-size30: 38px;

字体

标准字体设置

  1. Win
$font-family-c-H: 'Microsoft YaHei'; //中文
$font-family-c-Y: 'Arial'; // 英文
  1. Mac
$font-family-e-H: 'PingFang SC'; // 中文
$font-family-e-Y: 'Helvetica'; // 英文

按钮

按钮（交互状态包括默认、悬停、点击和不可用） 按钮根据需求分为不同尺寸，大中小三个级别用在不同的场景，一般按照 8 的倍数设定。如高度分别设定为 24、32、40px。 规范整理时要规定不同类型按钮的宽高、圆角及文字大小，同时还要将按钮的不同状态展现出来。 填充按钮之间间距最小为 10px;

$button-height-min: 24px;
$button-height-in: 32px;
$button-height-max: 40px;

分页

分页的高度设定为 24px、30px、32px，根据应用场景适当增减内容，比如设定每页展示数据的条数、跳转至指定页等

$paging-height-min: 24px;
$paging-height-in: 30px;
$paging-height-max: 32px;

表单

表单元素高度可按照 8 的倍数进行设定，比如 24px、32px 表单中标题文字左对齐，输入框左对齐，标题文字距离输入框 20px 标题文字右对齐，输入框左对齐，输入框内正文字体 14px，文字和左右两边边框的边距 10px

$form-height-min: 24px;
$form-height-max: 32px;

表格

表格主要分为五大区域：选择搜索区、操作区、表头、正文、底栏

  1. 表格行高可设置为表格内字体高度的 2~3 倍，主表格会间隔显示不同颜色，用于区分不同行数据、加强视觉流引导，展开单行的内置表格可采用纯色，选中行应有视觉上的反馈。表头要和表格内容有视觉上的区分,表格行高可采用 36、40、48、60 等
  2. 表格行数太多加载速度会降低，延长用户等待时间；行数太少会导致用户不断翻页，降低使用效率。比较合适的默认表格行数是 20 或 50，用户可以根据自己需求选择默认的行数
  3. 列宽根据内容字段长短需要有不同且合理的默认值，使得表格字段有良好的展示效果。列内容的长度固定时，列宽应大于固定宽度（比如时间、MD5、SHA1）；列内容不固定时，能预判最大宽度的按照最大宽度设定列宽（比如 IP 地址、MAC 地址、姓名），不能预判最大宽度的设定列宽按照常用宽度，多于内容省略以「…」展示，鼠标悬停出现完整内容（比如详情、描述
  4. 列数，表格列不应过多，列数比较多的情况下应该合理进行合并、隐藏、删除或进行优先级处理
  5. 对齐方式
  6. 详情入口，表格内部数据的详情入口，将能点击下钻查看详情的内容以不同颜色表示，同时在表格行最后一列操作按钮部分放置一个查看按钮

反馈

包括弹框、侧滑框、骨架屏、全局提示、警告提示、消息提醒、加载状态等。分为模态框和非模态框，区别是是否会打断用户工作流 1.弹框出现时，主题内容增加一层遮罩 #000，透明度 50%，避免使用双层弹框，可同时采用有关闭图标的弹框和无关闭图标的弹框，引导用户对内容进行正确操作 2.侧滑框又称抽屉，出现在右侧，固定宽度 400px，高度覆盖在主题内容之上，点击侧滑框以外的区域则收起侧滑框 3.骨架屏，为某些特定数据提供数据加载等待时的占位图形组合 4.全局提示，建议停留时间 3s，可根据文字字数调整停留时间，文字内容限制在 30 以内 5.警告提示，用不同颜色和样式展示需要关注的信息 6.通知提醒，消息通知和警告信息用通知提醒框，单个消息从页面右侧以抽屉的方式划出，用户可手动关闭，或停留 3s 后自动关闭

缺省状态

绘制不同类型的情感化插画表示缺省状态，如 404、500、暂时没有数据、没有新消息等。 页面需要一个默认的底色，错误文字使用 14px，与情感化插画间距 20px，与按钮间距 30px

数据可视化

数据可视化部分可能是后台产品中对视觉设计要求较高的部分，使用情境为各类统计图、大屏展示页面等。 功能型页面的数据可视化可以引入图形化设计组件，Echarts、G2、d3 等；展示型页面的数据可视化则可以做得更有趣， 比如立体的统计图、粒子地球效果、灵活有趣的网络拓扑图等。 考虑到数据可视化可能会需要深色浅色不同的背景，在数据可视化统计图的色彩搭配上要注意颜色的拓展性。