鸿蒙原生应用实战：不引地图库 —— 共享雨伞地图页的模拟地图与三色图例

App 32「校园共享雨伞」地图（Func1Tab），主题色 #4A90D9 晴空蓝。地图页采用"Header + 模拟地图 + 图例 + 伞点列表"四区布局——白色 Header（"伞点地图"标题） + 🗺️ 模拟地图卡（160 高浅蓝圆角，🗺️ emoji + "校园伞点分布图"文字） + LegendCard 三色图例（🔵 借+还 / 🟢 仅借伞 / 🟡 仅还伞） + SectionTitle + 5 个伞点列表（🔵 教学楼 A 楼借伞+还伞 / 🟢 图书馆仅借伞 / 🟡 学生食堂仅还伞 / 🔵 体育馆借伞+还伞 / 🟢 宿舍楼下仅借伞，每项含"导航 >"点击入口）。本篇基于 32-campus-umbrella/entry/src/main/ets/pages/Func1Tab.ets（约 97 行）逐段拆解，附 4 张实机截图。

一、整体结构：四区"Header + 地图 + 图例 + 伞点"布局

App 32 地图页是"标题 + 模拟地图 + 图例说明 + 列表"的标准地图页布局——5 个 @Builder 块：

build() {
  Column() {
    this.Header()
    Scroll() {
      Column({ space: 14 }) {
        this.MapCard()
        this.LegendCard()
        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)
}

4 块结构：

1. Header — 白色背景 + "伞点地图"标题
2. MapCard — 浅蓝模拟地图卡
3. LegendCard — 三色图例
4. SectionTitle('伞点列表') + PointList — 5 个伞点列表

与 App 32 首页对比：首页是"Header + 天气 + 4 伞点"，地图是"Header + 地图 + 图例 + 5 伞点"——"地图页比首页多 2 个元素：地图卡和图例"——"地图页 = 视觉化 + 分类"——首页用文字描述、地图页用视觉+分类——"两种页面的表达"。

与系列其他地图/列表类 App 对比：

• App 26: AI PPT（编辑器 + 模板 + 主题）
• App 32 地图：模拟地图 + 图例 + 列表（地图型列表）

"32 地图页的简洁"——"演示地图 vs 真实地图"——真实 App 用 Map Kit 渲染真实地图——"demo 简化"——用浅蓝卡 + 🗺️ emoji 表示地图——"占位实现的演示价值"。

主题色 #4A90D9 晴空蓝——同首页——"系列主题色的一致性"——首页、地图、借还、我的四 Tab 共用 #4A90D9——"品牌色贯穿全 App"。

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

二、Header：白色 + "伞点地图"

Header 是 **白色 + "伞点地图"**的极简标题头：

@Builder
Header() {
  Row() { Text('伞点地图').fontSize(20).fontWeight(FontWeight.Bold).fontColor(C.text) }
  .width('100%').height(this.safeTop + 56).padding({ top: this.safeTop, left: D.pad, right: D.pad })
  .backgroundColor(C.card).alignItems(VerticalAlign.Bottom)
}

Header 结构：白色背景 + 20 号加粗黑色"伞点地图" + safeTop 56 高的固定头部——"固定头部的标准做法"。

height(this.safeTop + 56) 固定高度——"56 + safeTop = 状态栏高度"——"56 是系列 Header 标准高度"（与 App 26/27/28/29/30/31 一致）——"系列头部的统一高度"。

alignItems(VerticalAlign.Bottom) 底部对齐——"文字在头部底部"——让文字不与状态栏冲突——"底部对齐的状态栏适配"。

Row() { Text(...) } Row 包单文字——与首页 Header 不同——"Row vs Column 的选择"——首页用 Column 因为内容简单（单文字）、地图页用 Row 因为可以加更多内容（虽然这里也是单文字）——"两种 Header 结构的取舍"。

与首页 Header 的对比：

• 首页：Column 包 Text（22 号）
• 地图：Row 包 Text（20 号）

"字号 22 vs 20"——首页 22 略大（强调品牌）、地图 20 略小（强调内容）——"Header 字号的层级"——"品牌头 vs 内容头"。

fontWeight(FontWeight.Bold) 加粗标题——"标题的加粗"——同首页——"系列标题的统一"。

三、MapCard：🗺️ 模拟地图卡

MapCard 是 浅蓝背景 + 🗺️ + 文字的模拟地图占位卡：

@Builder
MapCard() {
  Stack({ alignContent: Alignment.Center }) {
    Column()
      .width('100%').height(160).backgroundColor(C.primarySoft).borderRadius(D.rLg)
    Column({ space: 8 }) {
      Text('🗺️').fontSize(40)
      Text('校园伞点分布图').fontSize(13).fontColor(C.primary)
    }
  }
  .width('100%').onClick(() => { promptAction.showToast({ message: '打开地图' }); })
}

MapCard 结构：Stack 容器（背景 160 高浅蓝 + 居中 🗺️ emoji + 文字）——"占位地图的极简设计"。

Stack({ alignContent: Alignment.Center })——"Stack 居中叠加"——背景卡 + 前景图标文字——"Stack 的层叠"——背景在底层、前景在顶层、Alignment.Center 让前景居中——"Stack 的层叠对齐"。

backgroundColor(C.primarySoft) 浅蓝背景——#E8F0FE 主题色浅色版——"浅色地图背景"——"为什么地图用浅蓝？"——地图 = 天空/水域/区域——"浅蓝 = 地图的视觉共识"——"地图配色的惯例"。

height(160) 160 高——"地图卡的高度"——不是正方形（不是 200×200）——"横向地图 = 宽 > 高"——160 高 + 100% 宽 = 8:5 横向比例——"横向地图的视觉"。

Text('🗺️').fontSize(40) 40 号地图 emoji——"🗺️ = 地图的 emoji 符号"——"emoji 地图的演示"——大号 emoji 作为地图图标——"40 号 = 大图标"。

Text('校园伞点分布图').fontSize(13).fontColor(C.primary) 蓝色文字——"地图说明文字"——13 号蓝色（C.primary 主题色）——"蓝色文字 = 主题色文字"——"文字的颜色主题化"。

onClick(() => promptAction.showToast({ message: '打开地图' })) 点击反馈——整卡点击弹"打开地图"Toast——"整卡可点的地图"——"占位跳转"（真实产品跳 Map Kit）——"地图交互的简化"。

Stack 比 Column 的优势——Stack 可以让前景居中而不需要 flex 布局——"Stack 的居中便利"——用 Column + alignItems 也能居中，但 Stack 更直接——"Stack 的语义化"——"Stack 居中" 是 ArkUI 的惯用模式。

与系列其他模拟卡对比：

• App 27 通知提醒: 📅 模拟日历卡
• App 28 智能衣橱: 👔 模拟穿搭卡
• App 32 地图：🗺️ 模拟地图卡

"系列模拟卡的统一"——"占位卡的演示范式"——用 emoji + 文字代替真实内容——"demo 的通用占位"——"浅色背景 + emoji + 文字"——"占位卡三件套"。

四、LegendCard：三色图例

LegendCard 是 🔵 借+还 / 🟢 仅借伞 / 🟡 仅还伞三色图例：

@Builder
LegendCard() {
  Row({ space: 16 }) {
    Row({ space: 6 }) { Row().width(10).height(10).borderRadius(5).backgroundColor(C.primary); Text('借+还').fontSize(12).fontColor(C.textSub) }
    Row({ space: 6 }) { Row().width(10).height(10).borderRadius(5).backgroundColor(C.ok); Text('仅借伞').fontSize(12).fontColor(C.textSub) }
    Row({ space: 6 }) { Row().width(10).height(10).borderRadius(5).backgroundColor(C.warn); Text('仅还伞').fontSize(12).fontColor(C.textSub) }
  }.width('100%').padding(12).backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke })
}

