App 26「AI PPT 生成」首页（HomeTab），主题色 #EA580C 暖橙（orange） ，4 个 Tab 分别为首页（🖼️）、创建（🤖）、编辑（✏️）、我的（👤）。首页采用"模板市场 + 作品列表"双区布局——Header（AI PPT/AI 一键生成 PPT 大纲 🤖）+ 5 分类 Chip（全部/商务/学术/教育/创意）+ SectionTitle（热门模板）+ 2×2 模板 Grid（📊商务简约 12 页/🎓学术答辩 15 页/🎨创意渐变 10 页/📚教育培训 18 页） + SectionTitle（最近作品）+ 3 条作品列表。本篇基于 26-ai-ppt/entry/src/main/ets/pages/HomeTab.ets （约 139 行）逐段拆解，附 4 张实机截图。

一、整体结构：4 块"模板市场"布局

App 26 首页是"PPT 模板 + 最近作品"的双区布局——4 个 @Builder 块：

build() {
  Column() {
    this.Header()
    Scroll() {
      Column({ space: 14 }) {
        this.ChipRow()
        this.SectionTitle('热门模板')
        this.TemplateGrid()
        this.SectionTitle('最近作品')
        this.WorkList()
      }
      .width('100%')
      .padding({ left: D.pad, right: D.pad, top: 14, bottom: D.pad + this.safeBottom + 20 })
    }
    .layoutWeight(1).scrollBar(BarState.Off).align(Alignment.Top)
  }
  .width('100%').height('100%').backgroundColor(C.bg)
}

• Header — "AI PPT" + 副标题

• ChipRow — 5 分类胶囊

• SectionTitle('热门模板') + TemplateGrid — 2×2 模板宫格

• SectionTitle('最近作品') + WorkList — 3 条历史作品

与 App 13/17 首页同构 （双区列表结构）—— "模板 + 作品 = 生成类 App 的内容组织" ——用户来"选模板做 PPT"。

主题色 #EA580C 暖橙 —— 系列第一个"橙色生产力"主题 ：

• 橙色 = "热情/创造/行动"（AI 生成是创造行为）

• 橙色 = "阳光/能量/生产力"（PPT 是职场生产力工具）

• 橙色 = "橙子/秋收/成果"（生成 PPT 是产出成果）

"暖橙"是办公/效率类 App 的经典色 （Microsoft 365/WPS 的橙、Evernote 的绿、印象笔记的橙）—— 与 App 21 蓝（#3B82F6）的区别 ：蓝偏"工具/调查"（问卷）、暖橙偏"产出/创造"（生成 PPT）—— "工具用蓝、创造用橙"是办公场景的色系分工 。

与 App 25 石板灰（#334155）对比 ：App 25 论文阅读是"灰 = 学术纸墨"、App 26 是"橙 = 创意产出"—— "一个是阅读的静、一个是创造的动" ——系列色板从灰到橙正好走完"输入 → 产出"的完整价值链。

为什么是"暖橙"而不是"红"？ ——红色偏警示/激烈，橙色偏热情/友善—— "AI 生成要给人'易用、可亲近'的感觉，用橙不用红" ——同时橙色与"阳光"绑定，天然暗示"能量"—— "生成类产品用暖橙 = 告诉用户'来，我们一起创造'" 。

项目源码开源： https://gitee.com/codenestFlow/HarmonyOSHub

二、Header：AI PPT 品牌区

Header 是"AI PPT / AI 一键生成 PPT 大纲 🤖"双行品牌区（与系列同款双行）：

@Builder Header() {
  Column() {
    Text('AI PPT')
      .fontSize(22).fontWeight(FontWeight.Bold).fontColor(C.text)
      .width('100%')
      .padding({ top: this.safeTop + 10, left: D.pad, right: D.pad, bottom: 4 })
    Text('AI 一键生成 PPT 大纲 🤖')
      .fontSize(12).fontColor(C.textDim)
      .width('100%')
      .padding({ left: D.pad, right: D.pad, bottom: 12 })
  }
  .width('100%').backgroundColor(C.card)
}

