2026年 B端系统 UI 组件规范

基于现代主流B端设计语言与 Ant Design 体系，结合专属渐变主题色（#2967FF - #30B9FF），打造专业、高效、智能的 AI 客服 SaaS 体验。

1. 颜色规范 (Color)

品牌主色采用渐变色，象征 AI 的科技感与灵动性。中性色遵循 B 端界面的层级阅读原则，功能色用于状态传达。

品牌主色

主渐变色 (Brand Gradient)
#2967FF → #30B9FF
主色起始 (Brand Start)
#2967FF
主色结束 (Brand End)
#30B9FF
主色浅显 (Brand Light)
#EAF0FF

中性色 (Neutral)

主要文字#1A1A1A - 标题、重要信息
常规文字#595959 - 正文内容
次要文字#8C8C8C - 辅助、提示信息
描边边框#D9D9D9 - 默认边框
背景填充#F5F5F5 - 容器背景

语义色 (Semantic)

成功 (Success)
#52C41A
信息 (Info)
#1677FF
警告 (Warning)
#FAAD14
错误 (Error)
#FF4D4F

2. 字体规范 (Typography)

层级 (Level)
字号 (Size)
行高 (Line Height)
字重 (Weight)
预览 (Preview)
H1 主标题
28px
38px
Bold (700)
数据大盘监控
H2 模块标题
20px
28px
Semibold (600)
客户画像分析
H3 弹窗/卡片标题
16px
24px
Medium (500)
添加知识库文档
Body 正文内容
14px
22px
Regular (400)
这是系统中最常用的正文文字大小。
Small 辅助信息
12px
20px
Regular (400)
提示：上传文件大小不能超过 50MB

3. 间距规范 (Spacing)

4px
(XS)
8px
(SM)
12px
(MD)
16px
(Base)
24px
(LG)
32px
(XL)
48px
(2XL)

4. 圆角规范 (Border Radius)

2026年B端设计倾向于适度的圆润感，以降低系统冰冷感。

2px
小 (标签、复选框)
6px
基础 (按钮、输入框)
12px
大 (卡片、弹窗)
Max
全圆角 (药丸标签)

5. 图标尺寸规范 (Icon Size)

12px
(辅助)
14px
(正文内联)
16px
(按钮/基础)
20px
(菜单/标题)
24px
(强调)

6. 按钮规范 (Buttons)

主要按钮
次要按钮
虚线按钮
文本按钮

7. 提示类消息规范 (Alert & Message)

全局提示 (Message Toast)

知识库同步成功
系统将于今晚2:00进行维护升级
当前网络不稳定，部分消息可能延迟
API接口调用失败，请检查密钥配置

警告提示框 (Alert Banner)

导入完成
100条客户数据已成功导入系统。
用量提醒
您的本月AI调用次数已达80%，请及时充值以免影响服务。

8. 默认头像规范 (Avatar)

AI
AI客服 (主色)
默认用户
李四
文字方形 (小)
A
B
C
+3

9. 标签规范 (Tags)

系统预设 常规标签 已解决 高优先级 人工接入 AI生成 可删除

10. 进度条规范 (Progress)

模型训练进度45%
系统存储容量90%
75%
客户满意度

11. 开关规范 (Switch)

开启状态
关闭状态
禁用状态
带文字
ON

12. 滑块规范 (Slider)

AI 创造力 (Temperature)0.7
严谨发散

13. 单行输入框规范 (Single-line Input)

请输入正确的邮箱格式

14. 多行输入框规范 (Textarea)

0/500

15. 数字输入框、微调器 (Number Input)

16. 搜索框规范 (Search Input)

⌘ K

17. 下拉选择规范 (Select)

常规选择 (闭合状态)
请选择客服分组
展开状态及下拉面板
售前一组
全部客服
售前一组
售后二组
VIP专席 (无权限)

18. 双向选择器规范 (Transfer)

1 项已选 / 4 项
0 项已选 / 2 项

19 & 20. 日期/时间选择器 (Date & Time Picker)

日期区间选择
~
日历面板 (Calendar Popover)
2026年 5月
一
二
三
四
五
六
日
27
28
29
30
1
2
3
4
5
6
7
8
9
10
今天

22. 骨架展示规范 (Skeleton)

23. 上传组件规范 (Upload)

支持 .doc, .pdf, .txt 格式，文件大小不超过 50MB

点击或将文件拖拽到这里上传

支持单次上传多个文件，建议文件按类别打包上传以提升 AI 解析效率

2026年Q1产品白皮书.pdf
正在解析 65%

24. 空状态规范 (Empty State)

暂无会话记录

当前还没有任何客服对话数据，您可以主动发起对话或等待客户接入。

25. 数据图表规范 (Data Charts)

采用 ECharts，图表颜色需与主渐变色（#2967FF -> #30B9FF）保持统一，图表线条平滑，交互清晰，符合现代 B 端数据驾驶舱设计。

AI 拦截趋势 (近7天)

高频客户咨询意图 Top 5