LegendCard 结构：Row 容器（3 个 Row 图例项）+ 12 padding + 白底 + 14 圆角 + 1px 边框——"三色图例卡"。

3 个图例项：

颜色	类型	颜色变量
🔵	借+还	C.primary #4A90D9 蓝
🟢	仅借伞	C.ok #2BB673 绿
🟡	仅还伞	C.warn #FF9F1C 橙

"三色编码的业务"——"业务类型 = 颜色"——借还/借/还 三种业务用三色区分——"颜色 = 业务类型"——"视觉编码"——"颜色即语义"。

Row().width(10).height(10).borderRadius(5) 10×10 圆点——"图例的圆点指示器"——10×10 + 5 圆角 = 圆形——"小圆点 = 列表标记"——同系列"圆点指示器"——"系列圆点的复用"。

Row({ space: 6 }) 图例项内部——"圆点 + 文字"——6 间距——"图例项的紧凑布局"——圆点和文字紧贴——"图例项的标准结构"。

Row({ space: 16 }) 三图例项之间间距——"16 = 较大的项间距"——让三项有视觉间隔——"项间距的层级"。

fontSize(12).fontColor(C.textSub) 12 号灰色文字——#5A6483 副色——"图例文字的次要感"——"次要信息 = 灰色"。

padding(12).borderRadius(D.rMd) 12 padding + 14 圆角——"图例卡的紧凑"——比 MapCard 的 20 圆角小——"小卡用 14 圆角"——"圆角层级：D.rLg 20 / D.rMd 14 / D.rSm 10"。

