鸿蒙原生应用实战：用 ArkUI 搭笔记交换首页 —— 课程横滑卡

App 35「校园笔记交换」首页（HomeTab），主题色 #9B51E0 紫罗兰（violet），4 个 Tab 分别为首页（📝）、笔记（📓）、发布（✏️）、我的（👤）。首页采用"Header + 推荐课程 + 热门笔记"三区布局——白色双行 Header（"笔记交换"22 号 + "好笔记，共分享 📝"副标题） + 推荐课程横滑卡（📐 高等数学 328 笔记 / 💻 数据结构 256 笔记 / 🧪 大学物理 198 笔记 / 🌍 英语 412 笔记，100 宽白卡 + 30 号 emoji + 课程名 + 笔记数） + SectionTitle（热门笔记 + 更多 >）+ 4 条笔记列表（📓 数据结构完整笔记（手写版）学霸小林 数据结构 234❤️ / 📔 马原重点框架图 思政达人 189 / 📒 有机化学反应机理总结 化学小王子 156 / 📓 概率论公式推导笔记 数学控 142，每条含 54×70 紫色封面 + 两行标题 + 紫色课程标签 + by 作者 + ❤️ 点赞数）。本篇基于 35-note-exchange/entry/src/main/ets/pages/HomeTab.ets（约 113 行）逐段拆解，附 4 张实机截图。

一、整体结构：三区"Header + 课程 + 热门"布局

App 35 首页是"品牌头部 + 课程推荐 + 热门笔记"的三区布局——6 个 @Builder 块：

