有人说，2013将是响应式网页设计之年。自用户体验设计师Ethan Marcotte在2010年提出Responsive Web Design（RWD）的名词，即响应式网页设计，这个概念从Responsive Architecture延伸到web设计领域，让所有的交互设计、视觉、前端开发都开始投入到这个趋势，或者说新的设计解决方案中。

        响应式导航的设计遵循了响应式Web设计理念，页面的设计与开发根据用户行为以及设备环境(系统平台、屏幕尺寸、屏幕定向等)进行相应的响应和调整。通过同比例缩减元素尺寸、调整页面结构布局以及内容的优化调整等方式，使得用户在不同的平台上有着独一无二的用户体验。

一、情景定位

下面以三种有代表性的主流设备屏幕尺寸：Pc、iPad、iPhone做案例解析几种常见的导航设计。

1.简单智能的导航菜单形式

此款菜单适用于所有屏幕的一些设计，菜单扁平化，留有足够空间在各个不同的屏幕上做响应式的变化，一种简单的设计便可以轻松调整。

先来看响应式网站自助建设平台突唯阿非常简单色块的导航，在移动设备上，导航横向排列变纵向排列，页面简洁清晰且用户体验一致。

2.导航隐藏形式

在手机设备上导航的另一种形式以隐藏列表的方式呈现，是对空间的有效利用，突出高优先级内容的处理方式。

3.下拉菜单形式

使用下拉菜单来组织复杂内容是一个非常方便和流行的方式,复杂的网站甚至会使用多层次的下拉菜单。在较默认情况下，导航菜单根本就不显示，只有当触摸到右上角指定的小图标时，第一个内容层才会打开。当触摸到其中一个栏目时，第二个内容层才会逐渐展开，给用户一个非常清 晰明了的内容导航。

来参考下面一个案例：

下拉菜单的共通点是：默认情况下菜单隐藏，一旦用户需要导航链接，点击图标菜单展开，选中后菜单自动消失隐藏，下一次操作时重复。好处是不会影响其他的内容页面。

二、设计原则

1.在响应式网页设计中，有时候我们需要对页面内容进行删减，按照优先级显示内容，只显示高优先级内容是原则之一。在屏幕较小的移动设备上应该优先考虑内容并且 去移掉那些小的栏目。在顶部显示高优先级内容，即把最重要的内容放置在顶部。导航是否一定要出现在页头或者重新布局改在页尾都要依网站具体规划去考虑。

2.提供清晰和友好的手指操作链接。尤其在手机设备上，可点击操作的区块不宜过小，引导要清晰强烈，不忽略任何一款设备。

3.调整设计来适应可用空间，使得用户在不同的设备上仍保持对同一页面相同的视觉和感觉。这也遵循我们交互设计体验一致的原则。大家可以参考tuweia.com网站，设计非常灵活，在不同的屏幕分辨率下保持相同的视觉和感觉。

        响应式之所以变得流行的一大原因是无论在哪，看起来都很棒。2014我们正处在移动互联网快速发展的时代，一个网站能够兼容多个终端，而不是为每个终端做一个特定的版本，响应式设计为移动互联网而生，Web设计也将迎来更多的响应式设计元素。