border({ width: 1, color: C.stroke }) 1px 边框——同首页伞点卡——"细边框 = 卡片轮廓"。

"图例"在地图页的价值——"为什么地图页要有图例？"——5 个伞点有不同类型（借/还/借+还）——"颜色的语义"——告诉用户 🔵🟢🟡 三色含义——"图例 = 颜色解码"——"颜色不能凭空出现"——"图例 = 颜色的说明"。

与系列其他图例对比：

• App 27 通知: 优先级图例（高/中/低）
• App 32 地图：业务类型图例（借+还/借/还）

"图例的通用模式"——"颜色 + 文字"——"图例的统一设计"——"图例在地图/分类场景的必要性"。

五、PointList：5 个伞点 + 类型色标 + 导航按钮

PointList 是 5 个伞点的列表——每项含 emoji 头像、名称、类型（带颜色）、"导航 >"：

@Builder
PointList() {
  Column({ space: 10 }) {
    ForEach(this.points, (p: Point) => {
      Row({ space: 12 }) {
        Text(p.emoji).fontSize(20)
        Column({ space: 3 }) {
          Text(p.name).fontSize(14).fontColor(C.text)
          Text(p.type).fontSize(11).fontColor(p.typeColor)
        }.alignItems(HorizontalAlign.Start).layoutWeight(1)
        Text('导航 >').fontSize(12).fontColor(C.primary)
          .onClick(() => { promptAction.showToast({ message: '导航: ' + p.name }); })
      }
      .width('100%').padding(12).backgroundColor(C.card).borderRadius(D.rMd).border({ width: 1, color: C.stroke })
    }, (p: Point) => p.id.toString())
  }.width('100%')
}

每张伞点卡的结构：

• 左 emoji 头像（20 号 🔵/🟢/🟡）
• 中 文字区（名称 14 号 + 类型 11 号带颜色）
• 右 导航按钮（"导航 >" 12 号蓝色）

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

emoji	名称	类型	类型色
🔵	教学楼 A 楼	借伞+还伞	蓝（primary）
🟢	图书馆	仅借伞	绿（ok）
🟡	学生食堂	仅还伞	橙（warn）
🔵	体育馆	借伞+还伞	蓝（primary）
🟢	宿舍楼下	仅借伞	绿（ok）

"emoji 颜色 = 业务类型"——"5 个伞点 = 3 种类型"——🔵 ×2 + 🟢 ×2 + 🟡 ×1——"业务类型的多样"——"颜色的语义化"——同图例的 3 色——"图例与列表的颜色一致"。

