摘要 扁平化2.0響應(yīng)式網(wǎng)頁設(shè)計(jì)是美學(xué)設(shè)計(jì)與網(wǎng)站前端開發(fā)技術(shù)發(fā)展的產(chǎn)物。本文分別討論了響應(yīng)式網(wǎng)頁設(shè)計(jì)核心技術(shù)與扁平化2.0設(shè)計(jì)風(fēng)格，試圖找到二者之前諸多契合點(diǎn)。同時(shí)，通過對(duì)一個(gè)典型案例的設(shè)計(jì)與技術(shù)分析，深刻地揭示了扁平化2.0與響應(yīng)式網(wǎng)頁設(shè)計(jì)如何相輔相成的過程。

關(guān)鍵詞 扁平化2.0；響應(yīng)式網(wǎng)頁設(shè)計(jì)；前端；HTML5；CSS3

中圖分類號(hào)：TP311 文獻(xiàn)標(biāo)識(shí)碼：A 文章編號(hào)：1009-3044（2016）26-0204-02

扁平化是減少裝飾的極簡(jiǎn)主義，流行之初曾強(qiáng)調(diào)明亮大膽的配色、簡(jiǎn)潔的圖標(biāo)元素、不假思索的摒棄一切如陰影、透視、紋理、漸變的裝飾效果。純粹的扁平化設(shè)計(jì)在減少瀏覽者認(rèn)知負(fù)荷，聚焦關(guān)鍵信息，提高網(wǎng)站加載速度方面表現(xiàn)出色，但在交互方面卻一直被人詬病，畢竟缺少裝飾的“平”的按鈕確實(shí)難以被用戶找到。那么，是不是可以通過增加細(xì)微的效果而解決這個(gè)問題呢？當(dāng)純粹扁平化的規(guī)則因此松懈，就迎來了扁平化發(fā)展的新階段。如今，扁平化設(shè)計(jì)在延續(xù)極簡(jiǎn)風(fēng)格的同時(shí)允許為頁面的關(guān)鍵元素或互動(dòng)元件加入細(xì)微的裝飾。設(shè)計(jì)師Ryan Allen 將這樣具有豐富細(xì)節(jié)、清晰層次、優(yōu)秀視覺體驗(yàn)的扁平化設(shè)計(jì)稱為“Flat Design 2.0”，并認(rèn)為該風(fēng)格會(huì)占據(jù)響應(yīng)式網(wǎng)頁設(shè)計(jì)（RWD，Responsive Web Design）的主流。這是因?yàn)楸馄交憫?yīng)式網(wǎng)頁設(shè)計(jì)有著極高的契合度，它像矢量化一樣擺脫了對(duì)像素的依賴，能夠輕松的適應(yīng)不同屏幕尺寸及分辨率的各種終端設(shè)備。

1 響應(yīng)式網(wǎng)頁設(shè)計(jì)的3大核心技術(shù)

媒介查詢（Media Queries）、流式布局（Fluid Grids）、自適應(yīng)圖片（Scalable Images）并稱響應(yīng)式網(wǎng)頁設(shè)計(jì)的3大核心開發(fā)技術(shù)。其中，媒體查詢技術(shù)的功能是使網(wǎng)頁能夠根據(jù)設(shè)備顯示器的特性（視口寬度、屏幕比例、設(shè)備方向等）設(shè)定不同的CSS樣式，用于控制頁面元素的變動(dòng)范圍。流式布局技術(shù)是將固定寬度的DIV+CSS布局結(jié)構(gòu)修改成百分比布局繼而創(chuàng)建流動(dòng)的彈性界面。自適應(yīng)圖片技術(shù)是通過部署Adaptive Images服務(wù)器端解決方案來為不同尺寸的設(shè)備屏幕提供圖片，從而保證圖片的響應(yīng)性和流暢性。

