如何理解呼应式规划（RWD）

    呼应式网页规划的概念开端是由Ethan Marcotte提出，从规划的视点引领咱们考虑：为什么必定要为每个用户别离做一套规划计划呢？是否能够有一种规划能够依据不同设备环境主动呼应以及调整显现？特别是随着移动互联网的飞速发展，呼应式Web规划不仅仅是关于屏幕分辨率自适应以及主动缩放的图片等等，它更像是一种关于规划的全新思想模式-呼应是两边的，是互动的进程，在这个进程中规划师要考虑设备的性能、Dom节点数量、屏幕巨细等等。

    呼应式产品规划

    呼应式规划是从产品视点来进行的规划，在这个阶段咱们需求产品司理、交互规划师、规划师以及工程师一起介入了。咱们需求打破传统的思想模式去考虑规划，从朴实传统的Web向移动应用过度。第一步需求有清晰的信息架构，来从最小显现屏的移动设备做产品规划，在移动设备中抛弃更多的运用干扰，保证核心功用的最优体验；一起交互与规划师的介入处理如何把模块规划的更小更有弹性，并初步确认规划风格、规划结构等计划；而工程师需求在产品司理与规划师确认的计划中进行代码测验，充分利用不同设备独有的特性并进行结构建立。

    在规划阶段，线框图和原型图是必须的，而好的线框图和原型东西会让你愈加专注于交互和功用。希望下面的东西能够帮你为客户和团队规划出优异的作品。

    桌面端

    Axure：在功用全面强大和便利易用上尽或许做到了较好的归纳平衡。支撑事务流程图。具有必定的页面流程图制作才能（可用页面快照完成）；具有必定PRD才能。

    Mockplus：简略易用的工作方法；便利便利的交互规划方法。提供多种演示预览方法。大量封装组件和海量图标素材；支撑团队协作和在线审理。

    Balsamiq：专注草图，素描风格。

    Web端

    Proto.io：在交互规划上有突出表现。组、容器、滚动区的转化有特征。可经过插件导入Sketch文件。

    UXPin：在功用和便利性上有较好的平衡。具有必定的PRD才能（有“UX文档”模板协作支撑PRD）。可经过插件导入Sketch文件。

    呼应式规划中的界面规划

    关于界面规划，在曾经的规划中更多是针对桌面产品的，规划或许便是一个尺度，每个模块的位置比较固定，可是在呼应式规划中，这些东西就改动了，规划师需求依据产品的需求规划多个版别的规划，在这些不同的版别中，模块A在1024的宽度下，或许会是黑色布景，可是到了768下面或许会变成白色布景，完成了在不同宽度的不同展示。

    呼应式规划针对媒体查询的断点

    从传统的规划视点，能够经过媒体查询（MediaQuery）的方法改动网页的布局，比方在固定的宽度下（也便是所称作的断点）改动布局。在以往规划更习气的思想是针对某些设备（比方桌面、平板电脑、手机）的数据来设置断点，比方1024对应桌面、768对应pad、480对应手机，但实际上，这些东西是靠不住的，因为这些屏幕尺度会依据年代的发展不断的变化。

    可是呼应式规划不应该只针对某些特定巨细的设备，规划进程中需求的是一个区间值，而不是将某一分辨率对应一种设备。因此在规划进程中应该依据内容的需求进行设置，规划师需求寻觅一个临界点—即当视觉效果开端不符合人们的审美或影响了内容获取时对应的值。

    呼应式规划在交互上有那些不同

    在呼应式规划中，关于交互方法的规划需求进行愈加全面的考虑。规划师不仅要考虑曾经桌面用户的运用习气，也必须兼顾不同尺度的手持设备。比方我们在PC上习气运用的浮层在某些小尺度的设备上就无法运用了。而且一些呼应区域小的链接也不便利运用手指来操作，因此规划师能够做到”求同存异”。比方规划师能够依据屏幕的尺度，来决议是否运用浮层、或许增大操作区域、或许”整齐划一”。为了方面让规划进程愈加轻松，在这里特别引荐一款简略易用的原型图规划东西Mockplus，便利快速进行原型图的创建以及交互的完成。