1-1-3、B端产品UI设计规范 V2.2

文档版本： V2.2

编制日期： 2026-05-14

适用范围： B 端管理系统（企业级产品）

核心原则： 数据优先、操作高效、权限清晰、风格统一、无障碍适配

一、基础规范

1.1 设计尺寸与兼容性

设备类型	基础设计尺寸	核心工作区	最低兼容
PC 端（B 端主）	1920px × 1080px	≥1280px	1024px
移动端（B 端辅助）	375pt × 812pt	≥320pt	320pt

响应式策略：

PC 端：支持 1024px - 2560px 宽屏适配，核心工作区宽度不小于 1280px；小屏（1024-1280px）时侧边栏可折叠为图标模式，弹窗宽度自适应为屏幕宽度的 80%（最小 400px）。
移动端：支持 320pt - 428pt 适配，采用流式布局，核心内容区边距自适应，避免横向滚动。

二、色彩规范2.1 主题色（品牌色）

用途	色值	说明
核心主题色	`#246AFE`	主操作按钮、品牌标识
浅变体	`#91B4FE`	悬浮态背景、hover 效果
深变体	`#0E42D2`	点击态、深色背景
极浅变体	`#E6F4FF`	侧边栏激活背景、选中状态辅助

设计理念： 科技蓝为默认主题色，色调沉稳专业，适合企业办公场景；变体色梯度均匀，保证视觉过渡自然。

2.2 功能色（状态色）

状态	色值	用途	浅变体（hover）
成功	`#00B42A`	操作成功、正向反馈、绿色标识	`#E8F8EB`
警告 / 提示	`#FF7D00`	警示信息、注意提醒、橙色标识	`#FFF4E8`
错误 / 失败	`#F53F3F`	错误提示、失败状态、红色标识	`#FFE8E8`

2.3 中性色（文字与背景）

文字颜色：

用途	色值	说明	高对比度模式
主要文字	`#18191A`	一级标题、重要数据	`#000000`
常规文字	`#646566`	正文、说明文字	`#1A1A1A`
辅助文字	`#979899`	次要说明、占位符	`#333333`
禁用文字	`#C0C4CC`	禁用状态	`#666666`

背景颜色：

用途	色值	说明	统一使用规则
主背景	`#FFFFFF`	卡片、弹窗、主内容区	全局基础背景
次级背景	`#F7F8FA`	表格表头、搜索栏、工具栏	需区分层级的非主背景区域
悬停背景	`#F6F6F6`	表格行、按钮、普通菜单项 hover	所有可交互元素悬停统一使用，侧边栏菜单项 hover 特殊适配为 `#F7F8FA`（因侧边栏为白色背景，需弱对比）
深层背景	`#F2F6FC`	最浅背景色	页面整体背景、非核心区域填充
选中背景	`#E6F4FF`	表格行选中、菜单激活	配合主题色浅变体，强化选中状态

边框颜色：

用途	色值	说明
分割线	`#EBEDF0`	表格分隔线、边框	全局主要分隔
浅边框	`#E4E7ED`	次要分隔	卡片内部、非核心区域分隔
输入框边框	`#DCDFE6`	表单输入框边框	聚焦时变为 `#246AFE`，禁用时变为 `#E4E7ED`

三、字体规范

3.1 字体选型

系统	推荐字体	备选	无障碍适配
Windows	微软雅黑 / 思源黑体	黑体	确保字体无衬线，易读性优先
macOS	苹方 PingFang SC	思源黑体	-
数字	Din Alternate	Arial	等宽数字，便于数据对比
特殊标题	优设标题黑	思源黑体 Bold	仅用于页面主标题，占比≤10%

3.2 字号层级

层级	字号（PC）	行高（PC）	字号（移动端）	行高（移动端）	用途
一级标题	20px	30px	18px	28px	页面主标题
二级标题	18px	28px	16px	24px	区块标题、卡片标题
三级标题	16px	24px	15px	22px	小节标题、表头
正文	14px	22px	14px	20px	表格内容、表单、说明
辅助文字	12px	18px	12px	16px	提示、标签、次要说明

3.3 字重规范

字重名称	数值	用途	补充说明
Regular	400	正文、说明文字	全局默认字重
Medium	500	标题、强调内容	三级及以上标题、重要数据
Bold	600	核心标题、关键数据	仅一级 / 二级标题使用，避免滥用

