淇经数科自身IP——“AI营销图谱”动态信息图创作
客户： · 行业： · 发布：2026-04-22
客户简介
淇经数科需要将《AI 赋能营销全流程.xlsx》中梳理的庞大工具矩阵，转化为一张可供行业传播、具有影响力的“AI营销全景图谱”信息图。该图谱需要覆盖数百个工具，涉及多个层级分类，且随着工具迭代需要易于更新。
淇经数科AI内容制作内部实践
这是一个复杂的系统性信息设计项目。我们利用AI来辅助完成从信息架构到视觉落地的全过程，目标是创造一件兼具深度与美感的“知识艺术品”。
合作内容与AI制作流程
信息架构的AI辅助梳理：我们将Excel中的工具列表、分类、简介文本输入给AI，让其尝试按照“营销漏斗阶段”、“工具类型”、“核心功能”等多个维度进行自动聚类和分析，并提出几种可视化结构建议（如环形图、星系图、地铁线路图），为设计师提供创新思路。
图标与符号的AI批量生成：图谱需要为每个工具类别或代表性工具设计小图标。我们使用AI图标生成工具，输入“市场洞察”、“智能客服”、“视频生成”等关键词，批量生成风格统一的扁平化或线性图标库，保证了整张图的视觉一致性。
动态交互图表的实现：为了让图谱更易于传播和探索，我们决定制作可交互的网页版。AI编码辅助工具帮助前端工程师快速搭建了基础框架。图谱中的每个节点（工具）都可以点击，弹出详细介绍和链接。AI还协助生成了颜色渐变方案和悬停动效代码，提升了用户体验。
成果与价值
这张“AI营销全景图谱”一经发布，便在营销技术（MarTech）圈层引发轰动。其内容的全面性、结构的清晰性和视觉的专业性，使其被大量行业媒体转载、企业内部分享。它不仅是淇经数科专业实力的展示，更成为了行业从业者的一份实用导航图。AI工具的运用，使得如此复杂的信息图项目得以在可控时间内高质量完成，并具备了可持续更新的能力，成为公司长期运营的活资产。
/* 三个按钮容器: 一排，间距舒适 */
.button-row {
display: flex;
flex-direction: row;
justify-content: center;
align-items: center;
gap: 0rem;
flex-wrap: nowrap;
}
/* 每个按钮项: 图标+文字, 垂直布局, 悬停区域 */
.btn-item {
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
transition: transform 0.2s cubic-bezier(0.2, 0.9, 0.4, 1.1);
position: relative;
border-radius: 2rem;
background: rgba(255, 255, 255, 0.5);
backdrop-filter: blur(4px);
transition: all 0.25s ease;
}
.btn-item:hover {
transform: translateY(-6px);
background: rgba(255, 255, 255, 0.95);
box-shadow: 0 12px 22px -10px rgba(0, 0, 0, 0.15);
}
/* 按钮图片样式 (原始图标 wx.png / xhs.png / i.png) */
.btn-icon {
width: 40px;
height: 40px;
object-fit: contain;
display: block;
margin-bottom:5px;
pointer-events: none; /* 让图片不干扰鼠标事件, 统一由父级处理hover */
filter: drop-shadow(0 2px 4px rgba(0,0,0,0.05));
transition: filter 0.2s;
}
/* ------- 二维码弹出层 (绝对定位，悬停时显示) ------- */
.qrcode-popup {
position: absolute;
bottom: 100%; /* 位于按钮上方 */
left: 50%;
transform: translateX(-50%) translateY(-12px);
background: #ffffff;
border-radius: 28px;
padding: 16px 18px 14px 18px;
box-shadow: 0 20px 35px -12px rgba(0, 0, 0, 0.3), 0 1px 3px rgba(0,0,0,0.05);
display: flex;
flex-direction: column;
align-items: center;
gap: 8px;
z-index: 300;
opacity: 0;
visibility: hidden;
transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
pointer-events: none; /* 避免鼠标移动到二维码上导致悬停闪烁, 完全由按钮控制 */
border: 1px solid rgba(0,0,0,0.05);
backdrop-filter: blur(0px);
}
/* 小三角箭头 (指向按钮) */
.qrcode-popup::after {
content: ”;
position: absolute;
top: 100%;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 10px solid transparent;
border-right: 10px solid transparent;
border-top: 10px solid #ffffff;
filter: drop-shadow(0 1px 1px rgba(0,0,0,0.05));
}
/* 二维码图片 */
.qrcode-img {
width: 140px;
height: 140px;
object-fit: contain;
display: block;
border-radius: 16px;
background: #fff;
}
/* 悬停时显示二维码 */
.btn-item:hover .qrcode-popup {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(-20px);
}