当用户迷路时，他们会查看页面顶部，而顶部导航则可以挽救这一切。从可读性和大小到响应性和设计，在将顶部导航设计为最重要的导航组件之一时，需要考虑许多最佳实践。
如果设计得当，顶部导航会增加导航中元素的可发现性，允许用户快速访问导航和搜索，而无需额外的猜测并找到他们需要的内容。
使用响应式顶部导航
在设计网站或应用程序时，请始终问问自己它在移动设备上的外观。使用可以适应不同屏幕尺寸的响应式标题是一个很好的解决方案。
汉堡菜单是用于较小屏幕的响应式标题的绝佳元素。当一只手拿着手机时，它是可识别的并且很容易用拇指触及。
保持可读性
如果您关心可用性，请首先解决字体可读性问题。复杂的字体可能看起来很棒，但如果用户看不懂它就没有用。
在选择字体时，还要考虑它如何反映品牌声音，以及它是否适合特定产品。
避免在标题中使用任何手写或风格化严重的字体。
建立视觉层次
用文本重载顶部导航会严重破坏视觉层次结构，您最终会得到一些仅与相关组件模糊相似的东西。为避免这种情况，请仅在顶部导航中提供核心信息，以便用户可以快速扫描并继续前进。
在标题中添加 CTA
设计上的号召性用语按钮应该号召用户采取所需的行动——这一切都在名字里，使其突出以吸引注意力，并将其放在用户不会错过的地方——通常是在页眉或折叠线上方。
覆盖
如果弹出叠加层，请像处理其他带下划线的内容一样隐藏标题。它将向用户显示顶部导航目前不可用，这反过来又有助于避免混乱和导航问题。
使用一个顶部导航
在纽约比在郊区小镇更容易迷路。同样，复杂且嵌套的产品层次结构使用户难以定位自己并找到他们需要的东西。调整和重新组合内容，使其保持在一个顶部导航内。
使用汉堡菜单节省空间
汉堡菜单是一个很好的导航解决方案——它通过巧妙地隐藏次要内容来节省空间，而且用户也很熟悉它。但是，请避免将重要内容隐藏在图标后面，因为它应该始终可见且触手可及。
汉堡位置
在选择汉堡菜单放置时，出现了两难选择：右上角还是左上角？
如果您正在设计 Android 应用程序，请按照设计指南. Android 用户希望汉堡菜单位于屏幕左侧，而以不同的方式放置可能会导致摩擦。
设计多平台应用程序可能需要考虑。问题是，您可以在移动和 Web 界面中遇到这两种变体。一方面，将菜单放在左侧支持从左到右语言的用户的 F 形阅读模式。
另一方面，汉堡菜单通常隐藏次要的导航选项和功能。将其放置在屏幕的右侧并将左侧用于更重要的内容是有意义的。此外，这个位置更方便惯用右手的用户使用拇指导航应用程序。
最后，您还可以考虑删除汉堡菜单并使用底部导航移动或将辅助导航项移动到桌面的页脚。
大顶部导航大小
大顶部导航占用了大量空间，在界面中营造出幽闭的感觉。通过在滚动时降低标题高度或其透明度来解决此问题
本文内容为转载
网友评论