鸿蒙原生应用实战：用 ArkUI 搭共享雨伞首页 —— 天气卡与伞点卡

App 32「校园共享雨伞」首页（HomeTab），主题色 #4A90D9 晴空蓝（sky blue），4 个 Tab 分别为首页（☂️）、地图（🗺️）、借还（🔄）、我的（👤）。首页采用"Header + 天气卡 + 借伞点列表"三区布局——白色 Header（"共享雨伞"标题） + 🌧️ 渐变天气卡（"今日有小雨/出行建议携带雨伞/借伞 >"） + 附近借伞点 SectionTitle + 4 张伞点卡（教学楼 A 楼大厅 120m 8/12、图书馆正门 260m 3/15、学生一食堂 180m 0/10、体育馆入口 420m 5/8，每张含 ☂️ emoji 头像 + 名称 + 距离 + "可借/空"状态徽章 + 可用进度条）。本篇基于 32-campus-umbrella/entry/src/main/ets/pages/HomeTab.ets（约 98 行）逐段拆解，附 4 张实机截图。

一、整体结构：三区"Header + 天气卡 + 借伞点"布局

App 32 首页是"品牌 Header + 天气提示 + 借伞点列表"的三区布局——5 个 @Builder 块：

build() {
  Column() {
    this.Header()
    Scroll() {
      Column({ space: 14 }) {
        this.WeatherCard()
        this.SectionTitle('附近借伞点')
        this.PointList()
      }
      .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 — 白色背景 + "共享雨伞"标题
2. WeatherCard — 渐变天气提示卡
3. SectionTitle('附近借伞点') + PointList — 4 个伞点列表

与 App 31 首页对比：App 31 是"搜索 + Banner + 分类 + 饮品"四区（点单型）、App 32 是"Header + 天气 + 伞点"三区（工具型）——"31 是消费决策首页、32 是位置服务首页"——"点单首页 vs 工具首页"——"首页区数 = 业务复杂度"：点单（搜索/优惠/分类/加购）信息密度高、共享（位置/状态/距离）信息密度低——"两种首页范式"。

主题色 #4A90D9 晴空蓝——系列第一个"晴空蓝"主题：

• 晴空蓝 = "雨后晴天/雨伞下仰望天空"（伞的颜色联想）
• 晴空蓝 = "清爽/干净/可信赖"（公共设施的标识色）
• 晴空蓝 = "校园主色"（与校园建筑/校徽蓝色系吻合）

"晴空蓝"是共享/工具类 App 的常见色（共享单车/共享充电宝的蓝色系 logo）——与 App 30 蓝绿（#2BB673）对比：30 偏"绿/宠物"、32 偏"蓝/工具"——"蓝绿两色系在公共服务场景的细分"——#4A90D9 是较深的蓝——"公共设施的稳重蓝"——与校园建筑的蓝瓦、共享雨伞的金属杆色调一致——"雨伞配色的实用感"。

@StorageProp('safeTop') / safeBottom 安全区适配——同系列标准做法，在 EntryAbility 里 setOrCreate。

项目源码开源：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: 12 })
  }.width('100%').backgroundColor(C.card)
}

Header 结构：白色背景（C.card #FFFFFF）+ 22 号加粗黑色"共享雨伞"标题——"极简品牌头"——"为什么首页 Header 用品牌名而非搜索框？"——工具型 App 不需要搜索（用户场景明确：找伞点）——"品牌头 = 工具 App 的标配"。

Text('共享雨伞').fontSize(22).fontWeight(FontWeight.Bold) 标题——22 号是系列 Header 标题的标准字号（与 App 28/29/30 一致）——"系列 Header 字号规范"——"为什么 22 号？"——比内容文字 16 大、比 Banner 标题 16 也大——"标题的视觉层级"——加粗表示权重——"Bold = 标题的标识"。

@StorageProp('safeTop') safeTop 顶部安全区——safeTop + 10 顶部 padding 加上刘海区域——"安全区适配的标准做法"——同系列其他 App。

Column() { Text(...) } 单文字 Column——"为什么不用 Row + Spacer？"——只有一行字，Column 更简单——"单元素用 Column 避免 Row 复杂度"——"ArkUI 的轻量化容器选择"。

Header 与系列其他首页的对比：

