響應(yīng)式網(wǎng)頁設(shè)計(jì)在伯樂相馬網(wǎng)的應(yīng)用

黃莉婷等

【摘 要】隨著計(jì)算機(jī)網(wǎng)絡(luò)技術(shù)的飛速發(fā)展，硬件技術(shù)上的不斷進(jìn)步，各種設(shè)備也如雨后春筍般破土而出，充斥著我們的生活，同時(shí)也在推動(dòng)著網(wǎng)站的發(fā)展。由于各種屏幕的尺寸相差甚遠(yuǎn)，傳統(tǒng)的固定網(wǎng)頁已經(jīng)不能在大小不一設(shè)備上完美地顯現(xiàn)出來，然而我們又不可能為每一種設(shè)備配備一種設(shè)計(jì)方式的站點(diǎn)，因此，響應(yīng)式網(wǎng)頁設(shè)計(jì)成為不二之選。倘若我們只開發(fā)一個(gè)站點(diǎn)，就可以適應(yīng)所有設(shè)備，那么就可事半功倍。雖然我們無法預(yù)料未來的設(shè)備所有屏幕的大小，但是可以為未來的設(shè)備做好適應(yīng)站點(diǎn)。響應(yīng)式設(shè)計(jì)是一種未來友好型站點(diǎn)的優(yōu)秀方案，值得我們?nèi)ヌ剿鳌?/p>

【關(guān)鍵詞】響應(yīng)式設(shè)計(jì)；網(wǎng)頁設(shè)計(jì)；伯樂相馬網(wǎng)

1 響應(yīng)式設(shè)計(jì)簡介

1.1 響應(yīng)式的起源

2010年5月，Rthan Marcotte就在“A List Apart”發(fā)表了一篇叫做“Responsive Web Design”（響應(yīng)式網(wǎng)頁設(shè)計(jì)）的文章，提出了響應(yīng)式網(wǎng)頁設(shè)計(jì)的理念。響應(yīng)式網(wǎng)頁設(shè)計(jì)來源于建筑界的設(shè)計(jì)理念，即響應(yīng)式建筑，它是指某個(gè)空間的大小會(huì)根據(jù)內(nèi)部的人員的數(shù)量和流動(dòng)的速度而自動(dòng)調(diào)整。把這種設(shè)計(jì)思路運(yùn)用到網(wǎng)頁中來，也有異曲同工之妙?？焖僭鲩L而且日趨多樣化的可聯(lián)網(wǎng)設(shè)備的產(chǎn)生，使得廣義的屏幕標(biāo)準(zhǔn)尺寸已經(jīng)不存在，并且屏幕尺寸也在不斷變化以滿足人們的需求；嚴(yán)格定義的響應(yīng)式一般是指響應(yīng)式Web設(shè)計(jì)，而Web憑借其特有的靈活性和可塑性，可以適應(yīng)各種尺寸和配置的設(shè)備，它可以無處不在。響應(yīng)式設(shè)計(jì)概念一提出，各大網(wǎng)站及平臺(tái)都希望能夠采用這秉一應(yīng)萬的模式，可以更靈活地去適配更多設(shè)備，尤其是在移動(dòng)設(shè)備大爆棚的時(shí)代。

1.2 響應(yīng)式的發(fā)展情況

2013年TNW發(fā)布了10大網(wǎng)頁設(shè)計(jì)趨勢排行，其中排名第一的為響應(yīng)式布局，即一個(gè)網(wǎng)站適配多種屏幕。其實(shí)早在2012年我們就看到一些新的設(shè)計(jì)趨勢出現(xiàn)在Web設(shè)計(jì)領(lǐng)域，特別是響應(yīng)式網(wǎng)頁設(shè)計(jì)。

國內(nèi)的響應(yīng)式發(fā)展情況比國外落后很多，在國外的響應(yīng)式網(wǎng)站很盛行的時(shí)候，我國才后知后覺的其優(yōu)勢。響應(yīng)式網(wǎng)站在2013年才為我國的少數(shù)人所知曉，此時(shí)，國外的響應(yīng)式技術(shù)已經(jīng)進(jìn)入成熟期，不僅小型的商務(wù)公司采用響應(yīng)式設(shè)計(jì)，很多大公司也在探索在他們的網(wǎng)站采用響應(yīng)式網(wǎng)頁設(shè)計(jì)。2013年底蘋果公司的一份調(diào)查問卷顯示，國外智能手機(jī)的覆蓋率已經(jīng)為80%，而同年，Google的智能手機(jī)使用調(diào)查報(bào)告上顯示，中國城市的智能手機(jī)的普及率為47%。而智能手機(jī)的普及推動(dòng)了響應(yīng)式技術(shù)的發(fā)展，由此可見，智能手機(jī)的普及度也是我國響應(yīng)式網(wǎng)站發(fā)展緩慢的原因。

