響應式網站設計:概念及使用指南
日期 : 2022-01-11 18:59:31
眼下,幾乎所有的新客戶都希望Web設計師和開發者給自己的網站設計專門的移動版本。最好是黑莓、iPhone、iPad、. 上 網本還有Kindle各自都有一款,另外屏幕分辨率還都得兼容。接下來的幾年里,我們可能還會為數不清的新移動終端開發設計,而這種瘋狂何時才是盡頭呢?甭想了,它根本沒有盡頭。在網站設計與開發領域,我們會越來越跟不上新分辨率和新設備更新換代的步伐。對于許多網站而言,為每個分辨率和新設備開發一個網站版本幾乎是不可能的,或者說是不切實際的。我們可能會顧此失彼,在保證某個設備的用戶群的同時,失去了使用其他設備的用戶。有別的更好的辦法么? 響應式網站設計的理念是網站頁面的設計與開發應該根據用戶的行為和基于用戶的屏幕大小、系統平臺和屏幕方向的使用環境作出相應的回應。具體操作則包括彈性網格、布局、圖片和CSS媒體查詢的靈活使用,等等。用戶從筆記本切換到iPad時,網頁應該自動調整應對所用設備的分辨率、圖像大小和腳本功能。換句話說,網站應該有這樣的技術能力,隨時隨地回應用戶的需要。這樣我們就可以不用為層出不窮的新設備做專|門的設計與開發了。響應式網站設計的概念關于這個設計理念,EthanMarcotte曾在A List Apart.上發表過一篇文章- -Responsive Web Design。它來源于響應式建筑設計理論,即某個空間隨著內部人群的流動和數量而自動調整。最近出現了一門新興的學科,即“響應式建筑”,該學科開始探索物理空間該如何對空間里來回的人做出反應。結合嵌入式機器人和抗拉材料,建筑師們正嘗試建造一種藝術化的墻體結構,它可以根據周圍人群的情況進行彎曲、伸縮和擴展。在人群進入室內的時候,運動傳感器可以配合氣候控制系統,調整室內溫度和燈光氛圍。已經有公司生產出了“智能玻璃”,當室內人數達到一定密度值時,玻璃會自動變成不透明,增強隱私保護。將此思路延伸到網站設計中來,我們就得到-個相似但又是全新的概念。我們為什么要為每個用戶群打造個性化的設計?畢竟,建筑師們不可能根據每次來訪人數不同而重新設計建造出新建筑來。和響應式建筑同理,網站設計也要做到自動調整,而不是為每個新用戶群創造出難以計數的個性化方案。顯然,我們不能依靠運動傳感器或機器人,就像建造大樓那樣來設計網站,響應式網站設計看重的是抽象思維。不過,有些概念已在實踐中操練過,比如液態布局、能夠輕松(或自動)重新格式化頁面的媒體查詢和腳本。但是響應式網站設計不僅是關于設計可調屏幕分辨率和可自動縮放的圖像,它更是一種全新的設計思維模式。下面我們來談談操作過程中的這些功能特征以及其他相關概念。
調整屏幕分辨率
不同的設備,其屏幕分辨率、清晰度以及屏幕方向都各自不同。每天都有各種新設備誕生,隨之而來的是不同的屏幕尺寸,而且每個設備或許都能兼容各種尺寸、功能甚至是顏色。有的是橫屏,有的是豎屏,甚至還有正方形屏幕。而隨著iPhone、iPad以及 高級智能手機的流行,許多新設備都可以隨意進行橫屏豎屏切換。怎樣的設計才能滿足上述所有情況呢? 除了橫屏豎屏(同時確保用戶在頁面加載過程中就能切換自如)的兼容問題,我們還要考慮到千變萬化的屏幕尺寸。當然,我們可以給這些尺寸歸類,然后每一-類對應一種設計方案,并盡力確保每個設計的靈活性。但即便如此,任務也還是會繁重不堪,何況誰知道五年之后其使用數量會是怎樣?而且許多用戶甚至不會去最大化瀏覽器窗口,光這一點就讓屏幕尺寸的變數更大了。
部分解決方案:一切彈性化
幾年前,彈性布局(flexible layout)對網站而言幾乎是一種奢侈品,當時唯一的彈性設計只是在布局安排和字體設計方面。圖片動不動就破壞頁面布局,而且即使是那些彈性結構元素,在極端情況下,也會破壞布局一-它們可以有幾百像素的變化,可一旦從電腦大屏幕切換到上網本時常常就無法調整。
現在,我們可以做到更大的彈性化。圖片尺寸可自動調整,而且我們有應對方案可以保證頁面布局不會遭到破壞(盡管在此過程中它們可能會被壓縮且難以辨認) 。雖然這不是一勞永逸的辦法,但卻給了我們更多的選擇。設備橫屏豎屏可以瞬間切換,也能滿足較大的電腦屏幕切換到iPad。
在前文提到的Ethan Marcotte的文章中,他通過網站設計實例展示了這個更靈活的頁面布局。
上一篇:適合網頁與iPhone開發的Photoshop應用
下一篇:網站設計中的說服力