鸿蒙原生应用 ArkUI 实战：宠物领养首页的渐变 Banner 与宠物卡

App 30「智能宠物领养」首页（HomeTab），主题色 #F97316 橙色（orange），4 个 Tab 分别为首页（🐾）、宠物（🐶）、领养（📝）、我的（👤）。首页采用"分类 + 公益 Banner + 宠物列表"三区布局——Header（宠物领养/给它们一个温暖的家 🐾）+ 4 分类 Chip（全部/猫/狗/其他）+ 渐变 Banner（🐾 领养代替购买 + 本月已有 28 只宠物找到家） + SectionTitle（待领养宠物）+ 5 只宠物卡（🐱橘子-橘猫-1岁公/🐶旺财-中华田园犬-2岁母/🐱布丁-英短-6月母/🐰雪球-荷兰兔-8月公/🐶可乐-金毛-3岁公，带绿色标签亲人·健康·已绝育 + 橙色「领养」按钮）。本篇基于 30-pet-adopt/entry/src/main/ets/pages/HomeTab.ets（约 129 行）逐段拆解，附 4 张实机截图。

一、整体结构：三区"分类 + Banner + 宠物"布局

App 30 首页是"分类筛选 + 公益宣传 + 宠物列表"的三区布局——5 个 @Builder 块：

build() {
  Column() {
    this.Header()
    Scroll() {
      Column({ space: 14 }) {
        this.ChipRow()
        this.BannerCard()
        this.SectionTitle('待领养宠物')
        this.PetList()
      }
      .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)
}

4 块结构：

1. Header — "宠物领养" + 副标题
2. ChipRow — 4 分类胶囊
3. BannerCard — 渐变公益 Banner（本页特色）
4. SectionTitle('待领养宠物') + PetList — 5 只宠物

与 App 28/29 首页同构（分类 + 列表 + 特色卡）——"分类 + 实体列表 + 宣传卡 = 公益/内容类首页"——用户来"看看有什么宠物可以领养"。

主题色 #F97316 橙色——系列第三个橙色主题（App 26 暖橙/App 29 深橙后）：

• 橙色 = "温暖/爱心/希望"（领养是温暖的行为）
• 橙色 = "阳光/活力"（宠物的活力）
• 橙色 = "救助站的标识色"（动物救助常用橙/黄）

"橙色"是动物保护/领养类 App 的常用色（动物救助机构 logo 多暖色）——与 App 29 深橙（#E85D04）的区别：App 29 偏"食欲/餐饮"、App 30 偏"温暖/爱心"——"29 的橙是'吃的橙'、30 的橙是'爱的橙'"——"橙色系的两极：食欲 vs 爱心"——#F97316 比 #E85D04 更亮更鲜——"30 用更亮的橙表达生命的活力"。

BannerCard 是 App 30 首页的特色——系列首页首次出现"公益宣传卡"——"公益 Banner = 领养 App 的价值主张"——"领养代替购买"是领养类产品的核心理念——"首页 Banner 放价值观"。

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

二、Header：宠物领养品牌区

Header 是"宠物领养 / 给它们一个温暖的家 🐾"双行品牌区（与系列同款双行）：

@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)
}

"宠物领养"——产品名（App 30 的名字）。

"给它们一个温暖的家 🐾" 副标题——"公益使命"：

• 给它们——"以宠物为主体"（不是"让你领养"，而是"帮它们"）
• 温暖的家——"归宿"（宠物视角的渴望）
• 🐾——爪印 emoji（宠物的符号）

"给它们一个温暖的家"——"公益类产品的使命话术"——"以救助对象为主语"——不是"快来领养"（交易感）而是"给它们家"（公益感）——"话术的公益化"——"领养 App 的价值观表达"——副标题直接传递产品理念——"首页副标题 = 产品使命"。

@StorageProp('safeTop') 安全区适配——同系列标准。

三、ChipRow：4 分类（全部/猫/狗/其他）

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

@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%')
}

4 分类：['全部', '猫', '狗', '其他']——"宠物领养的品种分类"：

• 猫——橘猫/英短
• 狗——中华田园犬/金毛
• 其他——兔子等
• 全部——"不筛选，看所有"

