OpenHarmony地图的用户界面如何设计

OpenHarmony 地图用户界面设计指南

一 设计原则与视觉规范

• 一致性：跨设备统一色彩、字体、间距、动效，建立可复用的原子组件与主题变量，确保同一任务在不同终端体验一致。
• 适应性：以设备类型与交互方式为驱动（手机/平板/车机/智慧屏），采用自适应与响应式布局，避免“一套 UI 强行拉伸”。
• 轻量化：控制视觉噪声，突出地图内容；建议留白 ≥ 16dp、界面主色 ≤ 3 种，优先使用系统标准色。
• 可访问性：支持大字体、高对比度、语义化，为关键控件提供可聚焦与可朗读能力。
• 视觉参数建议：主色示例**#007DFF**；按钮高度手机48dp、大屏64dp；卡片圆角手机12dp、大屏24dp；排版字号标题20–24sp、正文16sp、辅助14sp，行高分别约1.3与1.5。

二 布局架构与多端适配

• 布局策略：以栅格化为基准（建议以8vp为网格单位），配合自适应拉伸/缩放与响应式断点，在横竖屏、分屏、折叠等场景下自动重组内容。
• 断点与面板：地图首页建议采用“地图占满窗口 + 可拖拽面板”的结构；小屏面板在底部，中屏改为悬浮，宽屏可左右吸附并支持多档高度调节。
• 组件化组织：以Column/Row/Stack等容器拆分“地图、搜索、功能网格、页签”等区域，便于复用与维护。
• 多端指引：
  • 手机：单栏，面板底部，功能以图标网格呈现。
  • 平板/车机：双栏或悬浮面板，支持拖拽与吸附，信息密度更高。
  • 智慧屏：增大间距与字号、减少密集信息，交互以方向键/遥控器为主。

三 核心页面与交互设计

• 首页（地图 + 面板）：地图默认沉浸式；顶部为搜索框，中部为功能网格（如扫一扫、收藏、打车、路线），底部为页签（如探索/出行/我的）；面板支持三档高度与左右切换。
• 路线规划页：采用分步/标签页组织（起点/途经点/终点），提供历史记录与POI建议，结果列表支持卡片化展示与快捷设为起终点。
• 导航中：采用简洁底栏（剩余时间/距离、下一动作）与全屏沉浸；关键事件以语音+震动反馈，必要时弹出轻量浮层（如偏航、限速）。
• 服务卡片与实况窗：卡片展示预计到达时间/附近服务；实况窗提供最小化导航与快捷操作（如改目的地、上报路况）。

四 地图控件与能力集成

• 地图呈现与交互：使用 MapComponent/MapComponentController 呈现地图，支持缩放、旋转、移动、倾斜等手势；可设置地图类型、中心点/缩放级别与事件监听。
• 覆盖物与绘制：通过 Marker、MapPolyline、MapPolygon、Circle 等表达位置、路线、区域；POI 与路网在不同比例尺下自适应呈现。
• 场景化控件：结合 地点详情控件 与 地图选点控件 完成“选点—详情—操作”的闭环。
• 搜索与路径规划：提供POI 搜索与步行/骑行/驾车路径规划，结果可直接用于设置起终点与导航。

五 动效、主题与无障碍

• 动效与反馈：遵循“轻量、克制”原则，使用缓入缓出与即时反馈（如按钮水波纹、面板吸附磁吸感），避免遮挡关键地图信息。
• 主题与资源：为浅色/深色提供完整主题，统一管理颜色、字体、间距、阴影、圆角等资源；大屏/智慧屏建议间距 ×1.5以提升可读性。
• 无障碍：确保颜色对比度、可聚焦顺序与语义标签；为图标按钮提供内容描述，支持大字体与高对比度模式。