UI 设计规范白皮书

版本：v1.0 适用范围：B 端后台管理系统 / SaaS 平台 / 数据可视化产品 核心理念：一致性、效率、可控、可访问

1. 设计原则

1.1 一致性（Consistency）

视觉一致性：颜色、字体、间距、图标等设计基础元素在全局范围内保持统一。
交互一致性：同类操作的行为预期保持一致。例如，所有弹窗的关闭方式、所有表格的排序方式应当遵循相同模式。
文案一致性：相同功能的命名、提示文案在不同页面中保持一致。
结构一致性：页面中相同层级、相同类型的元素在结构上保持一致。

价值：一致性确保多设计师协作时代码复用高效，用户体验连贯，产品形象专业。当设计组件库建成后，设计师只需关注业务逻辑差异，而非重复定义基础样式。

1.2 效率优先（Efficiency）

简洁至上：简化操作流程，减少非必要步骤。
信息明确：文案表达准确直白,让用户快速理解当前状态和可执行的操作。
页面简洁直接：用户无需记忆即可识别功能位置。面包屑导航、Tab 切换等方式帮助用户时刻清楚"我在哪里"。
高频操作突出：将用户使用频率最高的操作置于最易触达的位置。

1.3 可控性（Controllability）

用户掌控：不应代替用户做决策。重要操作必须有明确的确认步骤。
安全提示：删除、下架等破坏性操作必须二次确认。
可撤销：尽量提供撤销能力，降低用户焦虑。
状态反馈：用户的操作应得到即时、清晰的系统反馈。

1.4 状态可见性（Status Visibility）

系统应当始终让用户知晓当前状态：

操作前：明确告知当前所处状态，即将发生什么。
操作中：操作过程给予即时反馈（如 loading、进度条）。
操作后：通过页面元素变化展示当前结果状态（如提交成功提示、列表更新）。
页面级：通过全局提示（Toast）、页面内元素变化展示当前状态。

2. 设计方法论：原子化设计

本规范采用 原子化设计（Atomic Design） 作为方法论基础，将设计系统按粒度分为五个层级：

原子（Atom） →  分子（Molecule） →  组织（Organism） →  模板（Template） →  页面（Page）

层级	定义	示例
原子	最小不可分割的 UI 单元	颜色、字体、图标、圆角、分割线
分子	由原子组合而成的简单组件	按钮、输入框、选择器、标签
组织	由分子组合而成的功能模块	表格工具栏、表单区域、导航菜单
模板	由组织组合而成的页面骨架	列表页模板、详情页模板
页面	填充真实数据后的最终形态	用户列表页、订单详情页

通用层 vs 业务层

通用层：适用于所有产品的原子/分子级元素（颜色、字体、按钮、输入框、栅格等），是规范的核心。
业务层：特定业务场景下形成的模板和页面规范（如插画体系、业务标签、Banner 等）。

核心原则：通用层的东西需要严格遵循，不建议随意重新定义。优先使用成熟的组件库（如 Ant Design、Element UI），在此基础上进行定制化调整，而非从零造轮子。

3. 色彩系统

3.1 色彩架构

 品牌色/主色
    └── 浅色变体（不同透明度层级）
    └── 深色变体（不同明度层级）
 功能色
    ├── 成功色（绿）
    ├── 警告色（橙/黄）
    ├── 错误色（红）
    └── 信息色（蓝）
 中性色
    ├── 文字色（不同灰阶）
    ├── 背景色
    ├── 分割线色
    └── 边框色

3.2 品牌色/主色选择

推荐冷色系（蓝色系为最常用选择）。
避免过于高饱和度的颜色——B 端产品用户长时间使用，高饱和度会导致视觉疲劳。
避免过于低饱和度——过于暗淡会导致页面沉闷压抑。
品牌色应当适度饱和、明度适中。

使用场景：

主按钮（Primary Button）
链接文字
选中态（Tab 选中、Checkbox/Radio 选中、开关开启态）
关键操作提示
标签页选中下划线

全局替换能力：在 Sketch / Figma 中使用 Symbol 或 Color Style 管理颜色。当需要整体更换主色时，可通过"编辑 → 查找替换颜色"功能，一键替换所有页面中该颜色的所有透明度实例。

3.3 功能色

功能	推荐色相	使用场景
成功	绿色	操作成功提示、状态标签-已完成、通过状态
警告	橙色/黄色	即将到期提醒、注意事项、待处理状态
错误	红色	操作失败、表单验证错误、删除确认、危险操作
信息	蓝色	普通信息提示、帮助说明