四、按钮规范

4.1 设计目标

指导行动：引导用户采取期望的操作
防止错误：通过视觉反馈帮助用户避免操作失误
权限提示：权限不足时按钮置灰并添加 tooltip 说明 "无操作权限"
无障碍适配：支持键盘回车 / 空格触发，聚焦时显示外发光边框

4.2 按钮类型

类型	高度（PC）	高度（移动端）	圆角	用途
主操作按钮	40px	44px	4px	完成、推荐类操作；一个操作区最多一个主按钮
次要按钮	32px	36px	4px	常规操作、取消、返回
批量操作按钮	24px	28px	3px	表格内批量操作、分页等
文字按钮	-	-	-	弱化操作，如表格内 "查看"、"编辑"

按钮颜色：

类型	背景色	文字色	边框	Hover 态	Active 态
主要按钮	`#246AFE`	`#FFFFFF`	无	背景 `#91B4FE`	背景 `#0E42D2`
次要按钮	`#FFFFFF`	`#646566`	`#DCDFE6`	边框 `#246AFE`，文字 `#246AFE`	背景 `#F6F6F6`
成功按钮	`#00B42A`	`#FFFFFF`	无	背景 `#36C358`	背景 `#009924`
警告按钮	`#FF7D00`	`#FFFFFF`	无	背景 `#FF9533`	背景 `#E67000`
危险按钮	`#F53F3F`	`#FFFFFF`	无	背景 `#F76666`	背景 `#E03333`
禁用状态	`#F7F8FA`	`#C0C4CC`	`#E4E7ED`	-	-

4.3 按钮布局

操作区位置：页面顶部右侧或表格行尾、弹窗底部居中 / 右对齐
间距规则：
- 紧凑场景（表格内、小弹窗）：同组按钮间距 8px
- 常规场景（页面操作区、标准弹窗）：同组按钮间距 12px
- 宽松场景（大屏页面、大型弹窗）：同组按钮间距 16px
对齐规则：弹窗底部按钮右对齐，表格内按钮居中对齐，页面顶部按钮右对齐

五、表单规范

5.1 输入框规范

类型	高度（PC）	高度（移动端）	说明
单行输入框	32px	36px	标准表单输入
多行输入框	80px（默认）	100px（默认）	文本域，可手动拉伸，最大高度 200px
只读输入框	32px	36px	背景 `#F7F8FA`，边框 `#E4E7ED`，文字色 `#646566`
加载中输入框	32px	36px	显示加载动画，禁用输入，提示文字「加载中...」

输入框样式：

边框：1px solid #DCDFE6
圆角：4px
内边距：PC 端 10px 12px，移动端 12px 16px
聚焦状态：边框变为 #246AFE，添加 box-shadow: 0 0 0 2px rgba(36, 106, 254, 0.1)
禁用状态：背景 #F7F8FA，边框 #E4E7ED，文字 #C0C4CC

5.2 标签规范

标签与输入框间距：12px（PC）/ 8px（移动端）
必填项标签前加红色星号 *（色值 #F53F3F）
标签字号：14px（PC）/ 15px（移动端），颜色 #646566
标签对齐：左对齐，宽度统一（PC 端 80px，移动端自适应）

5.3 校验规范

类型	说明	样式
实时校验	输入时即时提示错误	输入框边框变红 `#F53F3F`，下方显示红色 12px 提示文字
提交校验	提交前全量校验	错误项标红，滚动到第一个错误项并聚焦
成功提示	校验通过	输入框边框变绿 `#00B42A`，可选显示对勾图标
空数据提示	表单无数据时	显示「暂无数据」，居中，14px `#979899`，背景 `#F7F8FA`

5.4 特殊组件

组件类型	PC 端规范	移动端规范
下拉选择框	高度 32px，支持搜索、多选时显示已选数量，最多显示 5 个已选项，超出显示「X 个已选」	高度 36px，全屏弹窗式选择，多选时标签化展示
日期选择器	支持范围选择、快捷选项（今日 / 本周 / 本月），输入框右侧显示日历图标	适配移动端日期组件，支持滑动选择，快捷选项置顶
数值输入框	带单位后缀（如 "元"、"个"），高度 32px，支持步长调整	高度 36px，添加数字键盘适配，单位固定显示在右侧

