鸿蒙原生应用 HarmonyOS ArkTS垃圾分类首页的四色入口与掌握度进度App 15「智能垃圾分类」首页HomeTab主题色#22C55E绿色4 个 Tab 分别为首页♻️、识别、分类️、我的。首页采用固定 Header 绿色渐变 HeroCard本月减碳 3 栏统计 搜索框四色分类快捷入口可回收蓝/有害红/厨余绿/其他灰 本周分类趋势条形图 4 个分类指南卡片星级/描述/掌握度进度条/学习入口/测试按钮 识别排行。本篇基于15-trash-classify/entry/src/main/ets/pages/HomeTab.ets约 318 行逐段拆解附 4 张实机截图。一、整体结构固定 Header 内容流HomeTab 与 App 14 首页骨架一致——固定 Header 在外、Scroll 内容流在内7 个 Builder 块build() { Column() { this.Header() Scroll() { Column({ space: 14 }) { this.HeroCard() this.QuickActionRow() this.WeeklyChart() this.SectionTitle(分类指南, 查看全部) this.GuideList() this.SectionTitle(识别排行, 更多) this.RankList() } .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) }7 个块按活动 → 入口 → 数据 → 指南 → 排行五段叙事HeroCard减碳活动 3 栏统计 搜索→ QuickActionRow四色分类入口→ WeeklyChart本周趋势→ SectionTitle(分类指南) GuideList4 个分类知识卡→ SectionTitle(识别排行) RankList3 条排行。与 App 14 首页对比本页是知识型首页主内容从场地列表换成分类指南列表每个分类卡带掌握度进度条 学习/测试按钮——App 14 是预约行动App 15 是学习知识。首页内容反映产品本质App 14 是工具App 15 是知识库。项目源码开源https://gitee.com/codenestFlow/HarmonyOSHub二、Header HeroCard减碳 Banner 三栏统计 搜索Header 与 App 14 同构主标题垃圾分类 Slogan智能识别绿色生活从分类开始。HeroCard 的活动横幅从校运动会报名换成了环保主题Builder HeroCard() { Column({ space: 14 }) { Row({ space: 12 }) { Text().fontSize(36) Column({ space: 4 }) { Text(本月减碳 15.6kg).fontSize(16).fontWeight(FontWeight.Bold).fontColor(#FFFFFF) Text(相当于种了 0.8 棵树).fontSize(12).fontColor(#FFFFFF).opacity(0.85) } .alignItems(HorizontalAlign.Start).layoutWeight(1) Text(详情 ).fontSize(12).fontColor(#FFFFFF) } .width(100%) .onClick(() { promptAction.showToast({ message: 查看减碳详情 }); }) Row() { ForEach(this.stats, (s: StatItem) { Column({ space: 4 }) { Text(s.value).fontSize(22).fontWeight(FontWeight.Bold).fontColor(#FFFFFF) Text(s.label).fontSize(11).fontColor(#FFFFFF).opacity(0.8) } .layoutWeight(1) }, (s: StatItem) s.label) } .width(100%) Row({ space: 8 }) { TextInput({ placeholder: 搜索垃圾名称..., text: this.keyword }) .onChange((val: string) { this.keyword val; }) .backgroundColor(#33FFFFFF).borderRadius(D.rSm).height(40) .layoutWeight(1).placeholderColor(#FFFFFF).placeholderFont({ size: 13 }) .fontColor(#FFFFFF) Text() .fontSize(16).width(40).height(40).textAlign(TextAlign.Center) .backgroundColor(#FFFFFF).borderRadius(D.rSm) .onClick(() { promptAction.showToast({ message: this.keyword.length 0 ? 搜索: this.keyword : 请输入关键词 }); }) } .width(100%) } .width(100%) .padding(16) .borderRadius(D.rLg) .linearGradient({ angle: 135, colors: [[C.primary, 0.0], [C.accent, 1.0]] }) }本月减碳 15.6kg / 相当于种了 0.8 棵树是环保类 App 的经典文案设计——把抽象数字翻译成具象场景减碳 → 种树。用户对15.6kg没概念但对0.8 棵树有画面感。这种数字具象化文案在环保/健康/理财类 App 中被广泛使用步数→卡路里、省钱→杯奶茶、减碳→种树。3 栏统计本月分类 328 / 准确率 92% / 减碳量 15.6kg——与 App 14预约/时长/卡路里同为量 → 质 → 果三角但 App 15 多了准确率质量维度体现分类准不准是用户关心的核心。搜索框与 App 14 完全同构半透明白底 白色占位 右侧白方块点击 Toast 反馈。三、QuickActionRow四色分类入口本页特色QuickActionRow 是 4 个分类入口每个入口带自己的主题色这是与 App 14 最大的差异Builder QuickActionRow() { Row() { ForEach(this.quickActions, (q: QuickAction) { Column({ space: 6 }) { Row() { Text(q.emoji).fontSize(26) } .width(48).height(48) .backgroundColor(q.color 1A).borderRadius(24) .justifyContent(FlexAlign.Center) Text(q.label).fontSize(11).fontColor(C.textSub) } .layoutWeight(1) .onClick(() { promptAction.showToast({ message: q.label }); }) }, (q: QuickAction) q.id.toString()) } .width(100%) .padding({ top: 14, bottom: 14 }) .backgroundColor(C.card).borderRadius(D.rMd) .border({ width: 1, color: C.stroke }) }4 个分类的颜色编码数据自带 color 字段private quickActions: QuickAction[] [ { id: 1, emoji: ♻️, label: 可回收物, color: #3B82F6 }, { id: 2, emoji: ⚠️, label: 有害垃圾, color: #EF4444 }, { id: 3, emoji: , label: 厨余垃圾, color: #22C55E }, { id: 4, emoji: ️, label: 其他垃圾, color: #9CA3AF } ];可回收物 → 蓝#3B82F6国际标准可回收蓝桶有害垃圾 → 红#EF4444危险警示红桶厨余垃圾 → 绿#22C55E生态绿桶其他垃圾 → 灰#9CA3AF中性灰桶颜色完全对标中国垃圾分类的四色桶国家标准蓝红绿灰——颜色即知识用户看入口颜色就记住分类标准。这是主题色应用于数据语义的典范。背景色q.color 1A用颜色码 1A拼出 10% 透明度的同色浅底如#3B82F61A淡蓝——比 App 14 的C.primarySoft单一浅绿更高级每个分类的图标块是自己的浅色颜色层次更丰富。borderRadius(24)正圆图标块 layoutWeight(1)等分。点击弹q.label可回收物等——轻反馈策略。四、WeeklyChart本周分类趋势WeeklyChart 与 App 14 完全同构7 天条形图 平均 68%Builder WeeklyChart() { Column({ space: 12 }) { Row() { Text(本周分类趋势).fontSize(15).fontWeight(FontWeight.Bold).fontColor(C.text) Blank() Text(平均 68%).fontSize(12).fontColor(C.primary) } .width(100%) Row({ space: 4 }) { ForEach(this.barData, (b: BarItem) { Column({ space: 6 }) { Stack({ alignContent: Alignment.Bottom }) { Column() .width(18).height(b.value) .linearGradient({ angle: 180, colors: [[C.primary, 0.0], [C.accent, 1.0]] }) .borderRadius(4) } .width(24).height(90) Text(b.day).fontSize(10).fontColor(C.textDim) } .layoutWeight(1) .alignItems(HorizontalAlign.Center) }, (b: BarItem) b.day) } .width(100%) } .width(100%) .padding(14) .backgroundColor(C.card).borderRadius(D.rMd) .border({ width: 1, color: C.stroke }) }数据一 50 / 二 70 / 三 45 / 四 85 / 五 60 / 六 90 / 日 75。周六 90 最高、周三 45 最低——周六休息日垃圾多、分类也多周三工作日最少。平均 68% (50704585609075)/7 ≈ 68数据有数学依据。Stack({ alignContent: Alignment.Bottom })柱子从底部长起来 渐变绿C.primary → C.accent——与 App 13/14 相同的条形图三件套。五、SectionTitle GuideList4 个分类指南卡GuideList 是首页的知识主内容——4 个分类卡每个含 emoji 图标、名称、星级、描述、物品数、掌握度进度条、学习入口、测试按钮Builder GuideList() { Column({ space: 12 }) { ForEach(this.guides, (g: Guide) { Column({ space: 10 }) { Row({ space: 12 }) { Row() { Text(g.emoji).fontSize(28) } .width(56).height(56) .backgroundColor(g.color 1A).borderRadius(D.rMd) .justifyContent(FlexAlign.Center) Column({ space: 4 }) { Row({ space: 6 }) { Text(g.name).fontSize(15).fontWeight(FontWeight.Medium).fontColor(C.text) Row({ space: 1 }) { ForEach([0, 1, 2, 3, 4], (i: number) { Text(i g.rating ? ★ : ☆) .fontSize(11).fontColor(i g.rating ? C.warn : C.textDim) }, (i: number) i.toString()) } } .width(100%) Text(g.desc).fontSize(12).fontColor(C.textDim) } .alignItems(HorizontalAlign.Start).layoutWeight(1) Text(g.items).fontSize(11).fontColor(C.primary) } .width(100%) Row({ space: 8 }) { Text(掌握度).fontSize(11).fontColor(C.textDim) Progress({ value: g.progress, total: 100 }) .color(g.color).backgroundColor(C.cardSoft) .layoutWeight(1).height(6) Text(g.progress %).fontSize(11).fontColor(C.textSub) } .width(100%) Row() { Text(点击学习 ).fontSize(11).fontColor(C.primary) Blank() Button(开始测试) .fontSize(11).fontColor(#FFFFFF).backgroundColor(g.color) .borderRadius(D.rSm).height(28) .onClick(() { promptAction.showToast({ message: g.name 测试 }); }) } .width(100%) } .width(100%) .padding(14) .backgroundColor(C.card).borderRadius(D.rMd) .border({ width: 1, color: C.stroke }) .onClick(() { promptAction.showToast({ message: g.name }); }) }, (g: Guide) g.id.toString()) } .width(100%) }5.1 4 个分类的数据设计private guides: Guide[] [ { id: 1, emoji: ♻️, name: 可回收物, desc: 纸张、塑料、金属、玻璃等, items: 8 类物品, progress: 85, rating: 5, color: #3B82F6 }, { id: 2, emoji: ⚠️, name: 有害垃圾, desc: 电池、灯管、药品、油漆等, items: 6 类物品, progress: 60, rating: 4, color: #EF4444 }, { id: 3, emoji: , name: 厨余垃圾, desc: 剩饭剩菜、果皮、蛋壳等, items: 12 类物品, progress: 92, rating: 5, color: #22C55E }, { id: 4, emoji: ️, name: 其他垃圾, desc: 烟头、纸巾、陶瓷等, items: 5 类物品, progress: 45, rating: 3, color: #9CA3AF } ];数据故事的讲究厨余垃圾12 类物品、掌握度 92%、5 星——最常接触、最熟悉的分类每天吃饭都产生可回收物8 类、85%、5 星——第二熟悉有害垃圾6 类、60%、4 星——少接触、略不熟其他垃圾5 类、45%、3 星——最不熟悉、最易混掌握度与星级的匹配星级高5★对应掌握度高85%/92%星级低3★对应掌握度低45%——数据自洽。这种掌握度低 → 引导学习的设计让用户一眼看出我最该学的是其他垃圾。5.2 掌握度进度条官方 Progress 分类色Row({ space: 8 }) { Text(掌握度).fontSize(11).fontColor(C.textDim) Progress({ value: g.progress, total: 100 }) .color(g.color).backgroundColor(C.cardSoft) .layoutWeight(1).height(6) Text(g.progress %).fontSize(11).fontColor(C.textSub) }Progress 组件 每类自己的颜色.color(g.color)——蓝色进度条可回收、红色有害、绿色厨余、灰色其他。进度条颜色与分类色一致用户扫一眼颜色就能对号入座。进度条 百分比数字双通道85% 数字 进度条色弱用户也能读。5.3 学习入口 测试按钮Row() { Text(点击学习 ).fontSize(11).fontColor(C.primary) Blank() Button(开始测试) .fontSize(11).fontColor(#FFFFFF).backgroundColor(g.color) .borderRadius(D.rSm).height(28) .onClick(() { promptAction.showToast({ message: g.name 测试 }); }) }学习 → 测试闭环左侧点击学习 入口主色绿字 右侧开始测试按钮按钮颜色跟随分类色.backgroundColor(g.color)——蓝色卡片的按钮是蓝色红色卡片的按钮是红色。按钮色跟随数据是数据驱动 UI的又一体现。学习 测试是知识型 App 的标准双操作先学再测、以测促学。整个分类指南卡 知识展示描述/物品数 进度追踪掌握度 行动入口学习/测试功能完整。六、RankList识别排行RankList 与 App 14 同构3 条排行 奖牌 emoji 次数 增长率Builder RankList() { Column({ space: 10 }) { ForEach(this.rankings, (r: RankItem) { Row({ space: 12 }) { Text(r.emoji).fontSize(22) Text(r.name).fontSize(14).fontColor(C.text).fontWeight(FontWeight.Medium).layoutWeight(1) Column({ space: 2 }) { Text(r.count).fontSize(12).fontColor(C.textSub) Text(r.trend).fontSize(11).fontColor(C.ok) } .alignItems(HorizontalAlign.End) } .width(100%) .padding({ left: 14, right: 14, top: 12, bottom: 12 }) .backgroundColor(C.card).borderRadius(D.rSm) .border({ width: 1, color: C.stroke }) .onClick(() { promptAction.showToast({ message: r.name }); }) }, (r: RankItem) r.id.toString()) } .width(100%) }3 条排行 厨余垃圾 156 次 18% / 可回收物 98 次 12% / 其他垃圾 74 次 6%。识别次数排行与掌握度的呼应厨余垃圾识别最多156 次且掌握度最高92%——用得越多越熟其他垃圾识别最少74 次且掌握度最低45%——用得越少越生疏。排行与指南的数据互相印证首页的数据故事自洽完整。与 App 14 的差异App 14 排行是场地预约次数App 15 是垃圾识别次数——排行对象反映业务类型。七、四色系统的设计价值App 15 首页最值得学习的是**四色分类系统**——同一个颜色码贯穿全页颜色分类出现位置蓝 #3B82F6可回收物快捷入口图标块、指南图标块、掌握度进度条、测试按钮红 #EF4444有害垃圾同上绿 #22C55E厨余垃圾同上灰 #9CA3AF其他垃圾同上一个分类一个颜色全页 4 处复用入口/图标/进度条/按钮。用户只需记住蓝可回收、红有害、绿厨余、灰其他整页信息自动关联。颜色即语义是数据可视化的最高境界——比给每张卡单独配随机颜色高级得多。实现方式Guide接口带color: string字段数据驱动渲染g.color 1A背景、.color(g.color)进度条、.backgroundColor(g.color)按钮。颜色进数据让 UI 代码零分支——没有if (name 可回收) color blue这种硬编码加新分类只需加一条数据。八、与 App 14 首页的对比总结维度App 14 运动预约首页App 15 垃圾分类首页主题色绿 #16A34A绿 #22C55EHero 活动校运动会报名本月减碳种树快捷入口4 个运动同色4 个分类四色主列表场地星级进度预约指南星级掌握度学习/测试排行榜场地预约排行垃圾识别排行特色机制预约进度条四色编码 学习测试闭环同一套内容流首页模板第三次复用App 13 音乐/14 运动/15 环保每次换主题、换数据、换模块——模板复用 主题演化是系列化 demo 的核心方法论。九、知识型首页的设计要点App 15 首页是系列第一个知识型首页几个值得沉淀的设计原则学测闭环每个知识卡都有学习 测试双操作用户从看到练一步到位掌握度可视化进度条 百分比让用户知道自己会多少有成长感低掌握度引导其他垃圾 45% 掌握度最低 → 用户自然想去学它——数据引导行动比随机推荐高级数字具象化减碳 15.6kg 种 0.8 棵树让环保成果可感知激励用户持续使用这套知识卡片 掌握度 学测闭环模板可复用到背单词单词卡掌握度测试、学英语、学习强国、驾考宝典、刷题类 App——任何知识学习场景。十、扩展建议首页的搜索框目前只弹 Toast真实项目应联动 GuideList// 伪代码搜索过滤指南 private filteredGuides(): Guide[] { if (this.keyword.trim() ) return this.guides; return this.guides.filter(g g.name.includes(this.keyword.trim()) || g.desc.includes(this.keyword.trim())); }点击学习 应跳转到分类详情页显示该分类的全部物品清单开始测试应进入测验页选择题模式排行应支持日/周/月切换。每一个伪交互都是一个真实功能的占位——demo 的每一处 Toast 都值得在真实项目中落地。十一、环保主题的视觉与文案设计App 15 首页在主题一致性上做得非常彻底值得总结 3 个手法1. 文案的系统性。首页文案全部围绕环保展开Slogan智能识别绿色生活从分类开始、Hero 活动本月减碳 15.6kg/相当于种了 0.8 棵树、统计标签本月分类/准确率/减碳量、指南卡掌握度/点击学习/开始测试、排行识别次数/增长率——没有一个词跳出环保语境。如果 Slogan 是智能分类高效便捷就违和了。文案即主题是主题一致性的第一层。2. 视觉的系统性。绿色主色#22C55E贯穿Header、HeroCard 渐变、趋势图柱子、按钮、Tab 高亮——主色全页复用。四色编码蓝红绿灰作为业务色补充分类入口、指南卡、进度条、按钮——业务色按分类复用。**主色表达品牌业务色表达语义**是双色系统的正确姿势。3. 图标的系统性。♻️可回收⚠️有害厨余️其他——4 个分类的 emoji 是全 App 统一约定首页入口、指南卡、识别页选择器、分类页记录都用同一套。用户在首页记住厨余识别页看到 自动关联。跨页图标一致是主题一致性的第三层。三层一致性文案/视觉/图标叠加让 App 15 的环保感深入骨髓——比只换主题色高级得多。十二、学习路径设计从看到练App 15 首页的分类指南隐含了一条学习路径设计浏览首页看趋势、看排行建立我在用的感觉 → 点开分类指南看描述、看物品数建立我该学什么的认知 → 点击学习进入知识详情建立我学会了的体验 → 开始测试验证掌握度建立我会了的成就感 → 掌握度提升进度条 45% → 60% → 85%可视化成长浏览 → 认知 → 学习 → 测试 → 成长五步闭环每一步都有 UI 载体趋势图/指南卡/学习入口/测试按钮/掌握度进度条。学习路径是知识型产品学习类 App、驾考类 App、理财课程类 App的核心设计——比把所有内容堆在首页高级得多。掌握度进度条是这条路径的进度反馈其他垃圾 45% 最低 → 用户最想学它 → 学完测试 → 掌握度涨 → 成就感。低掌握度引导学习是数据驱动的个性化推荐不靠算法靠 UI 呈现让用户自己发现。真实项目可加学习提醒掌握度 60% 的分类首页显示该分类有待学习内容红点学完测试通过解锁知识百科成就与我的页成就墙联动——首页引导 → 学习页完成 → 成就页激励的三页闭环。十三、首页可复用模板总结App 15 首页模板固定 Header标题 环保 Slogan Scroll( HeroCard减碳活动 3 栏统计 搜索框 QuickActionRow四色分类入口 WeeklyChart本周趋势 平均值 SectionTitle(分类指南) GuideList四色指南卡 掌握度 学测 SectionTitle(识别排行) RankList3 条排行 )与 App 14 首页模板对比完全同构7 块差异只在数据语义场地→指南、预约→掌握度、排行对象。内容流首页模板已稳定复用 3 次App 13/14/15——这是系列化 demo 最核心的资产一套模板 主题数据 无限应用。十四、小结App 15 首页解析完毕。四色编码系统 掌握度可视化 学测闭环 三层主题一致性是四大亮点配合绿色环保主题减碳/种树/分类让这个首页既是视觉示范又是知识产品。