文档介绍：响应交互式网页设计

　　设计师，最主要的是创新，明锐洞察设计前沿，了解掌握设计趋势。这样才能更好的设计出更加时尚、符合时代潮流的东西。欢迎大家阅读！更多相关信息请关注相关栏目！

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

　　当自己和身边的朋友越来越多的用上了iPhone、iPad、android手机或平板，当越来越多的人都在谈论这个老意识新概念的话题，当我们一直秉承的用户体验第一与网页设计完美结合的时候，我也陆续整理了一些关于响应式的设计理念及方法的东西，今天就以响应式导航的设计抛砖引玉，和大家分享一下。

　　响应式导航的设计遵循了响应式Web设计理念，响应式Web设计Responsive Web design的理念是页面的设计与开发应当根据设备环境（屏幕尺寸、屏幕定向、系统平台等）以及用户行为（改变窗口大小等）进行相应的响应和调整。具体的实践方式由多方面组成，包括弹性网格和布局、图片、CSS media
query的使用等。无论用户正在使用pc、平板电脑，或者手机，无论是全屏显示还是非全屏的情况，无论屏幕是横向还是竖向，页面都应该能够自动切换分辨率、图片尺寸及相关脚本功能等，以适应不同设备。

　　一、情景定位

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

　　

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

　　先来看网页开发设计公司Flip非常简单色块的导航，采用了由网页文字链变到移动设备的按钮形式，规避了移动设备操作不精准等一些弊端。

　　另一种常见的右侧导航设计在很多网站中应用，例如：App设计团队Create，在移动设备上，导航横向排列不变，Logo和导航由一行变为两行，页面简洁清晰且用户体验一致。

　　

　　最常用的`一种排列形式，横向导航在小屏幕下变为纵向排列，一列、两列甚至是多列多行的形式，具体应实际情况而定。

　　先来看单列形式的案例：Forefathers Group

　　两列形式：Travelorego

　　多行多列形式：Regent College

　　

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

　　来看下Microsoft的下拉隐藏菜单，通过设定图标点击对菜单做收缩或展开。经典、简约的布局完美适合平台转换。

　　国际标准化组织ISO网站在移动设备预览时也采用了隐藏菜单的形式，但展开的交互形式菜单栏出现在网站的底部。这样，访客不得不先看头部和中间内容，迫使访客先浏览完网站后再决定下一步的走向。