六、表格规范

6.1 表格整体结构

核心目标： 数据清晰、视觉统一、操作直观、状态全覆盖

外框与分隔：

元素	样式
外框	`1px solid #EBEDF0`
外边框圆角	4px
行分隔线	`1px solid #EBEDF0`
列分隔线	`1px solid #EBEDF0`（仅冻结列 / 操作列显示）
表头与表体分隔	`1px solid #EBEDF0`

容器间距：

表格整体左右边距：24px（PC）/ 16px（移动端）
表格整体上下边距：16px（PC）/ 12px（移动端）

6.2 表头规范

属性	PC 端值	移动端值
背景色	`#F7F8FA`	`#F7F8FA`
文字色	`#18191A`	`#18191A`
字号	14px	14px
内边距	上下 10px，左右 16px	上下 8px，左右 12px
对齐方式	文本类左对齐，数值类居中，操作列居中	同 PC 端，列宽自适应

6.3 表体规范

行样式：

属性	PC 端值	移动端值	补充规则
行高	40px（默认）	44px	单元格内容换行时，行高自适应（最多 2 行，超出省略）；移动端支持单行省略，点击展开全部
悬停背景	`#F6F6F6`	`#F6F6F6`	-
选中背景	`#E6F4FF`	`#E6F4FF`	多选时选中行高亮
加载中背景	`#F7F8FA`	`#F7F8FA`	显示骨架屏，占位符灰色 `#C0C4CC`
空数据背景	`#FFFFFF`	`#FFFFFF`	居中显示「暂无数据」图标 + 文字，14px `#979899`

文本样式：

属性	值	说明
默认文本	`#18191A`，14px	常规数据
重要数据	`#246AFE`，14px，Medium 字重	核心指标、金额等
状态数据	使用标签样式展示	标签色值对应功能色：成功`#00B42A`、警告`#FF7D00`、错误`#F53F3F`
超长文本	超出 2 行省略，hover 显示气泡	气泡最大宽度 300px，换行展示全部内容

对齐规则：

类型	对齐方式	补充说明
文本类（名称、描述）	左对齐	移动端左对齐，列宽自适应
数值类（金额、数量）	居中对齐	保留 2 位小数，千分位分隔
日期类（创建时间）	居中对齐	格式统一为「YYYY-MM-DD HH:MM」，移动端省略时分
操作列	居中对齐	移动端操作列折叠为「更多」按钮，点击展开操作菜单

6.4 固定区域

固定区域	PC 端说明	移动端说明
表头固定	不随表体滚动，始终可见	同 PC 端，适配小屏
左侧冻结	核心字段（如序号、名称）可设置冻结	仅冻结首列（名称 / 序号），其余列可横向滑动
操作列区分	冻结列右侧操作栏用 `1px` 实线 + 阴影 `#246AFE` 与其他列区分	操作列折叠为按钮，点击展开

6.5 列宽处理

宽度不足时：文本类字段省略处理，hover 显示气泡；数值类字段居中省略，气泡展示完整数值
自适应规则：非核心列宽自适应，核心列（如名称、金额）最小宽度 120px（PC）/ 80px（移动端）
操作列：固定宽度 120px（PC）/ 80px（移动端），按钮间距 8px

6.6 表格状态规范

状态	样式	交互
加载中	骨架屏占位，灰色渐变动画	禁止操作，显示「加载中...」提示
空数据	居中显示空数据图标 + 「暂无数据」文字（14px `#979899`）	可选显示「新增数据」按钮
分页异常	显示「数据加载失败，请重试」（红色 14px）	提供「重试」按钮，点击重新加载
数据超限	显示「仅展示前 1000 条数据，请筛选后查看」（橙色 12px）	置顶显示提示，不遮挡表格内容

七、布局规范

7.1 页面布局结构

Plain

