來源:原創時間:2018-08-07浏覽:382
經過十多(duō)年(nián)的快速發展,中國的互聯網如今已經日趨成熟。随著(zhe)3G、4G的發展和移動通(tōng)信及WEB2.0技(jì)術的提升以及近年(nián)來各種移動智能(néng)設備的興起,移動互聯網也即将會步入高(gāo)速發展時期,成爲一(yī)種大勢所趨。這一(yī)來就(jiù)使中國互聯網的發展變得更加豐富、多(duō)元化了。根據DailyTech的統計,到(dào)2015年(nián),移動互聯網的用戶數量将會超過桌面用戶。對于接入移動互聯網的用戶除了智能(néng)手機外,使用平闆電腦甚至是電視機進行上(shàng)網的用戶也在不斷增加。在現今這種形勢下(xià),我們怎樣讓設計的網站(zhàn)能(néng)夠盡量兼容更多(duō)的移動設備來确保用戶的良好體驗,這将成爲我們需要面對的一(yī)大挑戰。在這種情形下(xià)我們關心的問題不再隻是網頁的樣式能(néng)否在不同浏覽器(qì)中保持兼容,而需要我們關注更多(duō)的是:設計出來的頁面如何以适應不同的設備,包括不同的系統平台,平台屏幕尺寸,不同的環境等。
爲了可以兼容更多(duō)的設備,近幾年(nián)提出了“響應式設計”。那麽就(jiù)響應式設計進行簡單的分析:
一(yī)、響應式設計的理念
響應式Web設計(Responsive Web design)的理念是整個web開發的相(xiàng)關頁面都能(néng)夠與不同的移動設備兼容顯示,主要指的是入口頁面可以自(zì)動判斷不同設備不同環境(操作系統屏幕分辨率、屏幕尺寸、屏幕定向等)用戶行爲(改變窗(chuāng)口大小(xiǎo)等)并根據這些不同的需求自(zì)行對頁面進行響應式調整來兼容各種設備的正常顯示與浏覽。涉及這種設計的技(jì)術具體方式由多(duō)方面組成,包括有CSS media query查詢、流體布局和彈性網格、圖片等。不管訪問web頁面的用戶是何種設備終端包括(PC機、平闆電腦,或者手機)在者不管對頁面進行全屏浏覽還是非全屏浏覽的情況,又(yòu)或者用戶對屏幕的擺放(fàng)是橫向還是豎向,頁面都應該能(néng)夠識别當前訪問用戶的終端環境并且自(zì)動切換分辨率、圖片尺寸及相(xiàng)關腳本功能(néng)等,以兼容不同設備。如圖1.1所示:
二、響應式設計的優勢
1.開發、維護、運營成本優勢
頁面隻有一(yī)個,隻是針對不同的分辨率、不同的設備環境進行了一(yī)些不同的設計,所以在開發、維護和運營上(shàng),相(xiàng)對多(duō)個版本,能(néng)節約成本。
2.兼容性優勢
移動設備新的尺寸層出不窮,定制的版本通(tōng)常隻适用于某些規格的設備,如果新的設備分辨率變化較大,則往往不能(néng)兼容,而開發新的版本需要時間,這段時間内的訪問就(jiù)是個問題,但是響應式Web設計可以提前預防這個問題。
3.操作靈活
響應式設計是針對頁面的,可以隻對必要的頁面進行改動,其他頁面不受影響。
三、響應式設計原則
1、移動優先原則
随著(zhe)移動互聯網的大舉發展,移動設備的不斷增加,移動終端的持有人數已經逐漸在趕超PC機,考慮到(dào)當前的發展形勢,優先考慮移動設計無可厚非。有限所謂移動優先原則是指,整個頁面設計的流程優先考慮到(dào)移動設備的兼容顯示,再次前提下(xià)在考慮PC機的兼容顯示。
2、觸控優先原則
對觸控優先原則的考慮也是基于移動互聯網的發展迅速的前提下(xià)提出的。在移動設備終端上(shàng)目前觸控是我們主要的一(yī)種人機交互方式。基于這點在設計頁面上(shàng)就(jiù)應該優先考慮設計出易于手指觸摸的按鈕等交互元素其次才是考慮同樣易于鼠标點擊的按鈕等其他元素。所以爲了能(néng)夠使設計出的界面能(néng)夠兼容更多(duō)的平台系統、設備環境等條件(jiàn),網頁設計師應該先從觸控優先原則入手設計頁面,之後在此基礎上(shàng)對頁面進行适當的調整以在不影響移動設備正常顯示下(xià),達到(dào)對PC端的兼容顯示。即使網頁上(shàng)的相(xiàng)關交互元素既适合手指觸摸又(yòu)适合鼠标點擊。
3、彈性化原則
在彈性化布局的基礎上(shàng)引入CSS媒介查詢的功能(néng)使得web響應式的設計和開發思路(lù)讓頁面真正的富有彈性。頁面布局再不會被破壞,圖片的尺寸可以被自(zì)動調整,雖然這不是最完美的解決方案,但它給了我們一(yī)種新的選擇。這樣無論用戶切換設備的屏幕定向方式,還是從PC機屏幕轉到(dào)iPad或者手機上(shàng)浏覽,頁面都能(néng)夠作者響應與調整。
4、宏觀性原則
在響應式 Web 開發過程中,設計人員在項目的每一(yī)個階段都要在多(duō)種浏覽器(qì)和不同尺寸屏幕中進行測試,以盡早發現問題。