GlobalMAP Design Specification
This document is confidential.
Please enter the access password.
XPENG · HMI Design Specification

Global Map Experience Design

Cruise · Search · Route Planning · Navigation — three split-screen layout modes.

1/3 Mode
App priority · Map minimized to strip
2/3 Mode
Balanced · App & map share screen
Full
Full Screen
Immersive · App fills entire display
01
Cruise
Default driving state
7 scenarios
Activate Navigation
User confirms destination · Navigation starts
Activate Navigation 1/3 1/3
Activate Navigation 2/3 2/3
Activate Navigation Full Full
Initialization Screen
Map loading · Pre-activation state
Initialization Screen 1/3 1/3
Initialization Screen 2/3 2/3
Initialization Screen Full Full
Initialization Screen · Dark
Map loading · Night mode
Initialization Screen Dark 1/3 1/3
Initialization Screen Dark 2/3 2/3
Initialization Screen Dark Full Full
Satellite Map · Light
Satellite imagery · Day mode
Satellite Map 1/3 1/3
Satellite Map 2/3 2/3
Satellite Map Full Full
Satellite Map · Dark
Satellite imagery · Night mode
Satellite Map Dark 1/3 1/3
Satellite Map Dark 2/3 2/3
Satellite Map Dark Full Full
Terrain Map · Light
Topographic map · Day mode
Terrain Map 1/3 1/3
Terrain Map 2/3 2/3
Terrain Map Full Full
Terrain Map · Dark
Topographic map · Night mode
Terrain Map Dark 1/3 1/3
Terrain Map Dark 2/3 2/3
Terrain Map Dark Full Full
Search Home
Search panel active · POI suggestions displayed
Search Home 1/3 1/3
Search Home 2/3 2/3
Search Home Full Full
Switch Map Layers
Standard · Satellite · Terrain layer selection
Switch Map Layers 1/3 1/3
Switch Map Layers 2/3 2/3
Switch Map Layers Full Full
03
Route Planning
Route overview & departure settings
— scenarios
🗺️
Awaiting images for Route Planning module
Drop images into 03Route/ folder alongside this HTML file.
1/3
2/3
Full
05
Offline Maps
Download & manage map packages
— scenarios
🗺️
Awaiting images for Offline Maps module
Drop images into 05Offline/ folder alongside this HTML file.
Full
06
Settings
Map preferences, permissions & account
— scenarios
⚙️
Awaiting images for Settings module
Drop images into 06Setting/ folder alongside this HTML file.
Full
07
RtL Layout ◑ Dark Mode
Right-to-Left mirrored UI · Key screens in Dark theme
— scenarios
🌙
Awaiting images for RtL module
Drop images into 07RtL/ folder alongside this HTML file.
08
RHD Layout ◑ Dark Mode
Right-Hand Drive · Key screens in Dark theme
— scenarios
🌙
Awaiting images for RHD module
Drop images into 08RHD/ folder alongside this HTML file.