鸿蒙原生应用 ArkUI 实战：骑行首页的统计卡与三列车辆 Grid

App 33「校园自行车租赁」首页（HomeTab），主题色 #2D9CDB 青蓝（cyan blue），4 个 Tab 分别为首页（🚲）、地图（🗺️）、骑行（⏱️）、我的（👤）。首页采用"双行 Header + 统计卡 + 车辆网格"三区布局——白色双行 Header（"校园骑行"22 号 + "扫码即走，绿色出行 🚲"副标题） + SummaryCard 3 统计卡（5 可用车辆绿 / 1 维修中橙 / 36 累计骑行(h)蓝） + SectionTitle + 3 列 6 车 Grid（🚲 普通自行车 ¥1/时 可用🔋100 / 🛴 电动滑板 ¥3/时 可用🔋85 / 🚲 山地车 ¥2/时 维修中 / 🛴 电动滑板 ¥3/时 可用🔋60 / 🚲 折叠车 ¥1.5/时 可用🔋100 / 🚲 双人车 ¥4/时 已租🔋90，每项含 emoji 图块 + 类型 + 价格 + 状态色 + 🔋电量）。本篇基于 33-campus-bike/entry/src/main/ets/pages/HomeTab.ets（约 111 行）逐段拆解，附 4 张实机截图。

一、整体结构：三区"Header + 统计 + 车辆"布局

App 33 首页是"品牌 Header + 数据统计 + 车辆网格"的三区布局——5 个 @Builder 块：

build() {
  Column() {
    this.Header()
    Scroll() {
      Column({ space: 14 }) {
        this.SummaryCard()
        this.SectionTitle('附近车辆')
        this.BikeGrid()
      }
      .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. SummaryCard — 3 统计卡（可用/维修/累计）
3. SectionTitle('附近车辆') + BikeGrid — 3 列 6 车网格

与 App 32 首页对比：App 32 是"单行 Header + 天气卡 + 4 伞点列表"、App 33 是"双行 Header + 3 统计 + 3 列 Grid"——"33 首页比 32 多了统计卡和网格"——"共享工具 vs 共享工具"——但 33 信息更密——"从列表到网格"——32 伞点用 1 列 List、33 车辆用 3 列 Grid——"两种布局的密度"——"网格 = 更多信息"。

主题色 #2D9CDB 青蓝——与 App 32 #4A90D9 晴空蓝的细微区别：

• 32 晴空蓝 = 较深的蓝（#4A90D9）
• 33 青蓝 = 更亮更青的蓝（#2D9CDB）

"青蓝 vs 晴空蓝"——"两种蓝色"——32 是"雨后晴空"、33 是"天空的青蓝"——"蓝的细分"——但两者都是"共享/公共"的蓝色系——"蓝色 = 共享工具"——"32/33 双蓝对比"——#2D9CDB 更接近共享单车的经典蓝色（哈啰/青桔单车同款）——"共享单车的品牌蓝"。

双行 Header 是 App 33 首页的特色——系列首页从 App 26-30 的"品牌名 + 副标题"到 App 31/32 的简化，App 33 回归双行并加入业务 slogan——"扫码即走，绿色出行 🚲"——"共享单车的宣传语"——"绿色出行 = 共享单车的价值主张"。

项目源码开源：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)
}

Header 结构：白色背景 + 主标题（"校园骑行"22 号加粗黑）+ 副标题（"扫码即走，绿色出行 🚲"12 号灰）——"双行品牌头"。

Text('校园骑行') 22 号主标题——"品牌名"——"校园骑行 vs 校园自行车租赁"——首页用简称"校园骑行"、About 用全称"校园自行车租赁"——"简称与全称"——"首页用简称更友好"。

Text('扫码即走，绿色出行 🚲') 12 号灰副标题——"slogan 副标题"——"扫码即走 = 便利性"——"绿色出行 = 环保价值"——"🚲 = 业务 emoji"——"slogan = 业务主张"——"副标题的内容选择"。

padding({ top: this.safeTop + 10, bottom: 4 }) 主标题 padding——safeTop + 10 顶部避让、bottom 4 与副标题间距——"双行的 padding 分配"。

padding({ left: D.pad, right: D.pad, bottom: 12 }) 副标题 padding——左右 16、底部 12——"副标题的底部留白"——"双行 Header 的间距体系"。

Column() 双行容器——"为什么用 Column？"——两行文字垂直排列——"双行 = Column"——"双行 Header 的结构"。

与 App 32 Header 对比：

• App 32：单行"共享雨伞"（22 号）
• App 33：双行"校园骑行 + 扫码即走绿色出行"

"双行 vs 单行"——"33 更多信息"——主标题（品牌）+ 副标题（slogan）——"双行的信息量"——"工具型 App 的品牌 + 主张"。

三、SummaryCard：3 统计卡

SummaryCard 是 可用/维修/累计 3 个统计卡：

@Builder
SummaryCard() {
  Row({ space: 10 }) {
    Column({ space: 4 }) {
      Text('5').fontSize(22).fontWeight(FontWeight.Bold).fontColor(C.ok)
      Text('可用车辆').fontSize(11).fontColor(C.textDim)
    }.layoutWeight(1).padding({ top: 14, bottom: 14 })
    .backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke })
    Column({ space: 4 }) {
      Text('1').fontSize(22).fontWeight(FontWeight.Bold).fontColor(C.warn)
      Text('维修中').fontSize(11).fontColor(C.textDim)
    }.layoutWeight(1).padding({ top: 14, bottom: 14 })
    .backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke })
    Column({ space: 4 }) {
      Text('36').fontSize(22).fontWeight(FontWeight.Bold).fontColor(C.primary)
      Text('累计骑行(h)').fontSize(11).fontColor(C.textDim)
    }.layoutWeight(1).padding({ top: 14, bottom: 14 })
    .backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke })
  }.width('100%')
}

