Files

2026-02-25 23:18:06 +08:00

13 KiB

Raw Blame History

Yudao Cloud B端设计规范提示词

定位: B端生产力工具 | 简约高效 | 专业可信 | 创新体验 技术栈: Vue 3 + TypeScript + Ant Design Vue + TailwindCSS 业务: AI/媒体功能增强的Spring Boot快速开发平台

设计哲学

简约而不简单，高效且具辨识
- 每个像素都有目的
- 每个交互都有反馈
- 每个元素都有秩序

核心原则:

认知减负 - 减少用户思考成本
操作高效 - 最短路径完成任务
视觉一致 - 建立可预测的心智模型
创新克制 - 在熟悉中创造惊喜

一、色彩系统 (Color System)

1.1 品牌主色 - 科技蓝

/* 主色阶 - 用于品牌识别、主要操作 */
--color-primary-50:  #EFF6FF;   /* 悬浮背景 */
--color-primary-100: #DBEAFE;   /* 选中背景 */
--color-primary-200: #BFDBFE;   /* 边框高亮 */
--color-primary-300: #93C5FD;   /* 禁用状态 */
--color-primary-400: #60A5FA;   /* 悬浮状态 */
--color-primary-500: #3B82F6;   /* 标准主色 */
--color-primary-600: #2563EB;   /* 按下状态 */
--color-primary-700: #1D4ED8;   /* 强调状态 */

使用规则:

主按钮、关键操作使用 primary-500
悬浮状态提升至 primary-400
按下状态加深至 primary-600
大面积背景仅用 primary-50/100

1.2 中性色 - 专业灰

/* 灰度系统 - 用于文字、边框、背景 */
--color-gray-50:  #F9FAFB;   /* 页面背景 */
--color-gray-100: #F3F4F6;   /* 卡片背景 */
--color-gray-200: #E5E7EB;   /* 分割线 */
--color-gray-300: #D1D5DB;   /* 边框 */
--color-gray-400: #9CA3AF;   /* 占位符 */
--color-gray-500: #6B7280;   /* 辅助文字 */
--color-gray-600: #4B5563;   /* 正文 */
--color-gray-700: #374151;   /* 标题 */
--color-gray-800: #1F2937;   /* 强调标题 */
--color-gray-900: #111827;   /* 最高对比 */

1.3 功能色

/* 成功 - 绿色系 */
--color-success-light: #DCFCE7;
--color-success:       #22C55E;
--color-success-dark:  #16A34A;

/* 警告 - 琥珀系 */
--color-warning-light: #FEF3C7;
--color-warning:       #F59E0B;
--color-warning-dark:  #D97706;

/* 错误 - 红色系 */
--color-error-light:   #FEE2E2;
--color-error:         #EF4444;
--color-error-dark:    #DC2626;

/* 信息 - 蓝色系 */
--color-info-light:    #DBEAFE;
--color-info:          #3B82F6;
--color-info-dark:     #2563EB;

1.4 语义映射

场景	颜色	示例
主要操作	primary-500	提交、保存、确认
次要操作	gray-600 + border	取消、返回
危险操作	error-500	删除、清空
成功反馈	success-500	完成提示
数据展示	gray-700	表格正文
辅助说明	gray-500	表头、注释

二、字体排版 (Typography)

2.1 字体家族

/* 主字体 - 中文优先思源黑体，西文 Inter */
--font-family: -apple-system, BlinkMacSystemFont, "PingFang SC", "Hiragino Sans GB",
               "Microsoft YaHei", "Noto Sans SC", sans-serif;

/* 等宽字体 - 代码、数字 */
--font-family-mono: "JetBrains Mono", "Fira Code", Consolas, monospace;

2.2 字号阶梯