build() {
  Column() {
    this.Header()
    Scroll() {
      Column({ space: 16 }) {
        this.CourseScroll()
        this.SectionTitle('热门笔记')
        this.NoteList()
      }
      .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)
}

3 块结构：

1. Header — 双行品牌头（标题 + slogan）
2. CourseScroll — 推荐课程横滑卡
3. SectionTitle('热门笔记') + NoteList — 4 条热门笔记

与 App 34 首页对比：App 34 是"双行 Header + 价格 Banner + 快捷入口 + 列表"、App 35 是"双行 Header + 课程横滑 + 热门笔记"——"34 打印 vs 35 笔记"——"34 价格 Banner vs 35 课程横滑"——"34 快捷入口 vs 35 直接笔记列表"——"两种共享学习 App 首页"——"34 重价格效率、35 重内容推荐"——"首页 = 业务核心"。

主题色 #9B51E0 紫罗兰——"共享学习的紫色系"：

• 紫罗兰 = "笔记/文具的紫"（笔记本/荧光笔的紫色）
• 紫罗兰 = "知识/书卷气"（紫 = 学术/知性）
• 紫罗兰 = "创意的紫"（学习笔记的创意表达）

"紫罗兰 vs App 26 紫（#7C3AED）"——App 26 是"AI PPT"紫色、App 35 是"笔记交换"紫色——"两种紫"——"26 偏深紫、35 偏紫罗兰"——"紫色系的知识联想"——"26 管 PPT、35 管笔记"——"相邻紫色 App 的颜色区分"——"主题色的业务匹配"。

CourseScroll() 推荐课程横滑是 App 35 首页的特色——"课程卡横滑"——"4 门课程"——"笔记数"——"课程推荐"——"用户按课程找笔记"——"横滑 = 横向浏览"。

NoteList() 热门笔记——"4 条笔记"——"封面 + 标题 + 课程 + 作者 + 点赞"——"内容推荐"——"热门 = 点赞多"——"笔记的社交数据"——"首页的内容价值"。

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

二、Header：双行品牌头

Header 是 "笔记交换" + slogan 的双行头部：

@Builder
Header() {
  Column() {
    Text('笔记交换').fontSize(22).fontWeight(FontWeight.Bold).fontColor(C.text)
      .width('100%').padding({ top: this.safeTop + 10, left: D.pad, right: D.pad, bottom: 4 })
    Text('好笔记，共分享 📝').fontSize(12).fontColor(C.textDim).width('100%')
      .padding({ left: D.pad, right: D.pad, bottom: 12 })
  }.width('100%').backgroundColor(C.card)
}

Header 结构：白色背景 + 主标题（"笔记交换"22 号加粗黑）+ 副标题（"好笔记，共分享 📝"12 号灰）——"双行品牌头"。

Text('笔记交换') 22 号主标题——"品牌名"——"笔记 + 交换"——"交换 = 共享"——"笔记交换 = 平台业务"——"22 号 = 品牌头字号"——"同 App 33/34"。

Text('好笔记，共分享 📝') 12 号灰 slogan——"好笔记 = 内容价值"——"共分享 = 平台理念"——"📝 = 笔记 emoji"——"slogan = 业务主张"——与 App 34 "打印无忧，学习共享" 对比——"共享 + 学习的 slogan"——"slogan 的业务适配"。

padding({ top: this.safeTop + 10, bottom: 4 }) 主标题 padding——"安全区 + 间距"——"系列标准"。

padding({ left: D.pad, right: D.pad, bottom: 12 }) 副标题 padding——"底部留白"——"双行间距"。

与 App 34 Header 对比——App 34 有 🖨️ 图标、App 35 无图标——"双行 + 图标 vs 双行纯文字"——"35 Header 更简洁"——"标题 + slogan 双行"——"品牌的直接表达"。

三、CourseScroll：推荐课程横滑卡

CourseScroll 是 4 门课程横滑卡：

@Builder
CourseScroll() {
  Column({ space: 10 }) {
    Text('推荐课程').fontSize(14).fontWeight(FontWeight.Bold).fontColor(C.text).width('100%')
    Scroll() {
      Row({ space: 12 }) {
        this.CourseCard('📐', '高等数学', '328 笔记')
        this.CourseCard('💻', '数据结构', '256 笔记')
        this.CourseCard('🧪', '大学物理', '198 笔记')
        this.CourseCard('🌍', '英语', '412 笔记')
      }
    }.scrollable(ScrollDirection.Horizontal).scrollBar(BarState.Off).width('100%')
  }
}

CourseScroll 结构：标题（"推荐课程"14 号加粗）+ 横向 Scroll（4 个 CourseCard）——"课程推荐区"。

Text('推荐课程') 14 号加粗标题——"区标题"——"推荐 = 课程"——"14 号 < 热门笔记 16 号"——"层级"。

Scroll()...scrollable(ScrollDirection.Horizontal) 横向滚动——"横滑"——"4 卡横排"——"横向浏览"——"scrollBar Off"——"横滑的交互"。

Row({ space: 12 }) 4 卡横排——"12 间距"——"横排"——"横向布局"。

CourseCard 结构（参数化）：100 宽 Column（30 号 emoji + 13 号课程名 + 11 号笔记数）+ 14 padding + 白底 + 14 圆角 + 1px 边框——"课程卡"。

4 门课程：

emoji	课程	笔记数
📐	高等数学	328 笔记
💻	数据结构	256 笔记
🧪	大学物理	198 笔记
🌍	英语	412 笔记

Text(icon).fontSize(30) 30 号课程 emoji——"📐💻🧪🌍"——"课程符号"——"数学/编程/实验/全球"——"emoji = 课程"。

Text(count) 笔记数——"328 笔记"——"课程笔记量"——"英语 412 最多"——"高数 328"——"笔记数 = 课程热度"。

onClick(() => promptAction.showToast({ message: name })) 点击反馈——"点击课程"——"Toast 反馈"——"占位跳转"。

与 App 34 资料页课程栏对比：

• App 34：纵向 5 课程栏（分栏导航）
• App 35：横向 4 课程卡（横滑推荐）

"纵向导航 vs 横向推荐"——"34 用课程做导航、35 用课程做推荐"——"两种课程呈现"——"导航 vs 内容"——"课程的多样展示"。

与 App 31 ChipRow 对比——App 31 是横滑分类 Chip、App 35 是横滑课程卡——"两种横滑"——"31 小 Chip、35 大课程卡"——"横滑的丰富形态"。

四、NoteList：热门笔记列表（本页核心）

NoteList 是 4 条热门笔记的列表——每条含封面、标题、课程标签、作者、点赞数：

@Builder
NoteList() {
  Column({ space: 12 }) {
    ForEach(this.notes, (n: Note) => {
      Row({ space: 12 }) {
        Row() { Text(n.cover).fontSize(30) }
        .width(54).height(70).backgroundColor(C.primarySoft).borderRadius(D.rSm).justifyContent(FlexAlign.Center)
        Column({ space: 6 }) {
          Text(n.title).fontSize(14).fontWeight(FontWeight.Medium).fontColor(C.text).maxLines(2)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
          Text(n.course).fontSize(11).fontColor(C.primary)
            .padding({ left: 8, right: 8, top: 2, bottom: 2 }).backgroundColor(C.primarySoft).borderRadius(4)
          Row() {
            Text('by ' + n.author).fontSize(11).fontColor(C.textDim).layoutWeight(1)
            Text('❤️ ' + n.likes).fontSize(11).fontColor(C.textDim)
          }.width('100%')
        }.alignItems(HorizontalAlign.Start).layoutWeight(1)
      }
      .width('100%').padding(12).backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke })
      .onClick(() => { promptAction.showToast({ message: n.title }); })
    }, (n: Note) => n.id.toString())
  }.width('100%')
}