3大技術(shù)的組合應(yīng)用創(chuàng)造了兼顧多種不同設(shè)備的屏幕尺寸、分辨率、系統(tǒng)平臺(tái)和行為做出相應(yīng)的調(diào)整和布局的機(jī)制，即響應(yīng)式網(wǎng)頁設(shè)計(jì)。它用同一套代碼解決了之前固定寬度的網(wǎng)頁在不同設(shè)備上仍舊顯示一樣效果的弊端。用戶再也不用通過在屏幕上不停的滑動(dòng)、縮放才能看清楚那些網(wǎng)頁中極小的文字和分布極密的鏈接。當(dāng)前的響應(yīng)式網(wǎng)頁幾乎在各類不同終端都可以有良好顯示效果和使用體驗(yàn)，如圖1所示。圖中用數(shù)字1-5標(biāo)注了網(wǎng)頁布局中除LOGO和導(dǎo)航外的5個(gè)內(nèi)容模塊，數(shù)字越大重要性越弱。當(dāng)屏幕視口發(fā)生變化時(shí)，響應(yīng)式網(wǎng)頁將按照用戶視圖的一般規(guī)律——“從左向右，從上至下”，即遵循信息優(yōu)先比重從左上角至右下角逐級(jí)遞減的規(guī)律，來使導(dǎo)航、LOGO及各內(nèi)容模塊布局流動(dòng)起來，同時(shí)適當(dāng)?shù)恼{(diào)整頁面中文字和圖片的大小和分布。像上圖這樣的模塊布局能夠自由流動(dòng)、頁面文字、圖片等元素能夠自由縮放的網(wǎng)頁對(duì)其界面設(shè)計(jì)風(fēng)格有何要求呢？這就是下面聚焦的關(guān)鍵問題。

2 最佳搭配：扁平化2.0風(fēng)格

響應(yīng)式網(wǎng)頁中各內(nèi)容模塊是可能隨著設(shè)備視口尺寸、方向而發(fā)生流動(dòng)的，那就需要各模塊除了信息內(nèi)容外的一切裝飾和修飾要具有普遍適用性。不管布局怎樣變化，各模塊流動(dòng)到頁面的哪個(gè)位置，都不應(yīng)該產(chǎn)生任何與頁面不協(xié)調(diào)的部分，這就是所謂的裝飾元素要“百搭”。事實(shí)上，優(yōu)雅的百搭裝飾元素并不容易被設(shè)計(jì)。既然如此，就減掉不能百搭的裝飾吧！基于這樣的思路，響應(yīng)式網(wǎng)頁設(shè)計(jì)迎來了具有極簡(jiǎn)主義血統(tǒng)的強(qiáng)調(diào)功能大于形式的純粹扁平化風(fēng)格，并認(rèn)為它們是天生一對(duì)。純粹的扁平化一直在設(shè)計(jì)中“做減法”，對(duì)應(yīng)到響應(yīng)式網(wǎng)頁設(shè)計(jì)中，除信息內(nèi)容（具有實(shí)際意義的文字和圖片）外，能夠被保留下來的僅僅是色彩、形狀、線條等基本元素，就連字體選擇上也追求簡(jiǎn)單、基本。這種拋棄了所有美學(xué)意義的修飾，僅保留所設(shè)計(jì)對(duì)象的本質(zhì)特征的極簡(jiǎn)設(shè)計(jì)在廣受推廣的同時(shí)，也遭受了一些非議，例如：①缺乏層次，太過簡(jiǎn)單的網(wǎng)頁讓用戶無法理解；②用戶很難發(fā)現(xiàn)那些缺乏必要裝飾的交互按鈕或元件；③網(wǎng)頁真的太“平”了，這種設(shè)計(jì)完全沒了個(gè)性。

給“平”加點(diǎn)料吧！睿智的設(shè)計(jì)師總是能敏感地察覺缺陷，然后迅速給出對(duì)策。這種“加點(diǎn)料”的思路成就了當(dāng)前流行的扁平化2.0或者叫它類扁平化。那么，什么是扁平化2.0的料？微陰影、微漸變、幽靈按鈕、雙色搭配等等，太多能夠豐富細(xì)節(jié)和層次的細(xì)微裝飾都可以加入到設(shè)計(jì)中，營(yíng)造出空間感、距離感、視覺層次和邊緣效果，成為扁平化設(shè)計(jì)的料。對(duì)于扁平化2.0響應(yīng)式網(wǎng)頁設(shè)計(jì)而言，這些細(xì)微裝飾效果常常被運(yùn)用到導(dǎo)航、按鈕、輸入框等交互元件的外觀設(shè)計(jì)或者需要突出的信息內(nèi)容模塊上，從而獲得更優(yōu)秀的視覺體驗(yàn)。

3 一個(gè)典型響應(yīng)式網(wǎng)頁案例的設(shè)計(jì)與技術(shù)分析

Strongly Typed是一個(gè)典型的響應(yīng)式網(wǎng)頁設(shè)計(jì)案例，使用HTML5+CSS3編寫，它簡(jiǎn)潔、優(yōu)雅、大氣，如圖2所示。從網(wǎng)站前端開發(fā)的視角，依托這樣一個(gè)具體案例來展開設(shè)計(jì)和技術(shù)上的討論是十分必要的。它是單頁網(wǎng)站，繼承了“垂直滾動(dòng)理念”。當(dāng)今，太多的用戶已經(jīng)沒有耐心去花費(fèi)時(shí)間等待從A頁面轉(zhuǎn)到B頁面。那么，單頁網(wǎng)站則幾乎節(jié)約了所有等待跳轉(zhuǎn)的時(shí)間，具有良好的用戶友好性。審視Strongly Typed這個(gè)單頁網(wǎng)站的內(nèi)部布局，第一屏頁面的內(nèi)容模塊按照信息優(yōu)先層級(jí)先后，從上至下采用“居中對(duì)齊”的方式排列分布；其余屏頁面的內(nèi)容模塊則是分左右兩欄，按照信息優(yōu)先層級(jí)先后，從左向右采用“左對(duì)齊”的方式布局。這種內(nèi)部布局設(shè)計(jì)簡(jiǎn)單易用，便于修改，與流動(dòng)布局技術(shù)完美契合。面向未來形形色色的終端設(shè)備，千差萬別的屏幕分辨率以及良莠不齊的網(wǎng)絡(luò)鏈接質(zhì)量，這樣內(nèi)部布局的單頁網(wǎng)站會(huì)使響應(yīng)式更加優(yōu)秀和健壯。

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

很明顯，Strongly Typed夠簡(jiǎn)潔，似乎連背景顏色都素凈到底，圖2的左側(cè)羅列了能夠找到的裝飾：細(xì)微陰影、小圓角、半透明、淺色雙線及邊框。這些極其微弱細(xì)小的裝飾元素，具有柔和感和隱蔽性，有時(shí)不易立刻被察覺，但卻可以增加元素的深度，使其從背景中脫穎而出，引起用戶的注意。從實(shí)現(xiàn)技術(shù)上來看，陰影、圓角、漸變、半透明、線條、形狀、按鈕這些簡(jiǎn)單元素可以輕而易舉的通過CSS3的border-radius、linear-gradien、box-shadow、text-shadow、opacity等代碼完成。當(dāng)這些裝飾效果不再需要像從前那樣使用“圖片”來制作時(shí)，響應(yīng)式網(wǎng)頁在不同終端上調(diào)整裝飾效果、網(wǎng)站加載及后期改版方面就會(huì)更加便利。

在扁平化2.0網(wǎng)頁設(shè)計(jì)中，配色很重要，有人喜歡使用多種明亮和飽和度較高的艷麗色彩進(jìn)行搭配，也有人喜歡清淡口味的色彩搭配，比如Strongly Typed。從頁面所呈現(xiàn)的明度色調(diào)來看是柔美高雅的偏淺灰色調(diào)。其中，主色調(diào)及背景色是接近于明度白色非常淺的灰調(diào)，而輔色調(diào)的灰在明度上則稍深些。點(diǎn)睛色紅色（RGB：237、120、106）不是正紅色，它的加入打破了平淡乏味的頁面，使用戶對(duì)網(wǎng)頁產(chǎn)生了更多的印象。此外，Strongly Typed聚焦網(wǎng)站的“內(nèi)容和功能”，搭配使用的裝飾效果只有零星的幾個(gè)（如圖2右側(cè)所示），但在簡(jiǎn)約的同時(shí)它看上去依然豐富有層次。究其原因，主要是它對(duì)有信息意義的文字和圖片的選取、設(shè)計(jì)、編排上也十分考究，尤其是頁面中文字字體、大小、顏色等屬性的設(shè)計(jì)讓網(wǎng)頁中的文字具有優(yōu)雅的韻律感，而那些具有實(shí)際意義的圖片，則畫面優(yōu)美，既是內(nèi)容也有裝飾美感。

4 結(jié)論

伴隨著終端設(shè)備的革新、瀏覽器技術(shù)的完善及前端開發(fā)技術(shù)的發(fā)展，響應(yīng)式網(wǎng)頁設(shè)計(jì)在未來網(wǎng)站前端領(lǐng)域必將獨(dú)領(lǐng)風(fēng)騷。而扁平化2.0用其簡(jiǎn)約、易用、強(qiáng)調(diào)功能、聚焦用戶等優(yōu)勢(shì)也將成為響應(yīng)式網(wǎng)頁設(shè)計(jì)的主流風(fēng)格，這既是現(xiàn)狀也是趨勢(shì)。扁平化2.0響應(yīng)式網(wǎng)頁設(shè)計(jì)是一個(gè)值得探索的方向，雖然當(dāng)前國(guó)內(nèi)相關(guān)案例日益增多，但很多設(shè)計(jì)依然存在問題，并且“模仿”痕跡嚴(yán)重，缺乏原創(chuàng)；那么，研究如何創(chuàng)造個(gè)性驚艷的扁平化2.0響應(yīng)式網(wǎng)頁將成為今后聚焦的問題。

參考文獻(xiàn)：

[1] 秦書榮，李新.響應(yīng)式網(wǎng)頁設(shè)計(jì)的原型研究[J].電子技術(shù)與軟件工程，2016（11）：9.

[2] 秦歲明.扁平化風(fēng)格在網(wǎng)頁界面設(shè)計(jì)中的應(yīng)用[J].包裝工程，2015（3）：42.

[3] Ben Frain.響應(yīng)式Web設(shè)計(jì)HTML5 和CSS3 實(shí)戰(zhàn)[M]. 北京：人民郵電出版社，2015（5）：28.45.

[4] 吳麗婷.以功能性為主導(dǎo)的扁平化界面設(shè)計(jì)研究[J].設(shè)計(jì)，2014（6）：83.