扁平化2.0响应式网页的设计与技术探析.docVIP

扁平化2.0响应式网页的设计与技术探析 　　摘要 扁平化2.0响应式网页设计是美学设计与网站前端开发技术发展的产物。本文分别讨论了响应式网页设计核心技术与扁平化2.0设计风格，试图找到二者之前诸多契合点。同时，通过对一个典型案例的设计与技术分析，深刻地揭示了扁平化2.0与响应式网页设计如何相辅相成的过程。 　　关键词 扁平化2.0；响应式网页设计；前端；HTML5；CSS3 　　中图分类号：TP311 文献标识码：A 文章编号：1009-3044（2016）26-0204-02 　　扁平化是减少装饰的极简主义，流行之初曾强调明亮大胆的配色、简洁的图标元素、不假思索的摒弃一切如阴影、透视、纹理、渐变的装饰效果。纯粹的扁平化设计在减少浏览者认知负荷，聚焦关键信息，提高网站加载速度方面表现出色，但在交互方面却一直被人诟病，毕竟缺少装饰的“平”的按钮确实难以被用户找到。那么，是不是可以通过增加细微的效果而解决这个问题呢？当纯粹扁平化的规则因此松懈，就迎来了扁平化发展的新阶段。如今，扁平化设计在延续极简风格的同时允许为页面的关键元素或互动元件加入细微的装饰。设计师Ryan Allen 将这样具有丰富细节、清晰层次、优秀视觉体验的扁平化设计称为“Flat Design 2.0”，并认为该风格会占据响应式网页设计（RWD，Responsive Web Design）的主流。这是因为扁平化同响应式网页设计有着极高的契合度，它像矢量化一样摆脱了对像素的依赖，能够轻松的适应不同屏幕尺寸及分辨率的各种终端设备。 　　1 响应式网页设计的3大核心技术 　　媒介查询（Media Queries）、流式布局（Fluid Grids）、自适应图片（Scalable Images）并称响应式网页设计的3大核心开发技术。其中，媒体查询技术的功能是使网页能够根据设备显示器的特性（视口宽度、屏幕比例、设备方向等）设定不同的CSS样式，用于控制页面元素的变动范围。流式布局技术是将固定宽度的DIV+CSS布局结构修改成百分比布局继而创建流动的弹性界面。自适应图片技术是通过部署Adaptive Images服务器端解决方案来为不同尺寸的设备屏幕提供图片，从而保证图片的响应性和流畅性。 　　3大技术的组合应用创造了兼顾多种不同设备的屏幕尺寸、分辨率、系统平台和行为做出相应的调整和布局的机制，即响应式网页设计。它用同一套代码解决了之前固定宽度的网页在不同设备上仍旧显示一样效果的弊端。用户再也不用通过在屏幕上不停的滑动、缩放才能看清楚那些网页中极小的文字和分布极密的链接。当前的响应式网页几乎在各类不同终端都可以有良好显示效果和使用体验，如图1所示。图中用数字1-5标注了网页布局中除LOGO和导航外的5个内容模块，数字越大重要性越弱。当屏幕视口发生变化时，响应式网页将按照用户视图的一般规律――“从左向右，从上至下”，即遵循信息优先比重从左上角至右下角逐级递减的规律，来使导航、LOGO及各内容模块布局流动起来，同时适当的调整页面中文字和图片的大小和分布。像上图这样的模块布局能够自由流动、页面文字、图片等元素能够自由缩放的网页对其界面设计风格有何要求呢？这就是下面聚焦的关键问题。 　　2 最佳搭配：扁平化2.0风格 　　响应式网页中各内容模块是可能随着设备视口尺寸、方向而发生流动的，那就需要各模块除了信息内容外的一切装饰和修饰要具有普遍适用性。不管布局怎样变化，各模块流动到页面的哪个位置，都不应该产生任何与页面不协调的部分，这就是所谓的装饰元素要“百搭”。事实上，优雅的百搭装饰元素并不容易被设计。既然如此，就减掉不能百搭的装饰吧！基于这样的思路，响应式网页设计迎来了具有极简主义血统的强调功能大于形式的纯粹扁平化风格，并认为它们是天生一对。纯粹的扁平化一直在设计中“做减法”，对应到响应式网页设计中，除信息内容（具有实际意义的文字和图片）外，能够被保留下来的仅仅是色彩、形状、线条等基本元素，就连字体选择上也追求简单、基本。这种抛弃了所有美学意义的修饰，仅保留所设计对象的本质特征的极简设计在广受推广的同时，也遭受了一些非议，例如：①缺乏层次，太过简单的网页让用户无法理解；②用户很难发现那些缺乏必要装饰的交互按钮或元件；③网页真的太“平”了，这种设计完全没了个性。 　　给“平”加点料吧！睿智的设计师总是能敏感地察觉缺陷，然后迅速给出对策。这种“加点料”的思路成就了当前流行的扁平化2.0或者叫它类扁平化。那么，什么是扁平化2.0的料？微阴影、微渐变、幽灵按钮、双色搭配等等，太多能够丰富细节和层次的细微装饰都可以加入到设计中，营造出空间感、距离感、视觉层次和边缘效果，成为扁平化设计的料。对于扁平化2.0响应式网页设计而言，这些细微装饰效果常常被运用到导航、按钮、输入