響應(yīng)式設(shè)計對網(wǎng)頁界面的影響

戴慧萍

【內(nèi)容摘要】響應(yīng)式網(wǎng)頁設(shè)計能夠?qū)崿F(xiàn)一個網(wǎng)站在多個設(shè)備上顯示最優(yōu)化，受該技術(shù)的影響，網(wǎng)頁界面呈現(xiàn)簡潔明快的扁平化風(fēng)格。文章通過對網(wǎng)頁布局、網(wǎng)站導(dǎo)航、圖片彈性化等方面分析，對網(wǎng)頁界面的響應(yīng)式設(shè)計做進(jìn)一步探討。

【關(guān)鍵詞】響應(yīng)式設(shè)計 網(wǎng)頁界面 ?扁平化設(shè)計

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

響應(yīng)式網(wǎng)頁設(shè)計（Responsive Web Design）是Ethan Marcotte在2010年提出的，最初是指可以自動識別屏幕寬度，并做出相應(yīng)調(diào)整的網(wǎng)頁設(shè)計，現(xiàn)擴展為頁面的設(shè)計與開發(fā)應(yīng)當(dāng)根據(jù)用戶的行為以及設(shè)備環(huán)境，能夠進(jìn)行自動的響應(yīng)和相應(yīng)的調(diào)整，做到“一源多屏”。

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

由于形式追隨功能，受技術(shù)的影響，響應(yīng)式網(wǎng)頁設(shè)計的界面形成了一定特點。

一、網(wǎng)頁布局簡潔和彈性化

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

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

二、網(wǎng)站導(dǎo)航形式多樣

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

三、圖片彈性化和圖標(biāo)扁平化

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

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

四、色彩和字體設(shè)計成為重點

當(dāng)一個網(wǎng)站內(nèi)容十分簡略、風(fēng)格非常簡潔清晰的時候，設(shè)計的重點就自然放在了色彩搭配和字體設(shè)計排版上。

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

在字體設(shè)計和排版上，設(shè)計師會根據(jù)網(wǎng)站風(fēng)格選擇字體，并用靈活字體的大小、筆畫粗細(xì)來傳達(dá)文字信息的等級，也會注意文字段落的行間距和字間距，這些細(xì)節(jié)設(shè)計讓響應(yīng)式網(wǎng)站擁有很好的用戶體驗。

五、扁平化網(wǎng)頁風(fēng)格流行

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

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

結(jié)語

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

參考文獻(xiàn)：

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

[2]王愉，潘明明.響應(yīng)式網(wǎng)頁設(shè)計初探[J].北京印刷學(xué)院學(xué)報，2014.

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

[4]夏穎翀.數(shù)字產(chǎn)品界面中樸素的設(shè)計和冗余的設(shè)計[J].裝飾，2013（5）.

作者單位：上海杉達(dá)學(xué)院人文學(xué)院

（責(zé)任編輯：曹寧）