天天看點

響應式設計“讓人們忘記裝置的尺寸“

響應式設計“讓人們忘記裝置的尺寸“

在網際網路大潮的背景下, PC端加速向移動端遷移:

2012年 12月底,我國網民規模達到 5.64億,網際網路普及率為 42.1%,其中手機使用者占網民總數的 74.5%。2014年,智能手機全球出貨量達 12.86億部,同比增長 28.0%。截至 2015年 1月,全球接入網際網路的移動裝置總數超過 70億台,幾乎平均全球人手一台。

作為最主要的移動終端裝置,智能手機仍然保持高速增長,皮尤研究中心(Pew Research Center)近日對調研公司 comScore今年 1月份的流量資料進行了分析,評出了美國最受歡迎的 50大新聞網站。

這些資料顯示,在這 50大新聞源中,大部分網站的移動流量已超越 PC流量。

随着越來越多的智能移動裝置加入到網際網路中來,移動網際網路不再是獨立的小網絡了,而是成為 Internet的重要組成部分。各種移動裝置的發展導緻每種移動裝置都希望擁有适合自身的網頁。但是 Web設計和開發幾乎無法追趕上裝置與分辨率的更新,但是如果不能滿足各種裝置下使用者的使用,就會流失掉使用者群,這可謂是一個巨大的挑戰。

響應式設計“讓人們忘記裝置的尺寸“

2010年 5月,伊桑 •馬科特( Ethan Marcotte)在 A List Apart寫了一篇開創性的文章,題為 Responsive Web Design,文中援引了響應式建築設計的概念— —響應式架構( responsive architecture),并提出:實體空間應該可以根據存在于其中的人的情況進行響應。結合嵌入式機器人技術以及可拉伸材料的應用,建築師們正在嘗試建造一種可以根據周圍人群的情況進行彎曲、伸縮和擴充的牆體結構,還可以使用運動傳感器配合氣候控制系統,調整室内的溫度及環境光。已經有公司在生産“智能玻璃”:當室内人數達到一定門檻值時,這種玻璃可以自動變為不透明,確定隐私。

響應式設計“讓人們忘記裝置的尺寸“
響應式設計“讓人們忘記裝置的尺寸“

如果将這個思路延伸到 Web設計領域,我們就得到了一個全新的概念——響應式 Web設計。

我們何必要為每個裝置各自打造一套設計和開發方案?和響應式建築相似, Web設計同樣應該做到根據不同裝置環境自動響應及調整。馬科特利用三種已有的工具:流動布局、媒體查詢和彈性圖檔建立了一個在不同分辨率螢幕下都能漂亮展示的網站。

響應式設計的核心正是使用百分比布局建立流動的彈性界面,使用媒體查詢來限制元素的變動範圍。響應式 Web設計的理念是:頁面的設計與開發應根據使用者行為以及裝置環境(系統平台、螢幕尺寸、螢幕定向等)進行相應的響應和調整。無論使用者正在使用筆記本還是 iPad,頁面都應該能夠自動切換分辨率、圖檔尺寸及相關腳本的功能等,以适應不同裝置。換句話說,頁面應該有能力自動響應使用者的裝置環境,響應式網頁設計就是一個網站能夠相容多個終端,而不是為每個終端做一個特定的版本。這樣,我們就不必為不斷到來的新裝置做專門的版本設計和開發了。我們可以将不同聯網裝置上衆多的體驗,當作是同一網站體驗的不同側面來對待,而不要為每種裝置進行單獨剪裁而使得設計彼此斷開,這才是我們前進的方向。

響應式設計“讓人們忘記裝置的尺寸“

随着智能終端的普及,響應式網頁設計被許多網站廣泛使用,而且其優勢和趨勢均已經被普遍認可。

  • 開發、營運成本低:相同的頁面針對分辨率的不同、裝置環境的不同進行了一些不同的響應式設計,是以在開發維護和營運上,相對同時開發多個版本的成本會降低。
  • 相容性好:移動裝置的尺寸參差不齊,版本定制通常隻适用于固定規格的裝置,如果新的裝置分辨率變化較大,通常不能相容,若要開發新的版本,則需要時間,但是響應式設計可以提前預防這個問題。
  • 友善改動:響應式設計是針對頁面的,可以隻對必要的頁面進行改動,其他頁面不受影響。
響應式設計“讓人們忘記裝置的尺寸“

在 Matthew Carver的著作 《The Responsive Web》一書中,作者以一種易于接受的方式,為讀者介紹了現代化的 Web設計,以及響應式設計的重要性。

本書共分為 3個部分。

第 1部分簡明扼要地介紹了響應式設計是什麼、它為什麼會出現,以及現代化 Web浏覽器中的哪些特性促成了響應式 Web設計的出現。這部分内容也談到了“移動優先”這一概念,使用這種概念進行網站設計時,首先按照某個移動裝置的斷點進行設計,随後再轉而設計它的桌面版本。

第 2部分開始介紹如何設計響應式 Web。Carver首先講解了一些如何為客戶展示設計思想的技巧,而不是直接跳到代碼的編寫部分。他以導航的設計作為入口,介紹了設計模式的使用,以及如何建立響應式頁面的思想。接下來的部分涵蓋了如何進行實際的響應式設計的某些基本原理,以及用以展現資訊的某些現代技術,例如 Web排版。

第3部分介紹了一些進階技術,對于因各種浏覽器的不同行為所造成的問題提供了有效的解決方案。在本書的結尾部分,作者對于設計的測試,以及如何進行性能優化方面提供了一些實際建議。

響應式設計在 2012年被提的比較多,但是響應式設計仍然在不斷變化,不斷創新,各種 Web的響應式設計也獲得了越來越多的關注。比如,新的裝置不斷被創造出來(iPad Mini、iPad Pro),另外 iOS 9新增的 Split View也讓頁面的展示尺寸有了更多的可能

性,這讓以前的設計想法土崩瓦解。“讓人們忘記裝置尺寸”的理念将更快地驅動響應式設計,響應式設計歸根結底不是一種技術,而是一種設計思維方式,即刻起,開始擁抱響應式 Web的設計開發吧。