SummaryCard 结构：Row 容器（10 间距）+ 3 个 Column 统计卡——"3 等宽统计行"。

3 个统计卡：

数值	标签	颜色
5	可用车辆	绿（ok）
1	维修中	橙（warn）
36	累计骑行(h)	青蓝（primary）

Column({ space: 4 }).layoutWeight(1) 3 等分——"layoutWeight(1) = 3 等宽"——"统计的公平展示"。

Text('5').fontSize(22).fontWeight(FontWeight.Bold).fontColor(C.ok) 22 号加粗绿数值——"可用 5 辆"——"绿色 = 可用"——"数值的视觉焦点"。

Text('1').fontColor(C.warn) 橙色"维修中 1"——"橙色 = 维修提醒"——"橙色的语义"——"维修 = 需要关注"。

Text('36').fontColor(C.primary) 青蓝"累计骑行 36h"——"品牌色统计"——"累计 = 用户数据"——"36h = 累计骑行时长"。

3 统计的业务含义：

• 可用车辆 5——当前可借的（供决策）
• 维修中 1——需要维修的（供维护）
• 累计骑行 36h——用户累计（供激励）

"3 统计 = 3 视角"——"库存 + 维护 + 用户"——"共享单车的 3 数据"——"首页统计的选择"。

padding({ top: 14, bottom: 14 }) 14 padding 上下——"统计卡的紧凑"——"14 = 标准"。

backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke }) 白底 14 圆角 1px 边框——"统计卡的卡片感"——"同系列小卡标准"。

与 App 32 首页对比：App 32 没有统计卡、App 33 有 3 统计卡——"33 首页多统计"——"统计卡 = 数据概览"——"首页的数据化"。

与 App 32 我的页 StatRow 对比：

• App 32 我的：12/95/¥50/0（4 统计）
• App 33 首页：5/1/36（3 统计）

"首页 vs 我的的统计"——"33 把统计放首页"——"首页统计 = 全站概览"——"我的统计 = 个人数据"——"统计的位置选择"。

四、BikeGrid：3 列 6 车网格（本页核心）

BikeGrid 是 3 列 Grid 的 6 辆车——每辆含 emoji 图块、类型、价格、状态色、🔋电量：