• App 26：品牌名 + 副标题（双行）
• App 27：品牌名 + 副标题
• App 28：品牌名 + 副标题
• App 29：品牌名
• App 30：品牌名
• App 31：搜索 + 🛒（工具型）
• App 32：品牌名（极简型）

"32 的 Header 是系列最简"——"工具型 App 的极简品牌头"——"不需要副标题、不需要搜索、不需要工具图标"——只有品牌名一个元素——"极简 = 业务清晰"。

三、WeatherCard：🌧️ 渐变天气提示卡

WeatherCard 是 🌧️ + 今日有小雨的渐变天气卡：

@Builder
WeatherCard() {
  Row({ space: 12 }) {
    Text('🌧️').fontSize(36)
    Column({ space: 4 }) {
      Text('今日有小雨').fontSize(16).fontWeight(FontWeight.Bold).fontColor('#FFFFFF')
      Text('出行建议携带雨伞').fontSize(12).fontColor('#FFFFFF').opacity(0.85)
    }.alignItems(HorizontalAlign.Start).layoutWeight(1)
    Text('借伞 >').fontSize(12).fontColor('#FFFFFF')
  }
  .width('100%').padding(16).borderRadius(D.rLg)
  .linearGradient({ angle: 135, colors: [[C.primary, 0.0], [C.accent, 1.0]] })
  .onClick(() => { promptAction.showToast({ message: '前往借伞' }); })
}

WeatherCard 结构：🌧️ 36 号雨云 + "今日有小雨"（16 号加粗白）+ "出行建议携带雨伞"（12 号白 0.85 透明）+ "借伞 >"（12 号白）——"天气图标 + 主题 + 提示 + 入口"。

linearGradient({ angle: 135, colors: [[C.primary, 0.0], [C.accent, 1.0]] })——#4A90D9 蓝 → #7BB3F0 浅蓝 135 度渐变——"系列渐变卡的又一种颜色"（红橙粉/蓝绿蓝各种）——"蓝色渐变 = 天空/水"——"渐变卡 = 提示卡"——"渐变的视觉吸引力"。

promptAction.showToast({ message: '前往借伞' }) 点击反馈——点击整个卡片弹 Toast"前往借伞"——"卡片整块可点"——与 App 31 优惠 Banner 一致（整卡点击进活动页）——"渐变 Banner = 行为召唤"——"借伞 > 的箭头设计"——"借伞 >"是点击入口的视觉提示——"箭头 = 跳转的通用符号"。

"今日有小雨"的天气主题——"工具 App 的人性化提示"——首页主动提示天气（带伞/带伞）——"为什么首页要展示天气？"——共享雨伞与天气强相关（下雨才需要伞）——"业务与天气的强耦合"——demo 用"今日有小雨"作主题既贴业务又美化卡片——"Banner 文案 = 业务的语境"。

"出行建议携带雨伞"的条件说明——"为什么 Banner 要写条件？"——"今日有小雨"是状态、"出行建议携带雨伞"是建议——"状态 + 建议的 Banner 完整信息"——"Banner 的说服力"——告诉用户该做什么（带伞/借伞）——"行为召唤的转化"。

"借伞 >" 的位置——右侧白色文字 + 箭头——"右侧入口的位置"——视觉上明显（白色在蓝色渐变上对比强）——"操作入口的视觉优先级"。

opacity(0.85) 副标题的次要感——"白字 0.85 透明 = 弱化"——主标题（16 加粗实白） vs 副标题（12 透明白）——"透明度区分信息层级"——"0.85 的次要感"——比 0.7 更弱、比 1.0 更弱但仍可读——"Banner 副标题的透明设计"。

borderRadius(D.rLg) D.rLg = 20 大圆角——"20px 圆角 = 系列渐变卡标准"（与 App 26/27/28/29/30/31 一致）——"渐变卡的大圆角设计"——"圆角 = 柔和感"。

Column({space: 4}).alignItems(HorizontalAlign.Start).layoutWeight(1) 标题区——layoutWeight(1) 占满中间空间——"标题区占据中间"——左边图标、右边"借伞 >"、中间标题——"三段式布局"——"Row 的三段式"。

四、PointList：4 个借伞点 + 状态徽章 + 进度条

PointList 是 4 个借伞点的列表——每项含 emoji 头像、名称、距离、状态徽章、可用进度条：