/* 字号系统 - 基于 14px 基准 */
--font-size-xs:   12px;   /* 辅助标签、时间戳 */
--font-size-sm:   13px;   /* 表头、次要文字 */
--font-size-base: 14px;   /* 正文、输入框 */
--font-size-md:   16px;   /* 小标题、强调 */
--font-size-lg:   18px;   /* 卡片标题 */
--font-size-xl:   20px;   /* 区块标题 */
--font-size-2xl:  24px;   /* 页面标题 */
--font-size-3xl:  30px;   /* 大标题 */

2.3 行高规范

--line-height-tight:  1.25;  /* 标题 */
--line-height-base:   1.5;   /* 正文 */
--line-height-relaxed: 1.75; /* 长文本 */

2.4 字重规范

--font-weight-normal:  400;  /* 正文 */
--font-weight-medium:  500;  /* 强调 */
--font-weight-semibold: 600; /* 小标题 */
--font-weight-bold:    700;  /* 大标题 */

2.5 使用规则

元素	字号	字重	行高
页面标题	24px	600	1.25
卡片标题	16px	500	1.5
正文内容	14px	400	1.5
辅助说明	12px	400	1.5
表格数据	14px	400	1.5
按钮文字	14px	500	1

三、间距系统 (Spacing)

3.1 基础单位

/* 基于 4px 网格系统 */
--space-0:   0;
--space-1:   4px;    /* 紧凑间距 */
--space-2:   8px;    /* 元素内间距 */
--space-3:   12px;   /* 小组件间距 */
--space-4:   16px;   /* 标准间距 */
--space-5:   20px;   /* 卡片内边距 */
--space-6:   24px;   /* 区块间距 */
--space-8:   32px;   /* 大区块间距 */
--space-10:  40px;   /* 章节间距 */
--space-12:  48px;   /* 页面边距 */
--space-16:  64px;   /* 主要分隔 */

3.2 语义映射

场景	间距值	示例
图标与文字	4-8px	`gap: 8px`
按钮内边距	8-16px	`padding: 8px 16px`
表单字段间距	16-24px	`margin-bottom: 16px`
卡片内边距	16-24px	`padding: 20px`
卡片之间	16-24px	`gap: 16px`
区块之间	24-32px	`margin-top: 24px`
页面边距	24px	`padding: 24px`

四、圆角规范 (Border Radius)

4.1 圆角系统

--radius-none:  0;
--radius-sm:    4px;    /* 小按钮、标签 */
--radius-base:  6px;    /* 输入框、小卡片 */
--radius-md:    8px;    /* 按钮、下拉框 */
--radius-lg:    12px;   /* 卡片、弹窗 */
--radius-xl:    16px;   /* 大卡片 */
--radius-2xl:   24px;   /* 特殊容器 */
--radius-full:  9999px; /* 圆形、药丸 */

4.2 使用规则

元素	圆角	说明
按钮	6px	标准圆角
输入框	6px	与按钮一致
小标签	4px	轻量感
卡片	12px	柔和边界
弹窗	12px	与卡片一致
头像	9999px	圆形
抽屉	0	左侧直角

五、阴影系统 (Shadows)

5.1 阴影层级

/* 层级递进 - 从平面到立体 */
--shadow-sm:   0 1px 2px 0 rgba(0, 0, 0, 0.05);
--shadow-base: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px -1px rgba(0, 0, 0, 0.1);
--shadow-md:   0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1);
--shadow-lg:   0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.1);
--shadow-xl:   0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1);

5.2 使用场景

层级	阴影	示例
层级0	none	页面背景
层级1	sm	输入框聚焦
层级2	base	卡片默认
层级3	md	卡片悬浮
层级4	lg	下拉菜单
层级5	xl	弹窗、抽屉

六、图标系统 (Icons)

6.1 图标规范

/* 图标尺寸 */
--icon-xs:  12px;   /* 内联图标 */
--icon-sm:  16px;   /* 列表图标 */
--icon-md:  20px;   /* 标准图标 */
--icon-lg:  24px;   /* 导航图标 */
--icon-xl:  32px;   /* 功能图标 */

