137 lines
6.0 KiB
HTML
137 lines
6.0 KiB
HTML
<!doctype html>
|
||
<html lang="zh-CN">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||
<title>StoryForge 新媒体运营参考 UI</title>
|
||
<style>
|
||
:root {
|
||
--bg: #f4f8fd;
|
||
--panel: #fff;
|
||
--line: #dbe7f2;
|
||
--text: #152131;
|
||
--muted: #62758d;
|
||
--blue: #8fc2ff;
|
||
--blue-deep: #3f7fe7;
|
||
}
|
||
* { box-sizing: border-box; }
|
||
body {
|
||
margin: 0;
|
||
font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", sans-serif;
|
||
color: var(--text);
|
||
background: linear-gradient(180deg, #f7fbff 0%, #eef4fb 100%);
|
||
}
|
||
.wrap { max-width: 1440px; margin: 0 auto; padding: 28px 22px 56px; }
|
||
.hero {
|
||
background: rgba(255,255,255,.86);
|
||
border: 1px solid rgba(143,194,255,.35);
|
||
border-radius: 24px;
|
||
box-shadow: 0 22px 48px rgba(80, 113, 145, .12);
|
||
padding: 28px;
|
||
}
|
||
h1 { margin: 0 0 10px; font-size: 30px; }
|
||
.hero p { margin: 0; line-height: 1.8; color: var(--muted); max-width: 980px; }
|
||
.hero ul { margin: 12px 0 0; padding-left: 18px; color: var(--muted); line-height: 1.9; }
|
||
.section { margin-top: 28px; }
|
||
.section h2 { margin: 0 0 12px; font-size: 22px; }
|
||
.section p { margin: 0 0 16px; color: var(--muted); }
|
||
.grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
|
||
.card {
|
||
background: var(--panel);
|
||
border: 1px solid var(--line);
|
||
border-radius: 18px;
|
||
overflow: hidden;
|
||
box-shadow: 0 10px 24px rgba(44, 72, 102, .08);
|
||
}
|
||
.card img { width: 100%; display: block; background: #eff5fc; }
|
||
.meta { padding: 16px 18px 18px; }
|
||
.meta h3 { margin: 0 0 8px; font-size: 18px; }
|
||
.meta .source { margin: 0 0 8px; color: var(--blue-deep); font-size: 13px; }
|
||
.meta .use { margin: 0; color: var(--muted); line-height: 1.8; font-size: 14px; }
|
||
@media (max-width: 960px) {
|
||
.grid { grid-template-columns: 1fr; }
|
||
.wrap { padding: 18px 14px 40px; }
|
||
h1 { font-size: 24px; }
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div class="wrap">
|
||
<div class="hero">
|
||
<h1>StoryForge 新媒体运营参考 UI</h1>
|
||
<p>
|
||
这批参考不是通用 AI 后台，而是更贴近“抖音 / 小红书 / B站 / YouTube 多平台账号运营”的产品形态。
|
||
重点观察的是：账号发现、精品账号分析、内容监控、竞品跟踪、品牌投放、内容复盘。
|
||
</p>
|
||
<ul>
|
||
<li>飞瓜：适合借抖音后台主壳、一级导航、监控与投放模块</li>
|
||
<li>千瓜：适合借小红书榜单、达人筛选、竞品监测与内容资产视角</li>
|
||
<li>StoryForge 自己再抽象成统一的跨平台工作区，而不是按平台裂成四套后台</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h2>千瓜数据</h2>
|
||
<p>更适合作为“小红书方向的榜单发现、达人筛选、行业观察、内容洞察”的参考。</p>
|
||
<div class="grid">
|
||
<div class="card">
|
||
<img src="./raw/01-qiangua-rank-page.png" alt="千瓜达人榜单页" />
|
||
<div class="meta">
|
||
<h3>达人榜单页</h3>
|
||
<p class="source">来源：qian-gua.com</p>
|
||
<p class="use">适合借榜单页的筛选区、排行表格、达人卡摘要信息。可转译为 StoryForge 的“精品账号发现”。</p>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<img src="./raw/02-qiangua-plan-and-modules.png" alt="千瓜模块与能力地图" />
|
||
<div class="meta">
|
||
<h3>模块与能力地图</h3>
|
||
<p class="source">来源：qian-gua.com</p>
|
||
<p class="use">这张不是最终界面参考，而是产品能力地图参考，适合帮助我们定义菜单层级和模块边界。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="section">
|
||
<h2>飞瓜数据</h2>
|
||
<p>更适合作为“抖音方向的后台主壳、账号发现、监控工作台、品牌投放”的参考。</p>
|
||
<div class="grid">
|
||
<div class="card">
|
||
<img src="./raw/03-feigua-menu-structure.png" alt="飞瓜菜单结构图" />
|
||
<div class="meta">
|
||
<h3>一级菜单结构</h3>
|
||
<p class="source">来源：dy.feigua.cn/help</p>
|
||
<p class="use">适合借一级导航分组方式。StoryForge 可转译成：运营总台、账号发现、内容库、Agent、生产、发布复盘、设置。</p>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<img src="./raw/04-feigua-account-discovery.png" alt="飞瓜账号发现页" />
|
||
<div class="meta">
|
||
<h3>账号发现页</h3>
|
||
<p class="source">来源：dy.feigua.cn/help</p>
|
||
<p class="use">适合借涨粉榜、行业筛选、账号列表和“详情”入口，用于 StoryForge 的精品账号发现和对标账号收录。</p>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<img src="./raw/05-feigua-monitoring-workbench.png" alt="飞瓜监测工作台" />
|
||
<div class="meta">
|
||
<h3>数据监测工作台</h3>
|
||
<p class="source">来源：dy.feigua.cn/help</p>
|
||
<p class="use">适合借监控任务页和持续追踪视角，可转译为 StoryForge 的“账号跟踪 / 作品跟踪 / 竞品跟踪”。</p>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<img src="./raw/06-feigua-brand-delivery.png" alt="飞瓜品牌投放页" />
|
||
<div class="meta">
|
||
<h3>品牌投放与竞品页</h3>
|
||
<p class="source">来源：dy.feigua.cn/help</p>
|
||
<p class="use">适合借品牌搜索、筛选和表格摘要区。StoryForge 可转译为“品牌案例库 / 商业化机会 / 竞品投放观察”。</p>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</body>
|
||
</html>
|