专访 | 《学习响应式设计》作者Clarissa Peterson：响应式设计并不是万能的

Posted 2021-04-30 图灵访谈

Clarissa Peterson是一位用户体验设计师、Web开发者。她是蒙特利尔的一家响应式网站设计咨询公司Peterson/Kandy的联合创始人。她曾在美国公共交通联合会任Web经理，在此期间她对该组织的网站进行了大规模的改革，在此之前，她曾分别在公益组织AARP以及国会图书馆担任编辑和开发者。Clarissa是一位很受欢迎的演讲者，她经常在北美和欧洲举办的开发者会议及研讨会上发表关于响应式设计、移动策略和用户体验方面的演讲，在过去的3年中，她一共做过40场演讲。Clarissa Peterson著有《学习响应式设计》一书，该书全面介绍了响应式Web设计策略与技术，引领读者掌握从项目立项到网站上线的响应式设计工作流程。

问：总体上说，响应式设计的设计过程和一般Web设计的过程有什么不同？

在传统Web设计中，设计师用Photoshop创造一张网站的“图片”，而开发者用html和CSS再现这个设计。但是在设计响应式网站的时候，你无法预测你的设计在每种屏幕尺寸以及每个屏幕上会是什么样子。所以设计师和开发者需要在整个过程中通力合作，确保设计在每种尺寸的屏幕上看起来都会不错。

问：现在的屏幕尺寸越来越多，在响应式设计中如何确定在哪里添加断点？

你需要在你的设计中添加合理的断点，而不是按照特定的设备尺寸安排断点。这样你的网站才能在所有设备上看起来都好，而不是仅仅在几种设备上看起来不错。

问：为什么“移动优先”非常重要？

移动优先（mobile first）优先考虑的是使用移动设备的用户以及这些用户如何与网站进行交互。

当你创建一个设备无关的设计时，这是最好的开始方法，不是因为移动设备上的用户体验比桌面电脑或其他设备的用户体验更重要，而是因为移动设备有更多的限制因素，在屏幕空间有限以及对用户交互方式（触摸）还不太熟悉的情况下更难以创造好的用户体验。

触摸是最大的复杂因素。一个可以很容易使用鼠标导航的布局可能在你用你的大手指在一小块玻璃上戳来戳去时会变得很难用。

问：因为IE6的广泛普及以及令人不甚满意的网速，一种“不完整”的响应式网站广泛存在着（至少在中国），这种网站由不同的PC端页面和移动端页面组成。你认为这种网页可以被称为真正的响应式设计吗？你认为在特定背景下这种解决方案值得鼓励吗？

如果为不同的设备创造独立页面的话，那就不是响应式设计。如果你没有足够的技能在IE6上创造响应式设计，那么这种方法可能就是最佳解决方案了。但是，响应式设计提供了很多灵活性，我们可以创造出能在IE6上顺利显示的响应式设计，同时也能保证在连接速度慢的情况下网页负载很小。

问：如何确定响应式设计的网站要支持哪些设备？

响应式设计的棘手之处在于不只是为不同屏幕尺寸进行设计。毕竟，你可以通过改变浏览器窗口的大小来轻松地设计和测试媒体查询。困难的部分在于如何确保网站能够在尽可能广的各色设备上工作。仅仅是在调整浏览器窗口大小时看到网站显示得还不错并不意味着问题不会突然出现在某些设备上。事实上各浏览器所支持的功能并不完全相同，每个设备和浏览器都可能有小怪癖。

当你开始一个项目时，你需要决定站点设计将支持哪些设备，这并不是说网站只有在这些设备上才能工作，只是意味着你仅允诺在这些设备上进行测试来确保网站正常工作。

而响应式网站是被设计成可在任何尺寸或类型的设备上工作的，在这些设备上偶尔发生的怪异情况可能会导致某种错误的发生，而你又不可能去实地测试每一个设备。所以，你需要选择一系列的设备和浏览器（通常能够代表常见设备、操作系统、浏览器、视口大小）在它们上面进行测试。

选择的具体设备将取决于项目的需要。例如，你的这些设备可能不包括黑莓或 Windows Phone 设备。现有网站的统计数据可能会告诉你，只有极少的访客使用黑莓手机，所以你可能觉得不值得花时间提供对这些设备的支持。但请记住，如果现有网站不能在某些移动设备上很好地工作，统计数据可能无法表明有多少拥有那些设备的用户因无法使用而离开了你的网站，如果网站能在他们的设备上正确工作，他们是有可能变成正式用户的。

你还应该找出所有利益相关人所使用的设备，并确保在这些设备上进行了测试，即使它们不太常见。不管清单上列出了什么设备，你的利益相关人都会希望网站能在他们自己的手机上正常工作。

问：响应式设计会跟随操作系统的风格改变而改变吗？

响应式设计并不依赖于操作系统。响应式设计可能会跟随当今的设计潮流，比如现在流行的扁平化设计，但是也不是非此不可。

问：设计层面上，你如何评价本地应用设计和响应式Web应用设计？它们各自的优势在哪里？

应该根据你设计的内容而选择设计方式。并没有放之四海而皆准的解决方案。

响应式设计的优势包括：

1. 用HTML/CSS/javascript就可以创造响应式Web应用，而原生应用针对不同的操作系统需要使用几种不同的编程语言。

2. 你创造一个Web应用就可以在任何设备上打开，对于原生应用的话，你就需要针对ios, android，黑莓, Windows等操作系统创造不同的应用。

3. 你可以在任何时候升级你的响应式设计Web应用，改变马上就会推送到用户那里，而升级原生应用则需要等待App Store批准新版本，然后还要等待用户更新应用。

原生应用也有一些优势：

1. 如果你创造的东西更加复杂，把它建成一个App的话，你就能在构建的过程中获得更多控制权。原生应用和操作系统直接通讯，而Web应用则要通过浏览器和操作系统通讯。

2. 原生应用允许你使用设备的功能，而现在的浏览器还达不到这一点，比如摄像头，或者推送通知。原生应用还能让你更轻松地收钱，无论是在App Store中卖应用，还是卖App内购买项目。

问：根据不同公司各自的技术框架，他们是否需要设计自己独有的响应式设计实现？

任何时候一家公司设计一个网站，都需要根据自身的技术框架量身定做，无论网站是不是响应式的。

问：有哪些设计得不错的响应式网站值得推荐？这些网站在设计上成功的关键是什么？

很多网站都已经切换到了响应式设计，有成千上万个设计得很好的响应式网站。你可以在在Twitter上关注www.twitter.com/rwdwhere，这里会持续发布最新上线、设计优良的响应式网站。

问：你如何评价WIX, Squarespace以及Wordpress？这些系统之间孰优孰劣？

我从来没用过WIX或者Squarespace。WordPress对于响应式设计来说很不错，因为他们提供了很多响应式主题（甚至默认主题都是响应式的），而且在此之上你还可以做特殊定制，让你网站的响应性变得更强。

---

对话国外知名技术作者

讲述码农精彩人生

你听得见他们，他们也听得见你

长按图片关注图灵访谈

www.ituring.cn

欢迎参与访谈问题有奖征集活动