概述
系统布局不像可视化大屏那样追求视觉冲击力，它更关心一个问题：用户进来之后怎么高效地完成工作。根据业务类型的不同，系统布局可以归纳为三种驱动模型：以地图为核心、以流程为核心、以用户为核心。
三种模型的本质区别在于"主角是谁"——地图、业务流程、还是用户角色。选对了模型，整个系统的信息架构就不会走偏。
布局
以地图为核心
地图作为主视图占满视觉重心，页眉、导航、侧栏等辅助区域紧凑布局。导航条高度建议控制在 50-90px，侧栏宽度控制在 20% 以内，把最大面积留给地图。地图上可以放置政区切换、编辑工具、底图切换等功能入口。交互链路尽量短，操作不建议超过 3 步，否则在地图场景下用户很容易迷失。
也可以将地理空间作为唯一视觉主体，地图全屏化铺满整个屏幕，所有业务信息和操控入口均以半透明浮动卡片或悬浮按钮轻量化叠加于地图之上，确保不遮挡关键地理要素。高频操作就近布置，交互路径压缩在3步以内。界面以"全屏"为宏观视野，下钻至具体业务个体层，实现从宏观指标到微观实况的逐级穿透。
以流程为核心
采用卡片式布局为主，保证每块内容的区域感和独立性。核心是对业务流程做精细化梳理——用明显的 Tab 选项卡引导用户分阶段操作，把复杂表单拆成步骤化，减少一步到底的焦虑感。数据筛选和搜索要有机组合：先筛选缩小范围，再搜索精准定位，支持多字段搜索。
以用户为核心
告别固定模板，采用动态布局——页面由不同业务组件拼装而成，每个模块可以自由拖拽排列。这种方式的核心能力是按角色配置：不同岗位看到不同的功能和数据，每个人只看到自己需要的部分。对开发来说，框架提供基础布局模式和公共业务组件（查询、树、表格等），业务层通过配置就能搭建基础页面，无需每次都从设计稿重新画。
设计要点
以地图为核心布局
- 主视图最大化是最高原则，一切辅助元素都要为地图让路。页眉、导航、侧栏的设计要点就是两个字——"克制"。
- 地图交互建议控制在 3 步以内——每多一步操作，用户在地图场景下的完成率就会明显下降。
- 地图视图中的工具入口要有明确的功能区分：编辑类、查看类、切换类各放一边，避免图标堆在一起。
以流程为核心布局
- 卡片式布局是在流程型系统中保持信息清晰的最优解——卡片天然有"这件事归这件事"的边界感。
- Tab 选项卡是对流程步骤最直接的引导方式，当前在哪个环节、下一步去哪，用户心里有数。
- 复杂表单不要全堆在一个页面里，拆成步骤后用户的心理负担会大幅降低，完成率会明显提升。
以用户为核心布局
- 动态布局的难点不在"能拖拽"，而在"默认排得好"——新用户进来看到的是一个合理的初始布局，而不是一块白板。
- 组件化配置让非核心页面可以靠配置完成，设计师的精力可以集中在高价值页面上。
- 允许容器自由组合与拆解，来构成有业务特点的完整界面，但组合规则要提前定义好，否则不同人配出来的页面体验差异会很大。
优劣势分析
以地图为核心布局
- 优点：界面视野最大化，布局紧凑，查阅地图和作业编辑效率高。
- 缺点：留给 UI 视觉设计的发挥空间小，难以做丰富的视觉装饰——不过这通常是功能型系统可以接受的取舍。
以流程为核心布局
- 优点：流程与数据结构清晰，用户沿着设计好的路径走就行，学习成本低。
- 缺点：信息展示密度大时容易让人感到压迫，需要在步骤划分和信息量之间找平衡。
以用户为核心布局
- 优点：具备角色化能力，可以按角色和场景精准配置该用户需要的功能与数据，高效直接。
- 缺点：高度灵活意味着对前后端架构要求高，如果组件化和配置体系不够成熟，反而会增加开发和维护成本。
