响应式布局设计指南和教程（1）--响应式时代的设计历程

如果你还没有接触过响应式布局，你得先明白响应式布局和之前用的布局方式稍稍有些不同，因为响应式布局的目的是为了使网页适应不同设备，你需要一段时间的学习来最终实现一个响应式布局的网页。

我想展示一些旧的设计流程带来的问题，在此基础上引入一些新的方法和工具，在这个过程中，你将在学习响应式之路上找到起点和突破。

问题：

当我们用旧的设计流程试图去得到新的结果时，或多或少会产生一些问题。这些问题就像雾霾，一开始我们没有意识到并习以为常，直到有人明确。比如，当你在Photoshop中创建一个桌面大小、固定宽度的布局，并交给开发人员解释成HTML/CSS，我们已经要求开发人员做出许多设计决策。下面是个简单的例子：

• 如何为不同大小的设备调整布局？（根据自己的意愿将页面元素层次化当然是很nice的）
  
• 那内容的层次是什么呢？
• 怎么样使得导航响应较小的屏幕？

如果开发人员在审美方面有缺陷，那么会导致大麻烦。但是有着正常审美水平的开发者或者设计师会对这些报以微词并催促改进，这使得开发人员往往最后做出妥协，但由于没有良好的反馈机制，导致不好的用户体验。

更多的工作量还是更有效的工作？

你当然可以选择做更多的工作去解决更多的挑战，那么你和你的团队就不得不去设计一个桌面版框架和一个移动端框架，这将会大大增加你们的工作量，因为你不得不考虑不同设备的大小和分辨率。这时候你会意识到你处在一个恶性循环中，局限在可交付成果和不断缩小的利润的困境。你会发现，用旧的设计流程其实不能真正解决问题，而且使你睡眠不足，利益减少。

因此需要新的设计流程来解决问题。有一些聪明的人认为答案就在浏览器上，但是不得不说，目前的设计工具还不足以能够在浏览器中自由的设计。

也有一些新的想法出现，比如涉及到响应的HTML/CSS的原型看起来非常有前途。我计划进一步调查这些。然而，这种方式也会带来一些挑战，比如在设计较为复杂的网页之时，开发所用的时间也会变长。大部分通用的例子并不能良好的、便捷的 转化为项目。

目前我们正在成功使用另一种途径。它试图优化内容、设计、开发时间，以达到一种便捷、广泛、有效、轻巧的平衡。

解决方案：Priority Guide

我习惯叫我这个解决方案为“mobile-sized content prototype wireframe thingy“，由于身边每个我认识的人都建议我更改这个名称，因此简介胜出，我更名为：”优先级指南“。

利用此方案，我们先创建一个单一的可交付成果，为文本集中和移动至上的设计开发相似的线框提供了方向。

Download a PDF of the guide

从本质上讲，移动大小的方法是更多的单列布局。单列又导致内容和特征的线性显示。这种线性显示使优先级和层次比桌面端大小的线框更为明显，尤其是如果你试图使用一个真正的内容而不是希腊文字，因此草案内容的原型（这里不是很明白）。

在这一点上，武装的只是这一优先指南，设计师设置关闭，创造一个美丽的。设计师我们信得过的PS图象处理软件，开始了一个新的布局，在传统的桌面分辨率一样，你可能已经在过去的十年中做的。一个好的网页设计师（配备了自己的超级大国，它的可视化）是提前做出设计决策的一个桌面分辨率看着手机计划。这就是他们的思想如何工作。

Download a hi-res JPG of the final design

一旦设计工作完成，移交到开发者，包括已经完成的桌面设计和原手机大小的线框。