@Builder
PointList() {
  Column({ space: 12 }) {
    ForEach(this.points, (p: UmbrellaPoint) => {
      Column({ space: 10 }) {
        Row({ space: 12 }) {
          Row() { Text(p.emoji).fontSize(28) }
          .width(52).height(52).backgroundColor(C.primarySoft).borderRadius(D.rSm).justifyContent(FlexAlign.Center)
          Column({ space: 4 }) {
            Text(p.name).fontSize(14).fontWeight(FontWeight.Medium).fontColor(C.text)
            Text(p.dist).fontSize(12).fontColor(C.textDim)
          }.alignItems(HorizontalAlign.Start).layoutWeight(1)
          Text(p.available > 0 ? '可借' : '空').fontSize(12)
            .fontColor(p.available > 0 ? C.ok : C.textDim).fontWeight(FontWeight.Medium)
        }.width('100%')
        Row({ space: 8 }) {
          Text('可用 ' + p.available + '/' + p.total).fontSize(12).fontColor(C.textSub)
          Progress({ value: p.available * 100 / p.total, total: 100 }).color(C.primary).layoutWeight(1)
        }.width('100%')
      }
      .width('100%').padding(14).backgroundColor(C.card).borderRadius(D.rLg).border({ width: 1, color: C.stroke })
      .onClick(() => { promptAction.showToast({ message: p.name }); })
    }, (p: UmbrellaPoint) => p.id.toString())
  }.width('100%')
}

每张伞点卡的结构（两段式）：

第一段（Row）：52×52 浅蓝圆角头像（☂️ 28 号 emoji）+ 名称（14 号加粗黑）+ 距离（12 号灰）+ 状态徽章（12 号绿/灰）——"卡片头部"。

第二段（Row）："可用 8/12"（12 号灰）+ 蓝色 Progress 进度条——"进度条的可视化"。

4 个借伞点（每点 4 要素）：

名称	距离	状态	可用/总数
教学楼 A 楼大厅	120m	可借	8/12
图书馆正门	260m	可借	3/15
学生一食堂	180m	空	0/10
体育馆入口	420m	可借	5/8

"学生一食堂 0/10" 的"空"状态——"库存为 0 的视觉化"——徽章从绿色"可借"变为灰色"空"——"状态徽章的业务表达"——"空 = 不可借"——"空伞点的提示价值"——告诉用户去别处借——"缺货状态的用户引导"。

Progress({ value: p.available * 100 / p.total, total: 100 }) 进度条——"库存可视化"——把 available / total 比例转成进度条——"进度条的库存表达"——3/15 ≈ 20% 进度条、8/12 ≈ 67% 进度条、5/8 ≈ 62% 进度条、0/10 = 0% 进度条——"进度条的数值映射"。

color(C.primary) 蓝色进度条——"主题色进度的统一"——"进度条颜色 = 品牌色"——与 App 31 饮品页的红色进度条对比：31 红 32 蓝——"进度条颜色的品牌一致"。

borderRadius(D.rLg) 20 大圆角卡片——"伞点卡的大圆角"——同系列渐变卡标准——"卡片的柔和感"——"伞点卡 = 高识别卡片"。

border({ width: 1, color: C.stroke }) 1px 边框——#EAEEF6 极浅灰边框——"卡片的细边框"——"细边框 = 卡片轮廓"——与背景 #F2F5FB 区分——"边框的弱区分"。

Row().width(52).height(52).backgroundColor(C.primarySoft).borderRadius(D.rSm) 头像容器——52×52 浅蓝圆角（#E8F0FE）——"主题色浅色版头像"——"primarySoft = 主题色 8% 不透明度"——"浅色头像背景"——emoji 居中（justifyContent Center）——"头像 = 主题色软背景 + emoji"。

Text(p.emoji).fontSize(28) emoji 头像——28 号 ☂️ ——"emoji = 雨伞图标"——4 个伞点都是 ☂️ 同色 emoji——"emoji 的统一"——也可以用不同 emoji 区分（如 🏫 📖 🍜 🏟️）——"demo 简化的取舍"。

Text(p.dist) 距离（"120m"）——12 号灰——"距离的字号"——比名称（14）小、比副标题（12）等同——"距离作为次要信息"——"距离 = 用户决策因素"——"120m"在校园里是步行 1-2 分钟的距离——"校园距离的常识"。