"AI PPT" ——产品名（App 26 的名字），大写英文缩写，科技感强。

"AI 一键生成 PPT 大纲 🤖" 副标题—— "核心卖点" ：

• AI ——"人工智能生成"（技术标签）

• 一键 ——"操作极简"（卖点词）

• 生成大纲 ——"产出物"（第一步是生成大纲）

• 🤖 ——机器人 emoji（AI 拟人化）

"AI 一键生成 X" —— "AI 生成类产品的标准话术" （AI 绘画"一键生成"、AI 写作"一键成文"）—— "一键 = 降低使用门槛，AI = 提升产出上限" ——首页副标题直接亮出产品核心能力。

副标题为什么强调"大纲"而不是"PPT"？ —— "大纲是生成流程的第一步" ：真实 AI PPT 产品（Gamma/美图 AI PPT）都是"先出大纲 → 再生成页面"—— "大纲 = 内容的骨架" ——副标题把"第一步"讲清楚，用户自然明白"点了之后会发生什么"。

emoji 使用 ：标题区用 🤖 机器人、Tab 栏创建用 🤖、编辑用 ✏️、首页用 🖼️—— "每个 Tab 一个功能 emoji" ——emoji 替代图标是系列的一贯手法（无图标资源依赖，纯文本实现，学习成本低）。

padding({ top: this.safeTop + 10, ... }) —— @StorageProp('safeTop') 读取 安全区高度 （状态栏/刘海），内容自动避开—— "安全区适配 = 真机/模拟器都正确显示" ——这是系列所有页面都做的基础适配。

数据一致性 ：副标题强调"生成大纲" = 创建 Tab 的"🤖 AI 生成大纲"按钮 ✓—— "副标题卖点与功能页一致" ——首页做宣传、功能页做承接。

三、ChipRow：5 分类（全部/商务/学术/教育/创意）

ChipRow 是 5 分类的横滑胶囊（系列标准）：

@Builder ChipRow() {
  Scroll() {
    Row({ space: 10 }) {
      ForEach(this.cats, (cat: string, idx: number) => {
        Text(cat)
          .fontSize(13)
          .fontColor(this.activeCat === idx ? '#FFFFFF' : C.textSub)
          .padding({ left: 14, right: 14, top: 7, bottom: 7 })
          .backgroundColor(this.activeCat === idx ? C.primary : C.card)
          .borderRadius(16)
          .onClick(() => { this.activeCat = idx; })
      }, (cat: string) => cat)
    }
  }
  .scrollable(ScrollDirection.Horizontal).scrollBar(BarState.Off).width('100%')
}

5 分类 ： ['全部', '商务', '学术', '教育', '创意'] —— PPT 模板的 5 大使用场景 ：

• 商务 ——汇报/提案/路演（职场）

• 学术 ——答辩/论文/讲座（校园）

• 教育 ——课件/培训/公开课（教学）

• 创意 ——发布/活动/设计（潮流）

• 全部 ——"不筛选，看所有"

"使用场景分类" 是 PPT 模板平台（PPT 市场/稻壳/墨刀）的标准分类—— "场景 = 模板的分类体系" ——因为用户找模板是按"我要做什么场合的 PPT"来找的。

5 个场景的覆盖逻辑 ：职场（商务）+ 校园（学术）+ 教学（教育）+ 潮流（创意）—— "四个象限 + 一个全部" ——几乎覆盖了 PPT 的所有使用人群—— "场景分类要覆盖完整，不能漏掉主流用户" 。

@State activeCat: number = 0 默认选中"全部" —— onClick 切选中态—— "假筛选" （demo 未联动过滤模板），但点击的视觉反馈完整—— "demo 里交互做了、数据联动留白" ——后续接真实数据时，只需在 onClick 里加过滤逻辑即可扩展。

选中态 ：暖橙底白字 vs 白底灰字—— C.primary （#EA580C）做选中底色—— "暖橙 = 生成主题色" 。