/* 图标描边 */
--icon-stroke: 1.5px;

6.2 使用规则

图标库: 统一使用 Lucide Icons 或 Ant Design Icons
风格: 线性图标，圆角端点
颜色: 继承文字颜色或使用 gray-500
对齐: 与文字垂直居中，间距 4-8px

七、组件规范 (Components)

7.1 按钮

/* 尺寸规范 */
--btn-height-sm:   28px;
--btn-height-base: 32px;
--btn-height-lg:   40px;

/* 内边距 */
--btn-padding-sm:   0 12px;
--btn-padding-base: 0 16px;
--btn-padding-lg:   0 24px;

按钮类型:

类型	样式	使用场景
主要	primary-500 填充	提交、确认、下一步
次要	gray-600 边框	取消、返回、重置
文字	无边框透明	次要操作、链接跳转
危险	error-500 填充	删除、清空、禁用

7.2 输入框

--input-height:      32px;
--input-padding:     0 12px;
--input-border:      1px solid var(--color-gray-300);
--input-radius:      6px;
--input-focus-ring:  0 0 0 3px rgba(59, 130, 246, 0.1);

7.3 卡片

--card-bg:          var(--color-gray-50);
--card-border:      1px solid var(--color-gray-200);
--card-radius:      12px;
--card-padding:     20px;
--card-shadow:      var(--shadow-base);
--card-hover-shadow: var(--shadow-md);

7.4 表格

--table-header-bg:    var(--color-gray-50);
--table-row-hover:    var(--color-gray-50);
--table-border:       1px solid var(--color-gray-200);
--table-cell-padding: 12px 16px;

八、布局系统 (Layout)

8.1 栅格系统

/* 12列栅格 */
--grid-columns: 12;
--grid-gutter:  24px;

8.2 页面布局

/* 侧边栏 */
--sidebar-width:        240px;
--sidebar-collapsed:    64px;

/* 顶部导航 */
--header-height:        56px;

/* 内容区域 */
--content-max-width:    1200px;
--content-padding:      24px;

8.3 Z-Index 层级

--z-dropdown:   1000;
--z-sticky:     1020;
--z-fixed:      1030;
--z-modal-backdrop: 1040;
--z-modal:      1050;
--z-popover:    1060;
--z-tooltip:   1070;

九、交互反馈 (Interaction)

9.1 状态颜色

状态	背景	边框	文字
默认	white	gray-300	gray-700
悬浮	gray-50	gray-300	gray-700
聚焦	white	primary-500	gray-700
激活	primary-50	primary-500	primary-600
禁用	gray-100	gray-200	gray-400
错误	error-50	error-500	error-600
成功	success-50	success-500	success-600

9.2 反馈方式

场景	反馈
按钮点击	缩放 0.98 + 背景加深
输入聚焦	边框变色 + 外发光
加载中	旋转图标 + 禁用交互
操作成功	Toast 提示 + 图标动画
操作失败	Toast 错误 + 抖动动画

十、动效规范 (Motion)

10.1 时长

--duration-instant:  100ms;  /* 微交互 */
--duration-fast:     150ms;  /* 悬浮 */
--duration-base:     200ms;  /* 状态切换 */
--duration-slow:     300ms;  /* 展开/收起 */
--duration-slower:   500ms;  /* 页面过渡 */

10.2 缓动函数

--ease-in:      cubic-bezier(0.4, 0, 1, 1);
--ease-out:     cubic-bezier(0, 0, 0.2, 1);
--ease-in-out:  cubic-bezier(0.4, 0, 0.2, 1);
--ease-bounce:  cubic-bezier(0.68, -0.55, 0.265, 1.55);

10.3 动效原则

目的性 - 每个动效都要服务于用户理解
克制 - B端产品动效要低调、高效
一致性 - 相同交互使用相同动效
可关闭 - 尊重 prefers-reduced-motion

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

十一、响应式设计 (Responsive)

11.1 断点系统

