扁平化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.