@Builder
BikeGrid() {
  Grid() {
    ForEach(this.bikes, (b: Bike) => {
      GridItem() {
        Column({ space: 6 }) {
          Row() { Text(b.emoji).fontSize(36) }
          .width('100%').height(60).backgroundColor(C.cardSoft).borderRadius(D.rSm).justifyContent(FlexAlign.Center)
          Text(b.type).fontSize(13).fontColor(C.text).maxLines(1)
            .textOverflow({ overflow: TextOverflow.Ellipsis }).width('100%')
          Text(b.price).fontSize(11).fontColor(C.textDim)
          Row() {
            Text(b.status).fontSize(10).fontColor(b.statusColor)
            Blank()
            if (b.battery > 0) {
              Text('🔋' + b.battery).fontSize(10).fontColor(C.textDim)
            }
          }.width('100%')
        }
        .width('100%').padding(10).backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke })
        .onClick(() => { promptAction.showToast({ message: b.type }); })
      }
    }, (b: Bike) => b.id.toString())
  }
  .columnsTemplate('1fr 1fr 1fr').columnsGap(10).rowsGap(10).width('100%')
}

每张车卡的结构：

• 60 高 emoji 图块（36 号 🚲/🛴 居中，浅青 C.cardSoft 圆角）
• 类型（13 号黑，maxLines 1 截断）
• 价格（11 号灰，"¥1/时"）
• 状态 + 🔋电量行（10 号状态色 + Blank 弹性 + 🔋电量）

6 辆车（每辆 5 要素）：

emoji	类型	价格	状态	电量
🚲	普通自行车	¥1/时	可用（绿）	🔋100
🛴	电动滑板	¥3/时	可用（绿）	🔋85
🚲	山地车	¥2/时	维修中（红）	—
🛴	电动滑板	¥3/时	可用（绿）	🔋60
🚲	折叠车	¥1.5/时	可用（绿）	🔋100
🚲	双人车	¥4/时	已租（橙）	🔋90

columnsTemplate('1fr 1fr 1fr') 3 列 Grid——"3 列 = 高密度"——"6 车 = 2 行 3 列"——"3 列网格 = 浏览效率"——与 App 31 饮品 2 列对比——"3 列 vs 2 列"——"31 饮品信息多 2 列、33 车辆信息少 3 列"——"列数 = 信息密度"。

if (b.battery > 0) 电量条件渲染——"维修中无电量显示"——山地车 battery=0 不显示 🔋——"条件渲染电量"——"0 电量 = 非电动车"——山地车是普通自行车没有电量概念——"条件渲染的业务逻辑"——"普通车 vs 电动车"。

Text('🔋' + b.battery) 电量显示——"🔋 + 百分比"——"100/85/60/90"——"电量的可视化"——"电动车的续航"——"用户选车看电量"。

Text(b.status).fontColor(b.statusColor) 状态色——"3 种状态色"：

• 可用（绿 C.ok）
• 维修中（红 C.danger）
• 已租（橙 C.warn）

"3 状态的颜色编码"——"绿色 = 可用、红 = 维修、橙 = 已租"——"状态即颜色"——"用户一眼识别"。

Text(b.price) 价格（"¥1/时"）——"按小时计费"——"¥1/¥2/¥3/¥4/¥1.5"——"价格的梯度"——"普通车便宜、双人车贵"——"价格 = 车型"。

Row().width('100%').height(60).backgroundColor(C.cardSoft).borderRadius(D.rSm) 60 高 emoji 图块——"36 号大 emoji"——"浅青图块"——"图块的居中"（justifyContent Center）——"卡片头部"。

maxLines(1) + textOverflow 类型截断——"单行省略"——"3 列窄卡的类型截断"——"文本溢出处理"。

Blank() 弹性占位——"状态和电量两端对齐"——"Blank 的弹性"——"两端分布的布局"。

onClick(() => promptAction.showToast({ message: b.type })) 点击反馈——点击弹车型 Toast——"整卡可点"——"占位跳转"——"Toast 反馈"。

Bike 模型（7 字段）：

interface Bike {
  id: number;
  emoji: string;
  type: string;
  price: string;
  status: string;
  statusColor: string;
  battery: number;
}

7 字段 vs App 32 UmbrellaPoint 6 字段——"33 多 1 个 battery"——"电动车有电量"——"battery = 33 特色"。

字段说明：

• id/emoji/type — 标识
• price — 价格（含"¥/时"）
• status + statusColor — 状态 + 颜色
• battery — 电量百分比

statusColor: string 颜色内联——同 App 32 的 typeColor——"颜色 = 数据"。

battery: number 电量数值——"0 = 无电池（普通车）"——"100/85/60/90 = 电动车"——"battery 的业务建模"。

6 车的"业务多样性"：