2 用戶行為分析

研究用戶行為，是因?yàn)槲覀兊漠a(chǎn)品是要為用戶服務(wù)的。以用戶為中心的設(shè)計(jì)能給用戶更好的體驗(yàn)，讓用戶對(duì)開發(fā)出來的產(chǎn)品產(chǎn)生好感，進(jìn)而購買我們的產(chǎn)品。設(shè)計(jì)與生產(chǎn)就是為了出售，而客戶就是推動(dòng)生產(chǎn)與創(chuàng)新的力量，因此，在開發(fā)產(chǎn)品的每個(gè)階段，都要把用戶考慮在其中。

2.1 設(shè)備的多樣式

生活中，很多人一天會(huì)用三種設(shè)備上網(wǎng)。外出時(shí)使用手機(jī)上網(wǎng)，在室內(nèi)用電腦上網(wǎng)，而睡前用平板獲取信息。這三種設(shè)備的屏幕各不相同，分辨率從320像素到1920像素不等。現(xiàn)代家庭中，數(shù)字電視也開始普遍，也就是說，有一部分人除了用手機(jī)、平板和電腦上網(wǎng)之外，還會(huì)使用數(shù)字電視，另外還有一部分人用可穿戴設(shè)備上網(wǎng)，而同一種設(shè)備還有不同的大小型號(hào)。由此可見，現(xiàn)如今的網(wǎng)站比之前的任何時(shí)候都更需要能夠在不同的設(shè)備上適用，而每一種設(shè)備又都是功能與被限制的關(guān)系產(chǎn)物。

2.2 使用環(huán)境與網(wǎng)速的關(guān)系

用戶在家時(shí)，時(shí)間比較充裕，最可能使用電腦或平板上網(wǎng)，有些人還會(huì)使用數(shù)字電視，此時(shí)網(wǎng)絡(luò)連接一般為寬帶或WIFI，網(wǎng)絡(luò)流暢，速度較快，不在乎瀏覽網(wǎng)頁時(shí)所花的流量多少，也會(huì)增加頁面的等待時(shí)間；用戶在戶外時(shí)，所在的地方有公交車上、開車中、行走中、商場或者等待中，此時(shí)的用戶時(shí)間都是碎片化的，而且網(wǎng)速較慢，時(shí)間匆忙，用戶很容易失去耐心。

3 響應(yīng)式網(wǎng)站的優(yōu)點(diǎn)

3.1 一個(gè)站點(diǎn)適應(yīng)所有屏幕

在國內(nèi)，很多大型網(wǎng)站，財(cái)力比較充足，所以會(huì)為pc端和移動(dòng)端各建立一個(gè)站點(diǎn)，方便在各個(gè)端口實(shí)現(xiàn)最好的頁面效果。然而時(shí)代在發(fā)展，各種的設(shè)備的種類越來越多，屏幕分辨率也各不相同。隨著Google眼鏡的推出，Apple Watch的成功發(fā)布，可穿戴設(shè)備離我們越來越近，這也說明，今后會(huì)有更多我們聞所未聞的設(shè)備接踵而來，并且這些設(shè)備將會(huì)越來越普及。面對(duì)如此多的設(shè)備，我們的網(wǎng)站應(yīng)該如何去適應(yīng)各個(gè)不同設(shè)備的端口？解決這個(gè)問題的最好方法是建立一個(gè)可以適應(yīng)各種屏幕的站點(diǎn)，這種站點(diǎn)就是響應(yīng)式網(wǎng)站，不僅解決了需要建立多個(gè)站點(diǎn)的問題，而且在各個(gè)站點(diǎn)都能最好地展示頁面效果。

3.2 提升用戶體驗(yàn)

