文章目录
- 前言
- 为什么这个问题经常被写乱
- 操作优先级
- 设计步骤
- ArkUI/ArkTS 示例
- 关键代码说明
- 按钮分层检查
- 地图卡片先保留主任务
- 小结
前言
门店详情页很容易把地图卡片做成按钮集合：导航、打车、复制地址、收藏、分享、电话都往地图上堆。我的经验是，地图卡片只保留最关键动作，其他操作放到信息区或更多菜单里。用户看地图时，最需要的是位置和一个明确的下一步。
地图卡片的主角是位置，不是按钮数量。
本文用“门店详情页”做例子。地图只是帮助用户确认位置，不应该承担全部门店操作。把按钮分层之后，页面会更容易扫读。
为什么这个问题经常被写乱
地图卡片不要塞太多按钮 这类内容很容易被写成“代码能跑就算讲完了”，但对初学者来说，这恰恰是最不够的地方。真正让人卡住的，往往不是某个组件名记不住，而是不知道这段代码为什么要这样拆、状态为什么要这样放、以后需求变化时应该从哪里改。
所以这篇文章不只想给你一个能跑的例子，更想把背后的判断过程讲清楚。你只要把这个判断过程吃透，后面自己改页面、补需求、查问题时，心里会稳很多。
操作优先级
| 操作 | 放置位置 | 理由 |
|---|---|---|
| 导航 | 主按钮 | 高频且明确 |
| 电话 | 信息区按钮 | 和门店信息相关 |
| 复制地址 | 更多操作 | 低频 |
| 收藏分享 | 页面右上角 | 不属于地图本身 |
设计步骤
- 先确定地图卡片的唯一主任务，是展示位置还是发起导航。
- 地图区域只保留位置、距离、一个主操作入口。
- 电话、营业时间、地址放到信息区。
- 收藏、分享这类页面操作放到标题栏或更多菜单。
- 地址过长时允许换行，不要压缩地图高度。
ArkUI/ArkTS 示例
classStoreInfo{name:string='南山科技园店'address:string='深圳市南山区科技园科苑路 18 号'distance:string='距离你 1.8km'openText:string='营业中 09:00-22:00'phone:string='0755-8888 1024'}@Entry@Componentstruct MapCardPage{@Statestore:StoreInfo=newStoreInfo()@Statefavorite:boolean=false@BuilderMapPreview(){Stack({alignContent:Alignment.BottomStart}){Rect().width('100%').height(180).fill('#DDE7F0')Text('地图预览区域').fontSize(18).fontColor('#425466')Row(){Text(this.store.distance).fontSize(13).fontColor('#FFFFFF')}.padding(8).backgroundColor('#66000000').borderRadius(8).margin(12)}.borderRadius(12).clip(true)}build(){Column({space:14}){Row(){Text('门店详情').fontSize(24).fontWeight(FontWeight.Bold)Blank()Button(this.favorite?'已收藏':'收藏').height(32).onClick(()=>{this.favorite=!this.favorite})}this.MapPreview()Column({space:8}){Text(this.store.name).fontSize(18).fontWeight(FontWeight.Medium)Text(this.store.address).fontSize(14).fontColor('#666666')Text(this.store.openText).fontSize(13).fontColor('#2F9E44')Text(`电话：${this.store.phone}`).fontSize(13).fontColor('#666666')Row({space:10}){Button('导航到店').layoutWeight(1)Button('联系门店').layoutWeight(1).buttonStyle(ButtonStyleMode.TEXTUAL)}}.alignItems(HorizontalAlign.Start).padding(14).backgroundColor('#FFFFFF').borderRadius(12)}.padding(16).backgroundColor('#F5F6FA').height('100%')}}关键代码说明
MapPreview()只承担位置预览和距离提示，不把所有业务按钮塞进去。
主按钮只有“导航到店”，用户下一步很清楚。电话作为次级按钮放在信息卡片中。
收藏放在标题区，它是页面操作，不是地图操作。
按钮分层检查
| 区域 | 最多放几个动作 | 示例 |
|---|---|---|
| 地图卡片 | 0 到 1 个 | 导航 |
| 门店信息区 | 1 到 2 个 | 电话、复制地址 |
| 页面标题区 | 1 个轻操作 | 收藏 |
| 更多菜单 | 多个低频动作 | 分享、纠错 |
如果一个地图卡片里出现三四个按钮，通常说明页面层级没分好。先把操作按频率和语义归位，再写 ArkUI 布局会更顺。
地图卡片先保留主任务
地图卡片的主任务通常只有一个：帮用户确认位置，并引导他去导航。按钮太多时，用户反而要先判断哪个按钮才是下一步，地图区域也会被操作入口挤得很乱。
示例把地图预览、距离提示和门店信息拆开，就是为了让每块区域只做一件事。地图负责位置感，信息区负责地址、电话和营业状态，标题区放收藏这类页面动作。这样即使后面接入真实地图 SDK，也不会把业务按钮全部叠到地图上。
新手写门店页时，可以先问一句：用户现在最可能做什么？如果答案是“导航到店”，那主按钮就应该围绕导航设计；电话、复制地址、分享这些动作可以降低层级。按钮少一点，任务反而更清楚。
小结
HarmonyOS7 业务页里，地图卡片要克制。按钮少一点，用户反而更容易完成“找到门店并导航”这件事。