"按宠物种类分类"——领养 App 的标准分类（领养人先决定"养猫还是养狗"）——"分类 = 领养决策的第一问"——"品种分类的业务逻辑"——与 App 29（中餐/快餐/面食/饮品）不同：餐饮按"类型"、领养按"物种"——"分类维度 = 领域属性"。

@State activeCat: number = 0 默认选中"全部"——"假筛选"（未联动过滤宠物）——"视觉反馈完整、数据过滤留白"。

选中态：橙色底白字 vs 白底灰字——"橙色 = 领养主题色"。

4 分类比系列其他页的 5/6 分类少——"宠物类型本就少"（猫/狗/其他三类 + 全部）——"分类数量 = 领域分类的自然数量"。

四、BannerCard：渐变公益 Banner（本页特色）

BannerCard 是 🐾 + 领养代替购买的渐变公益卡：

@Builder BannerCard() {
  Row({ space: 12 }) {
    Text('🐾').fontSize(36)
    Column({ space: 4 }) {
      Text('领养代替购买').fontSize(16).fontWeight(FontWeight.Bold).fontColor('#FFFFFF')
      Text('本月已有 28 只宠物找到家').fontSize(12).fontColor('#FFFFFF').opacity(0.85)
    }.alignItems(HorizontalAlign.Start).layoutWeight(1)
  }
  .width('100%').padding(16).borderRadius(D.rLg)
  .linearGradient({ angle: 135, colors: [[C.primary, 0.0], [C.accent, 1.0]] })
  .onClick(() => { promptAction.showToast({ message: '领养资讯' }); })
}

Banner 结构：🐾 36 号爪印 + "领养代替购买"（16 号加粗白）+ "本月已有 28 只宠物找到家"（12 号白 0.85）——"口号 + 成果"。

linearGradient({ angle: 135, colors: [[C.primary, 0.0], [C.accent, 1.0]] })——橙色 → 浅橙渐变——"系列渐变卡的又一应用"（26/27/28/29 后）——"橙色渐变 = 温暖的阳光感"——"公益 Banner 用渐变突出价值观"。

Banner 的"口号 + 成果"双层：

1. 领养代替购买——"价值观口号"（领养运动的核心主张：拒绝购买、领养救助）
2. 本月已有 28 只宠物找到家——"成果证明"（用数字让口号可信）

"口号 + 成果"的公益传播设计——"光喊口号不如给数字"——"28 只找到家"让"领养代替购买"从理念变成现实——"公益的成果可视化"——"数字的感染力"——用户看到 28 只会想"我也能帮一只"——"公益数字的号召力"。

Banner 的位置：在 Chip 之下、宠物列表之上——"价值观先行、内容随后"——"先立理念再看宠物"——"公益 App 的内容排序"。

点击反馈：弹"领养资讯"Toast——"占位跳转"（真实产品进资讯页）。

Banner 与系列渐变卡的对比：App 27 倒计时卡（时间紧迫）、App 28 天气卡（穿搭决策）、App 30 Banner（公益理念）——"渐变卡的内容角色各异"——"渐变 = 高优先级内容的通用容器"。

五、PetList：待领养宠物（本页核心）

PetList 是 5 只宠物的列表——emoji 图块 + 名称/品种 + 绿色标签 + 领养按钮：

@Builder PetList() {
  Column({ space: 12 }) {
    ForEach(this.pets, (p: Pet) => {
      Row({ space: 12 }) {
        Row() { Text(p.emoji).fontSize(40) }
        .width(64).height(64).backgroundColor(C.primarySoft).borderRadius(D.rMd).justifyContent(FlexAlign.Center)
        Column({ space: 4 }) {
          Text(p.name).fontSize(15).fontWeight(FontWeight.Medium).fontColor(C.text)
          Text(p.breed + ' · ' + p.gender + ' · ' + p.age).fontSize(12).fontColor(C.textDim)
          Row({ space: 6 }) {
            ForEach(p.tags, (t: string, idx: number) => {
              Text(t).fontSize(10).fontColor(C.ok)
                .padding({ left: 6, right: 6, top: 2, bottom: 2 })
                .backgroundColor(C.primarySoft).borderRadius(4)
            }, (t: string, idx: number) => t + idx)
          }.width('100%')
        }.alignItems(HorizontalAlign.Start).layoutWeight(1)
        Button('领养')
          .fontSize(12).fontColor('#FFFFFF').backgroundColor(C.primary)
          .borderRadius(D.rSm).height(32)
          .onClick(() => { promptAction.showToast({ message: '领养: ' + p.name }); })
      }
      .width('100%').padding(14).backgroundColor(C.card).borderRadius(D.rLg).border({ width: 1, color: C.stroke })
    }, (p: Pet) => p.id.toString())
  }.width('100%')
}