记忆口诀：绿成功、橙警告、红错误——对应日常生活中的交通信号灯逻辑，直观易记。

3.4 中性色

中性色是页面中使用最多的色系，主要包括：

用途	说明
文字色	主文字（#333 左右深度）、次要文字、禁用/占位文字
背景色	页面底色、卡片底色、表头底色
分割线/边框色	表格分割线、卡片边框、输入框边框
浅底色	hover 态底色、选中行底色

3.5 颜色推导方法

同色系浅色：以品牌色为基础，叠加不同透明度的白色（#FFFFFF），得到不同深浅层次。

同色系中性色文字：以纯黑（#000000）为基础，叠加不同透明度，得到不同灰度的文字颜色。此方法可保证所有文字色同属一个色系，视觉上更加统一干净。

色彩微调技巧：中性色（尤其是背景色和分割线色）可略微偏向冷色调，使页面视觉上更加清爽干净。如灰色偏蓝比偏暖更显洁净。

3.6 颜色格式注意事项

设计软件中的颜色模式务必设置为 sRGB（而非默认的"非托管"模式）。
在 Sketch 中：文件 → 更改颜色描述文件 → 选择 sRGB。
若不做此设置，导出的颜色值与设计稿中的颜色值会出现明显偏差。

3.7 暗色模式注意事项

暗色模式下的品牌色需要适当提高明度/饱和度，保证在深色背景上的可读性。
文字与背景的对比度必须满足 WCAG AA 级标准。

4. 字体系统

4.1 字体家族

平台	中文	英文/数字
macOS	苹方（PingFang SC）	SF Pro / San Francisco
Windows	微软雅黑（Microsoft YaHei）	Segoe UI

CSS Fallback 建议：

font-family: -apple-system, BlinkMacSystemFont, "PingFang SC",
             "Microsoft YaHei", "Helvetica Neue", Arial, sans-serif;

（注：macOS 系统下 Regular 对应 font-weight 400，Medium 对应 500，Semibold 对应 600）

4.2 字号规范

层级	字号	用途
大标题	20px	页面大标题（极少使用）
页面标题	18px	页面级标题
内容标题	16px	区块标题、卡片标题
正文	14px（主推荐）	表格正文、表单标签、正文内容
辅助文字	12px	说明文字、水印、标签

核心建议：

正文以 14px 为主，这是 B 端产品的基准字号。该字号在各种分辨率屏幕上有较好的可读性。
同一页面中字号不超过 3 种，通过颜色、粗细、间距来区分层级。
16px 可用于信息密度较低的页面（如 Dashboard 概览页）。

4.3 行高

字号	推荐行高	说明
20px	1.3 ~ 1.5	标题
18px	1.3 ~ 1.5	页面标题
16px	1.5	内容标题、卡片内正文
14px	1.5	基准正文行高
12px	1.3 ~ 1.5	辅助文字

推荐行高 1.5 倍作为通用标准，在大多数场景下视觉舒适，且字数完整可见。
若 1.5 倍行高无法完全显示时，可微调到恰好包含完整一行，保持参考值 1.5 不被破坏。

4.4 字重

常规正文：Regular（400）
强调/小标题：Medium（500）
标题/重点突出：Semibold（600）
避免在同一页面中混用过多字重。

5. 间距与栅格系统

5.1 基准间距：8px 体系

采用 8px 间距体系（以 8 为步长递增）：

4px    — 极小间距（紧密关联元素）
8px    — 基础间距（最常用）
12px   — 辅助间距
16px   — 中等间距
24px   — 大间距（模块分割）
32px   — 超大间距
48px   — 页面级间距

8 能被当前主流屏幕宽度（1920、1440、1366、1280、1024）整除，在不同分辨率下布局规整。
4px 间距过于细密，视觉上显杂乱，8px 恰到好处。
Sketch/Figma 中可将 Nudge Amount 设为 8px（按住 Shift + 方向键每次移动 8px）。

5.2 24 栅格系统

推荐使用 24 栅格（24-column Grid）。

页面宽度 = 24 × 列宽 + 23 × 水槽宽 + 2 × 页边距

为什么是 24 栅格？

24 可以轻易实现 2 等分、3 等分、4 等分、6 等分、8 等分、12 等分。
12 栅格无法实现 8 等分，灵活度不如 24 栅格。
更细的栅格粒度可以应对更复杂的模块划分场景。

栅格术语：

列（Column）：内容区域
水槽（Gutter）：列与列之间的间距
页边距（Margin）：栅格容器与页面边缘的距离

5.3 栅格的分层定位

