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

　　如今，团体电脑、平板电脑、智能手机等这些电子设备种类单一，假设一个网站在团体电脑上显示完整，但是在手机屏幕上翻开时会出现溢出、网页出现横向滚动或许网页在手机上被极度增加等效果，就会无法辨识。一个网站怎样在数十种屏幕上完美显示，成为大家所关注的效果。假设要针对每一种终端各做一套页面，太消耗人力，维护起来也很困难。而照应式网页设计是一种新的设计思想，处置了一个网站在各种屏幕上到达最佳显示效果的效果。

　　照应式网页设计（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世纪的包豪斯、国际主义作风、极简主义的再盛行，有人说是人们对拟物化审美疲劳之后出现的作风改造。而笔者以为，扁平化作风的盛行最基本的缘由是照应式设计技术的出现和推行，正如路易斯·沙利文提出的“方式跟随功用”，一个方式的出现是为了配合功用的完成。照应式设计和扁平化界面设计是密不可分的，照应式设计的完成要求界面扁平化，照应式技术的运用也推进了扁平化作风的盛行。