/* 移动优先 */
--breakpoint-sm:  640px;   /* 小屏手机 */
--breakpoint-md:  768px;   /* 平板竖屏 */
--breakpoint-lg:  1024px;  /* 平板横屏/小桌面 */
--breakpoint-xl:  1280px;  /* 标准桌面 */
--breakpoint-2xl: 1536px;  /* 大屏桌面 */

11.2 响应策略

断点	布局	导航	侧边栏
< 768px	单列	底部	抽屉
768-1024	双列	顶部	可折叠
> 1024	多列	顶部	固定展开

十二、深色模式 (Dark Mode)

12.1 深色色板

[data-theme="dark"] {
  /* 背景层级 */
  --color-bg-base:     #0F172A;   /* 页面背景 */
  --color-bg-elevated: #1E293B;   /* 卡片背景 */
  --color-bg-overlay:  #334155;   /* 弹窗背景 */

  /* 文字 */
  --color-text-primary:   #F1F5F9;
  --color-text-secondary: #94A3B8;
  --color-text-muted:     #64748B;

  /* 边框 */
  --color-border:       #334155;
  --color-border-light: #1E293B;

  /* 主色调整 - 深色下提亮 */
  --color-primary-500: #60A5FA;
}

12.2 切换策略

跟随系统: prefers-color-scheme
手动切换: localStorage 持久化
无闪烁: CSS 变量 + preload 设置

实施指南

优先级排序

P0 - 立即统一
- 品牌主色 (三套主色 → 统一蓝色系)
- 字体大小 (移除硬编码)
- 间距系统 (使用 CSS 变量)
P1 - 短期完善
- TailwindCSS 配置整合
- Ant Design 主题配置
- 组件样式清理
P2 - 中期优化
- 动效系统
- 深色模式
- 响应式适配

代码迁移示例

Before (问题代码):

/* HistoryPanel.vue */
@primary: #6366f1;
.button {
  background: @primary;
  padding: 16px;
  font-size: 14px;
}

After (规范代码):

/* 使用全局变量 */
.button {
  background: var(--color-primary-500);
  padding: var(--space-4);
  font-size: var(--font-size-base);
}

设计检查清单

颜色使用 CSS 变量，无硬编码
字体大小在定义的阶梯内
间距使用 4px 倍数
圆角使用预定义值
阴影层级正确
图标风格统一
交互状态完整
动效时长合理
响应式断点正确
深色模式适配

版本: v1.0 更新日期: 2026-02-25 适用项目: Yudao Cloud Frontend

13 KiB Raw Blame History

Yudao Cloud B端设计规范提示词

设计哲学

一、色彩系统 (Color System)

1.1 品牌主色 - 科技蓝

1.2 中性色 - 专业灰

1.3 功能色

1.4 语义映射

二、字体排版 (Typography)

2.1 字体家族

2.2 字号阶梯

2.3 行高规范

2.4 字重规范

2.5 使用规则

三、间距系统 (Spacing)

3.1 基础单位

3.2 语义映射

四、圆角规范 (Border Radius)

4.1 圆角系统

4.2 使用规则

五、阴影系统 (Shadows)

5.1 阴影层级

5.2 使用场景

六、图标系统 (Icons)

6.1 图标规范

6.2 使用规则

七、组件规范 (Components)

7.1 按钮

7.2 输入框

7.3 卡片

7.4 表格

八、布局系统 (Layout)

8.1 栅格系统

8.2 页面布局

8.3 Z-Index 层级

九、交互反馈 (Interaction)

9.1 状态颜色

9.2 反馈方式

十、动效规范 (Motion)

10.1 时长

10.2 缓动函数

10.3 动效原则

十一、响应式设计 (Responsive)

11.1 断点系统

11.2 响应策略

十二、深色模式 (Dark Mode)

12.1 深色色板

12.2 切换策略

实施指南

优先级排序

代码迁移示例

设计检查清单

13 KiB

Raw Blame History