栅格属于内容层（Content Layer），而非全局层。它约束的是数据内容的布局，不包括全局导航、侧边栏等固定元素。

 Z 轴层级（由底向上）：
   ├── 背景层（Background）
   ├── 全局控制层（Global Control） — 顶部导航、左侧菜单
   ├── 栅格约束下的内容层（Content with Grid）
   │    ├── 数据过滤区
   │    ├── 数据展示区（表格/卡片）
   │    └── 分页区
   └── 弹窗/浮层（Modal/Overlay）

5.4 模块划分规范

在 24 栅格下推荐模块拆分方式：

布局模式	栅格分配	适用场景
2 等分	12 + 12	对照展示
3 等分	8 + 8 + 8	卡片列表
4 等分	6 + 6 + 6 + 6	数据卡片
左窄右宽	6 + 18 或 8 + 16	筛选 + 内容
左宽右窄	18 + 6	内容 + 辅助信息
不等分	9 + 15	表格 + 详情面板

灵活的模块划分不只是等分——根据信息量和业务需要，可以使用不同比例的组合，通过栅格规范控制视觉秩序。

5.5 响应式策略

B 端后台产品推荐做法：

定宽布局为主：内容区设置固定宽度（如 1200px / 1440px），两侧自适应留白。
当屏幕宽度缩小时，先收缩两侧页边距，内容区宽度保持不变。
当页边距收缩到最小值后，再考虑内容区的弹性变化。
对于 B 端复杂业务系统，不建议采用完全弹性响应式——实现成本高且移动端操作效率低。

设计稿设计宽度建议：1440px（兼顾主流分辨率 1366、1440、1920，向上向下缩放均不会过于紧张或空旷）。

6. 圆角与边框

6.1 圆角规范

元素类型	推荐圆角	说明
小按钮/标签	2px ~ 4px	精致克制
标准按钮/输入框	4px	通用标准
卡片容器	8px	柔和过渡
弹窗	8px ~ 12px	与卡片保持一致

B 端产品建议：

避免使用大圆角（如 16px+ 或全圆角 999px），过大的圆角在 B 端严谨场景下会产生不协调感。
避免使用全圆角按钮（Pill Button）——识别效率不如微圆角，在 PC 后台大量出现时影响专业感。
圆角的一致性要保持全局统一——同一类元素使用相同圆角。

6.2 边框

边框统一设为 1px。
边框颜色使用浅灰中性色，不宜过深。
主要使用场景：输入框、卡片、表格单元格边界。

7. 按钮

7.1 按钮尺寸

尺寸	高度	适用场景
小按钮（Small）	24px	表格内操作、紧凑区域
标准按钮（Default）	32px	表单区域、工具栏
大按钮（Large）	40px	页面主操作、登录页、空状态引导

按钮宽度适配文字内容 + 固定内边距（通常左右 16px）。
按钮文字不宜过长（控制在 2~4 个字），过长会影响操作效率。
最小宽度应保证至少能容纳 2 个中文字的宽度。

7.2 按钮类型与层级

类型	视觉权重	使用场景	每屏建议数量
主按钮（Primary）	最高	页面最主要操作（新建、保存、提交）	1 个
次按钮（Default）	中等	辅助操作（取消、重置、导出）	不限
文字按钮（Text）	最低	表格内操作、次要功能入口	不限
危险按钮（Danger）	特殊	删除、下架等破坏性操作	按需
虚线按钮（Dashed）	低	新增项、占位入口	按需
图标按钮（Icon-only）	低	空间受限的操作（表格行操作）	建议少用

推荐做法：

每个操作区域仅设置一个主按钮，其余为次按钮或文字按钮，形成清晰的视觉层级。
谨慎使用纯图标按钮——尽量保留文字标签，降低认知成本。仅在空间极度受限的场景（如表格行内操作）使用图标按钮。
当按钮数量较多时，按视觉权重排列。

7.3 按钮状态

必须涵盖以下状态：

状态	说明
默认态（Default）	正常可见状态
悬停态（Hover）	鼠标悬停时（叠加黑色遮罩层，透明度通常 10%~20%）
点击态（Active）	鼠标按下时（叠加更深遮罩层或色相微调）
禁用态（Disabled）	不可点击时（降低透明度或灰度化）
加载态（Loading）	提交/保存过程中（显示 loading 动画，同时禁用点击）

Hover 态推导方法：在默认色上叠加一层黑色遮罩（10%~20% 透明度），适用于所有按钮类型，无需为每种按钮单独设计 hover 色。

7.4 按钮位置与阅读顺序

