全屏菜单把导航展开为一整屏，适合栏目不多、需要同时呈现品牌与内容分类的网站；高频切换、栏目庞杂的工作系统则要谨慎使用。它的优势是展示空间充足，代价是用户每次找入口都要打开和关闭一层。是否适合，先看任务，再看视觉效果。
下面通过20个菜单案例，从构图、栏目组织与可用性三个角度观察。选中方向后，可以用墨刀原型验证菜单的打开、跳转与返回，把关闭入口、键盘操作和手机显示一起做出来，避免只交付一张展开态。
什么情况下适合用全屏菜单
| 任务或内容 | 使用判断 | 需要补的设计 |
|---|---|---|
| 作品集、品牌展示、活动官网 | 可用较大图片或短栏目传达内容方向 | 栏目命名、明显关闭入口、当前页面提示 |
| 商品或服务分类较多 | 先判断能否清楚分组，再决定全屏展开 | 分类层级、搜索与返回上一级 |
| 后台工具、高频页面切换 | 全屏遮挡会反复打断工作，应谨慎 | 考虑持续可见的导航或局部展开方式 |
菜单的名字不应只让团队内部看懂。若栏目究竟怎么分还没有共识，可以先用卡片分类法整理用户对内容的归类方式，再确定菜单版式。漂亮的全屏动效无法弥补用户不知道点哪一项。
20个全屏菜单案例：借鉴什么，调整什么
以下沿用文章中的案例画面分析布局。每个案例都可以提取一种可用的组织方式，不必连同颜色、文字大小和装饰全部照搬。
1. Maecia
四块大图围绕中心标识组织，图片能先传达内容主题。适合分类少且每类都有辨识度的项目；实际使用时还应保证栏目文字在明暗不同的图片上都清楚可读。
2. Olcese
品牌块与多个图片入口组成网格，栏目既有图像也有名称。借鉴点是让分类关系在打开时一次展开；需要检查不同图片比例与文字对比，避免某个分类只剩装饰图。
3. Moeko ABE
横向排列多个内容缩略图，当前项目位于视觉中心。适合作品类内容浏览；如果标题只有很小一行，用户可能看得见作品却无法理解分类，移动端应重新安排图文顺序。
4. Conference Awwwards
右侧纵向栏目与大面积背景形成主次，主页、日程和门票等入口集中。可以学习把主要栏目收在同一区域，但背景上的文字不能与导航互相干扰。
5. Drygital
左上角纵向文字与紫红渐变构成鲜明视觉，栏目没有分散到多处。适合短标签；若换成长中文名称，应优先保证行距、对齐和关闭位置，而不是保留过密的装饰布局。
6. Aleman’s Design
细长字形的栏目在中心纵向排列，右上角关闭符号比较醒目。构图简洁，但窄字体不一定适合中文和长标签，实际项目应让阅读与点击范围都足够清楚。
7. Mas Industries
深色背景承托产品图，各栏目带有明显的产品对象。分类以产品为主的网站可以借鉴；暗部细节和文字对比需要检查，不能让深色风格把入口一起藏起来。
8. Danne Olsson
单色背景与中心文字构成非常轻的导航层级。适合少量作品分类；可以增加更清晰的当前项与焦点状态，使简洁不等于缺少操作反馈。
9. Impossible Bureau
Studio、Work、News、Contact分成四列，每列有简短说明。这个案例有助于理解“标签加解释”的方式；窄屏需要改为易扫描的纵向排列，而不是把四列文字压窄。
10. Voisins
人物和空间照片分别承载内容方向，图片让用户先理解场景。适合内容有明显场所差异的品牌；栏目名称仍要完整，不应依赖用户识别照片中的人物或建筑。
11. Fornace Studio
案例画面展示了手机上的全屏菜单，让入口集中在一块小屏幕中。借鉴时应检查触控距离和背景干扰；手机屏幕占满并不意味着所有项目都能不滚动地塞进去。
12. Webgriffe
多个业务名称排成文字组，辅助联系入口放在下方。它把主导航和辅助信息分层，但颜色较浅的文字应提高可读性，不能把低对比度当成精致感的前提。
13. Moma
展览相关图像与标题并排，用户可根据作品和说明一起判断内容。适合图像本身就是内容线索的页面；图片链接仍需要明确名称，不能只靠一排缩略图传达关系。
14. Giaco Morelli
系列名称和年份集中在中间，关闭按钮与辅助入口分开。可以借鉴清楚的系列层级；实际内容更新后，应保持年份与系列对应，别让历史项目和当前入口混淆。
15. Gianluca Bocchi
三块并排面板使用不同明暗，标题与简短说明帮助区分入口。关键是每块都有相似的信息结构；中文文案增加后，应让各块保持可读的宽度和高度。
16. Elliot Lepers
多个作品按纵向色块分栏，项目文字叠在不同背景上。作品集可以借鉴这种目录感；要逐项检查文字是否被图片遮住，并避免只能依靠悬停才能知道内容。
17. Fahrenheit
背景经过弱化，中心只保留几个清晰栏目，用户注意力集中在导航。借鉴点是降低背景竞争；关闭操作和键盘焦点仍要足够明显，不能只保留一组静态文字。
18. N3RD
横向色带中依次展示Work、About、Process等栏目，名称与说明结合。可以学习这种便于扫描的清单结构；在更窄屏幕上仍要检查换行、触控区域和滚动，而不是认为全屏列表天然适配。
19. ivxvixviii
黑白斜切构图带来强烈方向感，小块文字区域与大图对比明显。它适合表现独特视觉风格，但作为导航时应扩大文字可读区域，避免艺术构图压过入口。
20. The Colors of Motion
彩色竖向画面把不同电影内容区分开，图像本身承担识别功能。使用类似方式时，应保留稳定的文字名称和选中提示，让不熟悉图像内容的人也能找到目标。
全屏菜单交付前，补齐五种行为
- 打开：按钮同时表达菜单名称与当前展开状态；用户无需猜三条线究竟能做什么。
- 浏览：栏目顺序和分组清楚，当前页面有提示，长标签不被截成无法识别的字。
- 关闭：提供可见关闭入口，并支持合适的Escape行为，关闭后回到合理位置。
- 跳转：选中栏目后到达正确页面，浏览器返回能恢复用户原来的浏览任务。
- 滚动：菜单内容过长时可在菜单内浏览；若设计为阻断背景的模态层，背景操作与焦点也应按模态规则处理。
网站导航通常仍由按钮、链接和列表组成。W3C导航展开示例明确区分普通站点导航与复杂应用菜单，不能因为视觉上叫“菜单”就随意套用menu角色。如果全屏层确实按模态对话框工作，则应同时符合模态焦点与关闭行为，而不是只加一层白色背景。
菜单只是网页交互的一部分；要把页面反馈与用户任务连起来，可进一步了解交互式网页设计的方法。
在原型中怎样验证，而不是只看展开态
用同一组栏目做两版：一版常见导航，一版全屏菜单。请参与者完成“找服务范围”“看一个作品”“联系团队”三项任务，观察是否先找到菜单入口、是否理解栏目、能否顺利回到原页面。把误点和犹豫记录到对应控件，避免只问“哪版更好看”。
可以从已有导航模板开始，但至少补一张关闭状态和一条返回路径。键盘焦点如何进入和退出导航，可继续对照键盘导航与焦点管理的交付方法。布局决定看到什么，焦点与返回规则决定能否完成操作。
常见问题
全屏菜单适合所有手机网站吗？
不一定。它能提供较大的触控区域，也会遮住当前内容。栏目很少时简单展开即可；用户需要频繁切换时，持续可见或局部展开的导航可能更省操作。
背景动画越丰富越好吗？
动画应帮助理解打开、关闭和层级变化。若每次找栏目都要等待，或文字被动画干扰，就需要缩短或减少效果，并考虑减少动态效果的用户偏好。
