手机反应敏捷的网站布局已经成为设计师非常常用的工具。建立一个布局从来都不容易，每个网站通常需要一个独特的解决方案。响应式设计结合了桌面和移动设备，以提供一个统一的浏览体验。我看到了很多精彩的例子，展示了响应式网页设计的趋势。

在这篇文章中，我想特别关注航行菜单。要构建响应式导航，您需要一种技术来处理将大小缩小到较低分辨率，或随后处理扩展到较宽桌面监视器。

创建网站的过程应该总是从一般的想法开始。这些想法会变成线框或低保真度的实体模型，给设计师一个方向感。这是相当简单的，但创作过程需要一个现有布局的大型可视化库，以了解哪些界面是可用的和设计良好的网页设计的重要部分，值得更多的报道。

响应式导航近几年来，这一创意过程发生了轻微的变化。现在设计师们更加关注网格和流动性。可访问的响应布局应该是灵活的，并且自然地更新到任何屏幕大小。导航菜单可能会很棘手，因为缩短一组链接通常需要彻底修改用户界面。

重庆建网站在这篇文章中，我想介绍一些一般的技巧和指导方针，帮助设计师使用他们自己的想法进行响应式导航。头脑风暴阶段对于随后的每个其他阶段都是至关重要的。一旦你有了一个可行的概念，就更容易想象出响应式网站.

另见：测试响应式Web设计的10个有用资源

以身作则

首先，了解其他网站如何使用响应式导航是很重要的。我建议你浏览一些你最喜欢的网站，找出最能响应的特性。哪些布局看起来比其他布局更自然？你能把类似的想法应用到你自己的导航中吗？

在线画廊媒体查询是一个非常好的网站布局。只有几个主要的方法来处理响应导航，所以你如何进行它将取决于你的网站-特别是有多少页是需要的，如果菜单需要内部链接的子类别。

它有助于理解别人在做什么，这样你就可以建立在上面。网页设计并不容易，但它也不应该是一个极其困难的任务。从别人的成功中学习，并将这些想法与你自己的结合起来，创造辉煌的导航。

素描和笔记

我一直建议的第一步是在一张纸上记下一些想法。网络是一种数字媒体，但计算机并不总是头脑风暴的最佳工具。在键盘上键入字母不会产生同样的认知功能用手写每一个单独的字母。同样的道理也适用于绘画或素描，而不是用线框程序来创建。

这一步一开始会让人觉得笨拙和不必要，特别是当你不习惯于在日常生活中写作或画画的时候，但是我发现暂时与计算机断开连接会有帮助，因为思想可以更快、更自然地流动。

一个有趣的练习是在一张纸上写下几个中心主题。制作一个画箭头的单词流程图，把不同的想法连接在一起。目的是快速地把你的想法画下来，看看什么感觉是对的。这有助于写作，但在刚开始一个新的创意项目时也很有帮助。

否则，只需从设计良好的响应网站中提取现有导航菜单的草图就可以了。将完整版本和响应版本并排绘制。将概念线框化，以演示每个链接将如何显示在页面上。根据您是视觉思考者还是上下文思考者，我建议您使用以下方法之一两种头脑风暴的方法开始。

创建用户体验

在你设计一个界面之前，一定要考虑那些使用网站的人。导航菜单是网页中最具交互性的部分之一。没有导航，我就没有理由写这篇文章！但我们并不是为了我或是为了你而创造好的导航系统-是给用户的.

在线框图阶段，记住普通用户是你的主要目标。从用户体验的角度考虑最佳解决方案，而不是最佳设计的解决方案或最具创造性的解决方案。保持你的思维开放，以提高性能的可能性。

它肯定有助于检查其他设计师创造了什么，因为你会看到从用户的角度，什么使导航感觉像一个坚固的桥梁，而不是摇摇晃晃的老板不安全的旅行。

例如，下拉式导航是大型网站（如电子商务商店和大型企业）的重要组成部分，您应该如何处理仍然需要在移动设备上可见的子菜单或子菜单？没有单一的正确答案，但最好的答案将只关注用户体验。

如果我的项目需要下拉导航，我建议在响应式布局中使用隐藏的滑动抽屉菜单或可展开的链接喜剧中心网站是这两种方法的完美工作示例。如果每个页面仍然可以访问，则删除额外链接是另一种选择。

建筑与测试

如果你能在Photoshop中设计出一个漂亮的导航，那对于最初的阶段来说都是很好的，但是要真正将设计构建成一个实时的网站需要逻辑性和持久性。如果你对web开发有些熟悉，就不要轻视这一步。

一个很好的练习是从头开始构建导航菜单的快速原型。这需要对HTML/CSS和jQuery（如果需要的话）有一个粗略的理解。你应该以一个低保真度的工作概念结束，然后立即将导航构建成一个HTML页面。使其完全响应并在所有浏览器中测试界面。

这样，你就可以看到导航在最后一次迭代中的表现。你总是可以选择在以后用渐变和纹理来增加颜色方案的趣味性。与其直接跳转到额外的功能中，不如先关注用户体验——动画风格、链接密度、易读性，当然还有反应的倾向。

要在没有代码IDE（集成开发环境）的情况下开始，请使用在线云编辑器，如密码笔。它可以免费使用，并实时呈现代码。

默认情况下，CodePen和类似网站创建的公共代码库可供其他开发人员免费使用。如果要为测试项目创建帐户，只需将每个repo设置为private即可。然后，您可以从任何计算机访问代码，所有更改都将自动更新。

