扁平化2.0響應式網(wǎng)頁的設計與技術探析

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

關鍵詞 扁平化2.0；響應式網(wǎng)頁設計；前端；HTML5；CSS3

中圖分類號：TP311 文獻標識碼：A 文章編號：1009-3044（2016）26-0204-02

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

1 響應式網(wǎng)頁設計的3大核心技術

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

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

2 最佳搭配：扁平化2.0風格

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

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

3 一個典型響應式網(wǎng)頁案例的設計與技術分析

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

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

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

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

4 結(jié)論

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

參考文獻：

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

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

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

[4] 吳麗婷.以功能性為主導的扁平化界面設計研究[J].設計，2014（6）：83.