伯樂(lè )相馬網(wǎng)站中響應式網(wǎng)頁(yè)的運用發(fā)布者：本站     時(shí)間：2020-05-02 14:05:44

1響應式設計簡(jiǎn)介

1.1 響應式的起源

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

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

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

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

2用戶(hù)行為分析

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

2.1 設備的多樣式

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

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

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

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

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

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

3.2 提升用戶(hù)體驗

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

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

4.1 響應式導航的設計方式

響應式導航常見(jiàn)的設計模式有 7 種，分別是：置頂、頁(yè)腳錨點(diǎn)、置底、菜單選擇、側滑、開(kāi)關(guān)和徹底隱藏。在伯樂(lè )相馬網(wǎng)中，主要采用的是菜單選擇，菜單選擇是將導航收納在一個(gè)選擇菜單的控件當中的方法。 減少了導航所占用的屏幕空間。 選擇菜單選擇的原因如下：

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

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

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

4.3 設計模式

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

4.3.1 基于設備

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

4.3.2 內容優(yōu)先

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

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

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

4.4.1 字體大小

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

4.4.2 字體邊界

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