响应式设计对网页界面的影响

戴慧萍

【内容摘要】响应式网页设计能够实现一个网站在多个设备上显示最优化，受该技术的影响，网页界面呈现简洁明快的扁平化风格。文章通过对网页布局、网站导航、图片弹性化等方面分析，对网页界面的响应式设计做进一步探讨。

【关键词】响应式设计 网页界面  扁平化设计

如今，个人电脑、平板电脑、智能手机等这些电子设备种类繁多，如果一个网站在个人电脑上显示完好，但是在手机屏幕上打开时会出现溢出、网页出现横向滚动或者网页在手机上被极度缩小等问题，就会无法辨识。一个网站怎样在数十种屏幕上完美显示，成为大家所关注的问题。如果要针对每一种终端各做一套页面，太耗费人力，维护起来也很困难。而响应式网页设计是一种新的设计思维，解决了一个网站在各种屏幕上达到最佳显示效果的问题。

响应式网页设计（Responsive Web Design）是Ethan Marcotte在2010年提出的，最初是指可以自动识别屏幕宽度，并做出相应调整的网页设计，现扩展为页面的设计与开发应当根据用户的行为以及设备环境，能够进行自动的响应和相应的调整，做到“一源多屏”。

响应式设计基于三大技术：媒体查询、流式网格布局、弹性图片。媒体查询（Media queries）是对设备的特点（通常是浏览器的宽度）进行识别，从而确定使用不同的CSS样式;流式网格布局（Fluid Grids）是在布局时将页面内容元素设计成屏幕宽度的相对值，并使用相对尺寸单位如百分比（%）或字体比例（em），如某一个方块占屏幕宽度的20%，而不是如网页设计常用的绝对单位如像素（px）;弹性图片（Fluid Images）是以相对单位调整大小或被相应剪裁，当屏幕变小时，图片相应变小。

由于形式追随功能，受技术的影响，响应式网页设计的界面形成了一定特点。

一、网页布局简洁和弹性化

当显示屏变化的时候，网页会进行重排来适应屏幕的大小和分辨率等，为了给用户好的视觉效果，网页布局会适当变化。比如当用户在电脑上看一个网页的时候，由于屏幕较大，能看到的内容是完整的，当他在手机上打开这个网页的时候，由于屏幕较小，不能完全显示所有内容，这时网页布局会重新布局，一般来说最重要的内容会首先显示出来，其他内容依照某种次序放在屏幕之外，通过屏幕滚动来显示。

因此，为了适应不同的屏幕尺寸进行页面内容重排，响应式网站的页面内容不会太复杂，而是尽量简洁清晰。目前的响应式网站往往应用了流式网格系统，网页的所有内容被分为几个内容模块，每块的宽度是网格单元的整数倍，如在12格的网格系统里，每个模块的宽度按照格数来计算，如一个占6格或4格，在电脑桌面系统中显示12个格的宽度，在手机上有可能只显示4格的宽度。响应式网站的布局采用弹性化技术，便于在不同设备之间变化，同时页面布局显得十分简洁明快，拥有很好的用户体验。

二、网站导航形式多样

导航是一个网站的重要部分，它出現在每个页面上，引领用户到达向他们想看的页面。针对不同的设备屏幕以及各屏幕的横向纵向显示，响应式网站的导航会做出不同样式的变化：如电脑屏幕和纵向的平板电脑上会显示出在页面顶部横向排列的导航栏;而在平板电脑横向显示时会显示出在左边竖向排列的导航栏;当屏幕更小的时候，如智能手机上会把导航栏隐藏起来，只在左上角或右上角出现一个图标按钮，点击它才会出现一个叠加在网页上的导航栏。因此，响应式网站的导航会有多个设计方案以适应不同的设备屏幕。

三、图片弹性化和图标扁平化

在响应式网站中，图片要响应不同的屏幕，大小不能用绝对值，而是采用相对的百分比数值，当屏幕变小时，图片会按比例缩放。对于一些不太需要看清全貌的图片，如一些背景图，可以采用裁剪的方式，如屏幕变小时，把图片的宽和高相应地裁掉一部分。

响应式网站的图标和按钮呈现扁平化的趋势。扁平化即二维化，去掉高光阴影、立体浮雕等修饰，这种简洁的形式能更快速、便捷地传达信息。扁平化风格的图标和按钮十分灵活，可以在不影响视觉效果的情况下改变尺寸和位置，易于实现响应式设计。

四、色彩和字体设计成为重点

当一个网站内容十分简略、风格非常简洁清晰的时候，设计的重点就自然放在了色彩搭配和字体设计排版上。

对于配色，一般建议网站的颜色不超过3种，而响应式网站的配色会更自由些，页面上可能出现很多个颜色，只要搭配和谐，采用多种颜色会让页面显得活泼。

在字体设计和排版上，设计师会根据网站风格选择字体，并用灵活字体的大小、笔画粗细来传达文字信息的等级，也会注意文字段落的行间距和字间距，这些细节设计让响应式网站拥有很好的用户体验。

五、扁平化网页风格流行

综合上面的所有特点，响应式网站的整体风格是简洁明快的、平面化的，人们将这种风格称为“扁平化”（Flat）。与“扁平化”设计相对的是“拟物化”（skeoumorphism）设计，即模拟真实世界的各种对象，这类图形带有阴影、纹理、质感、透视等真实物体的特性。拟物化设计曾经十分流行，它符合人们的认知习惯，易于识别和学习，拉近了机器与人的距离。而扁平化设计是与拟物化设计极端相反的，如今扁平化设计爆发式地流行起来，典型的例子就是几大操作系统Windows8、Android4.0、ios7.0的UI设计。

为什么扁平化设计能流行起来？有人说是对拟物化过度装饰的变革，有人说是对19世纪的包豪斯、国际主义风格、极简主义的再流行，有人说是人们对拟物化审美疲劳之后出现的风格革新。而笔者认为，扁平化风格的流行最根本的原因是响应式设计技术的出现和推广，正如路易斯·沙利文提出的“形式追随功能”，一个形式的出现是为了配合功能的实现。响应式设计和扁平化界面设计是密不可分的，响应式设计的实现要求界面扁平化，响应式技术的应用也推动了扁平化风格的流行。

结语

随着智能手机等移动终端的用户不断增加，会有越来越多的网站采用响应式网页设计，网站的界面设计也会受其影响，更多地采用简洁的网格布局、平面化的图标按钮、丰富的色彩组合、细腻的字体排版等设计元素，简洁明快的扁平化风格正在被越来越多的用户所接受。

参考文献：

[1]Christopher  Schmitt.响应式Web图形设计[M].北京：人民邮电出版社，2014.

[2]王愉，潘明明.响应式网页设计初探[J].北京印刷学院学报，2014.

[3]赵梦琪.浅谈“扁平化设计”在交互设计中的应用[J].设计，2014（3）.

[4]夏颖翀.数字产品界面中朴素的设计和冗余的设计[J].装饰，2013（5）.

作者单位：上海杉达学院人文学院

（责任编辑：曹宁）