页面级操作按钮：通常位于页面内容区左上角或右上角。
表单底部按钮：靠左或靠右排列均可。
阅读顺序：从左到右，用户先看到主操作（左/右对齐均可，但需要在该对齐方式下按重要性排列）。
弹窗按钮：通常右对齐。

关键原则：同一产品中，按钮排列方式应当统一。当页面同时存在多个按钮时，最重要的按钮是第一眼能看到的。

8. 导航体系

8.1 导航模式对比

导航模式	适用场景	优点	缺点
顶部导航	功能简单（≤7 个一级菜单）	不占内容空间，阅读流自然	扩展性差，不支持多级
侧边导航	后台系统（最常用）	扩展性强，层级清晰，支持深层级	占用横向空间
混合导航	超大型系统（一级菜单 5~6 个以上、模块众多）	最强扩展性	视觉复杂，开发难度高

8.2 导航模式选择指南

功能数量少、结构简单
  └── 顶部导航

功能多、多层级（大多数 B 端后台）
  └── 侧边导航（推荐）

超大型 SaaS 平台（一级模块 6 个以上，每模块下数十子级）
  └── 混合导航（L 型：顶栏一级 + 侧栏二级/三级）

8.3 侧边导航设计规范

展开与折叠：

默认展开，支持折叠为图标+文字提示的模式。
折叠后 hover 时展开完整菜单（浮层方式）。
展开状态和折叠状态需明确切换入口（通常为底部折叠按钮）。

菜单层级：

最多 3 级，超过 3 级时考虑重新组织信息架构。
选中态：文字颜色变化 + 背景色高亮（浅色底），在当前层级深入时展开子级。

视觉风格：

浅色侧边栏：白色/浅灰底色，菜单项通过文字颜色 + 浅底色区分状态。
深色侧边栏：深色底色（如 #001529），白色/浅色文字，适合信息密度高的大型系统。

侧边栏宽度：

展开态：200px ~ 240px（过宽浪费内容空间，过窄容纳不下菜单文字）。
折叠态：64px（仅展示图标）。

8.4 面包屑导航

使用场景：二级及以上页面，帮助用户定位当前位置和返回路径。
位置：页面内容区顶部，标题上方或标题同一行。
交互：除当前页外，各级均可点击跳转。
如果系统层级扁平（仅两层），可以不使用面包屑，直接使用返回按钮。

8.5 标签页导航

使用场景：同级数据视图切换、详情页多 Tab 信息展示。
位置：内容区顶部（最常见），可在侧边放置（较少见）。
状态：选中态使用品牌色下划线 + 品牌色文字。
溢出处理：Tab 数量过多时可横向滚动或折叠为下拉。

9. 页面层级与布局

9.1 Z 轴层级架构

 ┌────────────────────────────┐
 │   弹窗/浮层 (Modal)         │  ← 最高层
 ├────────────────────────────┤
 │   局部弹窗/抽屉 (Drawer)    │
 ├────────────────────────────┤
 │   内容区 (Content Area)     │
 │   ├── 数据过滤区            │
 │   ├── 数据展示区            │
 │   └── 分页区               │
 ├────────────────────────────┤
 │   全局控制层 (Global Nav)   │  ← 固定
 │   ├── 顶部导航              │
 │   └── 侧边导航              │
 └────────────────────────────┘

9.2 全局控制层

包含顶部导航栏、侧边导航菜单、用户信息区。
该层在页面切换时保持不变。
内容区为该层让出空间，两者不重叠。

9.3 局部弹层

类型	层级	使用场景
全局弹窗（Modal）	全局控制层之上	跨页面操作、重要确认
局部弹窗（Popover）	内容区之上	表格内编辑、快速查看
抽屉（Drawer）	内容区之上	详情查看、复杂表单编辑

9.4 分页

位置：表格/列表内容区的底部，通常右对齐或居中对齐。
默认每页条数：10~20 条（推荐 15 条），用户可自定义。
分页器包含：总条数、每页条数选择、页码跳转、上一页/下一页。
为何使用分页而非无限滚动：分页减少首次加载的数据量，降低前后端压力；且支持用户跨页选择数据的场景。
何时可增大每页条数：批量操作场景（如需要全选当前页做批量处理），可设 50~100 条/页。

10. 数据录入

10.1 录入组件决策树

逐层判断选择最合适的录入组件：

