汪玉瓊

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

參考文獻(xiàn)：

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

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

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

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