JDP Floorplans 解析：节省数小时的布局决策

Source: Dev.to

Introduction

在你编写 JDP 的第一个组件之前，有一个默默决定一切的选择：floorplan（页面布局方案）。
如果你把它做好，UI 就会显得轻松自然。

What Is a Floorplan?

floorplan 定义了页面在内容出现之前的结构布局。它决定了：

• header（页眉）放在哪里
• 是否有导航（左侧、右侧或没有）
• 内容放在哪里
• 侧边面板的行为方式
• 页面在不同设备上的响应方式

可以把它想象成建筑的蓝图——在决定客厅放哪张沙发之前，你先要确定房子有多少间房。JDP 的工作方式也是如此。

Why Floorplans Matter for Insurance Apps

保险类应用并非普通的着陆页。它们通常是：

• 数据量大
• 导航繁多
• 表单众多
• 多角色（代理人、客户、管理员）
• 需要在数十甚至上百个屏幕之间扩展

如果每个页面都自由决定自己的布局，必然会陷入混乱。JDP 采用了相反的思路：

“先确定结构，再在其内部构建。”

floorplan 在不牺牲灵活性的前提下强制一致性——这正是大型企业应用所需要的。

Common Floorplan Shapes

JDP 的 floorplan 通常有几种常见形状：

• I‑shape
• L‑shape
• C‑shape
• R‑shape

你不必记住这些名称；只要看到它们，就会立刻认出，因为它们正好对应用户对应用行为的已有期待。

Choosing a Floorplan

一旦选定了 floorplan，以下事项会自动处理：

• 间距
• 对齐
• 响应式布局
• 可访问性规则

这样你就可以专注于页面内部的内容，而不是页面本身如何组合。仅此一步，就能在项目中节省数小时，甚至数天的时间。

Configuring Defaults and Overrides

• 为整个应用设置默认 floorplan。
• 在需要时为特定路由覆盖。

结果：

• 90 % 的页面保持一致
• 10 % 的页面获得特殊处理

这让你的应用保持整洁，同时又不至于被束缚。

Floorplan vs. Layout

• Floorplan = 整体页面结构
• Layout = 内容区域内部的排布方式

JDP 将这两者分离，使你不会把结构决策和内容决策混在一起——这是一种出乎意料的强大思路。

Benefits of Using Floorplans

• 页面外观保持一致，几乎不费力
• 新开发者能更快了解应用
• 布局错误大幅下降
• 代码审查更轻松
• 设计争论不再出现

floorplan 静静地强制良好的 UI 规范，却不需要大声宣扬。优秀的 UI 并不在于华丽的组件，而在于坚实的结构。JDP 的 floorplan 提前为你提供了这种结构，让你不必在项目后期去修复本不该出现的布局问题。

Conclusion

一旦你正确使用 floorplan，你会惊讶于过去是如何在没有它们的情况下构建大型应用的。