需要录入什么？
├── 纯文本/数字
│   └── 输入框（Input）
│       ├── 单行 → Input
│       ├── 多行 → Textarea
│       └── 数字范围 → InputNumber（或滑块）
│
├── 从已有选项中选择
│   ├── 选项是否分组？
│   │   ├── 无分组
│   │   │   ├── 选项少（≤5）→ Radio（单选）/ Checkbox（多选）
│   │   │   ├── 选项多（>5）→ Select 下拉
│   │   │   └── 选项极多（>20）→ Select + 搜索
│   │   └── 有分组
│   │       ├── 组少 + 每组选项少 → 平铺 Radio/Checkbox
│   │       ├── 组少 + 每组选项多 → 级联选择（Cascader）
│   │       ├── 组多 + 每组选项少 → 树选择（TreeSelect）
│   │       └── 组多 + 每组选项多 + 多层级 → 穿梭框（Transfer）
│   │
│   └── 是否/开关类
│       └── Switch 开关（比 Checkbox 更直觉）
│
├── 日期/时间
│   ├── 选择日期 → DatePicker
│   ├── 选择日期范围 → RangePicker
│   ├── 选择时间 → TimePicker
│   └── 选择日期+时间 → DateTimePicker
│
├── 数值范围
│   └── Slider（滑块）/ InputNumber 范围
│
└── 文件/图片
    └── Upload（上传组件）

10.2 表单（Form）设计规范

标签对齐：推荐右对齐（冒号对齐）的标签方式。在 B 端表单中，右对齐的标签使标签与输入框的距离最紧凑，视觉扫描效率最高。

字段间距：

标签与输入框之间：8px
字段与字段之间（垂直）：24px
相关字段组之间：16px

表单按钮位置：

通常置于表单底部。
主按钮（提交/保存）在左或右均可，需全局统一。

必填标识：必填字段标签前加红色星号 *，或在标签后标注"（必填）"。

表单分步：当表单字段过多时，使用分步表单（Steps）将录入过程拆分为多个步骤。

10.3 选择器规范

单选（Radio）/ 多选（Checkbox）：选项较少（≤8 个）时，直接平铺展示，减少用户点击次数。
下拉选择（Select）：选项较多（>8 个）时使用。超过可视范围可滚动。支持搜索过滤。
级联选择（Cascader）：选项具有明确层级关系时使用。
穿梭框（Transfer）：选项多且带分组、需要对比"已选/未选"时使用。
单选支持取消选中：Radio 组默认支持点击已选项取消选中（提升操作容错率）。

10.4 开关（Switch）

适用于即时生效的布尔型设置（如开启/关闭某功能）。
交互直觉比下拉选择"是/否"更直接。
状态变化即时生效，不额外需要"确认"操作。

10.5 滑块（Slider）

适用于数值范围选择（如价格区间、评分区间）。
可带刻度标记、输入框联动。

10.6 文件上传

状态	说明
上传前	默认区域 + 上传按钮
上传中	进度条展示
上传完成	缩略图/文件名展示 + 删除按钮
上传失败	错误提示 + 重试按钮
拖拽上传	支持拖拽文件到指定区域（开发成本高，可按需实现）

11. 数据展示

11.1 数据展示组件层次

从小到大，数据展示容器逐级扩展：

徽标数（Badge）           → 最小信息单元，用于计数
  └── 标签（Tag）         → 状态/分类标记
       └── 数据卡片（Card）   → 结构化展示一组相关信息
            └── 表格（Table）        → 大规模结构化数据展示

11.2 标签（Tag）

类型：

实心标签：彩色填充，视觉权重高，用于强状态标识。
线框标签：仅边框+文字，视觉权重低，适合辅助标记。
可删除标签：带关闭图标，用于用户自定义标签场景。

尺寸：小/中/大，与按钮的尺寸体系保持一致。

颜色：使用品牌色、功能色的浅色变体作为填充色，深色或品牌色作为边框/文字色。

11.3 提示（Tooltip）

触发方式：hover 显示，移开消失。
内容：辅助说明文字，不长于 2~3 行。
位置：跟随触发元素，12px 间距。
用途：解释专业术语、补充字段说明、展开被截断的文本。

11.4 数据卡片（Card）

用途：Dashboard 指标卡、列表项卡、详情信息卡。
内容：标题 + 数值 + 辅助描述 + 可选操作入口。
交互：hover 时可显示更多操作入口。
宽度：建议固定宽度或按栅格自适应。

11.5 空状态（Empty State）

无数据时必须展示空状态插图和引导文案。
引导文案应包含：为什么是空的 + 可以做什么（如"暂无数据，点击新建"）。

12. 表格设计

12.1 表格基础结构

