浅析响应式趋势下网页界面设计的变化

汪玉琼

摘 要：近年来，随着移动互联网的高速发展，市场上出现了越来越多不同种类的移动设备，它们显示屏的分辨率各不相同，若开发者为每种设备和分辨率开发特定的网页版本，是不可能追上设备更新换代的步伐。而响应式web设计技术的出现却迎刃而解了这个难题，是实现跨终端 Web 的关键部分。

关键词：网页设计 界面设计 响应式 交互设计

一、响应式网页

（一）响应式网页的概念

最近一门新兴的学科——“响应式建筑（responsive architecture）”——提出，物理空间应该可以根据存在于其中的人的情况进行响应。将这个全新的思维运用到Web设计领域中，我们就得到了一个全新的概念。为什么一定要为每个用户群各自打造一套设计和开发方案？和响应式建筑相似，Web设计同样应该做到根据不同设备环境自动响应及调整，它通过集合媒体查询、流动布局和弹性视觉媒体的技术，是一种采用灵活的、不针对特定上网设备的方法来进行Web设计，有效地解决了日益涌现的多种移动互联网用户终端设备，实现了“一源多屏”的现实需求。

（二）响应式网页的意义

随着各种屏幕尺寸设备的兴起以及交互方式的多样性，之前采用的网站设计方法已不再适用。我们需要更新设计方法，更新设计观念，更新设计工具。 我们不可能为所有这些常用的屏幕尺寸都设计一个专属的网站。 所以， 响应式设计在此时就体现了他的价值，能满足所有类型终端用户的需求，能带给所有终端用户最优的访问体验。

二、响应式网页下的界面元素设计有何变化

（一）使用那些精彩的字体

对于响应式网站，你不得不把它在小屏幕上看起来如何这个问题考虑到设计中去。好的字体是所有优秀网站夺人眼球的重头戏，然而它在响应式设计中，却几乎成了必需品。随着屏幕减小，大部分元素都相应地发生变化、缩小或者移动位置。首先，也是重中之重，你的字体要具备这种能力。第二，你得用不同标题尺寸和多种文字大小。如今，我们在桌面端设计中常常使用巨大的标题和页头。这点不必延续整个网站，因为你总得考虑更小尺寸。

（二） 使用那些绝妙的图片

和文字排版一样，图像在任何网页设计中都至关重要。在响应式设计中，当你在更小的屏幕上查看网站，你的图片应该相应更小或等比缩放，这点也和文字相同。响应式设计中有成百上千种不同布局和图片尺寸。注重图片的选择和使用，因为它们毫无疑问会发生变化。随着屏幕变大或变小，图片会改变形状和展现方式，或被裁切掉一部分理想情况下，你会希望确保窗口尺寸变化时，大幅摄影图片不会有任何裁切。另外，在你制作图像时，必须保证你的作品加载速度快，而且对小尺寸屏幕可见。这就是为什么设计师推崇扁平设计，它使得这点更容易。

（三） 导航也是一个重头戏

如果人们不知道如何浏览你的网站，那他们就直接不浏览了。响应式设计的导航更难处理，因为我们已经习惯于为横向设计打造导航。如今，我们得创建能够轻易压缩以适应纵向规格的导航只有少量链接时这并不是大问题。你可以将你的导航变小或缩至顶部，也可以为访客提供一个下拉菜单。主要问题是该如何处理包含更多内容的繁重导航。Mashable有大量链接，因为它有大量的分类甚至更多的文章。在这之上，他们还有自己的公司二级页链接。Mashable决定在左侧为小屏幕浏览器创建一个弹出菜，Monocle网站导航顶部有两块延伸部分。为适应小尺寸浏览器，他们为极端情况的内容创建了下拉菜单，并且缩减了导航的第二部分。

（四） 逐步扁平化的图标

随着响应式网页设计的流行，虽然这并不意味着说图标大小会随屏幕尺寸的变动而改变，而是意味着图标会根据自己所处何种设备来改变自身大小。这就意味着屏幕尺寸对图标来说不是那么重要了，因为它能自动调节，它可以变大变小——同一时间，同一屏幕。与此同时，图标风格也随着改变，设计里抛弃了材质和逼真的光影效果的扁平化图标越来越多，让图标更加精简、柔和、富有设计感。响应式图标推动了图标设计的发展，让用户得到了更好的体验，操作性更好，视觉效果更佳。

三、响应式网页设计应当遵循的原则

（一） 内容优先

在响应式网页设计中，有时候我们需要对页面内容进行删减，按照优先级显示内容，只显示高优先级内容是原则之一。在屏幕较小的移动设备上应该优先考虑内容并且去移掉那些小的栏目。在顶部显示高优先级内容，即把最重要的内容放置在顶部。导航是否一定要出现在页头或者重新布局改在页尾都要依网站具体规划去考虑。

（二） 提供友好的交互设计

调整设计来适应可用空间，使得用户在不同的设备上仍保持对同一页面相同的视觉和感觉。这也遵循我们交互设计体验一致的原则。大家可以参考Oliver Russell网站，一个设计非常灵活的网站，在不同的屏幕分辨率下保持相同的视觉和感觉。

（三） 考虑大部分用户的用机习惯

提供清晰和友好的手指操作链接。尤其在手机设备上，可点击操作的区块不宜过小，引导要清晰强烈，不忽略任何一款设备。调整设计来适应可用空间，使得用户在不同的设备上仍保持对同一页面相同的视觉和感觉。这也遵循我们交互设计体验一致的原则。需考虑大部分用户右手点击操作，左手负责握住设备的习惯，右侧的导航列表既方便右手的点击，又可以避免被握着设备的左手不小心触碰到。

参考文献：

[1] Tim Kadlec. 响应式Web设计实践[M]. 侯鸿儒译.北京：人民邮电出版社，2013

[2] 施密特.响应式Web 图形设计[M.曾斌译.北京：人民邮电出版社，2014

[3] 张帆，罗琦，宫晓东.网页界面设计艺术教程[M].北京：人民邮电出版社，2002

作者单位：中南民族大学