什么是 GIS
GIS（Geographic Information System，地理信息系统）是对地球表层空间中的地理分布数据进行采集、储存、管理、运算、分析和展示的技术系统。按终端分为 Desktop GIS、WebGIS、Mobile GIS 三类。
本文讨论的是 WebGIS——运行在浏览器端的地理信息系统。你日常使用的高德地图、Google 地图、天地图等，本质上都是 WebGIS 应用。与桌面端 GIS 不同，WebGIS 的用户群体更广（不局限于专业测绘人员），因此对 UI 和交互设计的要求也更高。
如何设计 WebGIS UI
WebGIS UI 设计应遵循以下五条规则。这些准则我从 2016 年提出至今，在不同项目中反复验证，核心逻辑没有被推翻过。
一屏布局原则
地图类应用的核心价值是"空间信息浏览"，任何需要翻页或滚动的设计都会打断用户的空间感知。因此 WebGIS 的界面应严格限制在一屏之内——所有功能面板、工具栏、图例等辅助元素，必须在浏览器视口内完成布局。这不仅是为了美观，更是为了保证地图操作的连续性。
从平行布局到层叠布局
早期 WebGIS（如 Google 地图旧版）采用平行布局：地图和功能面板并排排列。新版则演进为层叠布局——功能面板悬浮在地图上，地图铺满全屏。这个转变的背后是对用户行为的洞察：用户打开地图的第一目的是"看地图"，功能面板应该是"需要用的时候才出现"，而不是一开始就占据一半屏幕。高德地图的演进也经历了同样的路径。今天你再设计 WebGIS，层叠布局已经是默认选择。
地图展示视野最大化
在层叠布局的基础上，让地图尽可能撑满屏幕。搜索框、工具栏、图例等元素缩小或折叠，只在需要时展开。高德地图的左上角搜索栏、右下角缩放按钮就是很好的例子——它们占面积极小，不影响地图阅读，但随时可用。
地图渲染配色为核心
WebGIS 的视觉基调由地图底色决定。如果地图是深色系，界面控件就跟着走深色；地图是浅色，界面也走浅色。脱离地图底色去单独设计 UI 配色，做出来一定割裂。配色方案选定后，用地图上的地标、道路、水系颜色作为参考，提取一组合适的辅助色。
GIS 行业色与语义化图案
地图上有大量行业专属的图标和标记——林地符号、水系标记、管线标识、监测点位等。这些元素的图案设计要遵循行业习惯，让专业用户一眼识别。同时颜色要和地图对比度配合好，避免淹没在底图中。如果在规划 GIS 中用了绿色代表规划区，就不要在地图底图上再铺一层绿色，否则用户分不清哪些是数据哪些是底图。
如何设计 WebGIS 交互模型
WebGIS 的交互设计不是把功能列表堆成菜单就完事了。我总结了一个四步模型，用于从业务需求推导出合理的交互结构。
Step 1：业务功能分解（最小颗粒）
先把所有功能拆到最小不可再分的原子单元。比如"测量"拆成"测距"和"测面积"，"查询"拆成"空间查询"和"属性查询"。拆得越细，后续组合越自由。
Step 2：业务功能组合（非线性结构）
不按传统的菜单层级去组织，而是根据用户任务流来组合。比如"测距"和"标绘"虽然是不同功能，但在外业核查场景下经常连续使用，就应该放在相邻位置或同一个工具栏中。非线性组合的意思就是：结构跟着任务走，不是跟着功能分类走。
Step 3：定义最大层级数（并行功能数）
给交互层数设上限。WebGIS 的操作建议控制在 3 层以内——比如工具栏一级、工具选项面板二级、参数设置三级。超过 3 层用户就会迷失，因为地图场景下没有"面包屑导航"这种东西帮你回溯。
Step 4：功能层叠组合（最小模块化）
把组合好的功能模块化，每个模块可以独立折叠、展开、拖拽。不同用户在同一个系统里可能需要不同的工具组合——外业核查员需要测量和拍照，内业分析员需要查询和统计。模块化意味着同一套系统可以按角色自由配置，不用定制多套界面。
十年回顾
从 2016 年写下这些准则到今天，WebGIS 的技术栈经历了从 Leaflet/OpenLayers 到 Mapbox/Deck.gl 的迭代，但 UI 和交互的底层逻辑几乎没有变。
一屏原则依然是铁律。层叠布局从当年的"先进做法"变成了今天的"理所当然"。唯一变化的是交互手段——从鼠标拖拽变成了触屏手势，从表单输入变成了语音搜索——但四步交互模型依然有效，因为无论交互方式怎么变，业务功能分解 → 任务流组合 → 层级控制 → 模块化 的逻辑链是不变的。
好的设计准则经得起时间。如果你正在做 WebGIS 项目，这五条 UI 规则和四步交互模型可以直接作为设计评审的参考清单。
