扁平与分层导航设计
过去十年主导的导航审美是扁平设计：导航面板使用纯色填充，没有阴影，边框极简，导航层与页面内容层之间没有视觉区分。扁平导航传达一种干净、现代的极简主义，与优先考虑简洁和直接的品牌非常契合。它也很容易实现：扁平设计不需要阴影值、模糊效果或Z轴构图思考。
有景深层次的导航采取相反的方法：它将导航视为漂浮在页面内容上方的物理对象，带有视觉线索——阴影、层次感、背景模糊、分层透明度——传达其在界面中的三维位置。这种设计语言借鉴自材质设计原则和被苹果界面设计普及的磨砂玻璃美学，创造了高端、精心制作的界面的感知。执行得当时，有景深层次的导航感觉是实质性的——像是你正在与之交互的物理对象，而非扁平的图形叠加层。这种触觉质感难以言表，但访客始终将其注意到，并视为品牌在执行中关注质量和细节的信号。
"我们将 Slide Menu 从纯白色面板改为磨砂玻璃面板——使用 backdrop-filter: blur 效果，让页面内容略微模糊地透过菜单显示出来。菜单背景变成了半透明的米白色而非纯白色。这个改变大约花了15分钟实现。访客开始在评论中将我们的店铺描述为'高端'和'苹果风格'，其中提到了使用体验。我们销售高端厨具；导航的景深线索与我们产品传达的内容相一致。即使只有导航发生了变化，整个品牌感觉也更加统一了。"
— Navi+ 客户，高端炊具品牌
导航设计的景深技术
投影用于层次感信号。应用于导航面板的投影——Slide Menu、Tab Bar 或 Mega Menu 下拉菜单——表明面板位于页面内容之上。阴影的参数传达层次的高低：小而锐利的阴影（2px扩散，0.1不透明度）传达低层次和最小分离；更大、更柔和的阴影（8px扩散，0.15不透明度）传达显著层次和与页面层的清晰分离。阴影的颜色也很重要：黑色调的阴影看起来平庸；用品牌主色调色的阴影看起来是刻意的，并为层次感线索添加了微妙的品牌个性层次。
背景模糊用于磨砂玻璃导航。CSS backdrop-filter: blur() 创造磨砂玻璃效果：导航面板的背景模糊了通过半透明面板填充可见的页面内容，创造出漂浮在页面上方的半透明材质的视觉印象。该效果要求面板具有半透明背景（alpha值低于1.0的rgba）而非纯色填充。模糊半径决定玻璃效果的强度：8-12px产生微妙的柔化效果，传达透明感；20-30px产生与苹果界面设计相关的强烈磨砂玻璃效果。背景模糊传达现代感和高端品质；它也是品牌设计系统是主动设计而非从默认值拼凑的视觉信号。
分层Z轴构图用于视觉层级。有景深层次的导航刻意使用Z轴构图：Tab Bar 位于页面内容层之上，Slide Menu 打开时位于 Tab Bar 之上，模态叠加层位于 Slide Menu 之上。这种层级向访客传达哪些元素是控件（导航）、哪些是内容（页面）、哪些是系统（警报），减少了解析界面结构的认知开销。当Z轴层级是可见的——当阴影和层次感使堆栈中每一层的位置清晰时——访客导航更有信心，因为界面通过视觉物理学传达了自身的结构。
| 景深技术 | 视觉效果 | 品牌信号 |
|---|---|---|
| 导航面板上的投影 | 菜单漂浮在页面内容上方 | 提升感、高端、精心考量 |
| 背景模糊（磨砂玻璃） | 页面透过模糊面板显现 | 现代、半透明、苹果风格 |
| 半透明面板填充 | 导航与页面语境融合 | 精致、编辑感、氛围感 |
| 分层Z轴构图 | 清晰的界面元素视觉堆栈 | 有条理、专业、刻意为之 |
景深设计适用于哪些品牌
有景深层次的导航与将高端、工艺或现代设计作为核心价值的品牌相契合：奢侈品、高端消费电子、优质食品和饮料、设计前沿的家居和生活方式品牌。对这些品牌来说，导航中的景深线索通过传达进入产品的同样注意力细节也进入了界面设计，强化了品牌定位。对于直接性、效率和可访问性是主要价值的品牌——平价零售商、实用工具、专业服务——景深效果可能传达错误的品牌个性（当品牌重视性价比时却显得高端），应该适当避免。景深问题始终是：这个设计选择是强化还是与该品牌实际想要传达的内容相矛盾？