┌──────────────────────────────────────────┐
│  表格工具栏（Toolbar）                     │
│  ┌──────────┬──────────┬──────────┐      │
│  │  表头1   │  表头2   │  表头3   │      │
│  ├──────────┼──────────┼──────────┤      │
│  │  单元格  │  单元格  │  单元格  │      │
│  ├──────────┼──────────┼──────────┤      │
│  │  单元格  │  单元格  │  单元格  │      │
│  └──────────┴──────────┴──────────┘      │
│  分页器                                  │
└──────────────────────────────────────────┘

术语定义：

表头（Header）：每列顶部标题行。
行（Row）：横向数据单元。
列（Column）：纵向数据字段。
单元格（Cell）：行与列交叉的基本单元。

12.2 表格视觉样式

样式类型	特点	适用场景
极简样式	无竖分割线，仅横向浅色分割线	最常用，视觉干净，信息干扰少
斑马纹样式	奇偶行背景色交替	列数多、数据密集时辅助横线阅读
带边框样式	全网格线（横+竖）	数据极为复杂、需要精确对位时
无分割线样式	仅靠间距区分行	数据列少、行数少时（极度简洁）

推荐：以极简样式（横向浅色分割线）为默认方案，满足大多数场景。hover 时高亮当前行（浅底色）。

分割线设计原则："轻盈"——分割线颜色要浅，不要抢夺用户对数据的注意力。它的作用是"引导视线，区分行"，而非"成为视觉焦点"。

12.3 表头设计

分组表头：当列之间存在包含关系时，使用表头分组（父表头 + 子表头），加上较明显的边框线分隔组。
表头文字：简洁、专业。避免冗长描述，必要时使用 Tooltip 补充说明。
专业术语的处理：复杂表头可自定义简短名称，hover 时通过 Tooltip 展示完整解释。
排序图标：表头支持排序时显示排序箭头，默认大小排序，支持从小到大/从大到小切换。

12.4 单元格设计

单元格高度：

由字号 + 行高 + 上下内边距组成。
单行数据：一行文字高度 + 上下内边距（14px 字号 + 1.5 行高 + 上下各约 8~10px padding）。
多行数据：内容行数 × 行高 + 上下内边距。

单元格宽度：

根据内容类型和长度设置合理宽度。
内容过长时的处理方式：
- 省略号截断 + hover Tooltip 展示完整内容。
- 自动换行（多行展示）。
- 固定宽度 + 省略号（列宽固定不变）。

内容对齐： | 内容类型 | 对齐方式 | 原因 | |---------|---------|------| | 文本（名称、标题、描述等） | 左对齐 | 符合从左到右的阅读习惯 | | 数字（金额、数量、占比） | 右对齐 | 方便数字大小直观对比 | | 固定长度标识（ID、编码、手机号） | 居中对齐 | 视觉规整，无需对比 | | 状态标签 | 左对齐或居中 | 根据内容长度决定 | | 操作列 | 右对齐 | 视线终点自然落位操作区 |

单元格空值处理：

有数据但为空时：显示 -（短横杠），不要留空白。
无数据（整行无意义）时：显示为空行，不作为 "0" 或 "-" 处理。
关键是保持信息透明——"没有数据"和"数据是零"传达的信息完全不同。

12.5 操作列

操作列通常固定在表格最右侧。
高频操作用文字按钮直接展示（如"编辑""查看"）。
低频操作收起到"更多"下拉菜单中。
删除操作通常需要二次确认（弹出确认弹窗）。

操作列触发方式： | 方式 | 适用场景 | |------|---------| | 行 hover 显示操作 | 操作较少时 | | 操作列固定展示 | 操作多且重要时 | | 点击行触发详情 | 行数据以"查看详情"为主操作时 |

12.6 列宽自适应策略

固定列宽 + 省略号：大部分列采用此策略。
弹性列：选 1~2 个不太重要的列设为弹性宽度，填充剩余空间。
最小宽度：每列设定最小宽度（min-width），确保窗口缩小时内容不被完全挤压。
固定首/尾列：重要标识列（名称/ID）和操作列可固定在左侧或右侧，横向滚动时不移动。

12.7 表格工具栏

表格上方工具栏通常包含： | 区域 | 内容 | |------|------| | 左侧 | 批量操作按钮（批量删除、批量导出等） | | 右侧 | 新建按钮、搜索框、筛选器、导出按钮 |

12.8 数据操作交互方式

交互方式	适用场景	说明
行内编辑	单字段快速修改	点击单元格进入编辑态
弹窗编辑	多字段编辑	弹出 Modal 表单
抽屉编辑	复杂表单编辑	右侧/底部弹出 Drawer
新页面编辑	极复杂表单	跳转独立编辑页
行 hover 操作	简单操作	hover 显示操作入口