5 只宠物（每只 4 要素）：

1. 🐱 橘子（橘猫 · 公 · 1岁）——亲人/健康/已绝育
2. 🐶 旺财（中华田园犬 · 母 · 2岁）——活泼/疫苗全/已绝育
3. 🐱 布丁（英短 · 母 · 6月）——粘人/健康
4. 🐰 雪球（荷兰兔 · 公 · 8月）——温顺/健康
5. 🐶 可乐（金毛 · 公 · 3岁）——温顺/疫苗全/已绝育

宠物卡结构：40 号 emoji（64×64 浅橙底）→ 名称（15 号）+ 品种·性别·年龄（12 号灰）+ 标签行 → 领养按钮——"左图 + 中文 + 右按钮"。

绿色标签（本页设计亮点）：

ForEach(p.tags, (t: string, idx: number) => {
  Text(t).fontSize(10).fontColor(C.ok)
    .padding({ left: 6, right: 6, top: 2, bottom: 2 })
    .backgroundColor(C.primarySoft).borderRadius(4)
}, (t: string, idx: number) => t + idx)

fontColor(C.ok) 绿色标签字——"健康/亲人的绿色语义"——"为什么宠物标签用绿色？"：

• 健康——"体检合格"（绿 = 健康通行）
• 亲人——"性格好"（绿 = 放心领养）
• 已绝育——"手续齐全"（绿 = 可直接领养）

"绿色 = 领养友好度"——"宠物标签的绿色 = '放心养'"——与 App 27 优先级标签（红/金/琥珀）对比：27 用颜色分级"紧迫度"、30 用绿色统一"好感度"——"标签颜色的语义差异"——"绿色标签 = 领养的信任信号"——用户扫一眼绿色标签就知道"这宠物健康可领养"——"信任色的应用"。

标签底色用 C.primarySoft 浅橙——"绿字 + 浅橙底"的撞色组合——"主题浅色 + 功能色的组合"——比同色系（绿字绿底）更有辨识度——"标签配色的对比"。

品种信息：橘猫 · 公 · 1岁——"品种 + 性别 + 年龄三要素"——"领养决策的宠物信息"——品种（外形）、性别（偏好）、年龄（养多久）——"宠物信息的三要素"——"信息完整 = 决策有据"。

「领养」按钮（橙色底白字 32 高）——"行动入口"——点击弹"领养: 橘子"——"与 App 29 评价按钮同款设计"——"行动按钮的系列统一"。

Pet 模型（7 字段）：id/emoji/name/breed/age/gender/tags——"完整宠物实体"——tags 数组（多标签）——"字段 = 宠物信息的完整建模"。

数据合理性：

• 猫 2 只（橘子/布丁）、狗 2 只（旺财/可乐）、兔 1 只（雪球）——"猫狗为主 + 其他"——与 Chip 分类（猫/狗/其他）对应 ✓
• 已绝育/疫苗全/健康——"领养宠物的健康标签"——真实救助站的宠物都做过健康处理 ✓
• 品种多样（橘猫/田园犬/英短/荷兰兔/金毛）——"领养选择的多样性" ✓

"宠物数据与分类的对应 + 健康标签的真实感"——"demo 数据的自洽"。

点击反馈：卡片点击弹宠物名、领养按钮弹"领养: 宠物名"——"两级交互两种反馈"（同 App 29 餐厅卡）。

六、数据模型与主题体系

Pet 模型（7 字段）：

• id: number — 唯一标识（ForEach key）
• emoji: string — 宠物视觉符号
• name: string — 宠物名
• breed: string — 品种
• age: string — 年龄
• gender: string — 性别
• tags: string[] — 标签（亲人/健康/已绝育）

C 主题色在本页的运用：primary 橙色（Chip 选中/领养按钮/Banner 渐变起点）+ accent 浅橙（渐变终点）+ ok 绿（标签字）+ primarySoft 浅橙（图块底/标签底）——"橙系 + 绿色功能色"——"橙色管主题、绿色管信任"。

