建科小智设计规范.md 6.8 KB
// ===== AI 政企应用广场设计规范 v2.0 =====
一、整体设计基调
1.1 风格定位
- 政务级专业稳重 + AI 科技未来感
- 低饱和度科技蓝主色调
- 极简主义 + 微立体主义
1.2 色彩体系
主色调
主色：#1D4ED8（深度科技蓝）
亮色：#3B82F6（明亮蓝）
深色：#1E40AF（深蓝）
辅助色
成功：#10B981（绿色）
警告：#F59E0B（橙色）
错误：#EF4444（红色）
信息：#3B82F6（蓝色）
中性色
主文字：#1F2937
次文字：#6B7280
提示文字：#9CA3AF
主背景：#F9FAFB
次背景：#FFFFFF
第三背景：#F3F4F6
1.3 间距系统（4px 基准）
spacing-1: 4px
spacing-2: 8px
spacing-3: 12px
spacing-4: 16px
spacing-5: 20px
spacing-6: 24px
spacing-8: 32px
spacing-10: 40px
spacing-12: 48px
spacing-16: 64px
1.4 圆角规范
sm: 4px（标签、徽章）
md: 8px（按钮、输入框）
lg: 12px（卡片）
xl: 16px（模态框）
full: 9999px（头像、徽章）
1.5 阴影系统
sm: 0 1px 2px rgba(0,0,0,0.05)
md: 0 4px 6px rgba(0,0,0,0.1)
lg: 0 10px 15px rgba(0,0,0,0.1)
xl: 0 20px 25px rgba(0,0,0,0.1)
glow: 0 0 20px rgba(59,130,246,0.3)
二、Header 组件规范
2.1 尺寸
高度：64px
左右边距：32px
Logo 区域：40×40px
搜索框高度：40px
2.2 结构
┌────────────────────────────────────────────────────────┐
│ [Logo] [导航菜单] [搜索框] [用户] [通知] │
└────────────────────────────────────────────────────────┘
2.3 交互效果
- Header 滚动时添加阴影
- 导航 Tab 悬停变蓝 + 下划线
- 搜索框聚焦蓝色光环
- 用户头像悬停蓝色边框
三、Sidebar 组件规范
3.1 尺寸
宽度：256px
高度：calc(100vh - 64px)
内边距：24px
3.2 结构
┌─────────────────┐
│ 应用矩阵 │
│ ├─ 全部应用 │
│ ├─ 大模型服务 │
│ ├─ 政务审批 │
│ └─ ... │
├─────────────────┤
│ 管理控制台 │
│ ├─ 算力统计 │
│ ├─ 安全性审计 │
│ └─ ... │
├─────────────────┤
│ [推广位] │
│ 建科私有云大模型│
│ [立即咨询] │
└─────────────────┘
3.3 交互效果
- 菜单项悬停灰色背景
- 激活状态蓝色背景 + 文字
- 推广位按钮悬停放大
四、应用卡片规范
4.1 尺寸
宽度：280px（4 列布局）
高度：320px
内边距：20px
圆角：12px
4.2 结构
┌──────────────────────────┐
│ [图标] [分享][收藏] │
│ │
│ 应用名称 │
│ 简短描述（2 行） │
│ │
│ [标签 1] [标签 2] │
│ │
│ [认证] [播放按钮] │
└──────────────────────────┘
4.3 图标背景色（7 种）
blue: #EFF6FF
indigo: #EEF2FF
teal: #F0FDFA
purple: #FAF5FF
rose: #FFF1F2
cyan: #ECFEFF
amber: #FFFBEB
4.4 标签颜色（8 种）
slate: #F1F5F9 / #64748B
blue: #DBEAFE / #1D4ED8
indigo: #E0E7FF / #4338CA
teal: #CCFBF1 / #0D9488
purple: #F3E8FF / #7E22CE
rose: #FFE4E6 / #E11D48
cyan: #CFFAFE / #0891B2
amber: #FEF3C7 / #B45309
4.5 交互效果
- 卡片悬停上浮 8px + 阴影
- 标题悬停变蓝
- 操作按钮悬停显示
- 播放按钮悬停放大
五、应用广场页面规范
5.1 布局
┌─────────────────────────────────────┐
│ [筛选工具栏] │
├─────────────────────────────────────┤
│ [卡片] [卡片] [卡片] [卡片] │
│ [卡片] [卡片] [卡片] [卡片] │
│ ... │
└─────────────────────────────────────┘
5.2 筛选工具栏
高度：自适应
底边框：1px solid #E5E7EB
排序按钮组：圆角 12px
过滤按钮：蓝色背景
5.3 响应式布局
≥1536px: 4 列
1280px~1536px: 3 列
768px~1280px: 2 列
<768px: 1 列
六、演示应用数据（8 个）
智审助手 Pro
- 描述：自动化公文审查、错别字纠正
- 图标：document-text
- 背景：blue
- 标签：NLP、私有部署
- 认证：信创一级认证
视觉政务预警 🔥
- 描述：窗口行为分析与人流密度监测
- 图标：mask-happly
- 背景：indigo
- 标签：CV、安防
- 认证：二级审计
经济态势分析仪
- 描述：AI 预测宏观经济指标走势
- 图标：chart-line-up
- 背景：teal
- 标签：Big Data、决策
- 认证：省级认证
政策语义智译
- 描述：政策公文转化为惠民说明
- 图标：translation-2
- 背景：purple
- 标签：LLM、惠民
- 认证：国产化适配
权限行为内审
- 描述：AI 行为审计，拦截异常访问
- 图标：key-minimalistic-square
- 背景：rose
- 标签：安全
- 认证：等保三级认证
12345 智播报
- 描述：语音政务热线智能分类
- 图标：user-speak
- 背景：cyan
- 标签：语音
- 认证：内网可用
法条案例检索云
- 描述：法律条文解析，定位同类案例
- 图标：square-academic-cap
- 背景：amber
- 标签：法律
- 认证：高度合规
智能客服助手
- 描述：24/7 智能客服问答服务
- 图标：headphones-square
- 背景：blue
- 标签：NLP、客服
- 认证：企业级认证
七、动画规范
7.1 时长
fast: 0.1s
base: 0.2s
slow: 0.3s
7.2 缓动函数
ease: cubic-bezier(0.4, 0, 0.2, 1)
7.3 关键动画
pulse: 安全状态脉冲（2s 循环）
bounce: 通知徽章弹跳（1s 循环）
dropdownSlide: 下拉菜单滑入（0.2s）
cardEnter: 卡片入场（0.4s）
八、响应式断点
sm: 640px（手机横屏）
md: 768px（平板竖屏）
lg: 1024px（平板横屏）
xl: 1280px（桌面小屏）
2xl: 1536px（桌面大屏）
版本: v2.0
更新日期: 2024-01-19
适用项目: jk-rag-platform（建科小智）