排版规范

定义优视慧平台的字体层级、排版规则与最佳实践，确保信息层级清晰、阅读体验一致。

标题层级

层级 字号 字重 行高 用途 示例
H1 32px 700 1.2 页面标题 页面标题
H2 24px 600 1.2 章节标题 章节标题
H3 20px 600 1.3 子章节 子章节标题
H4 18px 500 1.4 卡片标题 卡片标题
H5 16px 500 1.5 分组标签 分组标签
H6 14px 500 1.5 小标题 小标题

正文文本规则

正文文本

优视慧智能内容审核平台，为广电行业提供高效、精准的内容审核解决方案，助力内容安全与合规管理。

14px / 400 / 1.5 / #4E5969
次要文本

上次更新于 2025-06-03 14:30，共处理 1,284 条内容。

14px / 400 / #86909C
辅助/说明文本

支持 MP4、MOV、AVI 格式，单文件不超过 2GB

12px / 400 / #86909C

代码文本规则

代码文本使用 JetBrains Mono 等宽字体，13px，浅灰背景，4px 圆角。

const status = 'approved';
import { ArcoDesign } from '@arco-design/web-react'
规则：font-family: JetBrains Mono · font-size: 13px · bg: #F7F8FA · padding: 2px 6px · border-radius: 4px

排版 DO / DON'T

DO — 保持标题层级连贯
H1 页面标题
H2 章节标题
H3 子章节
正文内容段落...

H1 → H2 → H3，逐级递进，不跳级

DON'T — 跳跃标题层级
H1 页面标题
H3 子章节（跳级!）
正文内容段落...

H1 → H3 跳级，破坏信息层级

DO — 充足的行高

优视慧智能内容审核平台，为广电行业提供高效、精准的内容审核解决方案，助力内容安全与合规管理。行高 1.5 让阅读更舒适。

line-height: 1.5

DON'T — 行高过紧

优视慧智能内容审核平台，为广电行业提供高效、精准的内容审核解决方案，助力内容安全与合规管理。行高过紧影响阅读。

line-height: 1.0 — 文字挤在一起

色彩使用规范

规范品牌色、功能色与状态色的使用场景，确保色彩语义一致且满足无障碍对比度要求。

品牌色使用

主色 Primary
#1B3A5C

用于侧边栏、导航栏、页面标题等结构性元素，传达专业、权威的广电政务形象。

强调色 Accent
#3A7BD5

用于按钮、链接、激活状态、焦点环等交互元素，引导用户操作。

DO — 强调色用于交互元素
查看详情
焦点环样式
DON'T — 主色用于正文

这段正文使用了深蓝色 #1B3A5C，颜色过重，大面积使用会让页面显得压抑，不适合作为正文颜色。

深蓝色过于沉重，不适合大面积正文

功能色使用

成功 Success
#4CAF50

"已通过"、完成操作、正向趋势

警告 Warning
#F5A623

"待审"、待处理状态、警示提醒

危险 Danger
#E74C3C

"已驳回"、错误、破坏性操作、必填提示

DO — 色彩搭配图标/文字
已通过 待审 已驳回
DON'T — 仅用颜色作为指示

仅靠颜色区分，色盲用户无法辨别状态

对比度要求

正文文本（白底）— 最低对比度 4.5:1
#1D2129 on #FFF
对比度 15.4:1 PASS
#4E5969 on #FFF
对比度 7.1:1 PASS
#86909C on #FFF
对比度 3.9:1 FAIL 仅用于辅助文本，不作为主要信息
大号文本（18px+ 粗体）— 最低对比度 3:1
#3A7BD5 on #FFF
对比度 4.5:1 PASS
#C9CDD4 on #FFF
对比度 1.7:1 FAIL 不可用于任何可读文本

状态色映射

状态 文字色 背景色 边框色 用途 示例
草稿 #94A3B8 #F2F3F5 #E5E6EB 草稿内容 草稿
待审 #F5A623 #FFF9F0 #FFDD9E 待审核 待审
审核中 #3A7BD5 #E8F4F8 #9BC5D8 审核进行中 审核中
已通过 #4CAF50 #F0FFF0 #B0E7B0 审核通过 已通过
已驳回 #E74C3C #FFF5F5 #FFB3B3 审核驳回 已驳回

间距使用规范

基于 8px 栅格系统，定义间距层级与使用场景，确保布局节奏一致。

间距层级

