經常有客戶會問響應式網站和自適應網站會有什麼樣的區別?今天就跟大家聊一聊先我們先了解一下什麼是響應式佈局和自適應佈局。
響應式佈局:
響應式佈局是 Ethan Marcotte 在 2010 年 5 月份提出的一個概念,簡而言之,就是一個網站能夠相容多個終端——而不是為每個終端做一個特定的版本。這個概念是為解決移動網際網路瀏覽而誕生的。
響應式佈局可以為不同終端的多使用者提供更加舒適的介面和更好的多使用者體驗,而且隨著目前大螢幕移動裝置的普及,用大勢所趨來形容也不為過。隨著越來越多的設計師採用這個技術,我們不僅
看到很多的創新,還看到了一些成形的模式。
自適應佈局:
自適應網頁設計(Responsive Web Design)指能使網頁自適應顯示在不同大小終端裝置上新網頁設計方式及技術。
隨著智慧手機的普及,越來越多的人使用手機上網。
移動裝置正超過桌面裝置,成為訪問網際網路的常見終端。於是,網頁設計師不得不面對一個難題:如何才能在不同大小的裝置上呈現同樣的網頁?
手機的螢幕比較小,寬度通常在 600 畫素以下;PC 的螢幕寬度,一般都在 1000 畫素以上(目前主流寬度是 1366×768),有的還達到了 2000 畫素。同樣的內容,要在大小迥異的螢幕上,都呈現出
滿意的效果,並不是一件容易的事。
很多網站的解決方法,是為不同的裝置提供不同的網頁,比如專門提供一個 mobile 版本,或者 iPhone / iPad 版本。這樣做固然保證了效果,但是比較麻煩,同時要維護好幾個版本,而且如果一個網站有多個 portal(入口),會大大增加架構設計的複雜度。
於是,很早就有人設想,能不能” 一次設計,普遍適用”,讓同一張網頁自動適應不同大小的螢幕,根據螢幕寬度,自動調整佈局(layout)。
那製作網站的時候 “什麼樣的網站/專案適合使用自適應佈局(固定斷點)?什麼樣的網站適合響應式佈局?
理論上來說,響應式網站建設在任何情況下都比自適應佈局好一些,但在某些情況下自適應佈局更切實際。
自適應佈局可以讓您的設計更加可控,因為您只需要考慮了了幾種狀態就萬事大吉了。但在響應式佈局中您可能需要面對非常多狀態——是的,大部分狀態之間的區別很小,但它們又的確是不同的——這樣一來就很難確切搞清您的設計會是什麼樣。同時這也帶來了測試上的難題,您很難有絕對的把握預測到它會怎樣。換個角度說,這也是響應式佈局的魅力所在。透過允許表面上的不確定因素存在,您可以獲得更高層次上的確定。雖然您無法在精確到畫素級別準確預知您的設計如何在 943px×684px 視覺區域匯中展示,但您能確定的是它們一定能展示的很好——不管是表層特徵還是佈局結構都有條不紊。
自適應佈局有它自己的優勢,因為它們實施起來代價更低,測試更容易,這往往讓他們成為更切實際的解決方案。自適應網站建設可以看做響應式佈局的 “窮兄弟”,在資源有限的情況下就可以讓
它出馬。特別是改進現有網站的時候尤其奏效,因為全部重寫程式碼在這時並不可行。這種案例中,採用自適應佈局是一個不錯的出發點。
其實無論是哪種設計理念都是各有優缺的,還是要從個人實際去求出發去選擇!