46 lines
3.0 KiB
Markdown
46 lines
3.0 KiB
Markdown
|
# 布局排版参考 · AI 内容工作台（小曾 · 两视频关键帧）
|
||
|
|
|
||
|
|
> 来源：`参考资料/AI内容工作台_功能点与截图/`（16 张关键帧截图 ＋ `AI内容工作台_功能点梳理.md`）。
|
||
|
|
> 两视频＝Bilibili `BV1gsHn6AEk6`（工作台 3.0）＋ YouTube `jVHyoCYidLM`（工作台 2.0）。
|
||
|
|
> 用途：与本项目同品类（内容运营工作台）的**重点布局／风格参照**。⛔ 是参照物，不是照抄目标。
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
## 一、外壳与导航
|
||
|
|
|
||
|
|
- **顶部横向 Tab 导航**（⛔ 不是左侧栏）：十个 Tab，按创作工作流排序 —— 首页 / 对标与热点 / 选题 / 拆解与沉淀 / 创作 / 发布与经营 / 计划 / 常用助手 / 画板 / 收支。
|
||
|
|
- 主体是**居中的单列宽内容区**，顶部放一个**全局搜索框**（「搜索选题、文案和资料…」）。
|
||
|
|
- 子层用**胶囊子 Tab**：如 精选总览 / 对标动态 / AI 热点 / Twitter 动态；创作台内 聊思路 / 写文案 / 起标题 / 做封面 / 发布检查。
|
||
|
|
|
||
|
|
## 二、首页
|
||
|
|
|
||
|
|
- **Hero 区**＝问候 ＋ 大钟（「上午好 11:55」）＋ 日期 ＋ 手绘插画底；右侧一张**日历卡**。
|
||
|
|
- 首页下半：本月之星（本月表现最好的作品）、作品与机会陈列。
|
||
|
|
|
||
|
|
## 三、数据与列表
|
||
|
|
|
||
|
|
- **指标卡一排**：四张等宽卡，**各自一个色相**（绿 / 紫 / 蓝 / 土黄），卡内＝标签 ＋ 大数字 ＋ 单位小字。
|
||
|
|
- **资产库＝表格**：三列（文案原文含标题 ／ 这类角度叫什么 ／ 原文怎么写）；上方一行说明「18 条资产 · 左右滚动查看各维度，点击名称查看完整拆解」。
|
||
|
|
- 对标内容：卡片带「N 倍平时互动」的倍数徽标。
|
||
|
|
|
||
|
|
## 四、创作流水线
|
||
|
|
|
||
|
|
- 顶部子 Tab 本身就是流水线；**发布检查**页给了明确的**分步指示**「1 导入文案 → 2 检查问题 → 3 处理建议 → 4 复核后发布」。
|
||
|
|
- 主体＝左（表单与动作：发布平台 / 正文 / 封面 / 开始检查）＋ 右（内容正文预览）。
|
||
|
|
- 主按钮是**橙色药丸**（更新动态 / 开始检查），次按钮描边。
|
||
|
|
|
||
|
|
## 五、视觉调性（这份参考自己的）
|
||
|
|
|
||
|
|
- **深色底**（墨绿、近黑），圆角面板约 10–14px，阴影克制。
|
||
|
|
- **多色强调**：每张指标卡一个色相；主按钮用**橙**。
|
||
|
|
- 手绘插画（Hero 底、图标）。
|
||
|
|
- 数字用近似等宽的字形。
|
||
|
|
|
||
|
|
## 六、我们能借什么、得先定什么（供③段取舍）
|
||
|
|
|
||
|
|
- **可借（风格中性）**：顶部按工作流排序的 Tab、居中宽列 ＋ 顶部搜索、胶囊子 Tab、指标卡一排大数字、创作环节的分步指示、资产用三列表格。
|
||
|
|
- **⚠️ 冲突（须先定）**：① 深色底 vs 我们的浅色纸感；② **多色指标卡** vs 基础层 `oil-ui-pro` 的「同一层级保持一致重量、避免每张普通卡片用不同强调色」；③ 橙色主按钮 vs 我们的品牌紫。
|
||
|
|
|
||
|
|
---
|
||
|
|
|
||
|
|
（配套：同目录 16 张截图可逐屏核对；与 `ui/布局排版参考-mcn-work-shop.md` 同形，可并读。）
|