为什么是"胶囊"（borderRadius 16）而不是直角？ —— "胶囊 = 现代移动端筛选器的视觉语言" （iOS/Android 通用）——圆角传达"轻量、可点"，比直角更有亲和力—— "筛选器用胶囊，是 2020 年后的设计共识" 。

分类 Chip 的系列复用 ：App 13（WEEK/歌单）、App 14（场馆分类）、App 22（投票分类）、App 25（论文分类）—— "同一套 Chip 组件，换数据就是新场景" —— "系列复用 = 设计系统的价值" 。

四、TemplateGrid：2×2 模板宫格（本页核心）

TemplateGrid 是 2 列 Grid 的 4 张模板卡 —— 大 emoji 图块 + 名称 + 页数 ：

@Builder TemplateGrid() {
  Grid() {
    ForEach(this.templates, (t: Template) => {
      GridItem() {
        Column({ space: 6 }) {
          Row() { Text(t.emoji).fontSize(36) }
          .width('100%').height(80)
          .backgroundColor(C.primarySoft).borderRadius(D.rMd)
          .justifyContent(FlexAlign.Center)
          Text(t.name).fontSize(13).fontColor(C.text)
          Text(t.slides + ' 页模板').fontSize(11).fontColor(C.textDim)
        }
        .width('100%').padding(10).backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke })
        .onClick(() => { promptAction.showToast({ message: t.name }); })
      }
    }, (t: Template) => t.id.toString())
  }
  .columnsTemplate('1fr 1fr').columnsGap(12).rowsGap(12).width('100%')
}

• 📊 商务简约 12 页 （ C.primary 橙）

• 🎓 学术答辩 15 页 （ C.ok 绿）

• 🎨 创意渐变 10 页 （ C.accent 浅橙）

• 📚 教育培训 18 页 （ C.warn 金黄）

模板卡结构 ： 36 号大 emoji 图块（80 高 + C.primarySoft 浅橙底）→ 名称（13 号）→ "X 页模板"（11 号灰字） —— "图大、字小"的视觉层次 ——用户扫一眼先看 emoji（视觉记忆），再读名字和页数。

为什么用 emoji 做"模板预览图"？ —— "零资源成本 + 语义准确" ：真实模板预览是渲染图（需要素材），demo 用 emoji（📊=商务、🎓=学术、🎨=创意、📚=教育）—— "emoji 一图一义，替代图片素材的极简方案" ——这与系列 App 全部用 emoji 做图标/图片是一脉相承的设计决策。

columnsTemplate('1fr 1fr') ——2 等分列 + 12 间距—— "2 列宫格 = 模板市场的标准展示密度" （每屏能看到 4 张，效率高）。

为什么 2 列而不是 3 列？ —— "模板卡要展示名称 + 页数，信息多" ：3 列太挤（名称会折行）、1 列太疏—— "2 列是模板/商品的平衡点" （电商商品也是 2 列为主）—— "信息密度 = 内容决定" 。

模板 4 色 ：每张模板卡用不同主题色系—— C.primary （橙）/ C.ok （绿）/ C.accent （浅橙）/ C.warn （金）—— "模板差异化配色" ——虽然 emoji 图块底都是 C.primarySoft 浅橙，但数据模型里带了 color 字段， 为后续"选中模板后换主题色"预留了扩展位 。

数据模型设计 ： Template 接口带 color: string 字段—— "数据先行" ——demo 虽然暂时没用 color 渲染（图块底统一浅橙），但**"字段先定义好，功能随时可接" ——这是接口设计的远见： "把未来要用的字段先留在模型里，扩展时不改结构"**。

GridItem + ForEach 渲染 ： (t: Template) => t.id.toString() 用 id 做 key—— "稳定 key = 列表 diff 高效" ——ForEach 的 key 生成器是 ArkUI 性能的关键细节。

点击反馈 ： promptAction.showToast({ message: t.name }) ——点击弹"模板名"Toast—— "轻反馈 + 占位跳转" （真实产品点击会进入模板详情/预览）。

