来人人都是产品经理【起点学院】，BAT实战派产品总监手把手系统带你学产品、学运营。

的Jeremy Girard回顾了响应式设计中最常见的错误。

响应式设计已经不仅仅是一个流行的设计趋势，这是从桌面端浏览转移至移动端浏览的一次巨大转变。为了从行业现状中生存，网页设计师们不得不支持多屏幕多设备，而一个响应式策略可以解决适配的问题。

图片来源于，原地址

在想法形成的过渡阶段，原型在整个设计过程中分量很重。这篇文章评述了在响应式设计中最常犯的原型错误，以确保你的响应式设计是具有前瞻性的，而不是倒退的。

01.不针对屏幕而针对设备设计

根据提供的数据，现在市场上有24，093个不同的安卓设备，从去年的18，796个起——这还没有算上iOS和其它操作系统的设备。

这难以置信的差异使得针对某一机型进行设计是不可能的。一个聪明的解决办法是专注于屏幕的尺寸。

图片来源于Luke ，原地址

不要从可穿戴设备、手机、平板和台式机的角度进行考虑。将你的原型分成：

特定的屏幕尺寸将会在确定原型尺寸时提供更可靠的标准，因为不同设备间的区别实在太大了。考虑所有不同的屏幕大小的手机：有的比小平板还大呢。

此外，专注于屏幕尺寸还能防止在设置响应式的临界点时太依赖设备的尺寸，这是我下面要描述的另一个常见错误。（译者注：此处的临界点是指响应式网页发生布局变化的关键点，如当屏幕宽度小于480px时加载A样式，当宽度在480-600px之间时加载B样式 。我们不可能也没有必要为每个尺寸都做设计，需要做的一般是选定几个临界点做设计。）

02.只依赖设备尺寸进行临界点设定

新的设备总是会不断推出，即使你能数得出每个可用设备的临界点，你的响应式网站将在下一个更大设备出现的时候变得过小。

图片来源于 Walter，原地址

就像UXPin的《Web UI最佳实践》中解释过的一样，“建立在设计上，而不是设备”：

03.忽视触屏控制

触屏控制是众多移动设备的巨大优势之一：它们有趣，它们易用，同时它们还帮你节省时间。不要在某些设备上疏忽了它们，因为其它设备不能使用。这里有一些包含触屏控制的建议：

04.链接到手机上显示效果不佳的内容

你不能设计让访问者从链接跳转到其他页面或内容，不管是在你的网站或其它地方。响应式体验的一大问题就是当与你的响应式网站链接到非响应式设计的网页。

如果你的响应式网站链接到外站，你无法对此做些什么，除非考虑用一个可替换的网站。然而，当链接到你可以控制的网站或资源，包括小网站或合作方的网站，你绝对想要确保它们提供了一系列良好的响应式体验。

05.对更大的屏幕缺乏计划

我建议先为移动端设计，当并不意味着仅仅设计移动端。即使更小的屏幕可能更受欢迎，42%的流量仍然来自桌面端的访问者。这两种屏幕尺寸均需要被考虑到。

图片来源于UXPin

这里有些来自《原型指南》的关于考虑“更大的视图”的建议：

06.在不同的屏幕大小使用一样的导航

同一设备中用一致的导航绝对是件好事。但别太执迷于一种布局并将其反复地在其它设备上实践。这与响应式设计的本质是相违背的。

图片来源于（桌面端）

图片来源于（移动端）

为维持一致的用户体验，有些一致性是好的。为了建立一个易被认知的界面，并提示用户如何使用新设备的界面，某些元素应该保留和原来一样。以下元素应该维持一致：

当今，不同的屏幕尺寸需要不同的导航系统。以下元素在它们适应不同屏幕尺寸的细微差别时，不应该保持一致：

比如，一个桌面端导航可以固定在屏幕的顶部。当你为移动端屏幕重建布局时，你可以使导航持续出现并缩小尺寸来解决（但保持一个相似的颜色主题、字体和按钮文案）。

07.隐藏内容

一个常见的错误观念曾经认为移动端用户是匆忙的，并且只想要“整个网站”的缩小版本。诸如联系信息和指南这类内容被优先考虑，其它内容则被隐藏了。

现在我们知道大多数移动端用户一点也不匆忙，有68%的使用场景还是在家中。大多数用户想要在移动设备上访问整个网站，他们想要无内容删减但重新排版的版本。

图片来源于UXPin

知道某些人偏好的设备，并不等同于知道他们偏好的内容。如果某内容在一台设备上对用户是重要的，那么很可能在另一台不同设备上对用户也是重要的。

此外，你必须考虑涉及多个设备的任务流。用户经常在一台设备上开始任务，又在另一设备上完成，期间轮换使用这两台设备。依赖设备的限制内容同时限制了用户如何交互。

根据渐进增强（译者注：一种网页设计策略，它强调可访问性、语义化HTML标记、外部样式表和脚本技术），为不同的屏幕尺寸呈现不同内容并区分优先级，但绝不要隐藏或限制内容本身。