响应式网页设计的特点

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

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

　　网站导航形式多样

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

　　图片弹性化和图标扁平化

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

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

　　色彩和字体设计成为重点

当一个网站内容十分简略、风格非常简洁清晰的时候，设计的重点就自然放在了色彩搭配和字体设计排版上。对于配色，一般建议网站的颜色不超过3种，而响应式网站的配色会更自由些，页面上可能出现很多个颜色，只要搭配和谐，采用多种颜色会让页面显得活泼。在字体设计和排版上，设计师会根据网站风格选择字体，并用灵活字体的大小、笔画粗细来传达文字信息的等级，也会注意文字段落的行间距和字间距，这些细节设计让响应式网站拥有很好的用户体验。

　　扁平化网页风格流行

综合上面的所有特点，响应式网站的整体风格是简洁明快的、平面化的，人们将这种风格称为“扁平化”（Flat）与“扁平化”设计相对的是“拟物化”（skeoumorphism）设计，即模拟真实世界的各种对象，这类图形带有阴影、纹理、质感、透视等真实物体的特性。拟物化设计曾经十分流行，它符合人们的认知习惯，易于识别和学习，拉近了机器与人的距离。而扁平化设计是与拟物化设计极端相反的，如今扁平化设计爆发式地流行起来，典型的例子就是几大操作系统Windows8、Android4.0、ios7.0的UI设计。为什么扁平化设计能流行起来？有人说是对拟物化过度装饰的变革，有人说是对19世纪的包豪斯、国际主义风格、极简主义的再流行，有人说是人们对拟物化审美疲劳之后出现的风格革新。而笔者认为，扁平化风格的流行最根本的原因是响应式设计技术的出现和推广，正如路易斯·沙利文提出的“形式追随功能”，一个形式的出现是为了配合功能的实现。响应式设计和扁平化界面设计是密不可分的，响应式设计的实现要求界面扁平化，响应式技术的应用也推动了扁平化风格的流行。

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