Toast 的作用 ： "无跳转时也要让用户感到'点到了'" ——demo 页面没有详情页，Toast 提示模板名，既确认了点击命中、又预告了"即将进入的模板"—— "Toast 是 demo 交互的万能反馈" （系列每页都用）。

五、WorkList：最近作品（3 条）

WorkList 是 3 条作品列表 —— emoji + 标题 + 日期/页数 + "编辑 >" ：

@Builder WorkList() {
  Column({ space: 12 }) {
    ForEach(this.works, (w: Work) => {
      Row({ space: 12 }) {
        Text(w.emoji).fontSize(28)
        Column({ space: 4 }) {
          Text(w.title).fontSize(14).fontColor(C.text)
          Text(w.date + ' · ' + w.pages + ' 页').fontSize(12).fontColor(C.textDim)
        }.alignItems(HorizontalAlign.Start).layoutWeight(1)
        Text('编辑 >').fontSize(12).fontColor(C.primary)
          .onClick(() => { promptAction.showToast({ message: w.title }); })
      }
      .width('100%').padding(14).backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke })
    }, (w: Work) => w.id.toString())
  }.width('100%')
}

• 🖥️ 项目汇报 PPT （今天 · 16 页）

• 🎓 毕业答辩 PPT （昨天 · 22 页）

• 📈 季度总结 PPT （8月10日 · 12 页）

作品卡结构 ： 28 号 emoji → 标题（14 号）+ "日期 · 页数"（12 号灰字）→ 右侧"编辑 >"（暖橙） —— "左图右文、右侧行动按钮"的列表标准形态 。

"日期"用相对时间 ："今天/昨天/8月10日"—— "相对时间 = 移动端列表的时间表达习惯" （消息/文件列表都用"今天/昨天"代替具体时间，更直觉）。

相对时间的层级 ：今天（最热）> 昨天（次热）> 8月10日（具体日期）—— "越近越模糊、越远越精确" ——这是时间表达的通用规则：近处用相对词（今天/昨天）、远处用绝对日期—— "用户对'昨天'有直觉、对'8月10日'需要回忆" 。

编辑 > 橙色操作位 —— "作品列表的可视化行动入口" ——点击弹 Toast 占位，真实产品会跳转到编辑 Tab 的对应 PPT—— "编辑"用暖橙 + 右箭头 = 明确的"可点"暗示 。

为什么是"编辑 >"而不是"打开 >"？ —— "作品的价值在于继续加工" ：PPT 不是一次性消费内容（不像视频），用户回看作品是为了继续改—— "'编辑'比'打开'更符合 PPT 的使用习惯" ——这是业务语义细节。

与模板 Grid 呼应 ：模板是"素材池"（4 张可选），作品是"产出物"（3 个已做）—— "上模板下作品"= 先选模板 → 再生成 → 再回顾作品 ——完整闭环的首页引导。

双区的心理逻辑 ：模板区是"我想要的"（欲望/未来）、作品区是"我拥有的"（资产/过去）—— "首页一屏装下'想要的 + 拥有的'，用户不用跳转就能在'选新'和'改旧'之间切换" 。

六、数据模型与主题体系

• id: number — 唯一标识（ForEach key）

• emoji: string — 模板视觉符号

• name: string — 模板名称

• slides: number — 页数

• color: string — 模板主题色（预留扩展）

• id / emoji / title / date / pages

C 主题类 5 色板 ： primary 暖橙 + primarySoft 浅橙 + accent 浅橙 + warn 金黄 + ok 绿—— "暖橙系 + 功能色" ——主色做选中/按钮，soft 做图块底，warn/ok 做模板差异化。

色板完整度分析 ：App 26 的色板比 App 13（纯紫）更完整—— primary/accent/warn/ok/danger 五功能色齐全—— "生成类 App 功能分支多（模板多色、按钮多态），需要完整色板" —— "色板完整性 = 产品复杂度成正比" 。

