侧边栏做不到的事
侧滑面板成为电商默认移动菜单模式,原因充分:它保留了上下文(页面仍部分可见),在各平台对用户都很熟悉,并且可以通过轻扫直观关闭。对大多数店铺而言,在大多数情况下,这是正确的选择。
然而,侧边栏存在视觉上限。在移动屏幕上,侧滑面板的典型宽度为320至360像素——导航功能性足够,却缺乏表达力。类目标签挤在狭窄的列中,品牌背景色只填满一条带状区域而非整个画布,任何排版或视觉上的抱负都受制于这种几何局限。侧边栏能说"这里是导航",但无法说"这就是我们"。
全屏叠加导航能同时传递这两层含义。当菜单展开,整个屏幕成为导航——满宽、满高,品牌色彩或排版充满屏幕——导航交互便成为一个品牌时刻。从浏览商品到进入菜单的过渡,是一次有意为之的停顿、一次揭示、一次宣言。对于那些将导航体验本身视为品牌表达一部分的品牌来说,这不是画蛇添足,而是深思熟虑的设计。
「我们是一个时装品牌,呈现就是一切。我们的产品摄影经过艺术指导,包装设计为留存珍藏,门店是精心打造的空间。那个窄窄的侧滑面板让人感到不协调——好像我们在每一个品牌触点上都投入了心血,唯独忽略了顾客最常使用的数字触点。当我们换成在标志性黑色背景上呈现大尺寸排版分类链接的全屏菜单后,顾客开始专门评论网站的"体验感"。菜单现在是品牌的一部分,而不仅仅是导航工具。」
— Navi+ 用户,当代时装品牌
全屏导航的设计原则
全屏叠加导航的设计要求与侧边栏不同。扩展的画布是一种机遇,但需要更有意识的构图:
大而有力的排版作为主要导航元素。 当整个屏幕都可利用时,导航标签应足够大,以构成菜单的视觉架构——分类名称通常为24至36像素,在手机屏幕上显得刻意而宏大。每个链接周围的留白(或品牌色空间)是构图的一部分,而非浪费的空间。将小链接堆砌在中央窄列的全屏导航错失了这种形式的要义;标签应当呼吸,有意识地占据屏幕。
精简链接:只呈现最重要的目的地。 侧边栏可以容纳10至15个导航链接,因为这种形式隐含地传达"这是完整的导航结构"。拥有15个链接的全屏菜单看起来像一张列表;拥有5至7个链接的全屏菜单才像一个导航。扩展的画布奖励更少但更审慎的选择。如果店铺有超过7个有意义的顶级目的地,组合方案更为有效:主导航采用全屏,附加分类通过较小的链接行或"更多"展开来补充。
背景的策略性运用。 全屏菜单背景是数字店铺体验中最大的单一品牌表面。它可以使用品牌标志色、渐变、微妙的纹理,或按季节或营销活动更换的全屏背景图。拥有深色品牌色板的奢侈品牌——黑色、深海军蓝、墨绿——会发现全屏导航尤为有效,因为深色背景能为白色或浅色分类链接提供最大的对比度与视觉重量。菜单背景应与任何编辑摄影一样经过深思熟虑地选择。
传递意图的展开/收起过渡动效。 打开全屏菜单的动画是体验的组成部分。向上滑出、淡入、从Logo展开的面板擦除——每种方式传递不同的气质。缓慢、戏剧性的展开(400至600毫秒加缓动曲线)传递奢华与沉稳。更快、更利落的展开(200至300毫秒)传递现代感与效率。收起动画应以相近的节奏镜像展开动画;缓慢展开却瞬间收起的菜单会产生令人不适的矛盾感。Navi+ 的 Slide Menu 支持全系列过渡时长与缓动配置,以匹配品牌所追求的气质。
| 形式 | 品牌表达 | 最适合 |
|---|---|---|
| 侧边栏(标准 Slide Menu) | 功能性 — 高效、熟悉、保留上下文 | 大多数电商场景;安全可靠的默认选择 |
| 全屏叠加 | 表现力强 — 品牌沉浸感、排版大胆有力 | 时尚、奢侈品、生活方式品牌,导航本身即是品牌 |
| 混合方案:Tab Bar + 全屏次级导航 | 兼顾两者 — 即时主导航访问 + 富有表现力的完整导航 | 主次导航需求有所区分的品牌 |
全屏导航并非答案的情形
全屏导航适合那些将品牌沉浸感作为核心价值主张的品牌。对于导航效率比品牌表达更重要的实用型店铺(生鲜、工具、大宗商品),以及需要菜单同时展示大量链接的大型复杂商品目录店铺,全屏导航则不太适用——拥有20个分类的全屏菜单反而与这种形式的设计逻辑背道而驰。判断标准很简单:如果打开导航应该让人感觉像进入品牌的世界,全屏是正确的选择。如果打开导航应该让人感觉像在使用一个实用工具,那么配置合理的侧边栏或 Tab Bar 会服务得更好。