UI DESIGN LAB
  • Home
  • Community
  • Library
  • Knowledge
  • Docs
ZHLogin
Back to knowledge
Visual Foundations

Map and Geospatial Layout

Map and Geospatial Layout turns a frequent interface judgment into an executable constraint before generation.

mapgeospatiallayout

Design Principle

Geospatial interfaces depend on synchronization between location, scope, objects, and selection state.

Principle Geospatial interfaces depend on synchronization between location, scope, objects, and selection state.

Design action Map, result list, filters, and detail panel share selected state; map controls must not cover important areas.

Examples Positive example: Store, delivery, listing, event, logistics, or geodata pages need comparison between map and list. Counterexample: The map fills the page without list or filter feedback.

Apply when Store, delivery, listing, event, logistics, or geodata pages need comparison between map and list. Users need to judge state, scope, risk, or next action quickly.

Source notes Source note: Synthesized from Apple HIG, Material Design, NN/g usability principles, and layout/hierarchy practices in mature design systems.

Agent Directive

Map, result list, filters, and detail panel share selected state; map controls must not cover important areas.

Apply When

  • Store, delivery, listing, event, logistics, or geodata pages need comparison between map and list.
  • Users need to judge state, scope, risk, or next action quickly.

Avoid

  • The map fills the page without list or filter feedback.
  • Irrelevant structure, copy, or decoration is added only to make the UI feel richer.

Knowledge Metadata

Category
Visual Foundations
Quality
84%
Version
v1
Published
6/6/2026