淺析響應(yīng)式趨勢(shì)下網(wǎng)頁界面設(shè)計(jì)的變化

汪玉瓊

摘 要：近年來，隨著移動(dòng)互聯(lián)網(wǎng)的高速發(fā)展，市場(chǎng)上出現(xiàn)了越來越多不同種類的移動(dòng)設(shè)備，它們顯示屏的分辨率各不相同，若開發(fā)者為每種設(shè)備和分辨率開發(fā)特定的網(wǎng)頁版本，是不可能追上設(shè)備更新?lián)Q代的步伐。而響應(yīng)式web設(shè)計(jì)技術(shù)的出現(xiàn)卻迎刃而解了這個(gè)難題，是實(shí)現(xiàn)跨終端 Web 的關(guān)鍵部分。

關(guān)鍵詞：網(wǎng)頁設(shè)計(jì) 界面設(shè)計(jì) 響應(yīng)式 交互設(shè)計(jì)

一、響應(yīng)式網(wǎng)頁

（一）響應(yīng)式網(wǎng)頁的概念

最近一門新興的學(xué)科——“響應(yīng)式建筑（responsive architecture）”——提出，物理空間應(yīng)該可以根據(jù)存在于其中的人的情況進(jìn)行響應(yīng)。將這個(gè)全新的思維運(yùn)用到Web設(shè)計(jì)領(lǐng)域中，我們就得到了一個(gè)全新的概念。為什么一定要為每個(gè)用戶群各自打造一套設(shè)計(jì)和開發(fā)方案？和響應(yīng)式建筑相似，Web設(shè)計(jì)同樣應(yīng)該做到根據(jù)不同設(shè)備環(huán)境自動(dòng)響應(yīng)及調(diào)整，它通過集合媒體查詢、流動(dòng)布局和彈性視覺媒體的技術(shù)，是一種采用靈活的、不針對(duì)特定上網(wǎng)設(shè)備的方法來進(jìn)行Web設(shè)計(jì)，有效地解決了日益涌現(xiàn)的多種移動(dòng)互聯(lián)網(wǎng)用戶終端設(shè)備，實(shí)現(xiàn)了“一源多屏”的現(xiàn)實(shí)需求。

（二）響應(yīng)式網(wǎng)頁的意義

隨著各種屏幕尺寸設(shè)備的興起以及交互方式的多樣性，之前采用的網(wǎng)站設(shè)計(jì)方法已不再適用。我們需要更新設(shè)計(jì)方法，更新設(shè)計(jì)觀念，更新設(shè)計(jì)工具。 我們不可能為所有這些常用的屏幕尺寸都設(shè)計(jì)一個(gè)專屬的網(wǎng)站。 所以， 響應(yīng)式設(shè)計(jì)在此時(shí)就體現(xiàn)了他的價(jià)值，能滿足所有類型終端用戶的需求，能帶給所有終端用戶最優(yōu)的訪問體驗(yàn)。

二、響應(yīng)式網(wǎng)頁下的界面元素設(shè)計(jì)有何變化

（一）使用那些精彩的字體

對(duì)于響應(yīng)式網(wǎng)站，你不得不把它在小屏幕上看起來如何這個(gè)問題考慮到設(shè)計(jì)中去。好的字體是所有優(yōu)秀網(wǎng)站奪人眼球的重頭戲，然而它在響應(yīng)式設(shè)計(jì)中，卻幾乎成了必需品。隨著屏幕減小，大部分元素都相應(yīng)地發(fā)生變化、縮小或者移動(dòng)位置。首先，也是重中之重，你的字體要具備這種能力。第二，你得用不同標(biāo)題尺寸和多種文字大小。如今，我們?cè)谧烂娑嗽O(shè)計(jì)中常常使用巨大的標(biāo)題和頁頭。這點(diǎn)不必延續(xù)整個(gè)網(wǎng)站，因?yàn)槟憧偟每紤]更小尺寸。

（二） 使用那些絕妙的圖片

和文字排版一樣，圖像在任何網(wǎng)頁設(shè)計(jì)中都至關(guān)重要。在響應(yīng)式設(shè)計(jì)中，當(dāng)你在更小的屏幕上查看網(wǎng)站，你的圖片應(yīng)該相應(yīng)更小或等比縮放，這點(diǎn)也和文字相同。響應(yīng)式設(shè)計(jì)中有成百上千種不同布局和圖片尺寸。注重圖片的選擇和使用，因?yàn)樗鼈兒翢o疑問會(huì)發(fā)生變化。隨著屏幕變大或變小，圖片會(huì)改變形狀和展現(xiàn)方式，或被裁切掉一部分理想情況下，你會(huì)希望確保窗口尺寸變化時(shí)，大幅攝影圖片不會(huì)有任何裁切。另外，在你制作圖像時(shí)，必須保證你的作品加載速度快，而且對(duì)小尺寸屏幕可見。這就是為什么設(shè)計(jì)師推崇扁平設(shè)計(jì)，它使得這點(diǎn)更容易。

（三） 導(dǎo)航也是一個(gè)重頭戲