D 尺寸类 ： rLg=20 / rMd=14 / rSm=10 / pad=16 ——系列统一圆角/间距体系—— "同一个 D 类贯穿全 App" ——组件间视觉节奏一致—— "三级圆角 + 统一边距" ：大卡 rLg、中件 rMd、小组件 rSm—— "圆角层级 = 组件层级的视觉映射" 。

Scroll + Column 的滚动结构 ： Scroll 包 Column({ space: 14 }) ——14 是区块间距—— padding({ bottom: D.pad + this.safeBottom + 20 }) 底部多留 20—— "底部留白避免 Tab 栏遮挡内容" —— "滚动容器底 padding = Tab 栏高度的补偿" ——系列每页都这样处理。

与系列同构呼应 ：Header 双行（App 13 起）、5 Chip 横滑（App 13 起）、Grid 宫格（App 15 垃圾分类四色）、列表带行动按钮（App 13 播放键）—— "26 是把'模板市场'装进系列骨架的 AI 生成案例" 。

本页的 3 个状态 ： activeCat （分类选中）+ safeTop/safeBottom （安全区）——都是 @State / @StorageProp 管理—— "状态少而清晰" ——首页是展示型页面，状态天然少。

七、首页的实现细节：状态、滚动与反馈

7.1 @StorageProp 安全区状态

首页顶部声明了两个 @StorageProp ：

@StorageProp('safeTop') safeTop: number = 0;
@StorageProp('safeBottom') safeBottom: number = 0;
@State activeCat: number = 0;

@StorageProp vs @State 的区别 —— @StorageProp 是 应用级共享存储 （AppStorage 的只读引用）， @State 是 组件级私有状态 ：

• safeTop/safeBottom —— 全局安全区 ，由 EntryAbility 写入 AppStorage，所有页面都能读—— "一个值全 App 共享"

• activeCat —— 首页私有 ，只有首页自己用—— "一个值一页独享"

"哪些状态放全局、哪些放局部" —— "横切关注点（安全区/主题）放全局，业务状态（选中项）放局部" ——这是 ArkUI 状态管理的分级设计。

7.2 滚动容器的细节

Scroll() {
      Column({ space: 14 }) {
        ...
      }
      .width('100%')
      .padding({ left: D.pad, right: D.pad, top: 14, bottom: D.pad + this.safeBottom + 20 })
    }
    .layoutWeight(1).scrollBar(BarState.Off).align(Alignment.Top)

scrollBar(BarState.Off) —— "滚动条关闭" ——移动端列表默认隐藏滚动条（内容超出才暗示可滚）—— "滚动条 = 桌面遗留物，移动端主流是隐藏" 。

layoutWeight(1) ——Scroll 占据 Header 之外的剩余空间—— "Header 固定、内容区弹性" ——**"一固定一弹性的上下结构"**是系列所有页面的骨架。

align(Alignment.Top) ——内容从顶部对齐—— "滚动容器内容默认顶对齐" ——避免内容垂直居中导致的跳动感。

padding({ bottom: ... + 20 }) ——底部多留 20—— "为 Tab 栏让位" ——Tab 栏高 60+safeBottom，内容底部 padding 保证最后一条不被 Tab 遮挡。

7.3 promptAction.showToast 反馈体系

.onClick(() => { promptAction.showToast({ message: t.name }); })

promptAction.showToast ——ArkUI 的系统 Toast API—— "一行代码弹提示" ——系列所有可点元素都用它做反馈—— "Toast 是 demo 交互的万能反馈" 。

Toast 的参数 ： { message: t.name } 传模板名—— "反馈内容 = 点击对象的名字" —— "Toast 告诉用户'你点到了什么'" ——通用且安全（不怕点错）。

为什么不弹"敬请期待"？ —— "展示内容名比展示占位文案更有用" ——弹"教育培训"让用户确认"点对了"，弹"敬请期待"会让人困惑"点了啥"—— "反馈要基于操作对象而非占位话术" 。

7.4 @Builder 组件化

