响应式网页设计的概念最初是由 Ethan Marcotte 提出，从设计的角度引领我们思考：為(wèi)什么一定要為(wèi)每个用(yòng)户分(fēn)别做一套设计方案呢(ne)？是否可(kě)以有(yǒu)一种设计能(néng)够根据不同设备环境自动响应以及调整显示？特别是随着移动互联网的飞速发展，响应式 Web 设计不仅仅是关于屏幕分(fēn)辨率自适应以及自动缩放的图片等等，它更像是一种对于设计的全新(xīn)思维模式 - 响应是双方的，是互动的过程，在这个过程中设计师要考虑设备的性能(néng)、Dom 节点数量、屏幕的大小(xiǎo)等等。

响应式设计是从产品角度来进行的设计，在这个阶段我们需要产品经理(lǐ)、交互设计师、设计师以及工程师共同介入了。我们需要打破传统的思维模式去思考设计，从纯粹传统的Web向移动应用(yòng)过度。第一步需要有(yǒu)明确的信息架构，来从最小(xiǎo)显示屏的移动设备做产品设计，在移动设备中抛弃更多(duō)的使用(yòng)干扰，保证核心 功能(néng)的最优體(tǐ)验；同时交互与设计师的介入处理(lǐ)如何把模块设计的更小(xiǎo)更有(yǒu)弹性，并初步确定设计风格、设计框架等方案；而工程师需要在产品经理(lǐ)与设计师确定的方案中进行代码测试，充分(fēn)利用(yòng)不同设备独有(yǒu)的特性并进行框架搭建。

在设计阶段，線(xiàn)框图和原型图是必须的，而好的線(xiàn)框图和原型工具会让你更加专注于交互和功能(néng)。希望下面的工具能(néng)够帮你為(wèi)客户和团队设计出优秀的作品。

桌面端

• Axure：在功能(néng)全面强大和方便易用(yòng)上尽可(kě)能(néng)做到了较好的综合平衡。支持业務(wù)流程图。具备一定的页面流程图制作能(néng)力（可(kě)用(yòng)页面快照实现）；具备一定 PRD 能(néng)力。

   

• Mockplus：简单易用(yòng)的工作方式；快捷方便的交互设计方式。提供多(duō)种演示预览方式。大量封装组件和海量图标素材；支持团队协作和在線(xiàn)审阅。

   

• Balsamiq：专注草(cǎo)图，素描风格。

Web 端

• Proto.io：在交互设计上有(yǒu)突出表现。组、容器、滚动區(qū)的转换有(yǒu)特色。可(kě)通过插件导入 Sketch 文(wén)件。

   

• UXPin：在功能(néng)和便利性上有(yǒu)较好的平衡。具备一定的 PRD 能(néng)力（有(yǒu)“UX文(wén)档”模板协作支持 PRD）。可(kě)通过插件导入 Sketch 文(wén)件。

对于界面设计，在以前的设计中更多(duō)是针对桌面产品的，设计可(kě)能(néng)就是一个尺寸，每个模块的位置比较固定，但是在响应式设计中，这些东西就改变了，设计师需要根据产品的需要设计多(duō)个版本的设计，在这些不同的版本中，模块 A 在1024的宽度下，可(kě)能(néng)会是黑色背景，但是到了768下面可(kě)能(néng)会变成白色背景，实现了在不同宽度的不同展现。

从传统的设计角度，可(kě)以通过媒體(tǐ)查询（Media Query）的方式改变网页的布局，比如在固定的宽度下（也就是所称作的断点）改变布局。在以往设计更习惯的思维是针对某些设备（比如桌面、平板電(diàn)脑、手机）的数据来设置断点，比如1024 对应桌面、768对应pad、480 对应手机，但实际上，这些东西是靠不住的，因為(wèi)这些屏幕尺寸会根据时代的发展不断的变化。

但是响应式设计不应该只针对某些特定大小(xiǎo)的设备，设计过程中需要的是一个區(qū)间值，而不是将某一分(fēn)辨率对应一种设备。因此在设计过程中应该根据内容的需要进行设置，设计师需要寻找一个临界点—即当视觉效果开始不符合人们的审美或影响了内容获取时对应的值。

在响应式设计中，对于交互方式的设计需要进行更加全面的考虑。设计师不仅要考虑以前桌面用(yòng)户的使用(yòng)习惯，也必须兼顾不同尺寸的手持设备。比如大家在 PC 上习惯使用(yòng)的浮层在某些小(xiǎo)尺寸的设备上就没法使用(yòng)了。而且一些响应區(qū)域小(xiǎo)的链接也不方便使用(yòng)手指来操作，因此设计师可(kě)以做到”求同存异”。比如设计师可(kě)以根据屏幕的尺寸，来决定是否使用(yòng)浮层、或者增大操作區(qū)域、或者”整齐划一”。為(wèi)了方面让设计过程更加轻松，在这里特别推荐一款简单易用(yòng)的原型图设计工具 Mockplus，方便快速进行原型图的创建以及交互的实现。