如果人們不知道如何瀏覽你的網(wǎng)站，那他們就直接不瀏覽了。響應(yīng)式設(shè)計(jì)的導(dǎo)航更難處理，因?yàn)槲覀円呀?jīng)習(xí)慣于為橫向設(shè)計(jì)打造導(dǎo)航。如今，我們得創(chuàng)建能夠輕易壓縮以適應(yīng)縱向規(guī)格的導(dǎo)航只有少量鏈接時(shí)這并不是大問題。你可以將你的導(dǎo)航變小或縮至頂部，也可以為訪客提供一個(gè)下拉菜單。主要問題是該如何處理包含更多內(nèi)容的繁重導(dǎo)航。Mashable有大量鏈接，因?yàn)樗写罅康姆诸惿踔粮嗟奈恼?。在這之上，他們還有自己的公司二級(jí)頁鏈接。Mashable決定在左側(cè)為小屏幕瀏覽器創(chuàng)建一個(gè)彈出菜，Monocle網(wǎng)站導(dǎo)航頂部有兩塊延伸部分。為適應(yīng)小尺寸瀏覽器，他們?yōu)闃O端情況的內(nèi)容創(chuàng)建了下拉菜單，并且縮減了導(dǎo)航的第二部分。

（四） 逐步扁平化的圖標(biāo)

隨著響應(yīng)式網(wǎng)頁設(shè)計(jì)的流行，雖然這并不意味著說圖標(biāo)大小會(huì)隨屏幕尺寸的變動(dòng)而改變，而是意味著圖標(biāo)會(huì)根據(jù)自己所處何種設(shè)備來改變自身大小。這就意味著屏幕尺寸對(duì)圖標(biāo)來說不是那么重要了，因?yàn)樗茏詣?dòng)調(diào)節(jié)，它可以變大變小——同一時(shí)間，同一屏幕。與此同時(shí)，圖標(biāo)風(fēng)格也隨著改變，設(shè)計(jì)里拋棄了材質(zhì)和逼真的光影效果的扁平化圖標(biāo)越來越多，讓圖標(biāo)更加精簡、柔和、富有設(shè)計(jì)感。響應(yīng)式圖標(biāo)推動(dòng)了圖標(biāo)設(shè)計(jì)的發(fā)展，讓用戶得到了更好的體驗(yàn)，操作性更好，視覺效果更佳。

三、響應(yīng)式網(wǎng)頁設(shè)計(jì)應(yīng)當(dāng)遵循的原則

（一） 內(nèi)容優(yōu)先

在響應(yīng)式網(wǎng)頁設(shè)計(jì)中，有時(shí)候我們需要對(duì)頁面內(nèi)容進(jìn)行刪減，按照優(yōu)先級(jí)顯示內(nèi)容，只顯示高優(yōu)先級(jí)內(nèi)容是原則之一。在屏幕較小的移動(dòng)設(shè)備上應(yīng)該優(yōu)先考慮內(nèi)容并且去移掉那些小的欄目。在頂部顯示高優(yōu)先級(jí)內(nèi)容，即把最重要的內(nèi)容放置在頂部。導(dǎo)航是否一定要出現(xiàn)在頁頭或者重新布局改在頁尾都要依網(wǎng)站具體規(guī)劃去考慮。

（二） 提供友好的交互設(shè)計(jì)

調(diào)整設(shè)計(jì)來適應(yīng)可用空間，使得用戶在不同的設(shè)備上仍保持對(duì)同一頁面相同的視覺和感覺。這也遵循我們交互設(shè)計(jì)體驗(yàn)一致的原則。大家可以參考Oliver Russell網(wǎng)站，一個(gè)設(shè)計(jì)非常靈活的網(wǎng)站，在不同的屏幕分辨率下保持相同的視覺和感覺。

（三） 考慮大部分用戶的用機(jī)習(xí)慣

提供清晰和友好的手指操作鏈接。尤其在手機(jī)設(shè)備上，可點(diǎn)擊操作的區(qū)塊不宜過小，引導(dǎo)要清晰強(qiáng)烈，不忽略任何一款設(shè)備。調(diào)整設(shè)計(jì)來適應(yīng)可用空間，使得用戶在不同的設(shè)備上仍保持對(duì)同一頁面相同的視覺和感覺。這也遵循我們交互設(shè)計(jì)體驗(yàn)一致的原則。需考慮大部分用戶右手點(diǎn)擊操作，左手負(fù)責(zé)握住設(shè)備的習(xí)慣，右側(cè)的導(dǎo)航列表既方便右手的點(diǎn)擊，又可以避免被握著設(shè)備的左手不小心觸碰到。

參考文獻(xiàn)：

[1] Tim Kadlec. 響應(yīng)式Web設(shè)計(jì)實(shí)踐[M]. 侯鴻儒譯.北京：人民郵電出版社，2013

[2] 施密特.響應(yīng)式Web 圖形設(shè)計(jì)[M.曾斌譯.北京：人民郵電出版社，2014

[3] 張帆，羅琦，宮曉東.網(wǎng)頁界面設(shè)計(jì)藝術(shù)教程[M].北京：人民郵電出版社，2002

作者單位：中南民族大學(xué)