首页 5 个 @Builder（Header/ChipRow/SectionTitle/TemplateGrid/WorkList）—— "UI 拆成可复用块" ：

• SectionTitle 复用 2 次 （热门模板/最近作品）—— "同一 Builder 多处调用"

• ChipRow/TemplateGrid 等各司其职 —— "一个 Builder 一块 UI"

@Builder 的价值 ：build() 保持"阅读即结构"（一列 Builder 调用 = 页面骨架），每个 Builder 内部自包含—— "结构化代码 = 可维护性" ——这是 ArkUI 声明式组件的核心组织方式。

组件化对比 ：如果不拆 Builder，build() 里堆 139 行会不可读；拆成 5 个块后每个块职责清晰—— "代码组织的边界 = 视觉区块的边界" 。

7.5 ForEach 的 key 策略

}, (t: Template) => t.id.toString())

id.toString() 做 key —— "稳定且唯一" ——id 不随渲染变化—— "key 的职责：让 ArkUI 高效 diff 列表" ——用 index 做 key 在增删时会有状态错位，用 id 最稳。

WorkList 的 key 同理 ： (w: Work) => w.id.toString() —— "两个列表都用 id" —— "key 规范：有 id 用 id" 。

7.6 首页与其他 Tab 的衔接设计

首页是"入口页"，它的每个元素都指向其他 Tab：

• 点模板 → 真实产品进模板详情 → 从详情选"使用此模板" → 跳创建 Tab

• 点"编辑 >" → 真实产品跳编辑 Tab 对应 PPT

• 分类 Chip → 真实产品过滤模板

"首页是功能的地图" ——demo 用 Toast 占位跳转，但**"元素的去向设计" 已经清晰—— "UI 的'语义跳转'在 demo 里用 Toast 表达，接真实路由时替换即可" —— "先设计好交互语义，再实现具体路由"**。

7.7 首页的可访问性细节

• 字号梯队 ：22（标题）/16（区块标题）/14（名称）/13（Chip）/12（副标题）/11（页数）—— "6 级字号 = 6 级信息权重"

• 对比度 ：深字（#1C2333）在白卡上、白字在橙底上—— "主次文本对比度充足"

• 触控热区 ：Chip padding 上下 7 + 13 号字 ≈ 40 高、模板卡全卡可点—— "热区达标"

"无障碍不是可选项，是设计的一部分" ——demo 的字号梯队和对比度天然满足基本可读性—— "好的视觉设计自动接近无障碍标准" 。

7.8 首页布局的栅格与节奏

首页的纵向节奏 ：Header（~130）→ Chip（~100）→ 区块标题（~65）→ 模板 Grid（~450）→ 区块标题（~65）→ 作品列表（~210×3）—— "区块高度错落有致" ——模板 Grid 最高（视觉主体）、Chip 最矮（轻量筛选）—— "页面节奏 = 区块高度的编排" ——就像排版的"字距行距"，页面的"块距"决定了阅读的呼吸感。

横向栅格 ：模板 2 列（ 1fr 1fr ）+ 12 间距；作品列表整行 + 14 内边距；Chip 流式排布—— "同页三种栅格" —— "栅格密度 = 信息类型" ：模板要并列对比用宫格、作品要逐条阅读用列表、分类要轻量选择用胶囊—— "一页多栅格不是混乱，是信息分层" 。

区块间距 space: 14 ——模板 Grid 与作品列表之间、区块标题之间统一 14—— "同页间距统一 = 视觉节奏稳定" ——如果 14/20/30 乱用，页面会显得"跳"—— "间距系统 = 视觉的节拍器" 。

底部 padding 补偿 ： bottom: D.pad + this.safeBottom + 20 ——Tab 栏上方永远留足空间—— "最后一个元素不被遮挡" —— "滚动页的底部留白不是浪费，是可用性" 。

7.9 首页数据的真实感设计

• 商务简约 12 页——商务 PPT 常见 10-15 页 ✓

• 学术答辩 15 页——毕业答辩通常 15-20 页 ✓