如果它没有坏。。

…那就别修了！这个短语几乎可以应用于任何事情，在大多数情况下，它都是令人难以忘怀的真实。

在规划自己的响应式导航时，不要试图用你的解决方案来过度创新。这里有一个创新和其他流行语的地方，而且这个地方位于可能性的范围内。试着脚踏实地，不要迷失在宏大的想法中。创意通常来自于混乱的思维模式，所以很容易偏离正轨。

游客不会真的在意你的导航是否在三叠纪时就被看过上千次了。只要它是功能性的，并融入到布局中，它就应该起作用。制作一个有效的响应性导航大约是70%的努力。之后，你可以在没有任何结构基础的情况下设计所有漂亮的装饰物。

在整个创作过程中，试着把每一个目标想象成简单而可实现的。当我们设定了看似不可能的目标时，这会导致拖延和事后的猜测。一个更好的策略是头脑风暴几十个独特的想法，看看它们是否有效。我希望这些技巧能帮助你重新设计过程中，以用户为导向的导航为重。

您可能还喜欢：响应式设计vs.移动网站vs.原生移动应用：哪一个是最好的？

响应式导航技术

请看下面这些技术，这些技术是我的选择，它们遵循了响应式导航最流行的想法。显然还有其他一些解决方案，但是本系列应该为您提供一些开始使用自己的响应式设计的想法。

块级菜单链接

考虑使用有序的单框样式链接的导航菜单。当您调整窗口大小时，这些框需要收缩或重新组织自己。块级响应菜单是那些设计为始终在页面上的不同位置显示链接的菜单。

正如你在投资组合中看到的威廉·塞特先生，可以为您的导航构造3个不同的断点。CSS3媒体查询是构建响应式导航的最快和最简单的方法，在所有现代浏览器中都很不错。他的网站上的链接始终保持块格式，即使在320px宽的iPhone屏幕上，你也可以直接在logo下面看到最重要的链接。

块链接和内联块链接只有一小部分是很好的。重新组织链接的模式并不困难，它们可以缩小到几乎任何大小。重要的是要有创意，为看起来最好的东西突破界限。不要害怕演示一个样式，看看它是什么样子的。只要保持链接灵活而坚固，总是在折叠物上方显示。

浓缩导航

一个类似的想法是将链接压缩成更小的空间，同时根据需要重新组织位置，您可以将此技术与水平导航菜单一起使用，水平导航菜单跨越页眉区域的很大一部分。块级导航链接通常保持相同的大小并保留其原始填充。但是为了进行压缩，您只需要更新导航项之间的大小和空间，如上的示例奥利弗·拉塞尔的网站.

不同的颜色有助于区分每个核心导航链接。虽然他的网站可能有大量的网页集合，但顶部导航只包含4个主链接。这就是为什么你会注意到随着布局的调整，有这么多额外的空间在慢慢减少填充。这种设计风格也让我想起了白色它将链接压缩得更小，直到它们最终分离并显示在徽标上方。

压缩链接的另一个有趣的可能性是从水平导航转换为垂直导航。这样，您就不会将链接隐藏在页面之外，用户仍然可以完全访问它们特鲁夫这是一个很好的例子。当链接开始压缩并更接近徽标时，响应式风格将迫使它们变成垂直模式。使用这种设计，您可能会按顺序容纳6或7个链接，尽管在移动智能手机上可能看起来有些凌乱。

输入选择选项

许多新的免费WordPress主题在他们的网站上发布的都是使用这种移动导航技术的。并不是所有的WP主题都是响应的，但是对于少数几个我注意到的主题，导航最终会变成一个下拉式的选择菜单。单击一个特定的页面将使您立即进入该页面，并成为所选的选项。

关于最新的重新设计粉碎杂志，您也可以看到正在实现此功能。我会说，虽然它看起来有些不合适，但仍有足够的空间保留可用链接。此方法非常易于设置，而且您不必太担心字体大小或额外的填充。

这也有两个缺点，即用户可能会对这个下拉列表的用途感到困惑。越来越多的人每天都在熟悉响应式布局。但有些访问者可能不认识这一趋势，他们可能会对页面顶部的选择菜单的用途感到困惑，但是你可以通过在导航选择菜单周围设计一个合适的布局来鼓励用户。日本博客通过在虚线边框之间封装导航，他们的响应性设计做得很好。

隐藏下拉工具栏

当谈到隐藏导航链接时，我发现了两个非常好的解决方案。第一个选择是使用一个典型的下拉导航，当用户点击导航按钮时，它会切换。一些下拉菜单可能会出现在页面内容的顶部，如您所见绩效营销奖。此选项将节省页面空间，并使动画效果与页面内容保持相对的断开连接。

我喜欢这个简单的投资组合网站或个人博客的想法。一般来说，这些网站不需要太多的链接，所以菜单本身不应该超过页面高度。如果你使用固定的位置，那么这可能是一个问题，其他下拉/下推菜单将是一个更好的主意树屋博客。它不会在内容上显示下拉列表，而是向下推动页面，以便为显示完整的垂直导航留出空间。

这个想法对我来说最为突出，因为如果需要的话，你可以包含子链接，甚至子链接。这是一个在桌面风格的悬停下拉列表和移动风格的点击切换下拉列表之间切换的优雅解决方案。安德鲁·乔克利甚至写了一个博客教程详细说明开发人员构建自己的响应下拉式导航的方法。