onClick(() => promptAction.showToast({ message: p.name })) 点击反馈——点击弹伞点名称 Toast——"点击反馈的简单化"——"点击 = 看伞点详情"（占位跳转）——"Toast 反馈的快捷"。

p.available > 0 ? '可借' : '空' 状态条件渲染——"三目运算符的状态分支"——"条件渲染 = 业务表达"——"颜色也联动"：fontColor(p.available > 0 ? C.ok : C.textDim)——绿色 vs 灰——"颜色的状态表达"——"绿色 = 可用、灰色 = 不可"。

D.rSm = 10 头像圆角——比卡片的 20 小——"圆角层级"——大圆角外层、小圆角内层——"嵌套圆角"——D.rLg 20 / D.rMd 14 / D.rSm 10 三级圆角——"系列圆角体系"。

数据合理性：120m / 260m / 180m / 420m ——按 4 个地点的合理距离排序（教学楼/图书馆/食堂/体育馆在校园内的方位）——"demo 数据的真实感"——8/12、3/15、0/10、5/8 的库存数字也合理（图书馆 15 个伞位最多、一食堂 10 个）——"数据的业务建模"——每个伞点有 total 容量字段——"库存模型的完整"——total 字段说明每个点有固定的伞桩位——"共享雨伞的物理模型"。

五、UmbrellaPoint 数据模型

UmbrellaPoint 接口（5 字段）：

interface UmbrellaPoint {
  id: number;
  emoji: string;
  name: string;
  dist: string;
  available: number;
  total: number;
}

字段说明：

• id: number — 唯一标识（ForEach key 用 p.id.toString()）
• emoji: string — 视觉符号（☂️）
• name: string — 伞点名称
• dist: string — 距离（带"m"单位）
• available: number — 当前可用数
• total: number — 总容量

dist: string 而非 number——"距离作为字符串"——含"m"单位——"单位 = 字符串的一部分"——UI 直接拼接——"单位与数字一起管理"。

5 字段 vs App 31 Drink 的 5 字段：

• App 31: id/emoji/name/price/tag/hot（6 字段）
• App 32: id/emoji/name/dist/available/total（6 字段）

"6 字段的两种建模"——"字段 = 业务复杂度"——点单需要 price+tag+hot（价格/分类/热销）、共享需要 dist+available+total（距离/库存/容量）——"数据建模的业务驱动"。

available * 100 / total 进度比例——"进度计算的百分比"——直接转 Progress.value ——"数据 → 进度的映射"。

六、SectionTitle：附近借伞点

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

极简 SectionTitle——16 号加粗黑色"附近借伞点"——"系列 SectionTitle 标准"——与 App 26/27/28/29/30/31 一致——"标题组件的复用"——@Builder 抽离可复用。

与 App 31 对比：App 31 的 SectionTitle 是"热门饮品 / 更多 >"（含右侧链接），App 32 只有标题——"32 更极简"——"工具型 vs 内容型的 SectionTitle"——工具型不需要"更多"链接（列表已全显）。

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

7.1 两类点击的交互设计

首页有 3 类可点元素：

• Header 标题 — 无 onClick（纯品牌展示）
• WeatherCard — 整卡点击 → "前往借伞" Toast
• 伞点卡 — 整卡点击 → 伞点名称 Toast

"整卡可点"的设计——"卡片 = 点击单元"——"卡片整体作为按钮"——"统一点击热区"——用户随便点哪都触发——"卡片交互的极简"。

7.2 进度条的"库存可视化"

available / total 比例进度——"库存的视觉表达"——3/15 ≈ 20% 进度条、8/12 ≈ 67% 进度条——"进度 = 库存"——"用户一眼看出哪个伞点库存多"——"3/15 vs 8/12 的对比"——8/12 看着更长（虽然 3/15 是 20% 但视觉上很短）——"进度条的视觉误差"——实际上 8/12 = 67% 比 3/15 = 20% 长很多——"绝对数字 vs 相对比例"。

7.3 状态徽章的"业务传达"

"可借"（绿）vs "空"（灰）——"两态业务状态"——"绿色 = 可用、灰色 = 不可"——"状态的色彩编码"——C.ok #2BB673 绿色——"系列 OK 色"——同 App 26/27/28/29/30/31。

