导航是在告诉用户:点击以后,你会去哪里。手机屏幕更小,但这份承诺不能变得模糊。目标不是把桌面菜单压缩到能放下,而是帮助访客知道自己在哪里、有哪些内容,以及如何继续而不迷路。
使用可以预测的名称
菜单名称应该说明目的地。“服务”“案例”“联系”通常比内部部门名称或文字游戏更容易理解。品牌个性可以通过设计表达,不必让每次选择都变成猜谜。
按照访客需求组织页面,而不是照搬公司组织结构。如果两页回答的问题很接近,就考虑是否需要两个一级入口。缩短菜单的价值在于减少歧义,而不是隐藏必要信息。
清楚表达打开与关闭
菜单按钮应显示展开状态,并提供有意义的无障碍名称。移动菜单打开后,要留出足够的点击空间,保留清楚的关闭入口,并在适当情况下支持 Escape 键。
不要把悬停作为打开子菜单的唯一方式。触屏和键盘用户需要等效路径。菜单覆盖正文时,应说明如何返回,并避免不可见链接继续进入键盘焦点顺序。
让动效帮助定位
简短的过渡可以解释面板与按钮之间的关系。向上滚动时重新出现的页头,也能减少屏幕占用。但用户正在操作的控件不应该突然消失。
支持减少动态效果,并保持过渡简短。最终内容比动画过程更重要。某个效果在窄屏上难以理解时,应简化它,而不是单纯缩小。
测试完整旅程
试着查找服务、打开案例、返回列表,再发起咨询。分别使用触摸和键盘,检查焦点是否可见、标签是否易读,以及浏览器返回操作是否符合预期。
再用较长的翻译文字和更大的字号重复测试。只能容纳短英文单词的导航,还不能满足多语言用户。好的菜单,应让人点击之前就知道下一步是什么。
开始之前
- 使用访客理解的目的地名称。
- 支持触摸、键盘和可见焦点。
- 让打开与关闭操作容易找到。
- 测试长标签、大字号和返回操作。