13. 反馈系统

13.1 反馈类型总览

类型	打扰程度	停留时间	是否可手动关闭	内容承载量
即时提示（Toast）	低	短（自动消失）	否（或可选关闭）	少
通知提示（Notification）	中	较长（可自动消失/手动关闭）	是	较多
告警提示（Alert）	中高	需手动关闭	是	较多
确认弹窗（Confirm Modal）	高	停留在页面直到操作	是	最多

13.2 即时提示（Toast / Message）

位置：页面顶部居中。在特殊情况下可放在其他位置（如下方），但需确保不遮挡关键信息。
内容：简短操作反馈（1~2 行文字）。
类型：成功（绿）、警告（橙）、错误（红）、信息（蓝）。
消失时间：自动消失，时长约 2~3 秒。
触发来源：系统主动发出的反馈（如保存成功、提交失败）。这类反馈的来源是系统，告知用户操作结果。

13.3 通知提示（Notification）

位置：页面右上角（最典型），或根据页面内容灵活调位。
内容：较 Toast 更丰富，可包含标题、正文、操作入口。
触发来源：系统推送的主动通知（如"审批已通过""库存预警"）。用户事先不知道，系统主动告知。
关闭：可手动关闭，也可设 n 秒后自动消失。可设置为不可关闭（需用户处理）。

13.4 告警提示（Alert）

位置：通常嵌入在页面内容区顶部，或相关模块上方。
样式：可包含图标、标题、正文、操作按钮。
类型：成功、警告、错误、信息。
关闭：可设关闭按钮，也可固定展示。
用途：全局性提示（如"系统将于某时升级维护"）。

13.5 确认弹窗（Confirm Modal）

触发方式：用户执行破坏性操作（删除、下架等）时弹出。
内容：标题 + 说明文字 + 确认/取消按钮。
核心原则：不要让用户猜测——清晰说明操作后果。
关闭：点击"取消"或右上角关闭按钮可关闭。

13.6 加载与进度反馈

类型	使用场景
局部 Loading	组件级数据加载（如表格刷新、下拉框查询）
全局 Loading	页面级数据加载（首次进入页面）
骨架屏（Skeleton）	页面框架先展示占位，数据逐步填充
进度条（Progress）	文件上传、任务执行等可量化进度场景

B 端后台不推荐设计过于复杂炫目的 loading 动画——清晰表达"正在加载"即可。

14. 数据可视化

14.1 图表选用方法论

三步骤：

明确业务目标：需要回答什么问题？比较、构成、分布、趋势、还是关系？
确定分析维度和指标：产品/业务方给出的维度和指标是什么？
选择匹配的图表类型：根据分析目标选择最合适的图表。

14.2 图表选择速查表

分析目标	首选图表	次选	说明
比较大小	柱状图（Bar）	条形图（水平柱状）	柱状图通过柱子的长短最直观地比较数值大小
比较占比	饼图/环形图	堆叠柱状图	饼图适合展示各部分占整体的比例
趋势变化	折线图（Line）	面积图	折线图最适合展示随时间变化的趋势
构成分布	饼图/环形图	堆叠柱状图、瀑布图	展示整体中各部分的构成
排名	条形图（水平柱状）	柱状图	条形图适合展示排名（尤其是移动端或名称较长场景）
多维度对比	分组柱状图/分组条形图	雷达图	同时比较多个维度/类别的数值
相关性/分布	散点图	气泡图	展示两个变量之间的关系
流程转化	漏斗图（Funnel）	桑基图	展示业务流程中各阶段的转化率
目标 vs 实际	仪表盘图（Gauge）	子弹图	展示实际完成情况与目标的差距
多指标综合评估	雷达图（Radar）	—	多维度综合表现评估（常用于竞品对比、能力评估）
地理数据	地图（Map）	—	带有地理属性的数据

14.3 常用图表详细说明

柱状图（Bar Chart）

适用场景：类别间的数值比较。
X 轴：分类维度（品类、地区、部门等）。
Y 轴：数值指标。
方向：垂直柱状图（类别多时优先）、水平条形图（名称较长或移动端优先）。
注意事项：
- Y 轴必须从 0 开始——不从 0 开始会夸大数据差异，造成误导。
- 柱子数量建议不超过 30 个，超过时考虑使用条形图或数据处理。
- 避免使用大圆角柱状图——影响数据读取准确性。

折线图（Line Chart）