7.4 距离的"位置感"

120m / 260m / 180m / 420m——"距离的直观"——120m 步行 1-2 分钟、260m 3 分钟、180m 2 分钟、420m 5 分钟——"距离 = 步行时间"——用户快速判断该去哪个——"距离的决策权重"——"距离优先 vs 库存优先"——实际场景：用户会选最近且可借的——"多因素决策"。

7.5 4 个伞点的"位置分布"

教学楼/图书馆/食堂/体育馆——"校园的 4 类场所"——学习（教学楼+图书馆）+ 生活（食堂）+ 运动（体育馆）——"校园场景的全覆盖"——"伞点的位置逻辑"——4 类场所都有伞点满足不同需求——"校园设施的完整性"。

7.6 天气卡的"信息聚合"

🌧️ + 文字 + 借伞 >——"一个卡片含 3 类信息"——天气图标（视觉）+ 文字（语义）+ 入口（操作）——"卡片的信息密度"——"Banner 设计的综合"。

7.7 Header 的"品牌重量"

"共享雨伞"标题——22 号加粗——"品牌的视觉重量"——"工具型 App 的品牌优先"——共享类 App 需要品牌（用户要信任）——"品牌 = 信任"。

7.8 4 个伞点的"差异化"

4 个伞点不重复——名称、距离、可用数都不同——"数据的多样性"——"demo 的真实感"——不是简单的循环——"数据建模的丰富"。

7.9 首页的"色彩心理学"

晴空蓝（#4A90D9）的心理学——"蓝色 = 冷静 + 信任 + 公共"——"为什么共享类 App 用蓝色？"——共享单车/充电宝/雨伞的 logo 都是蓝色系——"蓝色 = 公共服务的标志色"——"蓝色的可信赖感"——"公共设施配色的科学"——demo 用晴空蓝正是基于这个原理——"配色不是随意的，是业务的视觉选择"。

7.10 整卡可点的"误触风险"

伞点卡整卡可点——"用户点错位置也响应"——例如点进度条也会弹 Toast——"误触 vs 误操作"——"卡片交互的边界"——理想是只有特定区域可点（如"导航 >"按钮）——"demo 简化的取舍"——但整体可点降低用户操作成本——"易用性 vs 精确性"。

7.11 进度条的"色彩信息层级"

蓝色进度条 + 灰底——"进度条的双色"——进度（蓝）vs 剩余（灰）——"完成的视觉表达"——"进度条的双色语义"——"颜色 = 状态"。

7.12 距离的"单位约定"

"m" 字符串后缀——"距离的单位"——米为单位（m）——校园用米不用公里——"距离尺度的场景适配"——km 用于城市间、m 用于校园内——"单位的场景化"。

7.13 头像的"emoji 化"

☂️ emoji 作为伞点图标——"emoji 的低成本实现"——比图片资源轻量——"emoji vs 图标"——demo 阶段用 emoji、上线时换 SVG——"emoji 的占位价值"——4 个伞点都用 ☂️，实际产品可换 🏫📖🍜🏟️ 区分——"demo 的统一简化"。

7.14 伞点卡的"信息层级"

两段式卡片：头部（图标+名称+状态）+ 底部（库存+进度）——"卡片的信息分层"——"信息层级的视觉组织"——头部是"是什么"、底部是"有多少"——"信息结构的逻辑"。

7.15 天气卡的"位置"

天气卡在 Header 之下、伞点之上——"信息的优先级排序"——"天气 > 伞点"——"天气的强提示"——"为什么天气在最上？"——共享雨伞与天气强相关（下雨才需要借）——"业务与天气的强耦合"——"天气的转化价值"。

7.16 4 个伞点的"步行时间"

伞点	距离	步行时间
教学楼 A 楼大厅	120m	1-2 分钟
学生一食堂	180m	2 分钟
图书馆正门	260m	3 分钟
体育馆入口	420m	5 分钟

"距离的步行映射"——120m 1-2 分钟（最快）、420m 5 分钟（最远）——"距离 = 时间"——"距离的相对值"——"用户可读懂"——"距离的可决策性"。

7.17 4 个伞点的"库存"