与 App 29 首页的对比：App 29 是"分类 + 餐厅列表"双区、App 30 是"分类 + Banner + 宠物列表"三区——"30 多了公益 Banner"——"领养 App 需要价值观展示"——"页面区数 = 产品诉求的维度"。

首页的 4 个设计亮点：

1. 渐变公益 Banner——"领养代替购买 + 28 只找到家"，价值观 + 成果数字
2. 绿色信任标签——fontColor(C.ok) 绿字标签，"健康/亲人/已绝育"的领养信任信号
3. 宠物信息三要素——品种 · 性别 · 年龄，领养决策完整依据
4. 「领养」行动按钮——橙色按钮与卡片点击分层

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

7.1 两级点击的交互设计

宠物卡有两个可点：

• 领养按钮 → "领养: 橘子"（特定动作）
• 卡片其他区域 → "橘子"（进详情）

"两个可点、两个语义"——与 App 29 餐厅卡同款——"列表行的行动分层"——真实产品：按钮直达领养申请、卡片进宠物详情——"同一行的多个入口"。

7.2 绿色标签的"信任体系"

宠物标签全是绿色——"领养前的安心检查"：

• 健康（体检通过）
• 疫苗全（免疫完成）
• 已绝育（无需手术）
• 亲人/粘人/温顺（性格确认）

"绿色标签 = 领养零障碍"——"救助站的健康台账"——"领养人的信任依据"——真实产品标签来自救助站的健康记录——"信任信息的可视化"——"绿色 = 可领养通行证"。

7.3 Banner 的"28 只"数字

"本月已有 28 只宠物找到家"——"公益成果的数字表达"——"28 的合理性"：一个救助站每月领养 20-30 只属正常——"数字的真实感"——"公益数字的分寸"（太大像吹牛、太小没说服力）——"28 恰到好处"——"数字可信 = 公益可信"。

7.4 首页的"3 秒决策"

模拟用户 3 秒扫读：

1. 第 1 秒——Banner"领养代替购买"（理念）
2. 第 2 秒——5 只宠物的 emoji（🐱🐶🐱🐰🐶）
3. 第 3 秒——结论"橘子是橘猫，看起来亲人"

"3 秒内找到心仪宠物"——"领养首页的决策路径"——分类（猫/狗）+ emoji（外形）+ 标签（健康）让用户快速筛选——"首页的筛选效率"。

7.5 字号与对比度

字号梯队：22（标题）/16（Banner 口号）/15（宠物名）/12（副标题/品种）/10（标签）——"宠物名 15 最大 = 核心信息"——对比度：橙白字（按钮/选中）高、绿标签字（信任）中、灰字（品种）辅助——"主高辅中"。

7.6 与系列首页的对比

App	首页特色区	决策
26	模板 Grid	选模板
28	天气卡	穿什么
29	餐厅列表	吃什么
30	公益 Banner	领养谁

"30 首页的决策是'领养哪只'"——"公益领养首页 = 理念 + 宠物列表"——"每个 App 首页都在帮用户完成一个决策"。

7.7 首页的"爱心氛围"

首页的公益氛围：副标题（给它们家）+ Banner（领养代替购买）+ 宠物卡（亲人/健康）——"全程的爱心表达"——"公益 App 的氛围营造"——"从文案到视觉到数据的爱心一致性"——"公益主题的贯穿"。

7.8 首页的可扩展性

• Chip 接过滤（pets.filter(p => p.breed.includes(cat))）
• 领养按钮接领养申请页
• 宠物卡接宠物详情（宠物 Tab）
• Banner 接资讯列表
• 宠物数据接救助站接口

"首页的每个静态点都有真实化路径"——"领养首页的骨架完整"。

7.9 首页的代码组织

首页 5 个 @Builder（Header/ChipRow/BannerCard/SectionTitle/PetList）——"一区块一 Builder"——build() 里 5 行调用即页面骨架——"代码可读性 = 结构即页面"——PetList 最复杂（宠物卡嵌套 ForEach）——"复杂逻辑集中封装"。

7.10 双层 ForEach 的嵌套

PetList 的双层 ForEach：

• 外层：ForEach(this.pets, ...)——5 只宠物
• 内层：ForEach(p.tags, ...)——每只宠物的标签