每条笔记卡的结构：

• 左 54×70 紫色封面（30 号 📓📔📒📓，浅紫底）
• 中 文字区（标题 14 号两行 + 紫色课程标签 + by 作者 + ❤️ 点赞）
• 整卡可点（点击弹标题 Toast）

4 条笔记（每条 6 要素）：

封面	标题	作者	课程	点赞
📓	数据结构完整笔记（手写版）	学霸小林	数据结构	234
📔	马原重点框架图	思政达人	马克思主义原理	189
📒	有机化学反应机理总结	化学小王子	有机化学	156
📓	概率论公式推导笔记	数学控	概率论	142

Row().width(54).height(70).backgroundColor(C.primarySoft) 54×70 封面——"70 高 = 竖向封面"——"书籍比例"——"浅紫底"——"30 号 emoji 居中"——"笔记的视觉封面"。

Text(n.title).maxLines(2).textOverflow 两行标题截断——"maxLines 2"——"长标题两行"——"14 号 Medium"——"标题展示"。

Text(n.course) 紫色课程标签——"11 号紫字"——"浅紫底"——"4 圆角"——"8+2 padding"——"课程 tag"——"分类标识"——"紫色 = 课程"。

Text('by ' + n.author) 作者——"by 学霸小林"——"11 号灰"——"作者标识"——"by = 归属"——"创作者"。

Text('❤️ ' + n.likes) 点赞数——"❤️ 234"——"11 号灰"——"社交数据"——"点赞 = 热度"——"热门排序依据"。

onClick(() => promptAction.showToast({ message: n.title })) 整卡可点——"点击看笔记"——"Toast 反馈"——"占位跳转详情"。

Row() { by + ❤️ } 底部行——"作者左、点赞右"——"layoutWeight(1) 弹性"——"两端布局"。

点赞数的递减——"234/189/156/142"——"点赞排序"——"热门 = 点赞多"——"学霸小林 234 最热"——"数据的合理"。

Note 模型（6 字段）：

interface Note {
  id: number;
  cover: string;
  title: string;
  author: string;
  course: string;
  likes: number;
}

6 字段：id/cover/title/author/course/likes——"笔记实体"——"封面 + 标题 + 作者 + 课程 + 点赞"——"完整建模"。

cover: string 封面 emoji——"📓📔📒📓"——"封面符号"——"书本色系"——"笔记的视觉"。

likes: number 点赞数——"234/189/156/142"——"社交热度"——"热门排序"——"数据驱动"。

作者昵称的"人设"——"学霸小林/思政达人/化学小王子/数学控"——"4 个创作者人设"——"学习场景"——"笔记达人"——"demo 的真实感"——"昵称 = 角色"。

五、SectionTitle：热门笔记

@Builder
SectionTitle(title: string) {
  Row() {
    Text(title).fontSize(16).fontWeight(FontWeight.Bold).fontColor(C.text)
    Blank()
    Text('更多 >').fontSize(12).fontColor(C.textDim)
  }.width('100%')
}

SectionTitle 结构：标题左 + 更多右——"热门笔记 + 更多 >"——"更多 = 查看全部"——"右侧链接"——"同 App 34"——"系列 SectionTitle"。

六、首页的交互细节与可用性分析

6.1 课程横滑的"横向浏览"

横滑课程卡——"横向浏览"——"4 卡横排"——"手势滑动"——"横向交互"——"课程推荐"。