3/15、8/12、0/10、5/8——"4 个库存数字"——"库存的差异"——8/12 最多、0/10 最少（空）——"库存的相对值"——"用户一眼看出哪个最充足"——"库存的视觉对比"。

7.18 状态徽章的"用户引导"

"空"状态徽章——"用户看到'空'会怎么做？"——"不去这个伞点"——"状态 = 决策"——"状态的用户引导"——"空状态的价值"——节省用户时间——"信息 = 效率"。

7.19 主题色的"公共感"

#4A90D9 晴空蓝——"蓝色 = 公共"——银行/政府/医院多用蓝色——"蓝色的权威感"——"工具型 App 选蓝色的原因"——"蓝色 = 可信赖"。

7.20 天气卡的"行为召唤"

"借伞 >"——"行为召唤（CTA）"——"CTA = 转化入口"——"Banner 的核心目的"——"借伞 > 的方向性"——箭头 > 表示前进/跳转——"箭头的方向语言"。

7.21 4 个伞点的"emoji 简化"

4 个伞点都用 ☂️——"emoji 的统一"——"视觉的统一感"——"差异在文字不在图标"——"demo 的简化策略"——4 个图标如果用不同 emoji 会增加视觉负担——"统一的认知成本"。

7.22 距离的"信息层级"

"120m"（12 号灰）vs 名称（14 号）——"距离作为次要信息"——"距离的字号小于名称"——"信息的优先级"——名称优先、距离次要——"信息层级的视觉表达"。

7.23 整卡可点的"易用性"

伞点卡整卡可点——"用户随便点哪都响应"——"易用性 > 精确性"——"操作成本低"——"demo 阶段的简化"——实际产品可只让"导航"或"详情"可点——"demo 简化的取舍"。

7.24 进度条的"完成度传达"

3/15 = 20% 的进度——"20% 看起来很短"——"用户看到'短的进度'知道库存少"——"进度 = 库存"——"视觉的库存传达"——比纯数字"3"更直观——"进度条的图形优势"。

7.25 伞点卡的"对比性"

4 个伞点的对比维度：

• 距离（120/180/260/420m）
• 库存（8/12、0/10、3/15、5/8）
• 状态（可借×3 + 空×1）

"用户选哪个？"——"近 + 可借 = 最佳"——教学楼 A 楼大厅 120m + 8/12 是最佳选择——"多维决策"——"用户的智能选择"。

八、总结：晴空蓝工具首页设计

App 32 首页一句话：用晴空蓝（#4A90D9）组织一个"Header + 天气 + 伞点"的三区工具首页——白色 Header 显示"共享雨伞"品牌名，🌧️ 渐变天气卡提示"今日有小雨/出行建议携带雨伞"引导借伞，4 个伞点列表用 emoji 头像 + 名称 + 距离 + 状态徽章 + 进度条展示校园借伞点全貌。

3 个设计亮点：

1. 🌧️ 渐变天气卡——蓝色 135° 渐变 + 天气图标 + 主题 + 提示 + 借伞 > 入口
2. 状态徽章——绿色"可借"/灰色"空"两态业务状态
3. 库存进度条——available / total 比例可视化，蓝色主题色

主题色设计逻辑：晴空蓝 = 雨后晴天/校园建筑——"工具型 App 用蓝色，因为蓝色是公共服务的标志色"——与 App 31 珊瑚红（点单）对比——"红蓝两色系管吃喝借"——"32 的晴空蓝是系列最'冷'的蓝"。

与系列呼应：Header 品牌头（26/27/28/29/30）、渐变天气卡（30 公益 Banner/31 优惠 Banner）、SectionTitle（系列）、状态徽章 ok/灰（系列）、进度条（31 饮品）、ForEach 列表（系列）——"32 把系列的 Header/Banner/状态/进度条手法组合出'共享工具'场景"。

体验细节：天气主题、状态徽章、距离优先级、库存进度——"工具首页的核心 = 让用户'3 秒锁定最近的伞点 + 看清库存'"。

可扩展性展望：天气 API、距离计算、实时库存、扫码借伞、押金支付、信用积分——"demo 的工具首页骨架完整"。

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

8.1 首页的"借伞转化路径"

完整借伞漏斗：

进入首页 → 看到天气卡 → 点击"借伞 >" → 跳到借还 Tab → 扫码借伞
       → 或：进入首页 → 看伞点列表 → 选最近的 → 走到伞点 → 扫码

