扁平化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响应式网页设计而言，这些细微装饰效果常常被运用到导航、按钮、输入框等交互元件的外观设计或者需要突出的信息内容模块上，从而获得更优秀的视觉体验。

3 一个典型响应式网页案例的设计与技术分析

Strongly Typed是一个典型的响应式网页设计案例，使用HTML5+CSS3编写，它简洁、优雅、大气，如图2所示。从网站前端开发的视角，依托这样一个具体案例来展开设计和技术上的讨论是十分必要的。它是单页网站，继承了“垂直滚动理念”。当今，太多的用户已经没有耐心去花费时间等待从A页面转到B页面。那么，单页网站则几乎节约了所有等待跳转的时间，具有良好的用户友好性。审视Strongly Typed这个单页网站的内部布局，第一屏页面的内容模块按照信息优先层级先后，从上至下采用“居中对齐”的方式排列分布；其余屏页面的内容模块则是分左右两栏，按照信息优先层级先后，从左向右采用“左对齐”的方式布局。这种内部布局设计简单易用，便于修改，与流动布局技术完美契合。面向未来形形色色的终端设备，千差万别的屏幕分辨率以及良莠不齐的网络链接质量，这样内部布局的单页网站会使响应式更加优秀和健壮。

（ 源自：http：//www.shejidaren.com/examples/html5-templeates-2013624/strongly-typed.html）

很明显，Strongly Typed够简洁，似乎连背景颜色都素净到底，图2的左侧罗列了能够找到的装饰：细微阴影、小圆角、半透明、浅色双线及边框。这些极其微弱细小的装饰元素，具有柔和感和隐蔽性，有时不易立刻被察觉，但却可以增加元素的深度，使其从背景中脱颖而出，引起用户的注意。从实现技术上来看，阴影、圆角、渐变、半透明、线条、形状、按钮这些简单元素可以轻而易举的通过CSS3的border-radius、linear-gradien、box-shadow、text-shadow、opacity等代码完成。当这些装饰效果不再需要像从前那样使用“图片”来制作时，响应式网页在不同终端上调整装饰效果、网站加载及后期改版方面就会更加便利。

在扁平化2.0网页设计中，配色很重要，有人喜欢使用多种明亮和饱和度较高的艳丽色彩进行搭配，也有人喜欢清淡口味的色彩搭配，比如Strongly Typed。从页面所呈现的明度色调来看是柔美高雅的偏浅灰色调。其中，主色调及背景色是接近于明度白色非常浅的灰调，而辅色调的灰在明度上则稍深些。点睛色红色（RGB：237、120、106）不是正红色，它的加入打破了平淡乏味的页面，使用户对网页产生了更多的印象。此外，Strongly Typed聚焦网站的“内容和功能”，搭配使用的装饰效果只有零星的几个（如图2右侧所示），但在简约的同时它看上去依然丰富有层次。究其原因，主要是它对有信息意义的文字和图片的选取、设计、编排上也十分考究，尤其是页面中文字字体、大小、颜色等属性的设计让网页中的文字具有优雅的韵律感，而那些具有实际意义的图片，则画面优美，既是内容也有装饰美感。

4 结论

伴随着终端设备的革新、浏览器技术的完善及前端开发技术的发展，响应式网页设计在未来网站前端领域必将独领风骚。而扁平化2.0用其简约、易用、强调功能、聚焦用户等优势也将成为响应式网页设计的主流风格，这既是现状也是趋势。扁平化2.0响应式网页设计是一个值得探索的方向，虽然当前国内相关案例日益增多，但很多设计依然存在问题，并且“模仿”痕迹严重，缺乏原创；那么，研究如何创造个性惊艳的扁平化2.0响应式网页将成为今后聚焦的问题。

参考文献：

[1] 秦书荣，李新.响应式网页设计的原型研究[J].电子技术与软件工程，2016（11）：9.

[2] 秦岁明.扁平化风格在网页界面设计中的应用[J].包装工程，2015（3）：42.

[3] Ben Frain.响应式Web设计HTML5 和CSS3 实战[M]. 北京：人民邮电出版社，2015（5）：28.45.

[4] 吴丽婷.以功能性为主导的扁平化界面设计研究[J].设计，2014（6）：83.