• 2 种 emoji（🚲 自行车 ×4 + 🛴 滑板 ×2）
• 5 种车型（普通/电动滑板/山地/折叠/双人）
• 3 种状态（可用×4 + 维修×1 + 已租×1）
• 4 种价格（¥1/¥1.5/¥2/¥3/¥4）

"6 车的丰富"——"车型/状态/价格的多样"——"demo 的数据建模"——"一辆车一个故事"。

数据合理性：

• 普通自行车 ¥1/时（最便宜）
• 电动滑板 ¥3/时（贵）
• 双人车 ¥4/时（最贵，双人）
• 山地车维修中（battery 0 不显示电量）

"价格与车型"——"普通车便宜、电动贵"——"双人车最贵"——"定价的合理"——"维修中的真实"——"demo 的真实感"。

五、SectionTitle：附近车辆

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

极简 SectionTitle——16 号加粗黑色"附近车辆"——"系列 SectionTitle 标准"——与 App 26-32 一致——"标题组件的复用"——"@Builder 抽离"。

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

6.1 3 统计卡的数据呈现

5/1/36——"3 个数字"——"可用/维修/累计"——"3 视角的数据"——"统计卡 = 数据概览"——"数字即信息"。

6.2 状态色的三色编码

绿/红/橙——"3 状态 3 色"——"可用 = 绿、维修 = 红、已租 = 橙"——"颜色即语义"——"状态的颜色体系"——"用户秒懂"。

6.3 电量的条件渲染

if (b.battery > 0)——"0 电量不显示"——"普通车 vs 电动车"——"条件渲染的业务逻辑"——"数据驱动显示"。

6.4 价格的价格梯度

¥1/¥1.5/¥2/¥3/¥4——"5 个价格梯度"——"普通车便宜、电动贵"——"价格 = 车型价值"——"用户对比选车"。

6.5 3 列网格的密度

1fr 1fr 1fr 3 列——"高密度网格"——"6 车 2 行"——"一屏看全"——"浏览效率"——"网格 = 高效浏览"。

6.6 双行 Header 的品牌主张

"校园骑行 + 扫码即走绿色出行"——"品牌 + 主张"——"slogan 的宣传"——"绿色出行的环保"——"双行的信息量"。

6.7 整卡可点的易用性

车卡整卡可点——"用户随便点哪都响应"——"易用性 > 精确"——"Toast 反馈"——"占位跳转"。

6.8 emoji 图块的识别

🚲🛴 的 emoji——"两种车型"——"emoji = 车型"——"识别度"——"自行车 vs 滑板"——"emoji 的车型符号"。

6.9 电量显示的决策价值

🔋100/85/60/90——"电量的决策"——"选满电的车"——"续航 = 决策因素"——"共享电动的电量焦虑"——"电量的透明"。

6.10 3 统计的颜色

绿/橙/蓝——"3 统计 3 色"——"可用绿、维修橙、累计蓝"——"颜色 = 业务"——"统计的颜色编码"。

6.11 维修中的处理

山地车维修中——"维修车不显示电量"——"维修状态的特殊"——"用户避开维修车"——"维修的提示"。

6.12 6 车的布局

3 列 2 行——"6 车的网格布局"——"1 屏 6 车"——"信息完整"——"不滚动"——"首屏全显"。

6.13 价格的红色系

价格灰（textDim）——"价格灰色而非红色"——"33 价格灰 vs 31 价格红"——"价格的颜色选择"——"33 的灰色价格 = 次要"。

6.14 状态 + 电量的同行

状态左、电量右——"Blank 弹性两端"——"同行信息"——"状态 + 电量的并排"——"紧凑的底部行"。

6.15 首页的"色彩心理学"

青蓝（#2D9CDB）的心理学——"青蓝 = 共享单车的经典蓝"——"哈啰/青桔的蓝"——"蓝色 = 公共/共享"——"蓝色 = 信任"——"共享单车的配色共识"——"配色的业务选择"。

6.16 首页的"决策路径"

看统计（5 可用）→ 看 Grid（选车）→ 点击（看详情）→ 去骑行 Tab（扫码）——"4 步决策"——"从概览到行动"——"首页的转化路径"。

6.17 首页的"信息层级"

L1 品牌（Header）→ L2 数据（统计）→ L3 车辆（Grid）——"3 层信息"——"从品牌到数据到车辆"——"渐进式披露"。

6.18 首页的"系列创新"