Token 数值 可视化 用途
spacing-1 4px
图标间距、标签内边距
spacing-2 8px
行内元素间距
spacing-3 12px
表单项间距
spacing-4 16px
卡片内边距、组件间距
spacing-5 20px
卡片内部间距
spacing-6 24px
章节内边距、页面边距
spacing-7 32px
章节间距
spacing-8 40px
大章节间距

间距可视化示例

组件内部间距
8px 20px
8px 12px
组件间间距
表单项 1
12px
表单项 2
12px
表单项 3
页面级间距
页面标题
内容区域
24px padding
DO — 使用 8px 倍数
4px 8px 12px 16px 24px 32px 40px

所有间距均为 4px 或 8px 的整数倍

DON'T — 使用任意值
13px 17px 23px 15px

非 8px 倍数的间距破坏栅格一致性

图标规范

统一图标风格、尺寸与使用规则，确保视觉一致性。

基本要求

格式
  • 仅使用 SVG 图标（Lucide 或 Arco Design 图标库）
  • 禁止使用 Emoji 作为图标
  • 禁止使用位图图标（PNG/JPG）
描边与尺寸
  • 统一描边宽度：1.5px 或 2px
  • 同一层级内描边宽度保持一致
  • 图标尺寸：16px（行内）/ 20px（默认）/ 24px（突出）
图标 + 文本对齐

垂直居中对齐，间距 4-8px

16px + 6px gap
20px + 8px gap
24px + 8px gap
DO — 使用 SVG 图标
首页导航
DON'T — 使用 Emoji
➕ 新建
👀 查看
🏠 首页导航

项目常用图标集

导航图标
home
file-text
video
settings
users
操作图标
plus
trash-2
edit-3
check
x
eye
search
状态图标
clock
alert-triangle
check-circle
x-circle
箭头图标
arrow-up
arrow-down
chevron-right
chevron-down

交互状态规范

定义按钮、输入框等组件的交互状态与过渡动画，确保操作反馈及时、流畅。

按钮状态

Default
默认状态
Hover
背景加深 · 200ms
Active
缩放 0.97 · 最深色
Focus
焦点环高亮
Disabled
opacity: 0.5

输入框状态

Default
默认边框
Hover
边框加深
Focus
蓝色边框 + 光环
Error
红色边框 + 光环
Disabled
灰底 · opacity: 0.6

过渡时间规范

类型 时长 缓动 场景 体验
微交互 150-200ms ease-out hover、focus 状态变化
150ms
状态变更 200-300ms ease-out 展开、折叠、切换
300ms
复杂过渡 300-400ms ease-out 弹窗、页面切换
400ms
缓动规则：进入动画使用 ease-out（快进慢出），退出动画使用 ease-in（慢进快出）。
DO — 150-300ms ease-out
150ms
300ms

悬停体验：流畅自然

DON'T — 0ms 或 >500ms
0ms
600ms

0ms 太突兀，600ms 太迟钝

DO — 100ms 内提供视觉反馈

用户操作后，界面应在 100ms 内给出视觉反馈（如按钮变色、加载指示器），让用户知道操作已被接收。

DON'T — 动画期间阻塞输入

动画播放期间不应阻塞用户输入。用户应能随时中断或跳过动画，保持界面响应性。

响应式断点

定义不同屏幕尺寸下的布局策略，确保优视慧平台在各设备上均有良好体验。

断点定义

Token 宽度 设备 布局
xs <576px 手机 单列布局，底部导航
sm ≥768px 平板 2列布局，可折叠侧边栏
md ≥992px 小型桌面 侧边栏 + 内容区
lg ≥1200px 桌面 完整布局含右侧面板
xl ≥1600px 大屏 扩展内容宽度

布局适配示意

xs — 手机 (<576px) <576px
单列内容

底部导航栏，内容区单列滚动

sm — 平板 (≥768px) ≥768px
2列内容

可折叠侧边栏（图标模式），内容区 2 列

md — 小型桌面 (≥992px) ≥992px
侧栏
侧边栏 + 内容区

展开侧边栏 + 内容区，标准工作布局

lg — 桌面 (≥1200px) ≥1200px
侧栏
内容区
右面板

完整布局：侧边栏 + 内容区 + 右侧详情面板

xl — 大屏 (≥1600px) ≥1600px
侧栏
扩展内容宽度 — 更宽敞的布局
右面板

扩展内容宽度，充分利用大屏空间，内容区最大宽度 1920px

断点宽度对比

xs
<576px
sm
≥768px
md
≥992px
lg
≥1200px
xl
≥1600px