"宠物（外层）× 标签（内层）的嵌套"——"数据两级、渲染两级"——与 App 26 大纲、App 29 餐厅标签同构——"嵌套 ForEach 的系列手法"。

(p: Pet) => p.id.toString() 宠物 key——id 唯一稳定——"业务主键做 key"。

7.11 宠物 emoji 的"识别度"

🐱🐶🐱🐰🐶 的 emoji 序列——"每只宠物一个专属 emoji"——"emoji = 宠物的肖像"——"识别度：用户看到 🐰 知道是兔子"——"emoji 的宠物符号化"——与宠物名（橘子/旺财）双重确认——"emoji + 名字 = 视觉 + 文字的强化"——"宠物的可爱感"——emoji 宠物比真实照片更萌（零成本 + 可爱）——"emoji 的可爱经济"。

7.12 品种的"多样性设计"

橘猫/中华田园犬/英短/荷兰兔/金毛——"五类品种的多样性"——"领养选择的面"：土猫土狗（田园）+ 品种猫（英短）+ 品种犬（金毛）+ 异宠（荷兰兔）——"领养 ≠ 只有土猫土狗"——"品种多样性 = 领养选择权"——"领养的平等观"——demo 的品种分布展示了"领养也能遇到各种宠物"——"数据的故事性"。

7.13 年龄的"生命周期"

1岁/2岁/6月/8月/3岁——"宠物年龄的分布"——"幼年（6月/8月）+ 成年（1-3岁）"——"领养的年龄选择"——有人想养幼宠（可塑性强）、有人想养成年（性格稳定）——"年龄 = 领养偏好"——demo 的年龄分布覆盖幼年与成年——"数据覆盖决策维度"。

7.14 首页的"公益与商业平衡"

首页的公益氛围 vs 列表的实用——"公益理念（Banner）+ 实用信息（宠物卡）"——"公益 App 的双重功能"：传递理念（领养代替购买）+ 提供服务（找宠物）——"理念与服务的平衡"——demo 的首页既有价值观又有实用性——"公益产品的完整形态"。

7.15 首页的"单手可达"

Chip 顶部（415-516）+ 宠物列表整页滚动——"拇指操作路径"——"领养按钮在卡片右上"——"操作位置的拇指友好"——"移动端交互的拇指设计"。

7.16 首页的"色彩心理学"

橙色（#F97316）的心理学——"橙色 = 温暖 + 活力 + 友善"——"为什么橙色适合领养？"——橙色是"友善暖色"（不刺激、不冷淡）——"领养需要'亲切感'"——"宠物领养用橙色 = 家的温暖"——"配色与业务的情感匹配"。

7.17 首页的"数据流设计"

pets 数据 → 首页列表 → 宠物详情 → 领养申请——"数据的单向流动"——"从列表到详情的导航结构"——demo 各页静态但数据流向清晰——"真实产品接路由即活"。

7.18 首页的"标签体系"

宠物标签的类别：

• 健康类：健康/疫苗全——"身体没问题"
• 性格类：亲人/粘人/活泼/温顺——"性格可预期"
• 手续类：已绝育——"可直接领养"

"三类标签 = 领养的三个放心维度"——"标签的分类体系"——"从标签读懂一只宠物"——"标签 = 宠物的快速画像"——用户扫一眼标签知道"健康吗/亲人吗/能领吗"——"标签的决策价值"——与 App 29 餐厅标签（川菜/家常菜=类型）对比：29 管"是什么类型"、30 管"可不可领"——"标签语义的领域差异"。

7.19 首页的"列表密度"

5 只宠物一屏放 3 只——"列表的滚动密度"——"宠物卡的高度（约 370）"——"一屏的宠物数"——"列表密度 = 浏览效率"——宠物卡信息多（emoji/名字/品种/标签/按钮）需要足够高度——"信息量决定卡片高度"——"宠物列表的阅读节奏"。

7.20 首页的"完成度评估"

4 分类 + Banner + 5 宠物 + 标签 + 按钮——"首页的功能完整"——"从筛选到了解到行动的完整链路"——"demo 首页的完成度"——"一个可用的领养发现首页"。

7.21 首页的"产品价值"

