文章目录前言为什么这个问题经常被写乱操作优先级设计步骤ArkUI/ArkTS 示例关键代码说明按钮分层检查地图卡片先保留主任务小结前言门店详情页很容易把地图卡片做成按钮集合导航、打车、复制地址、收藏、分享、电话都往地图上堆。我的经验是地图卡片只保留最关键动作其他操作放到信息区或更多菜单里。用户看地图时最需要的是位置和一个明确的下一步。地图卡片的主角是位置不是按钮数量。本文用“门店详情页”做例子。地图只是帮助用户确认位置不应该承担全部门店操作。把按钮分层之后页面会更容易扫读。为什么这个问题经常被写乱地图卡片不要塞太多按钮 这类内容很容易被写成“代码能跑就算讲完了”但对初学者来说这恰恰是最不够的地方。真正让人卡住的往往不是某个组件名记不住而是不知道这段代码为什么要这样拆、状态为什么要这样放、以后需求变化时应该从哪里改。所以这篇文章不只想给你一个能跑的例子更想把背后的判断过程讲清楚。你只要把这个判断过程吃透后面自己改页面、补需求、查问题时心里会稳很多。操作优先级操作放置位置理由导航主按钮高频且明确电话信息区按钮和门店信息相关复制地址更多操作低频收藏分享页面右上角不属于地图本身设计步骤先确定地图卡片的唯一主任务是展示位置还是发起导航。地图区域只保留位置、距离、一个主操作入口。电话、营业时间、地址放到信息区。收藏、分享这类页面操作放到标题栏或更多菜单。地址过长时允许换行不要压缩地图高度。ArkUI/ArkTS 示例classStoreInfo{name:string南山科技园店address:string深圳市南山区科技园科苑路 18 号distance:string距离你 1.8kmopenText:string营业中 09:00-22:00phone:string0755-8888 1024}EntryComponentstruct MapCardPage{Statestore:StoreInfonewStoreInfo()Statefavorite:booleanfalseBuilderMapPreview(){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 业务页里地图卡片要克制。按钮少一点用户反而更容易完成“找到门店并导航”这件事。