作为空间构图的导航
导航通常被设计为列表。大多数导航实现的默认思维模型 — 以及大多数导航设计建议 — 将菜单视为有序的项目列表：Slide Menu中的垂直堆叠、桌面导航栏中的水平行、Tab Bar中的网格。这种基于列表的思维产生了功能性导航，但错过了导航传播潜力的重要维度：空间构图。
导航中的空间构图使用元素之间的物理关系 — 它们的位置、大小、分组、对齐以及它们之间的空间 — 来传达标签文本之外的含义。以比辅助链接更大字体设置的主导航链接不仅看起来不同；它表示层次结构，告诉访客扫描的眼睛首先看哪里。周围有充足空白空间的导航组不仅看起来更平静；它表示该组在视觉上独立于相邻组，帮助访客在阅读任何标签之前解析菜单的结构。打破与菜单其余部分对齐的导航区域不仅看起来独特；它表示该区域在类别上不同 — 一个"精选"区域、一个"特卖"区域、一个"新品"区域 — 值得单独关注。
"我们在产品摄影和品牌字体上花了大量时间，但我们的Slide Menu仍然只是一个相同大小、相同间距的链接列表。当我们与设计师合作创建具有空间层次的Slide Menu时 — 主要类别使用更大的字体、'购物'和'关于'之间有清晰的视觉分隔符、顶部有带图片的精选系列块 — 它开始感觉像我们品牌的其他部分。访客会评论说'整个网站'感觉更有考量。是导航改变了，而不是产品。空间设计产生了差异。"
— Navi+客户，生活方式与服装品牌
导航的空间设计原则
通过比例和权重建立层次。导航中的视觉层次最直接地通过字体比例和权重来传达。主要导航类别 — 访客最常使用的目的地，或具有最高转化价值的目的地 — 应通过更大的字体大小、更重的字重或两者兼顾，在视觉上与次要项目区别开来。人眼首先扫描视野中最大的元素；使用比例来表示层次的导航会将该扫描引导到您想要的方向。所有项目大小相同的Slide Menu迫使访客以同等注意力扫描每个项目以确定哪些重要；主要类别为18px、次要项目为14px的Slide Menu在读取任何标签之前就传达了层次结构。
通过空间接近和分离进行分组。格式塔心理学的接近法则指出，靠近的元素被认为属于同一组。导航空间设计利用了这一点：紧密间距的导航链接集群，随后是间隔，随后是另一个集群，立即传达两个不同的组，无需分隔线或区域标题。访客的视觉系统分析空间关系并推断出分组。在组边界添加细微的分隔线强化了这种感知；空间间隔和视觉分隔线的组合创造出感觉自然清晰的分组。
位置作为优先级信号。导航元素在可用空间内的位置带有其自身的含义。Slide Menu顶部的元素被认为是最高优先级；底部的元素被认为是补充性的。Mega Menu列左边缘的元素被认为是列的标题或最具代表性的条目。在Tab Bar中，中央位置（在5个插槽的栏上）通常通过眼睛的自然中心寻找行为获得最高的视觉关注。有意使用这些位置约定 — 将转化率最高的类别放在Slide Menu顶部，将最重要的操作放在Tab Bar中央 — 将视觉注意力与业务优先级对齐。
空白作为品牌信号。导航布局的密度传达品牌个性。最小空白的压缩、密集导航表示效率、实用性和全面性 — 适合技术性、专业性或以价值为导向的品牌。元素之间有充足空白的宽敞导航表示平静、高端或编辑质量 — 适合生活方式、奢侈或设计导向的品牌。导航中的空白不是浪费的空间；它是一种刻意的字体和空间选择，传达与字体选择和调色板相同的品牌定位。
| 空间元素 | 设计选择 | 传达的含义 |
|---|---|---|
| 字体比例 | 主要大，次要小 | 层次结构和扫描优先级 |
| 元素分组 | 具有清晰间隔的紧密集群 | 无需明确标签的分类结构 |
| 空间内的位置 | 顶部 = 主要，边缘 = 关键操作 | 优先级和品牌重点 |
| 空白密度 | 充足 vs. 压缩 | 品牌个性（高端 vs. 高效） |
在Navi+组件中应用空间设计
Navi+的Slide Menu、Mega Menu和Tab Bar都支持在空间设计层面进行自定义 — 字体大小、内边距、项目间距和区域结构无需CSS专业知识即可配置。Slide Menu尤其提供了一个垂直画布，能够回报空间设计思维：它延伸到整个移动屏幕高度，为设计师提供空间来创建可见的层次区域（顶部使用更大字体的主要类别、下方使用更小字体的次要项目、底部具有最小视觉权重的账户和实用链接），使菜单结构在读取任何标签之前就可见。这种空间分层可以通过可视化编辑器在一小时内实现，并产生访客归因于商店更广泛设计系统的同样视觉关怀感 — 因为导航中的空间设计是一个设计选择，而不仅仅是内容选择。