伯樂相馬網站中響應式網頁的運用論文
1響應式設計簡介
1.1 響應式的起源
2010 年 5 月，Rthan Marcotte 就在“A List Apart”發(fā)表了一篇叫做“Responsive Web Design”（響應式網頁設計）的文章，提出了響應式網頁設計的理念。 響應式網頁設計來源于建筑界的設計理念，即響應式建筑，它是指某個空間的大小會根據內部的人員的數(shù)量和流動的速度而自動調整。把這種設計思路運用到網頁中來，也有異曲同工之妙�？焖僭鲩L而且日趨多樣化的可聯(lián)網設備的產生，使得廣義的屏幕標準尺寸已經不存在，并且屏幕尺寸也在不斷變化以滿足人們的需求；嚴格定義的響應式一般是指響應式 Web 設計， 而 Web 憑借其特有的靈活性和可塑性，可以適應各種尺寸和配置的設備，它可以無處不在。響應式設計概念一提出，各大網站及平臺都希望能夠采用這秉一應萬的模式，可以更靈活地去適配更多設備，尤其是在移動設備大爆棚的時代。
1.2 響應式的發(fā)展情況
2013 年 TNW 發(fā)布了 10 大網頁設計趨勢排行， 其中排名第一的為響應式布局，即一個網站適配多種屏幕。 其實早在 2012 年我們就看到一些新的設計趨勢出現(xiàn)在 Web 設計領域，特別是響應式網頁設計。
國內的響應式發(fā)展情況比國外落后很多，在國外的響應式網站很盛行的時候，我國才后知后覺的其優(yōu)勢。 響應式網站在 2013 年才為我國的少數(shù)人所知曉，此時，國外的響應式技術已經進入成熟期，不僅小型的商務公司采用響應式設計，很多大公司也在探索在他們的網站采用響應式網頁設計。 2013 年底蘋果公司的一份調查問卷顯示，國外智能手機的覆蓋率已經為 80%, 而同年，Google 的智能手機使用調查報告上顯示，中國城市的智能手機的普及率為 47%. 而智能手機的普及推動了響應式技術的發(fā)展，由此可見，智能手機的普及度也是我國響應式網站發(fā)展緩慢的原因。
2用戶行為分析
研究用戶行為，是因為我們的產品是要為用戶服務的。 以用戶為中心的設計能給用戶更好的體驗， 讓用戶對開發(fā)出來的產品產生好感，進而購買我們的產品。設計與生產就是為了出售，而客戶就是推動生產與創(chuàng)新的力量，因此，在開發(fā)產品的每個階段，都要把用戶考慮在其中。
2.1 設備的多樣式
生活中，很多人一天會用三種設備上網。外出時使用手機上網，在室內用電腦上網，而睡前用平板獲取信息。 這三種設備的屏幕各不相同，分辨率從 320 像素到 1920 像素不等。 現(xiàn)代家庭中，數(shù)字電視也開始普遍，也就是說，有一部分人除了用手機、平板和電腦上網之外，還會使用數(shù)字電視，另外還有一部分人用可穿戴設備上網，而同一種設備還有不同的大小型號。 由此可見，現(xiàn)如今的網站比之前的任何時候都更需要能夠在不同的設備上適用，而每一種設備又都是功能與被限制的關系產物。
2.2 使用環(huán)境與網速的關系
用戶在家時，時間比較充裕，最可能使用電腦或平板上網，有些人還會使用數(shù)字電視，此時網絡連接一般為寬帶或 WIFI,網絡流暢，速度較快，不在乎瀏覽網頁時所花的流量多少，也會增加頁面的等待時間；用戶在戶外時，所在的地方有公交車上、開車中、行走中、商場或者等待中，此時的用戶時間都是碎片化的，而且網速較慢，時間匆忙，用戶很容易失去耐心。
3響應式網站的優(yōu)點
3.1 一個站點適應所有屏幕
在國內，很多大型網站，財力比較充足，所以會為 pc 端和移動端各建立一個站點，方便在各個端口實現(xiàn)最好的頁面效果。 然而時代在發(fā)展， 各種的設備的種類越來越多， 屏幕分辨率也各不相同。 隨著Google 眼鏡的推出，Apple Watch 的成功發(fā)布，可穿戴設備離我們越來越近，這也說明，今后會有更多我們聞所未聞的設備接踵而來，并且這些設備將會越來越普及。 面對如此多的設備，我們的網站應該如何去適應各個不同設備的端口？解決這個問題的最好方法是建立一個可以適應各種屏幕的站點，這種站點就是響應式網站，不僅解決了需要建立多個站點的問題，而且在各個站點都能最好地展示頁面效果。
3.2 提升用戶體驗
當你瀏覽網站時，你會發(fā)現(xiàn)很多網站在 pc 端是如此的完美，但是到了移動端卻是慘不忍睹。 例如在國外的 copyblogger 的博客有提到過一個很經典的案例---迪士尼公司的網站，他說在迪士尼網站中有許多給小朋友玩的網頁游戲，但是這些游戲卻只能在 pc 端玩，在移動端是無法打開的。 而響應式網站卻能夠讓你無論在 pc 端還是移動端都能體驗到良好的視覺效果。
4響應式在伯樂相馬網站的應用
4.1 響應式導航的設計方式
響應式導航常見的設計模式有 7 種，分別是：置頂、頁腳錨點、置底、菜單選擇、側滑、開關和徹底隱藏。在伯樂相馬網中，主要采用的是菜單選擇，菜單選擇是將導航收納在一個選擇菜單的控件當中的方法。 減少了導航所占用的屏幕空間。 選擇菜單選擇的原因如下：
在移動設備中，空間資源非常有限，因此移動端的導航不能像 pc端那樣直接顯示，需要將導航整合在一起。 置頂雖是簡單的導航實現(xiàn)方式，但是在移動端會造成不好的視覺效果；對于頁腳錨點和和置底來說，都是將導航放在頁腳，對于一個求職網站來說需要的是快速尋找所需的信息，而這種方法增加了用戶的使用成本；開關的導航方式，是用戶點擊后菜單才滑動展開，但菜單的設置區(qū)域是固定的，用戶需要尋找才能發(fā)現(xiàn)，增加用戶的使用成本；徹底隱藏也同樣增加了用戶成本。
4.2 響應式網頁的布局
基于響應式網頁的布局，有人曾經這樣形容：倒入杯中的水的形狀由裝它的容器形狀決定。 網頁設計也可以把這個概念融入其中，網頁的展示形式取決于展示它的設備屏幕尺寸。頁面常用的布局方式有固定布局、流動布局、彈性布局和混合布局。響應式網站中一般采用后三種，選擇合適的方式才是最好的，并沒有哪一種布局方式是最好的�？梢远喾N方式混合使用，取長補短。通欄、等分結構的適合采用彈性布局方式、 而對于非等分的多欄結構往往需要采用混合布局的實現(xiàn)方式。
4.3 設計模式
設計模式主要有兩種：基于設備和內容優(yōu)先，早先年間很多網頁采用基于設備的模式，因為當時屏幕種類較少，且有標準屏幕之說。如今，標準屏幕已經不復存在。 因此，內容優(yōu)先是一種不錯的選擇。 在伯樂相馬網中采用的是內容優(yōu)先的方式，因為對于一個信息類的網站而言，可讀性和移動性至關重要。
4.3.1 基于設備
通過主流設備的類型及尺寸來確定布局斷點（Break point），設計多套樣式，再分別投射到相應的設備。 不要使用流行的設備尺寸來確定斷點。 該設備的`屏幕（Device Landscape）是不斷在變化的，所以使用流行設備的尺寸作為斷點， 他的實際價值存在的意義可能沒有什么，甚至一年的時間都堅持不到。 Web 本質是流動的，因此我們的工作是在任何屏幕上創(chuàng)建外觀、功能等。
4.3.2 內容優(yōu)先
根據內容的可讀性、易讀性作為確定斷點（Break point）的標準，即在對內容進行布局設計的時候，可以無視設備，由內容決定何時需要采用不同的呈現(xiàn)方式。 這種方式和未來友好型是相契合。
4.4 響應式網頁的字體
字體對于一個網站來說，起著至關重要的作用，不單是畫風影響風格，字體也會影響風格，響應式網站的字體尺寸會隨著屏幕尺寸而不斷調節(jié)，展現(xiàn)最適合人類視覺的界面。
4.4.1 字體大小
從 2006 年開始有人開始推薦了“透視化比例”字體尺寸。 正文字體尺寸可以通過透視竅門來評估，而行高需要一些調整。 隨著更遠的閱讀距離和更多的像素污點，給屏幕上的文字比印刷的更大一點的行高是比較好的方式。140%是一個好的參照。 調整字體尺寸不是一個關于興趣的問題，是一個閱讀距離的問題。 相當一部分的網站會選擇小字體，想用這種方法讓人覺得此網站做工很精細，大部分用戶也會按照這個字體大小去閱讀，到后面也會習慣了。
4.4.2 字體邊界
字體跟邊界的距離很有講究，在響應式網站中，不同屏幕尺寸中的邊界也是不一樣的，符合人類的觀看視覺，才會讓讀者覺得舒服，如若處理不當，就會讓用戶覺得太窄，空間不夠用，太擠或太寬，存在感小，視覺上出現(xiàn)不適，就不想再看下去了。 所以每次變換屏幕的時候，邊界尺寸也需要調整。
5總結
隨著計算機軟硬件技術的飛速發(fā)展， 網站的實現(xiàn)技術也日漸成熟，各種網站的種類和數(shù)量也是數(shù)不勝數(shù)，網絡知識也越來越普及，各地網民也在不斷增多。 想要在比比皆是的網站中脫穎而出，前提是要有良好的用戶體驗， 而響應式網站設計正是以用戶為中心的設計，往往能給用戶良好的體驗。 伴隨著社會的發(fā)展，人類的欣賞水平和體驗感覺也會變得越來越高，除了頁面要美觀之外，打開網頁的速度的快慢也決定了用戶是否會停留在網頁，所以在響應式的基礎上還要不斷努力的提升網頁速度。響應式體現(xiàn)的是一種高度適應性的設計思維模式。在響應式設計探究的道路上，響應式的本身不是唯一的目的，任意設備對頁面內容進行完美規(guī)劃的設計策略及工作流程才是我們更遠大的追求。
【參考文獻】
[1][美]Tim Cadlec,著。候 儒鴻，譯。響 應式 Web 設計實 踐[M].北 京：人 民郵 電出版社，2013（6）：1-20.
[2][德]Smashing Magazine,寒武紀，譯。眾妙之 門---國 際頂 級 Web 設 計師 成功法則[M].北京：人民郵電出版社，2013（1）：5-11,152-153.
【伯樂相馬網站中響應式網頁的運用論文】相關文章：
寫作教學中解題思路的暴露式教法論文03-31
翻譯教學中的答辯式教學模式探析論文12-02
網頁設計論文開題報告12-28
合作寫作在應用文教學中的策略運用論文09-18
“化題為象”在閱讀與寫作教學中的運用論文09-04
微博式寫作教學策略設想及運用SWOT模式分析的論文06-15
情景教學在初中語文寫作教學中運用的論文07-27
網站設計論文開題報告12-28
激勵策略在企業(yè)管理中的運用09-18