Text(p.type).fontColor(p.typeColor) 类型文字带颜色——"文字的颜色编码"——类型（"借伞+还伞"）的颜色 = 业务类型色——"文字 = 图例的副本"——"双重视觉编码"（emoji 圆点 + 文字颜色）——"颜色的冗余强化"。

Text('导航 >') 导航按钮——12 号蓝色——"导航的视觉入口"——">" 箭头表示跳转——"导航 = 跳到地图 App"（高德/百度地图）——"占位导航"**。

onClick(() => promptAction.showToast({ message: '导航: ' + p.name })) 点击反馈——点击"导航 >"弹"导航: 教学楼 A 楼" Toast——"导航反馈"——"占位跳转"（真实产品调起地图 App）——"Toast 的导航提示"。

padding(12).borderRadius(D.rMd).border({ width: 1, color: C.stroke }) 卡片样式——12 padding + 14 圆角 + 1px 边框——"小卡的标准"——比首页伞点卡（14 padding + 20 圆角）小——"列表卡的紧凑"。

layoutWeight(1) 中间文字区——"文字占据中间空间"——左边 emoji、右边"导航 >"、中间文字——"三段式布局"。

Column({space: 10}) 列表项之间间距 10——比首页 12 略小——"列表项的紧凑"——5 个伞点更多，需要更紧凑的列表——"列表密度 = 项数"。

fontSize(20) emoji 字号 20——比首页 28 小——"列表 emoji 较小"——列表里 emoji 只是标记——"列表 emoji 的次要感"。

与首页 PointList 对比：

• 首页：4 个伞点 + 头像 52×52 + 进度条 + 库存文字
• 地图：5 个伞点 + 头像 20 号 + 类型 + 导航按钮

"两个伞点列表的差异"——"首页详、地图简"——首页是详细信息（库存/进度）、地图是简洁信息（类型/导航）——"两种信息密度"——"用户场景不同"——首页要决策借不借（看库存）、地图要决策去哪个（看类型+导航）——"信息为决策服务"。

六、Point 数据模型

Point 接口（5 字段）：

interface Point {
  id: number;
  emoji: string;
  name: string;
  type: string;
  typeColor: string;
}

字段说明：

• id: number — 唯一标识
• emoji: string — 类型 emoji（🔵/🟢/🟡）
• name: string — 伞点名称
• type: string — 业务类型文字
• typeColor: string — 业务类型颜色

typeColor: string 而非 ResourceColor——"颜色作为字符串"——demo 把颜色直接存到数据里——"颜色内联在数据"——"数据 = 显示"——简单但耦合（换主题色要改数据）——"demo 简化的取舍"——真实产品可用主题枚举。

与首页 UmbrellaPoint 的对比：

首页 UmbrellaPoint	地图 Point
id	id
emoji	emoji
name	name
dist	-
available	-
total	-
-	type
-	typeColor

"两个伞点模型"——"首页关注库存、地图关注类型"——"同一业务的不同视图"——"模型 = 视图的字段"——"两个表（列表）展示同一业务"。

数据合理性：

• 教学楼/体育馆：借+还（学生聚集点）
• 图书馆：仅借伞（学习完离开要伞）
• 学生食堂：仅还伞（吃饭前还伞）
• 宿舍楼下：仅借伞（出门要伞）

"业务类型的真实逻辑"——"为什么食堂仅还伞？"——食堂是大家吃饭的地方、用完伞去食堂还——"食堂 = 还伞热点"——"类型 = 业务规则"——"真实业务建模"。

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

7.1 整卡可点 vs 按钮可点

地图卡（整卡可点） vs 导航按钮（按钮可点）——"两种点击区域"——"整卡 = 跳地图、按钮 = 导航"——"两种跳转的区分"——整卡跳 Map Kit 整体、按钮跳特定地点——"操作的细分"。

7.2 图例的"颜色解码"