6.2 笔记卡的信息密度

封面 + 标题 + 课程 + 作者 + 点赞——"5 类信息"——"完整笔记卡"——"信息的丰富"——"社交 + 内容"。

6.3 点赞数的"热门排序"

234/189/156/142——"点赞排序"——"热门 = 点赞多"——"从众心理"——"用户优先看高赞"——"社交背书"。

6.4 课程标签的"分类"

紫色课程 tag——"数据结构/马克思主义原理/有机化学/概率论"——"分类标识"——"按课程找"——"课程的导航"。

6.5 首页的"色彩心理学"

紫罗兰（#9B51E0）——"紫色 = 知识/学术"——"笔记 = 学习"——"紫色的书卷气"——"紫罗兰 = 文具"——"学习配色的心理"。

6.6 首页的"信息层级"

L1 品牌（Header）→ L2 课程（横滑）→ L3 内容（热门笔记）——"3 层信息"——"从品牌到课程到内容"——"渐进式披露"。

6.7 首页的"决策路径"

看课程（选课程）→ 看热门笔记（选笔记）→ 点击（看详情）→ 点赞/下载——"4 步决策"——"从课程到笔记"——"首页的转化链"。

6.8 首页的"emoji 体系"

📝📐💻🧪🌍📓📔📒——"8 个 emoji"——"笔记/4 课程/4 封面"——"emoji = 视觉"——"低成本"。

6.9 首页的"与 App 26 紫色对比"

26 AI PPT 紫 vs 35 笔记紫——"两个紫色 App"——"26 深紫 #7C3AED、35 紫罗兰 #9B51E0"——"紫色系的学习 App"——"颜色区分"——"26 管 PPT、35 管笔记"。

6.10 首页的"demo 完整性"

课程 + 热门 = 完整首页——"可浏览可点击"——"demo 的完成度"——"从课程到笔记的完整链"。

6.11 首页的"设计哲学"

首页的 3 个设计哲学：

1. 课程优先——横滑课程推荐
2. 内容优先——热门笔记列表
3. 社交优先——点赞数排序

"课程 + 内容 + 社交的首页"——"笔记平台首页的设计原则"——"从哲学看设计"。

6.12 首页的"对比与统一"

统一：4 笔记同结构（封面/标题/课程/作者/点赞）——"列表项的统一"。 对比：4 笔记数据不同（封面/标题/作者/课程/点赞）——"差异在数据"——"结构同构 + 数据异构"。

6.13 首页的"终评"

双行 Header + 课程横滑 + 热门笔记 = 完整首页——"首页的完成度"——"可上线级"——"系列内容型首页的标杆"。

6.15 首页的"内容社区"

推荐 + 热门 + 点赞——"内容社区三要素"——"发现内容 + 社交反馈"——"社区的运营"——"35 = 学习内容社区"——"社区的价值"。

6.16 首页的"课程与笔记的关联"

课程卡（高数 328 笔记）→ 笔记列表（数据结构 234 赞）——"课程分类与笔记内容"——"真实产品按课程过滤"——"demo 静态展示"——"数据的关联"——"扩展点"。

6.17 首页的"笔记封面色彩"

📓📔📒📓 书形 emoji——"4 色书"——"红蓝绿蓝"——"封面的色彩"——"笔记的识别"——"emoji = 封面"。

6.18 首页的"作者信任"

by 学霸小林——"作者 = 质量"——"学霸 = 信任"——"创作者的背书"——"用户信学霸"——"作者名 = 品牌"。

6.19 首页的"点赞心理"

234 赞 = 大家都看——"从众心理"——"高赞 = 高质量"——"社交背书"——"点赞的引导"——"热门排序的转化"。

6.20 首页的"课程 emoji 选择"

📐💻🧪🌍——"4 课程符号"——"数学尺子/编程电脑/实验烧瓶/地球英语"——"emoji = 课程语义"——"识别的直观"。

6.21 首页的"双行 Header 品牌"

"笔记交换 + 好笔记共分享"——"品牌 + 理念"——"共享理念"——"slogan 的价值"——"双行的信息"。

6.22 首页的"整卡可点"

笔记卡整卡可点——"用户随便点"——"易用性"——"Toast 反馈"——"占位跳转详情"——"操作成本低"。