首页的产品价值："把待领养宠物推给潜在领养人"——"宠物的曝光 = 领养的概率"——"首页是领养转化链的第一环"——"发现页的价值"——demo 的首页把 5 只宠物 + 公益理念一次呈现——"从曝光到领养的起点"。

7.22 首页的"设计总结"

App 30 首页的完整设计：双区 + Banner 三区结构 + 橙色主题 + 4 分类 + 5 宠物卡（标签/按钮）——"从结构到配色到数据的完整设计"——"首页的完成度"——"一个可用的宠物领养首页"。

7.23 首页的"首屏设计"

首屏：Header + Chip + Banner + 第一只宠物（橘子）——"首屏的信息"——"理念（Banner）+ 第一只宠物"——"首屏的展示策略"——宠物排序把最可爱的/高分放前面——"首屏的吸引力"——用户不滚动看到 Banner + 一只宠物——"首屏的钩子"。

7.24 首页的"色彩节奏"

橙色（Banner/按钮/选中）+ 绿色（标签）+ 白色（卡片）——"三色节奏"——"橙 = 行动/理念、绿 = 信任、白 = 容器"——"色彩的分工"——"首页的色彩系统"——对比鲜明不杂乱——"多色协调"。

7.25 首页的"系列创新"

公益 Banner 是系列首页首次——"价值观展示的创新"——"系列首页的演进"——从纯功能（13-28）到价值观（29 后）——"首页角色的进化"——"30 的公益首页"。

7.26 首页的"数据叙事"

5 只宠物的数据叙事：橘子（橘猫·亲人）→ 旺财（田园犬·活泼）→ 布丁（英短·粘人）→ 雪球（荷兰兔·温顺）→ 可乐（金毛·温顺）——"从猫到狗到兔的宠物图谱"——"数据讲了一个'待领养的家人'故事"——"每只宠物都有自己的名字和性格"——"人格化宠物的叙事"——"首页数据的温度"。

7.27 首页的"品牌一致性"

橙色主题贯穿全 App——首页（Banner/按钮）→ 宠物（详情）→ 领养（流程）→ 我的（渐变）——"橙色的全程统一"——"品牌色的一致性"——"用户从首页到我的页始终看到橙色"——"颜色的品牌记忆"。

7.28 首页的"色彩心理学深化"

橙色与领养的心理学关联——"橙色 = 友好 + 温暖 + 食欲 + 活力"——"领养选橙色的三个理由"：温暖（家的联想）+ 活力（生命的象征）+ 友善（不设防）——"配色的业务心理学"——"颜色即态度"。

八、总结：橙色爱心的首页设计

App 30 首页一句话：用橙色（#F97316）组织一个"分类 + 公益 Banner + 宠物列表"的领养发现页——顶部 Header 承诺"给它们一个温暖的家"，4 分类 Chip 按物种筛选，渐变 Banner 传递"领养代替购买"的价值观 + 28 只成果数字，5 只宠物卡展示健康标签 + 领养按钮，让用户快速锁定想领养的那一只。

3 个设计亮点：

1. 渐变公益 Banner——"领养代替购买 + 本月 28 只找到家"，口号 + 成果的双层公益传播
2. 绿色信任标签——fontColor(C.ok) 绿字标签（亲人/健康/已绝育），领养零障碍的信任信号
3. 宠物三要素 + 领养按钮——品种·性别·年龄完整信息 + 橙色行动按钮，从了解到行动一步到位

主题色设计逻辑：橙色 = 温暖/爱心/希望——"领养 App 用橙色，因为橙色是'有温度的颜色'"——与 App 29 深橙（食欲）区分——"橙色系的三重语义：26 创造、29 吃、30 爱"。

与系列呼应：分类 Chip（13/26/27/28/29）、渐变卡（26/27/28/29）、绿色标签（App 27 反向运用）、行动按钮（App 29）、双行 Header（系列标准）——"30 把系列的 Chip/渐变/标签手法组合出'宠物领养'场景"。

体验细节：公益价值观 Banner、绿色信任标签、宠物三要素、两级点击分层——"领养首页的核心 = 让用户'快速找到想领养的那只'"——分类 + emoji + 标签三快筛。

可扩展性展望：Chip 过滤、宠物详情跳转、领养申请跳转、救助站数据接口——"demo 的静态数据都有明确的真实化路径"。