響應式設計對網頁界面的影響

戴慧萍

【內容摘要】響應式網頁設計能夠實現一個網站在多個設備上顯示最優化，受該技術的影響，網頁界面呈現簡潔明快的扁平化風格。文章通過對網頁布局、網站導航、圖片彈性化等方面分析，對網頁界面的響應式設計做進一步探討。

【關鍵詞】響應式設計 網頁界面 ?扁平化設計

如今，個人電腦、平板電腦、智能手機等這些電子設備種類繁多，如果一個網站在個人電腦上顯示完好，但是在手機屏幕上打開時會出現溢出、網頁出現橫向滾動或者網頁在手機上被極度縮小等問題，就會無法辨識。一個網站怎樣在數十種屏幕上完美顯示，成為大家所關注的問題。如果要針對每一種終端各做一套頁面，太耗費人力，維護起來也很困難。而響應式網頁設計是一種新的設計思維，解決了一個網站在各種屏幕上達到最佳顯示效果的問題。

響應式網頁設計（Responsive Web Design）是Ethan Marcotte在2010年提出的，最初是指可以自動識別屏幕寬度，并做出相應調整的網頁設計，現擴展為頁面的設計與開發應當根據用戶的行為以及設備環境，能夠進行自動的響應和相應的調整，做到“一源多屏”。

響應式設計基于三大技術：媒體查詢、流式網格布局、彈性圖片。媒體查詢（Media queries）是對設備的特點（通常是瀏覽器的寬度）進行識別，從而確定使用不同的CSS樣式;流式網格布局（Fluid Grids）是在布局時將頁面內容元素設計成屏幕寬度的相對值，并使用相對尺寸單位如百分比（%）或字體比例（em），如某一個方塊占屏幕寬度的20%，而不是如網頁設計常用的絕對單位如像素（px）;彈性圖片（Fluid Images）是以相對單位調整大小或被相應剪裁，當屏幕變小時，圖片相應變小。

由于形式追隨功能，受技術的影響，響應式網頁設計的界面形成了一定特點。

一、網頁布局簡潔和彈性化

當顯示屏變化的時候，網頁會進行重排來適應屏幕的大小和分辨率等，為了給用戶好的視覺效果，網頁布局會適當變化。比如當用戶在電腦上看一個網頁的時候，由于屏幕較大，能看到的內容是完整的，當他在手機上打開這個網頁的時候，由于屏幕較小，不能完全顯示所有內容，這時網頁布局會重新布局，一般來說最重要的內容會首先顯示出來，其他內容依照某種次序放在屏幕之外，通過屏幕滾動來顯示。

因此，為了適應不同的屏幕尺寸進行頁面內容重排，響應式網站的頁面內容不會太復雜，而是盡量簡潔清晰。目前的響應式網站往往應用了流式網格系統，網頁的所有內容被分為幾個內容模塊，每塊的寬度是網格單元的整數倍，如在12格的網格系統里，每個模塊的寬度按照格數來計算，如一個占6格或4格，在電腦桌面系統中顯示12個格的寬度，在手機上有可能只顯示4格的寬度。響應式網站的布局采用彈性化技術，便于在不同設備之間變化，同時頁面布局顯得十分簡潔明快，擁有很好的用戶體驗。

二、網站導航形式多樣

導航是一個網站的重要部分，它出現在每個頁面上，引領用戶到達向他們想看的頁面。針對不同的設備屏幕以及各屏幕的橫向縱向顯示，響應式網站的導航會做出不同樣式的變化：如電腦屏幕和縱向的平板電腦上會顯示出在頁面頂部橫向排列的導航欄;而在平板電腦橫向顯示時會顯示出在左邊豎向排列的導航欄;當屏幕更小的時候，如智能手機上會把導航欄隱藏起來，只在左上角或右上角出現一個圖標按鈕，點擊它才會出現一個疊加在網頁上的導航欄。因此，響應式網站的導航會有多個設計方案以適應不同的設備屏幕。

三、圖片彈性化和圖標扁平化

在響應式網站中，圖片要響應不同的屏幕，大小不能用絕對值，而是采用相對的百分比數值，當屏幕變小時，圖片會按比例縮放。對于一些不太需要看清全貌的圖片，如一些背景圖，可以采用裁剪的方式，如屏幕變小時，把圖片的寬和高相應地裁掉一部分。

響應式網站的圖標和按鈕呈現扁平化的趨勢。扁平化即二維化，去掉高光陰影、立體浮雕等修飾，這種簡潔的形式能更快速、便捷地傳達信息。扁平化風格的圖標和按鈕十分靈活，可以在不影響視覺效果的情況下改變尺寸和位置，易于實現響應式設計。

四、色彩和字體設計成為重點

當一個網站內容十分簡略、風格非常簡潔清晰的時候，設計的重點就自然放在了色彩搭配和字體設計排版上。

對于配色，一般建議網站的顏色不超過3種，而響應式網站的配色會更自由些，頁面上可能出現很多個顏色，只要搭配和諧，采用多種顏色會讓頁面顯得活潑。

在字體設計和排版上，設計師會根據網站風格選擇字體，并用靈活字體的大小、筆畫粗細來傳達文字信息的等級，也會注意文字段落的行間距和字間距，這些細節設計讓響應式網站擁有很好的用戶體驗。

五、扁平化網頁風格流行

綜合上面的所有特點，響應式網站的整體風格是簡潔明快的、平面化的，人們將這種風格稱為“扁平化”（Flat）。與“扁平化”設計相對的是“擬物化”（skeoumorphism）設計，即模擬真實世界的各種對象，這類圖形帶有陰影、紋理、質感、透視等真實物體的特性。擬物化設計曾經十分流行，它符合人們的認知習慣，易于識別和學習，拉近了機器與人的距離。而扁平化設計是與擬物化設計極端相反的，如今扁平化設計爆發式地流行起來，典型的例子就是幾大操作系統Windows8、Android4.0、ios7.0的UI設計。

為什么扁平化設計能流行起來？有人說是對擬物化過度裝飾的變革，有人說是對19世紀的包豪斯、國際主義風格、極簡主義的再流行，有人說是人們對擬物化審美疲勞之后出現的風格革新。而筆者認為，扁平化風格的流行最根本的原因是響應式設計技術的出現和推廣，正如路易斯·沙利文提出的“形式追隨功能”，一個形式的出現是為了配合功能的實現。響應式設計和扁平化界面設計是密不可分的，響應式設計的實現要求界面扁平化，響應式技術的應用也推動了扁平化風格的流行。

結語

隨著智能手機等移動終端的用戶不斷增加，會有越來越多的網站采用響應式網頁設計，網站的界面設計也會受其影響，更多地采用簡潔的網格布局、平面化的圖標按鈕、豐富的色彩組合、細膩的字體排版等設計元素，簡潔明快的扁平化風格正在被越來越多的用戶所接受。

參考文獻：

[1]Christopher ?Schmitt.響應式Web圖形設計[M].北京：人民郵電出版社，2014.

[2]王愉，潘明明.響應式網頁設計初探[J].北京印刷學院學報，2014.

[3]趙夢琪.淺談“扁平化設計”在交互設計中的應用[J].設計，2014（3）.

[4]夏穎翀.數字產品界面中樸素的設計和冗余的設計[J].裝飾，2013（5）.

作者單位：上海杉達學院人文學院

（責任編輯：曹寧）