6.23 首页的"课程标签复用"

课程 tag 与详情页课程一致——"跨页数据"——"数据结构/马克思主义原理"——"分类一致"——"数据连贯"。

6.24 首页的"emoji 低成本"

8 个 emoji 全覆盖——"无图片资源"——"低成本视觉"——"emoji 的演示价值"——"上线换真图"。

6.25 首页的"内容密度"

课程 4 卡 + 笔记 4 条——"8 个内容项"——"信息丰富"——"首屏可见"——"内容首页的密度"。

6.26 首页的"用户心智"

"打开 App 看笔记"——"学习场景"——"考前找笔记"——"笔记交换的心智"——"学习共享"——"场景驱动"。

七、总结：紫罗兰 + 课程横滑 + 热门笔记

App 35 首页一句话：用紫罗兰（#9B51E0）组织一个"课程 + 热门笔记"的笔记交换首页——双行 Header 用"笔记交换 + 好笔记共分享 📝"传达品牌，推荐课程横滑卡用 4 门课程 + 笔记数引导选课，热门笔记列表用封面 + 标题 + 课程标签 + by 作者 + ❤️ 点赞展示笔记社交数据。

3 个设计亮点：

1. 课程横滑卡——100 宽 emoji 卡 + 笔记数，横向浏览
2. 紫色课程标签——课程 tag 分类标识，紫色主题一致
3. 点赞社交数据——❤️ 234 等热门排序，社交背书

主题色设计逻辑：紫罗兰 = 知识/笔记/文具——"笔记 App 用紫色，因为紫色是知识学术的象征色"——与 App 26 紫色对比——"26/35 双紫的区分"——"35 的紫罗兰更亮"。

与系列呼应：双行 Header（33/34）、横滑卡（31 Chip）、SectionTitle（系列）、ForEach 列表（系列）、课程标签（34 课程栏）、点赞 emoji（系列）——"35 把系列的 Header/横滑/标签/列表手法组合出'笔记交换'场景"。

体验细节：课程横滑、笔记封面、课程标签、点赞排序——"首页的核心 = 让用户'3 秒选课程 + 5 秒选笔记'"。

可扩展性展望：真实笔记数据、搜索、课程过滤、笔记详情跳转、点赞交互、作者主页——"demo 的笔记首页骨架完整"。

七、扩展思考：首页的转化路径与设计哲学

7.1 首页的"笔记转化路径"

完整笔记浏览漏斗：

进入首页 → 看推荐课程（选课）→ 看热门笔记（点赞排序）→ 点击笔记卡 → 进详情 → 点赞/下载

"首页的转化路径"——课程横滑是"分类引导"、热门笔记是"内容推荐"、点赞数是"社交背书"——"3 个转化节点"——"从选课到下载"——"首页的笔记转化链"。

7.2 首页的"信息架构"

3 层信息：

1. L1 品牌（Header）——"笔记交换"
2. L2 课程（CourseScroll）——"什么课"
3. L3 内容（NoteList）——"什么笔记"

"3 层渐进式"——"从品牌到课程到内容"——"信息的金字塔"——用户按需深入——"渐进式信息披露"。

7.3 首页的"业务建模"

Note 模型 6 字段（id/cover/title/author/course/likes）——"6 字段建模"——"笔记的核心字段"——"最小可用集"——加下载数（downloads）、加简介（desc）、加页数（pages）即可扩展——"数据模型的扩展点"。

7.4 首页的"对比与统一"

统一：4 笔记同结构（封面/标题/课程/作者/点赞）——"列表项的统一"。 对比：4 笔记数据不同（封面/标题/作者/课程/点赞）——"差异在数据"——"结构同构 + 数据异构"。

7.5 首页的"设计哲学"

首页的 3 个设计哲学：

1. 课程优先——横滑推荐课程
2. 内容优先——热门笔记列表
3. 社交优先——点赞数驱动排序

"课程 + 内容 + 社交的首页"——"笔记平台首页的设计原则"——"从哲学看设计"——"这套方法论可直接迁移到任何内容社区类 App"。

7.7 首页的"终评"

App 35 首页综合评估——"三区结构 + 紫罗兰主题 + 完整内容链"——"首页的完成度评级"——"一个可上线级的笔记交换首页"——"系列内容型首页的标杆"——"demo 的高完成度"。