3 列 Grid 是系列首页首次——"33 首页的创新"——"高密度网格首页"——"工具型首页的形态"——"系列首页的丰富"。

6.19 首页的"绿色出行"

"绿色出行 🚲" slogan——"环保价值主张"——"共享单车 = 环保"——"绿色出行的宣传"——"slogan 的价值观"。

6.20 首页的"数据流"

bikes 数组 → Grid → 骑行页状态 → 我的页统计——"数据单向流"——"从展示到操作"——"demo 的数据链"。

6.21 首页的"维修中价值"

山地车维修中——"维修状态的信息价值"——"用户避开维修车"——"维护人员找维修车"——"状态的双向价值"——"维修 = 运营数据"——"共享单车的维护"——"维修状态的运营意义"。

6.23 首页的"电量焦虑"

🔋100/85/60/90——"电动车的电量焦虑"——"用户怕半路没电"——"电量 = 安全感"——"满电 = 首选"——"电量的消费心理"——"共享电动的续航营销"——"电量透明的价值"。

6.24 首页的"首屏信息"

首屏：Header + 3 统计 + 6 车（3 列 2 行）——"首屏全显"——"不滚动"——"信息完整"——"首屏 = 全部"——"共享单车的首屏设计"——"一屏看全的决策"。

6.25 首页的"颜色层级"

绿色（可用）> 橙色（已租）> 红色（维修）——"状态色的优先级"——"绿色最多（4 辆）"——"橙红少量"——"主次分明"——"颜色的分布"——"大多数可用 = 好印象"。

6.26 首页的"demo 完整性"

统计 + 网格 + 状态 + 电量 + 价格——"首页信息完整"——"5 类信息"——"一个可用的共享单车首页"——"demo 的完成度"——"用户从首页获取全部选车信息"。

七、总结：青蓝 + 双行 + 统计 + 网格

App 33 首页一句话：用青蓝（#2D9CDB）组织一个"双行 Header + 3 统计 + 3 列车辆"的工具首页——双行 Header 用"校园骑行 + 扫码即走绿色出行"传达品牌主张，3 统计卡用绿/橙/蓝展示可用/维修/累计数据，3 列 6 车 Grid 用 emoji 图块 + 类型 + 价格 + 状态色 + 🔋电量让用户快速选车。

3 个设计亮点：

1. 双行品牌 Header——"校园骑行" + "扫码即走绿色出行 🚲" slogan
2. 3 统计卡——可用（绿）/ 维修（橙）/ 累计（蓝）3 视角数据
3. 3 列高密度 Grid——6 车 2 行 + 状态色 + 🔋电量条件渲染

主题色设计逻辑：青蓝 = 共享单车的经典蓝——"共享单车 App 用青蓝，因为这是行业的品牌共识"——与 App 32 晴空蓝对比——"32/33 双蓝的细分"——"33 的青蓝更接近单车品牌"。

与系列呼应：双行 Header（26-30）、统计卡（32 我的）、SectionTitle（系列）、ForEach Grid（31 饮品）、状态色（系列）、条件渲染电量（系列 if）——"33 把系列的 Header/统计/Grid/状态手法组合出'共享单车'场景"。

体验细节：slogan 品牌、3 统计概览、状态三色、电量显示、价格梯度——"首页的核心 = 让用户'3 秒看完库存 + 5 秒选车'"。

可扩展性展望：真实车辆数据、GPS 定位、电量实时刷新、扫码开锁、骑行计费、车辆报修——"demo 的单车首页骨架完整"。

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

7.1 首页的"借车转化路径"

完整借车漏斗：

进入首页 → 看 3 统计（5 可用）→ 看 Grid（选车）→ 点击车卡（看详情）
       → 切到骑行 Tab → 扫码开锁 → 骑行 → 结束锁车

"首页的转化路径"——统计卡是"概览入口"、车卡是"详情入口"、骑行 Tab 是"执行入口"——"3 个入口的协同"——"从概览到执行"——"首页是借车转化链的第一环"。

7.2 首页的"信息架构"

3 层信息：

1. L1 品牌（Header）——"校园骑行"
2. L2 数据（SummaryCard）——"现在有多少车"
3. L3 车辆（BikeGrid）——"具体什么车"

"3 层渐进式"——"从品牌到数据到车辆"——"信息的金字塔"——用户按需深入——"渐进式信息披露"。