┌──────────────────────────────────────────────────────┐
│  🔐 用户权限管理系统          👤 张峰 | 管理员  退出 │
│              科技蓝背景 (#246AFE)                     │
├────────────┬───────────────────────────────────────────┤
│            │                                           │
│  📊 工作台 │                                           │
│  👥 用户管理│           工作区域                       │
│  🎭 角色管理│           (白色卡片 + 内边距 30px)        │
│  🔑 权限管理│                                           │
│  📋 订单管理│                                           │
│   白色背景  │                                           │
│  右侧边框分隔│                                          │
├────────────┴───────────────────────────────────────────┤
│           © 2026 用户权限管理系统                      │
│              全宽白色背景                              │
└──────────────────────────────────────────────────────┘

移动端布局适配：

Plain

┌────────────────────────────────┐
│ 🔐 用户权限管理系统  ☰  退出   │
│ 科技蓝背景 (#246AFE)           │
├────────────────────────────────┤
│                                │
│          工作区域              │
│   (白色卡片 + 内边距 16px)     │
│                                │
├────────────────────────────────┤
│ © 2026 用户权限管理系统        │
└────────────────────────────────┘

（侧边栏转为顶部下拉菜单，底部自适应高度）

7.2 布局尺寸规范

元素	PC 端尺寸	移动端尺寸	适配规则
顶部导航栏高度	60px	56px	移动端适配刘海屏 / 状态栏，高度自动增加
侧边栏宽度	200px（展开）/ 64px（折叠）	-（转为下拉菜单）	折叠时仅显示图标，hover 展开文字
内容区内边距	30px	16px	小屏（<1280px）PC 端内边距改为 24px
底部高度	48px	44px	-
组件间距（小）	16px	12px	-
组件间距（大）	24px	16px	-

7.3 导航结构

顶部导航（科技蓝）：

背景色：#246AFE
Logo + 系统名称（左侧，白色文字）
用户信息 + 退出按钮（右侧，白色文字，透明度 85%）
移动端：Logo 简化，侧边栏入口为汉堡图标，退出按钮独立显示

侧边栏（白色）：

背景色：#FFFFFF
右侧边框：1px solid #EBEDF0 分隔
与底部在同一水平线上
折叠规则：PC 端宽度 < 1280px 时自动折叠，hover 展开；支持手动折叠 / 展开

侧边栏菜单项：

状态	PC 端样式	移动端样式（下拉菜单）
默认	文字色 `#646566`，无边框	文字色 `#646566`，背景 `#FFFFFF`
悬停	背景色 `#F7F8FA`，文字色 `#246AFE`	背景色 `#F6F6F6`，文字色 `#246AFE`
激活	背景色 `#E6F4FF`，文字色 `#246AFE`，左侧 3px 蓝色边框	背景色 `#E6F4FF`，文字色 `#246AFE`

内容区：

背景色：#F7F8FA（灰色工作区）
页面卡片：白色背景，内边距 24px（PC）/ 16px（移动端），圆角 4px
底部增加 padding-bottom：PC 端 60px，移动端 80px（避免被底部 / 导航栏遮挡）

八、弹窗规范

8.1 弹窗基础样式

属性	PC 端值	移动端值
背景遮罩	`rgba(0, 0, 0, 0.5)`	`rgba(0, 0, 0, 0.7)`
弹窗背景	`#FFFFFF`	`#FFFFFF`
弹窗圆角	8px	12px
弹窗阴影	`0 8px 32px rgba(0, 0, 0, 0.15)`	`0 12px 40px rgba(0, 0, 0, 0.2)`
弹窗内边距	24px	16px

8.2 弹窗结构

区域	内容	PC 端样式	移动端样式
头部	标题 + 关闭按钮	标题 18px Medium，关闭按钮右上角	标题 16px Medium，关闭按钮右上角，增加返回按钮（多层弹窗）
内容区	表单 / 列表 / 详情	自适应高度，最大高度 70vh，超出滚动	自适应高度，最大高度 80vh，超出滚动
底部	取消 / 确认按钮	按钮右对齐，间距 12px	按钮通栏显示，间距 8px，高度 44px

8.3 弹窗尺寸

类型	PC 端宽度	移动端宽度	适配规则
标准弹窗	480px	90% 屏幕宽度（最小 320px）	屏幕宽度 < 768px 时，自适应为 80% 宽度
权限分配弹窗	640px	90% 屏幕宽度（最大 600px）	同标准弹窗
大型弹窗	800px	-（拆分为多步骤弹窗）	移动端避免大型弹窗，拆分为分步操作

九、无障碍设计规范

9.1 视觉无障碍

颜色对比：文字与背景对比度≥4.5:1（符合 WCAG 2.1 AA 标准）；功能色需搭配文字提示，避免仅用颜色区分状态（如错误提示除红色外，增加「×」图标）。
字体适配：支持浏览器字体放大至 200%，布局不错乱；所有文字无衬线，避免艺术字体。
焦点样式：所有可交互元素（按钮、输入框、表格行）聚焦时显示明显的外发光边框（2px solid #246AFE），避免仅用颜色区分焦点。

9.2 操作无障碍

键盘导航：支持 Tab 键遍历所有可交互元素，Esc 键关闭弹窗 / 下拉菜单，Enter / 空格触发按钮 / 表格行操作。
触控适配：移动端可点击元素最小尺寸 44px×44px，间距≥8px，避免误触。
屏幕阅读器适配：
- 所有图片 / 图标添加 alt 文本（如「提交按钮」「关闭弹窗」）；
- 表格添加表头关联（th 与 td 对应）；
- 弹窗 / 提示添加 aria-live 提示（如「操作成功」自动播报）。

9.3 内容无障碍

文本简洁：避免专业术语滥用，提示文字通俗易懂；
状态提示：加载 / 错误 / 成功状态除视觉提示外，添加文字说明；
数据适配：表格数据支持导出为 CSV/Excel，便于视障用户使用辅助工具。

十、组件统一规范

10.1 样式复用原则

表格相关样式（表头、行、标签等）封装为独立组件，通过 CSS 变量统一管理；
避免页面内重复写样式，全局样式优先级 > 页面样式 > 临时样式；
组件状态（hover/active/disabled）统一封装，支持全局替换。

10.2 组件尺寸协调

表格内关联组件（下拉框、日期选择器、按钮）尺寸与表格行高比例为 0.8:1（如行高 40px，组件高度 32px）；
移动端组件高度统一增加 4px，提升触控体验；
所有组件圆角统一（按钮 / 输入框 4px，弹窗 8px，移动端弹窗 12px）。

10.3 开发还原标准

指标	偏差控制	验收方式
颜色值	与设计稿完全一致	取色器校验，CSS 变量直接引用
字号	与设计稿完全一致	浏览器开发者工具校验
间距	偏差控制在 1px 内	标尺工具校验，移动端允许 2px 偏差
对齐方式	与设计稿完全一致	网格线对齐校验
无障碍适配	符合 WCAG 2.1 AA 标准	键盘导航测试 + 屏幕阅读器测试

十一、色彩变量速查表（完善版）

Plain

:root {
  /* 主题色 */
  --color-primary: #246AFE;
  --color-primary-light: #91B4FE;
  --color-primary-dark: #0E42D2;
  --color-primary-ultralight: #E6F4FF;

  /* 功能色 */
  --color-success: #00B42A;
  --color-success-light: #E8F8EB;
  --color-warning: #FF7D00;
  --color-warning-light: #FFF4E8;
  --color-danger: #F53F3F;
  --color-danger-light: #FFE8E8;

  /* 中性色 - 文字 */
  --color-text-primary: #18191A;
  --color-text-regular: #646566;
  --color-text-secondary: #979899;
  --color-text-disabled: #C0C4CC;
  --color-text-high-contrast: #000000; /* 高对比度模式 */

  /* 中性色 - 背景 */
  --color-bg-primary: #FFFFFF;
  --color-bg-secondary: #F7F8FA;
  --color-bg-hover: #F6F6F6;
  --color-bg-deep: #F2F6FC;
  --color-bg-selected: #E6F4FF;

  /* 中性色 - 边框 */
  --color-border: #EBEDF0;
  --color-border-light: #E4E7ED;
  --color-border-input: #DCDFE6;
  --color-border-input-focus: #246AFE;

  /* 布局 - PC端 */
  --sidebar-width: 200px;
  --sidebar-width-collapsed: 64px;
  --header-height: 60px;
  --footer-height: 48px;
  --content-padding: 30px;
  --content-padding-small: 24px;

  /* 布局 - 移动端 */
  --header-height-mobile: 56px;
  --footer-height-mobile: 44px;
  --content-padding-mobile: 16px;

  /* 字体 - PC端 */
  --font-size-h1: 20px;
  --font-size-h2: 18px;
  --font-size-h3: 16px;
  --font-size-body: 14px;
  --font-size-small: 12px;

  /* 字体 - 移动端 */
  --font-size-h1-mobile: 18px;
  --font-size-h2-mobile: 16px;
  --font-size-h3-mobile: 15px;
  --font-size-body-mobile: 14px;
  --font-size-small-mobile: 12px;

  /* 组件尺寸 */
  --btn-primary-height: 40px;
  --btn-secondary-height: 32px;
  --btn-batch-height: 24px;
  --input-height: 32px;
  --table-row-height: 40px;

  /* 移动端组件尺寸 */
  --btn-primary-height-mobile: 44px;
  --btn-secondary-height-mobile: 36px;
  --btn-batch-height-mobile: 28px;
  --input-height-mobile: 36px;
  --table-row-height-mobile: 44px;

  /* 间距 */
  --spacing-xs: 8px;
  --spacing-sm: 12px;
  --spacing-md: 16px;
  --spacing-lg: 24px;
  --spacing-xl: 30px;
}

十二、规范更新记录

版本	日期	更新内容
V1.0	2024-08-19	统一基础界面设计规范（简版）
V2.0	2026-05-14	融合 B 端 UI 设计规范，增加表格规范、布局规范、组件统一规范
V2.1	2026-05-14	补充主界面框架风格：科技蓝顶部导航、白色侧边栏、侧边栏与底部对齐
V2.2	2026-05-14	1. 补充移动端全场景适配规范；2. 完善表格 / 表单异常状态样式；3. 新增无障碍设计规范；4. 优化固定数值的灵活适配规则；5. 统一悬停背景色使用规则；6. 完善 CSS 变量体系

1-1-3、B端产品UI设计规范 V2.2 ​

一、基础规范 ​

1.1 设计尺寸与兼容性 ​

二、色彩规范2.1 主题色（品牌色） ​

2.2 功能色（状态色） ​

2.3 中性色（文字与背景） ​

三、字体规范 ​

3.1 字体选型 ​

3.2 字号层级 ​

3.3 字重规范 ​

四、按钮规范 ​

4.1 设计目标 ​

4.2 按钮类型 ​

4.3 按钮布局 ​

五、表单规范 ​

5.1 输入框规范 ​

5.2 标签规范 ​

5.3 校验规范 ​

5.4 特殊组件 ​

六、表格规范 ​

6.1 表格整体结构 ​

6.2 表头规范 ​

6.3 表体规范 ​

6.4 固定区域 ​

6.5 列宽处理 ​

6.6 表格状态规范 ​

七、布局规范 ​

7.1 页面布局结构 ​

7.2 布局尺寸规范 ​

7.3 导航结构 ​

八、弹窗规范 ​

8.1 弹窗基础样式 ​

8.2 弹窗结构 ​

8.3 弹窗尺寸 ​

九、无障碍设计规范 ​

9.1 视觉无障碍 ​

9.2 操作无障碍 ​

9.3 内容无障碍 ​

十、组件统一规范 ​

10.1 样式复用原则 ​

10.2 组件尺寸协调 ​

10.3 开发还原标准 ​

十一、色彩变量速查表（完善版） ​

十二、规范更新记录 ​

1-1-3、B端产品UI设计规范 V2.2

一、基础规范

1.1 设计尺寸与兼容性

二、色彩规范2.1 主题色（品牌色）

2.2 功能色（状态色）

2.3 中性色（文字与背景）

三、字体规范

3.1 字体选型

3.2 字号层级

3.3 字重规范

四、按钮规范

4.1 设计目标

4.2 按钮类型

4.3 按钮布局

五、表单规范

5.1 输入框规范

5.2 标签规范

5.3 校验规范

5.4 特殊组件

六、表格规范

6.1 表格整体结构

6.2 表头规范

6.3 表体规范

6.4 固定区域

6.5 列宽处理

6.6 表格状态规范

七、布局规范

7.1 页面布局结构

7.2 布局尺寸规范

7.3 导航结构

八、弹窗规范

8.1 弹窗基础样式

8.2 弹窗结构

8.3 弹窗尺寸

九、无障碍设计规范

9.1 视觉无障碍

9.2 操作无障碍

9.3 内容无障碍

十、组件统一规范

10.1 样式复用原则

10.2 组件尺寸协调

10.3 开发还原标准

十一、色彩变量速查表（完善版）

十二、规范更新记录