八、彩蛋：首页的细节设计

8.1 课程笔记数的"热度"

英语 412 最多——"英语 = 公共课"——"选课人数多"——"笔记数 = 课程热度"——"数据合理"——"高数 328、数据结构 256"——"课程的热度排序"。

8.2 笔记封面的"书形"

54×70 竖封面——"书的比例"——"7:9 竖向"——"笔记 = 书"——"封面的书籍感"——"视觉的封面"。

8.3 "手写版" 的标题

"数据结构完整笔记（手写版）"——"手写 = 真实感"——"学习笔记的质感"——"手写版 = 学生真实笔记"——"标题的细节"——"内容的真实"。

8.4 作者人设的"昵称"

学霸小林/思政达人/化学小王子/数学控——"4 个人设"——"学习角色"——"昵称 = 专业"——"人设的生动"——"demo 的真实感"。

8.5 "by " 前缀的"归属"

"by 学霸小林"——"by = 作者"——"归属标识"——"创作者"——"by 的惯例"——"作者 = 信任"。

8.6 课程标签的"浅紫底"

紫字 + 浅紫底——"标签的视觉"——"主题色浅色版"——"8+2 padding"——"4 圆角"——"标签的识别"。

8.7 横滑卡的"100 宽"

100 宽课程卡——"3 卡可见"——"第 4 卡半可见"——"横滑的引导"——"部分可见 = 滑动提示"——"横滑的视觉"。

8.8 点赞 emoji 的"❤️"

"❤️ 234"——"红心 = 点赞"——"社交符号"——"情感表达"——"❤️ 的通用"——"点赞的视觉"。

8.9 首页的"间距体系"

16 垂直 + 12 列表间距——"间距层级"——"区块 > 列表"——"视觉节奏"——"标准间距"。

8.10 首页的"demo 价值"

课程 + 热门 = 完整首页——"可浏览可点击"——"内容社区演示"——"首页模板"——"内容型首页沉淀"。

8.11 首页的"标题两行"

maxLines(2) 两行标题——"长标题完整展示"——"14 号 Medium"——"标题的行数控制"——"文本溢出的处理"——"内容完整优先"。

8.12 首页的"笔记数单位"

"328 笔记"——"笔记数 + 单位"——"课程内容量"——"数字信息"——"课程卡的数据"——"用户的选课参考"。

8.13 首页的"横滑手势"

Scroll 横滑——"手指横移"——"滑动手势"——"横向浏览"——"课程卡的切换"——"移动端横滑惯例"。

8.14 首页的"学习场景"

考前找笔记 → 首页课程 → 热门笔记——"学生场景"——"学习工具"——"笔记获取"——"场景驱动的设计"——"学习的价值"。

九、总结与展望

App 35 首页的核心价值：用紫罗兰打造一个"课程 + 热门笔记"的内容社区首页，让用户在 3 秒内选课、5 秒内选笔记——这是笔记/学习社区 App 首页的标准范式。

与系列对比：

App	首页主题	决策
32	共享雨伞	带什么伞
33	共享单车	骑什么车
34	打印共享	打什么
35	笔记交换	看什么笔记

"35 首页的决策是'看谁的笔记'"——"内容首页 = 内容决策"——"每个内容平台首页都在帮用户做内容决策"——"35 帮用户选笔记"。

终评：紫罗兰 + 课程横滑 + 热门笔记 = 完整笔记首页——"从配色到内容链的完整设计"——"内容型首页的标杆"。

补充说明：本篇所有代码引用均基于 35-note-exchange/entry/src/main/ets/pages/HomeTab.ets 实际源码，行号与源码一一对应；4 张实机截图分别覆盖首页首屏、高等数学课程卡点击、数据结构笔记卡点击、马原笔记卡点击四种差异场景，全部含模拟器轮廓，图床域名统一为 imgbed.devzoo.top。App 35 是系列"学习 UGC"主题的第二个 App（前有 App 34 打印资料共享），两者的首页都采用"课程/资料引导 + 内容列表"结构，构成学习共享平台的首页范式。App 35 在列表项上增加"by 作者 + ❤️ 点赞"社交信息，是系列首个带创作者与社交数据的首页，为后续社区型 App 提供了模板。