• 创意渐变 10 页——创意类偏短（视觉冲击为主）✓

• 教育培训 18 页——课件内容多、页数长 ✓

"每张模板的页数与场景匹配" —— "模拟数据的合理性 = 让 demo 可信的关键" ——用户看到"教育培训 18 页"不会觉得违和，因为现实中培训课件就是页数多—— "demo 数据不是随便写的，是有生活依据的" 。

• 项目汇报（今天 · 16 页）——刚做完最热

• 毕业答辩（昨天 · 22 页）——答辩 PPT 页数多

• 季度总结（8月10日 · 12 页）——一段时间前

"时间线合理 + 页数与主题匹配" —— "好 demo 的数据经得起推敲" —— "数据合理 = 潜意识的可信" ——用户可能说不出哪里对，但会觉得"这 App 挺真实"。

emoji 的语义准确性 ：📊（图表=商务汇报）、🎓（学位帽=学术答辩）、🎨（调色板=创意设计）、📚（书本=教育培训）、🖥️（电脑=项目汇报）、📈（上升图表=季度总结）—— "每个 emoji 与内容精确对应" —— "emoji 是 demo 的'图片系统'，选对 emoji = 设计对位" 。

模板页数的递进关系 ：12（商务）→ 15（学术）→ 10（创意）→ 18（教育）—— "4 个数字错开不重复" ——如果全是 12 页会显得数据"凑数"—— "模拟数据要'像真的'：有差异、有高低" —— "数据差异 = 真实感" 。同时 10-18 页都在合理区间内，没有极端值（如 3 页/50 页），说明 demo 对 PPT 场景的理解到位—— "数据范围合理，场景可信度就高" 。

八、总结：暖橙生成市场的首页设计

App 26 首页一句话 ： 用暖橙（#EA580C）包装一个"PPT 模板 + 最近作品"的双区市场 ——顶部 Header 亮出"AI 一键生成"卖点，中间 5 分类 Chip 按场景筛选，核心 2×2 模板 Grid 用大 emoji + 页数吸引选择，底部最近作品用"今天/昨天"时间戳展示产出成果。

• 场景分类 ——"全部/商务/学术/教育/创意"按使用场景组织模板，贴合"我要做什么场合的 PPT"的真实找模板路径

• 模板差异化色 ——4 张模板卡带各自 color 字段，为"选模板换主题色"预留扩展，demo 里已用 4 个功能色区分

• 双区闭环 ——模板（素材）在上、作品（产出）在下，从"选"到"产"一条线，符合生成类产品的用户旅程

主题色设计逻辑 ：暖橙 = 创造/能量/成果—— "生成 PPT 是创造行为，橙色给用户行动欲" ——与 App 21 蓝（调查工具）、App 23 深青（实验室）、App 24 靛蓝（科研管理）形成"办公工具色系"的完整光谱。

从首页看整个 App 26 ：首页负责"选模板/回作品"（入口），创建 Tab 负责"输入主题生成大纲"（生产），编辑 Tab 负责"逐页精修"（打磨），我的 Tab 负责"资产统计"（沉淀）—— "首页是这条生产链的入口和回顾" —— "首页放模板和作品，正是因为它是最常被访问的'中继站'" 。

体验细节 ：相对时间（今天/昨天）、"X 页模板"页数可预期、大 emoji 图块降低阅读负担、点击全有 Toast 反馈——**"每个可点元素都有响应"**的 demo 完整性标准。

可扩展性展望 ： color 字段接上真实模板色 → 分类 Chip 接上过滤逻辑 → "编辑 >"接上编辑页跳转—— "demo 的三处'留白'都是可扩展点" —— "留白不是缺陷，是给真实产品留的接口" 。 首页模板网格与分类切换共同构成 AI 生成 PPT 的入口，本文解析至此完整收尾。

转载声明：本文为转载整理，原文版权归原作者及原站点所有。

原文来源：CSDN HarmonyOS

原创地址：https://blog.csdn.net/weixin_52908342/article/details/165469445