當(dāng)你瀏覽網(wǎng)站時(shí)，你會(huì)發(fā)現(xiàn)很多網(wǎng)站在pc端是如此的完美，但是到了移動(dòng)端卻是慘不忍睹。例如在國外的copyblogger的博客有提到過一個(gè)很經(jīng)典的案例——迪士尼公司的網(wǎng)站，他說在迪士尼網(wǎng)站中有許多給小朋友玩的網(wǎng)頁游戲，但是這些游戲卻只能在pc端玩，在移動(dòng)端是無法打開的。而響應(yīng)式網(wǎng)站卻能夠讓你無論在pc端還是移動(dòng)端都能體驗(yàn)到良好的視覺效果。

4 響應(yīng)式在伯樂相馬網(wǎng)站的應(yīng)用

4.1 響應(yīng)式導(dǎo)航的設(shè)計(jì)方式

響應(yīng)式導(dǎo)航常見的設(shè)計(jì)模式有7種，分別是：置頂、頁腳錨點(diǎn)、置底、菜單選擇、側(cè)滑、開關(guān)和徹底隱藏。

在伯樂相馬網(wǎng)中，主要采用的是菜單選擇，菜單選擇是將導(dǎo)航收納在一個(gè)選擇菜單的控件當(dāng)中的方法。減少了導(dǎo)航所占用的屏幕空間。選擇菜單選擇的原因如下：

在移動(dòng)設(shè)備中，空間資源非常有限，因此移動(dòng)端的導(dǎo)航不能像pc端那樣直接顯示，需要將導(dǎo)航整合在一起。置頂雖是簡單的導(dǎo)航實(shí)現(xiàn)方式，但是在移動(dòng)端會(huì)造成不好的視覺效果；對(duì)于頁腳錨點(diǎn)和和置底來說，都是將導(dǎo)航放在頁腳，對(duì)于一個(gè)求職網(wǎng)站來說需要的是快速尋找所需的信息，而這種方法增加了用戶的使用成本；開關(guān)的導(dǎo)航方式，是用戶點(diǎn)擊后菜單才滑動(dòng)展開，但菜單的設(shè)置區(qū)域是固定的，用戶需要尋找才能發(fā)現(xiàn)，增加用戶的使用成本；徹底隱藏也同樣增加了用戶成本。

4.2 響應(yīng)式網(wǎng)頁的布局

基于響應(yīng)式網(wǎng)頁的布局，有人曾經(jīng)這樣形容：倒入杯中的水的形狀由裝它的容器形狀決定。網(wǎng)頁設(shè)計(jì)也可以把這個(gè)概念融入其中，網(wǎng)頁的展示形式取決于展示它的設(shè)備屏幕尺寸。頁面常用的布局方式有固定布局、流動(dòng)布局、彈性布局和混合布局。響應(yīng)式網(wǎng)站中一般采用后三種，選擇合適的方式才是最好的，并沒有哪一種布局方式是最好的?？梢远喾N方式混合使用，取長補(bǔ)短。通欄、等分結(jié)構(gòu)的適合采用彈性布局方式、而對(duì)于非等分的多欄結(jié)構(gòu)往往需要采用混合布局的實(shí)現(xiàn)方式。

4.3 設(shè)計(jì)模式

設(shè)計(jì)模式主要有兩種：基于設(shè)備和內(nèi)容優(yōu)先，早先年間很多網(wǎng)頁采用基于設(shè)備的模式，因?yàn)楫?dāng)時(shí)屏幕種類較少，且有標(biāo)準(zhǔn)屏幕之說。如今，標(biāo)準(zhǔn)屏幕已經(jīng)不復(fù)存在。因此，內(nèi)容優(yōu)先是一種不錯(cuò)的選擇。在伯樂相馬網(wǎng)中采用的是內(nèi)容優(yōu)先的方式，因?yàn)閷?duì)于一個(gè)信息類的網(wǎng)站而言，可讀性和移動(dòng)性至關(guān)重要。

4.3.1 基于設(shè)備

通過主流設(shè)備的類型及尺寸來確定布局?jǐn)帱c(diǎn)（Break point），設(shè)計(jì)多套樣式，再分別投射到相應(yīng)的設(shè)備。不要使用流行的設(shè)備尺寸來確定斷點(diǎn)。該設(shè)備的屏幕（Device Landscape）是不斷在變化的，所以使用流行設(shè)備的尺寸作為斷點(diǎn)，他的實(shí)際價(jià)值存在的意義可能沒有什么，甚至一年的時(shí)間都堅(jiān)持不到。Web本質(zhì)是流動(dòng)的，因此我們的工作是在任何屏幕上創(chuàng)建外觀、功能等。