适用场景：展示数据随时间的变化趋势。
X 轴：时间维度（连续且均匀的）。
Y 轴：数值指标。
注意事项：
- X 轴数据必须是连续的（时间序列）。
- 当需要同时展示趋势 + 累计值时，使用双轴图（柱状 + 折线）。
- 双轴图中确保两条轴在视觉上有区分，避免混淆。

饼图 / 环形图（Pie / Donut Chart）

适用场景：展示各部分占整体的比例。
注意事项：
- 分类数量建议不超过 6~8 个。
- 各部分之和必须等于 100%（构成完整整体）。
- 不适合用于精确比较大小——比较各部分大小时，用柱状图更直观。
- 环形图中心区域可展示总量数值。

条形图（Horizontal Bar Chart）

适用场景：排名展示、分类名称较长的场景。
本质：柱状图旋转 90 度。
特别适用：移动端屏幕、Top N 排名。

漏斗图（Funnel Chart）

适用场景：业务流程各阶段转化率分析（如电商下单路径）。
注意事项：
- 仅适用于有明确的、线性的业务流程。
- 各阶段之间必须有先后逻辑顺序。
- 多分支、反流程的场景不适合使用漏斗图。
- 漏斗的斜率越大，说明该阶段流失率越高。

雷达图（Radar Chart）

适用场景：多维度能力/指标的综合评估与对比。
特点：
- 多个轴（通常 5~8 个）呈放射状分布。
- 越靠近外边缘表示表现越好。
- 可叠加多个数据集进行对比。
注意事项：
- 轴的数量控制在 5~8 个。
- 轴的刻度等分（角度均等），但半径长度代表数值大小。
- 雷达图的本质是将柱状图沿圆周展开排列——比较的是半径（数值），而非角度或面积。

散点图（Scatter Chart）

适用场景：展示两个变量之间的相关关系。
两个轴：各代表一个连续变量。
每个点：代表一个数据项在两个维度上的取值。

仪表盘图（Gauge Chart）

适用场景：目标完成度、进度展示。
注意事项：
- 视觉上有一定的"欺骗性"——半径长度在视觉上不是线性比例。
- 适用于非精确比较的场景（如给高层领导做汇报展示）。

14.4 图表设计通用规范

交互规范：

hover 时展示该数据项的详细数值（Tooltip）。
支持图例点击显/隐对应数据系列。
图表标题应简洁明确地描述图表内容。

视觉规范：

柱状图/折线图中的数据点避免使用大圆角。
颜色不要超过 4~5 种。超过时使用同色系不同深浅，或在图例中分组。
坐标轴标签保持清晰可读（字号不宜过小）。
网络线使用浅色细线，避免抢夺数据本身的视觉权重。

应避免的常见错误：

饼图用于比较多组大小。
折线图的 X 轴不是连续时间序列。
Y 轴不从 0 开始（刻意夸大差异，误导读者）。
雷达图直接比较面积而非半径。
在需要精确比较的场景使用 3D 效果图表。

15. 附录：设计稿交付规范

15.1 UI 设计师的交付物

所有通用组件必须已规范化（颜色、字体、按钮、输入框、栅格、导航、弹窗等）。
局部组件规范完成（面包屑、标签页、分步条、分页器等）。
典型页面设计稿完成（至少包含列表页、表单页、详情页）。

15.2 设计稿制作建议

设计稿宽度：1440px（兼容性好，既能模拟 1920 屏幕内容区，又不至于在 1366/1024 屏幕上过于拥挤）。
若公司统一采购特定分辨率的显示器（如 1366 或 1920），则以实际采购的显示器分辨率作为设计稿宽度。
使用栅格系统约束页面布局。
Sketch/Figma 中的组件化（Symbol/Component）要贯穿始终，确保全局更新能力。

15.3 前端协作要点

设计师需要理解基本的前端工作流：前端 90% 的时间在写业务逻辑和对接接口，UI 样式的开发时间占比不到 10%。
设计师应优先使用成熟的组件库（Ant Design、Element UI 等）中已有的组件，在此基础上进行品牌化定制。
避免在非必要处创新——"可复用"比"独特"更有价值。
设计师交付标注时，应遵循开发熟悉的命名规范（如组件名 + 状态 + 尺寸），降低沟通成本。

文档维护：本白皮书应随产品迭代持续更新。所有新增组件和交互模式需经过设计评审后方可纳入规范。

参考资源：Ant Design、Element UI、Arco Design、SAP Fiori Design Guidelines、Material Design。

UI设计规范白皮书.md 40 KB Permalink History Raw