"首页的转化路径"——天气卡是"主动转化入口"（点击即跳借还）、伞点列表是"被动浏览入口"（看 → 决定去哪）——"两种入口的双向设计"——满足不同决策风格的用——"转化路径的多样化"。

8.2 首页的"信息架构"

信息层级：

1. L1 品牌（Header）——"是什么 App"
2. L2 天气（WeatherCard）——"今天要不要带伞"
3. L3 位置（SectionTitle）——"附近有什么"
4. L4 详情（伞点卡）——"具体在哪儿、库存多少"

"4 层信息架构"——"从抽象到具体"——品牌 → 主题 → 分类 → 详情——"信息的金字塔"——用户按需深入——"渐进式信息披露"。

8.3 首页的"业务建模"

数据模型 6 字段（id/emoji/name/dist/available/total）——"6 字段建模"——"业务字段的精简"——共享雨伞最核心的字段只有这 6 个——"最小可用集"——加状态（status）字段、加位置（lat/lng）字段、加借还次数（count）字段即可扩展——"数据模型的扩展点"。

8.4 首页的"对比与统一"

统一：4 个伞点结构一致（头像 + 名称 + 距离 + 状态 + 进度）——"列表项的统一"——"列表项的同构"。

对比：4 个伞点数据不同（名称/距离/库存）——"列表项的差异化"——"差异在数据不在结构"——"声明式 UI 的列表价值"——结构一样、数据驱动——"结构同构 + 数据异构"。

8.5 首页的"设计哲学"

首页的 3 个设计哲学：

1. 场景优先——天气决定是否带伞（业务与场景耦合）
2. 位置优先——距离是用户决策的第一因素
3. 库存优先——库存是用户决策的第二因素

"场景 + 位置 + 库存的工具首页"——"共享类首页的设计原则"——"从哲学看设计"——"这套方法论可直接迁移到任何共享类 App"。

8.7 首页的"终评"

App 32 首页综合评估——"三区结构 + 晴空蓝主题 + 完整工具交互"——"首页的完成度评级"——"一个可上线级的工具首页"——"系列工具型首页的标杆"——"demo 的高完成度"。

九、彩蛋：天气卡的细节设计

9.1 "今日有小雨" 的文案选择

为什么不写"中雨"或"大雨"？——"小雨"的程度温和——中雨/大雨视觉冲击太强——"小雨 = 刚好需要伞"——"天气的程度营销"——文案与借伞业务匹配——"Banner 文案的业务适配"。

9.2 "出行建议携带雨伞" 的语气

"建议" 而非 "必须"——"温和的语气"——"建议 = 给用户选择权"——"命令式语气让人反感"——"建议的语气"——"Banner 的语气设计"。

9.3 "借伞 >" 的方向性

">" 箭头向右——"向右 = 前进"——"箭头 = 跳转的视觉语言"——"借伞 >" 是经典的 CTA 表达——"CTA 文案的简练"**。

9.4 渐变 135° 的角度

135° 角（左上到右下）——"渐变角度的方向感"——"135° = 阳光照射感"——"渐变角度的视觉心理"——"渐变的方向语言"。

9.5 16 padding 的卡片内边距

WeatherCard padding(16) ——"16 是卡片标准 padding"——"卡片的呼吸感"——"内边距的视觉舒适"——"Banner 内部空间"。

十、总结与展望

App 32 首页的核心价值：用晴空蓝打造一个"天气 + 伞点"的工具首页，让用户在 3 秒内看清天气、找到最近的伞点、判断库存——这是共享类 App 首页的标准范式。

与系列对比：

App	首页主题	决策
26	AI PPT	写什么
27	通知	提醒什么
28	穿搭	穿什么
29	餐厅	吃什么
30	公益	帮什么
31	饮品	喝什么
32	共享雨伞	带什么伞

"32 首页的决策是'带不带伞 + 去哪借'"——"工具首页 = 决策辅助"——"每个 App 首页都在帮用户完成一个决策"——"32 帮用户决定借不借伞、去哪借"。

终评：晴空蓝 + 天气卡 + 4 伞点 + 状态 + 进度 = 完整工具首页——"从配色到信息架构的完整设计"——"工具首页的标杆"。