🔵/🟢/🟡 = 借+还/借/还——"颜色的语义"——"颜色 = 业务"——"图例 = 颜色解释"——"颜色不能凭空出现"——"图例的必要性"——"颜色 + 文字的冗余"。

7.3 类型色的"双重编码"

emoji 圆点 + 文字颜色——"双重视觉编码"——"视觉冗余 = 强化"——用户看 emoji 或文字任一都能识别——"冗余的可访问性"——色盲用户也能识别 emoji——"无障碍设计"。

7.4 5 个伞点的"类型分布"

🔵 借+还 ×2 + 🟢 仅借伞 ×2 + 🟡 仅还伞 ×1——"5 个伞点的类型"——"3 种类型的覆盖"——"业务的多样"——"demo 的类型丰富"——"业务规则的完整"。

7.5 模拟地图 vs 真实地图

演示阶段：浅蓝卡 + 🗺️ emoji——"占位地图"——"为什么 demo 用占位？"——Map Kit 需要 API key、SDK 集成——"demo 简化"——"占位 vs 真实"。

真实阶段：集成 Map Kit——"真实地图的扩展点"——"demo 的扩展"——"占位 → 真实的桥"。

7.6 5 个伞点的"位置逻辑"

教学楼/图书馆/食堂/体育馆/宿舍——"校园的 5 类场所"——学习（教学楼/图书馆）+ 生活（食堂/宿舍）+ 运动（体育馆）——"校园场景的全覆盖"——"5 伞点 = 5 场景"。

7.7 导航按钮的"快捷性"

"导航 >" 直接点击——"快捷入口"——"无需选菜单"——"一键导航"——"地图 App 的标准交互"——"导航 = 转化终点"——demo 用 Toast 占位。

7.8 图例的"位置选择"

图例在地图卡下方、列表之上——"图例的位置逻辑"——"先看图例再看列表"——"图例的过渡作用"——"图例是地图卡和列表的桥梁"——"位置 = 阅读顺序"。

7.9 类型色的"颜色变量"

C.primary / C.ok / C.warn——"主题色变量"——"颜色 = 主题"——"主题色的复用"——同首页的"ok/空"绿色——"颜色的一致性"——"颜色 = 业务状态"。

7.10 模拟地图的"占位价值"

浅蓝 + emoji——"占位的演示价值"——"快速呈现"——"不依赖真实数据"——"demo 优先"——"占位的可替换性"——"占位 → 真实的升级"。

7.11 5 个伞点的"emoji 标记"

🔵 教学楼/体育馆、🟢 图书馆/宿舍楼下、🟡 学生食堂——"emoji 的标记"——"emoji = 类型"——"5 个 emoji = 5 个伞点"——"emoji 的低成本"——"5 个 emoji 演示"。

7.12 类型文字的"字号"

11 号类型文字——"类型作为次要信息"——"11 号 < 14 号名称"——"信息层级"——"名称 14 + 类型 11 的双层"。

7.13 导航按钮的"箭头"

">" 箭头——"箭头的方向语言"——">" = 向前/跳页——"导航 = 跳"——"箭头的视觉传统"——"UI 通用符号"。

7.14 5 个伞点的"位置"

2 列 Grid?——不，是 1 列 List——"列表式布局"——"List vs Grid 的选择"——伞点信息多（名称+类型+导航），List 更合适——"信息的密度决定布局"。

7.15 模拟地图的"可点击"

整卡可点——"用户点哪都触发"——"整卡的易用性"——"操作成本低"——"占位跳转"——真实产品跳 Map Kit 详情页。

7.16 图例的"必要性"

5 个伞点有 3 种类型——"3 种类型需要图例"——"图例的必要性"——"图例 = 颜色说明"——"颜色不能凭空"——"图例的视觉教育"。

7.17 模拟地图的"中心对齐"

Stack({ alignContent: Alignment.Center }) 中心对齐——"前景居中"——"Stack 的居中"——"地图图标的居中"——"视觉的平衡"。

7.18 5 个伞点的"颜色冗余"