7.3 首页的"业务建模"

Bike 模型 7 字段（id/emoji/type/price/status/statusColor/battery）——"7 字段建模"——"业务字段的完整"——共享单车最核心的字段——"最小可用集"——加位置（lat/lng）、加编号（sn）、加报修（repair）字段即可扩展——"数据模型的扩展点"。

7.4 首页的"对比与统一"

统一：6 车同结构（图块/类型/价格/状态/电量）——"列表项的统一"。 对比：6 车数据不同（车型/状态/价格/电量）——"差异在数据不在结构"——"结构同构 + 数据异构"——"声明式 UI 的列表价值"。

7.5 首页的"设计哲学"

首页的 3 个设计哲学：

1. 数据优先——3 统计卡展示可用/维修/累计
2. 密度优先——3 列网格一屏看全
3. 状态优先——绿/红/橙 3 状态色

"数据 + 密度 + 状态的首页"——"共享单车首页的设计原则"——"从哲学看设计"——"这套方法论可直接迁移到任何共享类 App"。

7.7 首页的"终评"

App 33 首页综合评估——"三区结构 + 青蓝主题 + 完整统计与网格"——"首页的完成度评级"——"一个可上线级的共享单车首页"——"系列共享型首页的标杆"——"demo 的高完成度"。

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

8.1 电量的"条件渲染"

if (b.battery > 0)——"为什么山地车不显示电量？"——"山地车是普通自行车没有电池"——"battery = 电动车专属"——"条件渲染的业务逻辑"——"0 = 无电池"——"数据的业务映射"。

8.2 价格的"斜杠单位"

"¥1/时"——"按小时计费"——"时 = 计价单位"——"共享单车的计费"——"单位的信息"——"价格的可读性"。

8.3 "校园骑行" 的命名

"校园骑行" vs "校园自行车租赁"——"简称 vs 全称"——"首页简称"——"About 全称"——"命名的场景适配"——"简称的友好"。

8.4 双行 Header 的"间距"

主标题 bottom 4 + 副标题 bottom 12——"双行的间距体系"——"4 = 紧凑、12 = 底部留白"——"间距的层次"。

8.5 60 高图块的"比例"

36 号 emoji + 60 高——"图块的比例"——"36 = emoji 尺寸、60 = 图块高度"——"图块的视觉"——"1.67 倍高宽比"。

8.6 状态字号的"克制"

10 号状态文字——"10 = 最小字号"——"状态 = 次要但重要"——"10 号的可读性"——"小字号的克制"。

8.7 Blank() 的"弹性"

Blank()——"弹性占位"——"状态左、电量右"——"两端对齐"——"ArkUI 的弹性布局"——"Blank = 弹性空间"。

8.8 3 统计的"数值颜色"

绿 5 / 橙 1 / 蓝 36——"3 数值 3 色"——"颜色 = 业务"——"统计的颜色编码"——"绿色可用、橙色维修、蓝色品牌"。

8.9 车型 emoji 的"识别"

🚲 自行车 / 🛴 滑板——"2 种车型 emoji"——"emoji = 车型"——"识别度"——"车型的视觉"——"emoji 的车型符号化"。

8.10 Grid 间距的"紧凑"

columnsGap(10) + rowsGap(10)——"10 = 网格间距"——"紧凑网格"——"密度与可读性的平衡"——"网格间距的细节"。

九、总结与展望

App 33 首页的核心价值：用青蓝打造一个"品牌 + 统计 + 车辆"的共享单车首页，让用户在 3 秒内看清库存、5 秒内选好车——这是共享单车 App 首页的标准范式。

与系列对比：

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

"33 首页的决策是'骑什么车'"——"共享首页 = 决策辅助"——"每个 App 首页都在帮用户完成一个决策"——"33 帮用户选车"。

终评：青蓝 + 双行 Header + 3 统计 + 3 列网格 = 完整共享单车首页——"从配色到信息架构的完整设计"——"共享首页的标杆"。

补充说明：本篇所有代码引用均基于 33-campus-bike/entry/src/main/ets/pages/HomeTab.ets 实际源码，行号与源码一一对应；所有截图均为模拟器实机运行画面，含手机轮廓，4 张图分别覆盖首屏、普通自行车点击、维修中车辆点击、双人车点击四种差异场景，图床域名统一为 imgbed.devzoo.top。