4.3.2 內(nèi)容優(yōu)先

根據(jù)內(nèi)容的可讀性、易讀性作為確定斷點(diǎn)（Break point）的標(biāo)準(zhǔn)，即在對(duì)內(nèi)容進(jìn)行布局設(shè)計(jì)的時(shí)候，可以無視設(shè)備，由內(nèi)容決定何時(shí)需要采用不同的呈現(xiàn)方式。這種方式和未來友好型是相契合。

4.4 響應(yīng)式網(wǎng)頁的字體

字體對(duì)于一個(gè)網(wǎng)站來說，起著至關(guān)重要的作用，不單是畫風(fēng)影響風(fēng)格，字體也會(huì)影響風(fēng)格，響應(yīng)式網(wǎng)站的字體尺寸會(huì)隨著屏幕尺寸而不斷調(diào)節(jié)，展現(xiàn)最適合人類視覺的界面。

4.4.1 字體大小

從2006年開始有人開始推薦了“透視化比例”字體尺寸。正文字體尺寸可以通過透視竅門來評(píng)估，而行高需要一些調(diào)整。隨著更遠(yuǎn)的閱讀距離和更多的像素污點(diǎn)，給屏幕上的文字比印刷的更大一點(diǎn)的行高是比較好的方式。140%是一個(gè)好的參照。調(diào)整字體尺寸不是一個(gè)關(guān)于興趣的問題，是一個(gè)閱讀距離的問題。相當(dāng)一部分的網(wǎng)站會(huì)選擇小字體，想用這種方法讓人覺得此網(wǎng)站做工很精細(xì)，大部分用戶也會(huì)按照這個(gè)字體大小去閱讀，到后面也會(huì)習(xí)慣了。

4.4.2 字體邊界

字體跟邊界的距離很有講究，在響應(yīng)式網(wǎng)站中，不同屏幕尺寸中的邊界也是不一樣的，符合人類的觀看視覺，才會(huì)讓讀者覺得舒服，如若處理不當(dāng)，就會(huì)讓用戶覺得太窄，空間不夠用，太擠或太寬，存在感小，視覺上出現(xiàn)不適，就不想再看下去了。所以每次變換屏幕的時(shí)候，邊界尺寸也需要調(diào)整。

5 總結(jié)

隨著計(jì)算機(jī)軟硬件技術(shù)的飛速發(fā)展，網(wǎng)站的實(shí)現(xiàn)技術(shù)也日漸成熟，各種網(wǎng)站的種類和數(shù)量也是數(shù)不勝數(shù)，網(wǎng)絡(luò)知識(shí)也越來越普及，各地網(wǎng)民也在不斷增多。想要在比比皆是的網(wǎng)站中脫穎而出，前提是要有良好的用戶體驗(yàn)，而響應(yīng)式網(wǎng)站設(shè)計(jì)正是以用戶為中心的設(shè)計(jì)，往往能給用戶良好的體驗(yàn)。伴隨著社會(huì)的發(fā)展，人類的欣賞水平和體驗(yàn)感覺也會(huì)變得越來越高，除了頁面要美觀之外，打開網(wǎng)頁的速度的快慢也決定了用戶是否會(huì)停留在網(wǎng)頁，所以在響應(yīng)式的基礎(chǔ)上還要不斷努力的提升網(wǎng)頁速度。響應(yīng)式體現(xiàn)的是一種高度適應(yīng)性的設(shè)計(jì)思維模式。在響應(yīng)式設(shè)計(jì)探究的道路上，響應(yīng)式的本身不是唯一的目的，任意設(shè)備對(duì)頁面內(nèi)容進(jìn)行完美規(guī)劃的設(shè)計(jì)策略及工作流程才是我們更遠(yuǎn)大的追求。

【參考文獻(xiàn)】

[1][美]Tim Cadlec，著.候儒鴻，譯.響應(yīng)式Web設(shè)計(jì)實(shí)踐[M].北京：人民郵電出版社，2013（6）：1-20.

[2][德]Smashing Magazine，寒武紀(jì)，譯.眾妙之門——國際頂級(jí)Web設(shè)計(jì)師成功法則[M].北京：人民郵電出版社，2013（1）：5-11，152-153.

[責(zé)任編輯：鄧麗麗]