emoji + 文字——"两种颜色编码"——"冗余的可读性"——"色盲友好"——"无障碍考虑"——"双重信息的优势"。

7.19 模拟地图的"高度"

160 高——"地图的高度"——"160 = 较扁的横向卡"——"Map Kit 一般 200+ 高"——"160 是 demo 简化"——"占位 vs 真实"。

7.20 类型文字的"颜色透明度"

C.primary 蓝色实色——"类型颜色的实色"——"类型 = 显眼"——"颜色 = 强调"——"类型的视觉权重"。

7.21 5 个伞点的"导航"

5 个"导航 >"——"每个都能导航"——"5 个导航入口"——"导航的普遍性"——"每个伞点都能去"——"导航的完整"。

7.22 模拟地图的"占位图标"

🗺️ 40 号——"地图 emoji"——"40 号 = 大图标"——"大图标作为占位"——"emoji 的尺寸感"——"占位的视觉"。

7.23 5 个伞点的"列表"

Column space 10——"列表项 10 间距"——"比首页 12 小"——"5 项需要更紧凑"——"密度 = 项数"。

7.24 图例的"位置"

地图卡下、列表上——"图例的过渡"——"先图例后列表"——"图例解释列表"——"图例是中介"。

7.25 地图页的"色彩心理学"

晴空蓝地图——"蓝色 = 地图"——"地图的视觉共识"——"蓝色 = 水/天空/区域"——"地图的视觉文化"——"配色的文化性"。

7.26 5 个伞点的"emoji 复用"

🔵🟢🟡 的颜色——"颜色 = 类型"——"图例与列表共享 emoji"——"图例的复用"——"图例 + 列表 = 完整颜色语言"。

7.27 模拟地图的"padding"

Stack.width('100%') 100% 宽——"满宽地图"——"地图的横向感"——"全宽的视觉"——"地图的宽度"。

7.28 5 个伞点的"导航反馈"

"导航: 教学楼 A 楼"——"导航的反馈"——"反馈的位置名"——"占位跳转"——"反馈的完整"——"位置 = 信息"。

7.29 模拟地图的"深浅对比"

浅蓝背景 + 深蓝文字——"深浅对比"——"前景 = 深 / 背景 = 浅"——"对比的可读性"——"颜色的对比"。

八、总结：晴空蓝 + 模拟地图 + 三色图例

App 32 地图页一句话：用晴空蓝（#4A90D9）组织一个"地图卡 + 图例 + 伞点"的工具地图页——浅蓝模拟地图卡配 🗺️ emoji 占位真实 Map Kit，三色图例解释 🔵/🟢/🟡 三种业务类型，5 个伞点列表用 emoji + 名称 + 类型 + 导航按钮让用户快速选点导航。

3 个设计亮点：

1. 模拟地图占位——浅蓝 160 高卡 + 🗺️ emoji + "校园伞点分布图"占位 Map Kit
2. 三色图例——🔵 借+还 / 🟢 仅借伞 / 🟡 仅还伞，10×10 圆点指示
3. 类型色编码——emoji 颜色 + 文字颜色双重冗余，色盲友好

主题色设计逻辑：晴空蓝 = 地图/水域/天空——"工具型地图页用蓝色，因为蓝色是地图的视觉共识"——与 App 30 蓝绿（#2BB673）对比——"两个蓝绿色系的细分"——"32 的晴空蓝更深"。

与系列呼应：固定 56 高 Header（系列）、Stack 居中占位卡（30 公益 Banner）、三色图例（27 优先级）、ForEach 列表（系列）、"导航 >"按钮（30 公益 CTA）——"32 把系列的占位卡 + 图例 + 列表手法组合出'地图'场景"。

体验细节：模拟地图、颜色图例、类型色标、导航按钮——"地图页的核心 = 让用户'3 秒看懂类型 + 5 秒导航'"。

可扩展性展望：Map Kit 集成、真实坐标、实时位置、POI 搜索、路线规划——"demo 的地图页骨架完整"。

八、扩展思考：地图页的设计哲学

8.1 地图页的"信息架构"

地图页 4 层信息：

1. L1 标题（Header）——"这是什么页"
2. L2 视觉（MapCard）——"位置在哪"
3. L3 解释（LegendCard）——"颜色是什么"
4. L4 详情（PointList）——"具体地点"

"4 层渐进式信息"——"从抽象到具体"——标题 → 视觉 → 解释 → 详情——"地图页的信息金字塔"——用户按需深入——"渐进式信息披露"。

8.2 地图页的"双重视觉编码"

emoji 圆点（🔵🟢🟡） + 文字颜色（蓝/绿/橙）——"颜色冗余 = 可访问性"——"色盲用户能识别 emoji"——"视觉的双重保险"——"无障碍设计的实现"——"色盲友好的列表"。

8.3 地图页的"转化路径"

看地图 → 看图例 → 看列表 → 点导航——"4 步转化路径"——"从意识到行动"——"地图页的转化漏斗"——用户从"看"到"导航"——"地图的价值"——"导航 = 转化终点"。

8.4 地图页与首页的"数据互补"

首页 PointList（4 伞点 + 距离 + 库存）vs 地图 PointList（5 伞点 + 类型 + 导航）——"两个列表的互补"——"首页关注库存、地图关注类型"——"两个维度 = 完整信息"——"信息的不同视角"——用户可在两页间切换——"多页的协同"。

8.5 地图页的"设计哲学"

地图页的 3 个设计哲学：

1. 视觉优先——地图卡用大图标 + 浅蓝背景
2. 解释优先——图例在前、列表在后
3. 导航优先——每个伞点都有"导航 >"入口

"视觉 + 解释 + 导航的地图页"——"工具型地图页的设计原则"——"从哲学看设计"——"这套方法论可直接迁移到任何地图型 App"。

8.7 地图页的"终评"

App 32 地图页综合评估——"四区结构 + 晴空蓝主题 + 完整图例与导航"——"地图页的完成度评级"——"一个可上线级的工具地图页"——"系列地图型页面的标杆"——"demo 的高完成度"。

九、彩蛋：地图页的细节设计

9.1 模拟地图的"高度选择"

height(160) 160 高——"为什么是 160？"——"160 = 8:5 横向比例"——"宽高比 = 视觉的舒适"——"横向地图的视觉"——"160 是模拟地图的合理高度"。

9.2 图例的"3 种颜色"

🔵🟢🟡 = 借+还/借/还——"颜色的语义"——"3 色 = 3 类业务"——"颜色的多义性"——"颜色编码的精准"。

9.3 "导航 >" 的文案

"导航" + ">" 箭头——"导航 = 跳"——">" = 方向——"导航按钮的简练"——"方向语言的运用"——"按钮文案"。

9.4 5 个伞点的 emoji 选择

🔵🟢🟡 的圆点——"emoji 的颜色"——"圆点 emoji"——"颜色的视觉化"——"emoji 的低成本"——"圆形 = 标记"。

9.5 类型文字的字号

11 号类型文字——"次要信息 = 小字号"——"11 号 < 14 号"——"信息层级的视觉"——"字号即层级"。

十、总结与展望

App 32 地图页的核心价值：用晴空蓝 + 模拟地图 + 三色图例 + 类型色标 + 导航按钮，构建一个"3 秒看懂类型 + 5 秒导航"的工具地图页——这是共享类 App 地图页的标准范式。

与系列对比：

App	地图/列表类页面	决策
26	编辑器	写什么
27	日历	何时提醒
28	衣橱	怎么穿
29	餐厅	吃什么
30	公益	帮什么
31	菜单	喝什么
32	地图	去哪借伞

"32 地图页的决策是'去哪借伞'"——"地图页 = 位置决策辅助"——"每个地图类页面都在帮用户做位置决策"——"32 帮用户决定去哪个伞点"。

终评：晴空蓝 + 模拟地图 + 三色图例 + 5 伞点 = 完整工具地图页——"从配色到信息架构的完整设计"——"地图页的标杆"。