什么是響應(yīng)式布局設(shè)計(jì)？

時(shí)間：2024-02-14 05:20:02 | 來源：網(wǎng)站運(yùn)營

時(shí)間：2024-02-14 05:20:02 來源：網(wǎng)站運(yùn)營

什么是響應(yīng)式布局設(shè)計(jì)？：響應(yīng)式布局設(shè)計(jì)，是指將桌面設(shè)備上的網(wǎng)頁內(nèi)容在移動設(shè)備上進(jìn)行優(yōu)化排版，使用戶能夠在移動設(shè)備上更方便地閱讀并操作。其實(shí)，如果經(jīng)常使用不同的設(shè)備瀏覽互聯(lián)網(wǎng)網(wǎng)頁，就會比較容易體會響應(yīng)式布局設(shè)計(jì)在移動設(shè)備上的應(yīng)用。為使題主能夠更好的理解響應(yīng)式布局設(shè)計(jì)，康石石從其設(shè)計(jì)理念入手作進(jìn)一步解釋：

響應(yīng)式web設(shè)計(jì)（Responsive web design）

在全面進(jìn)入互聯(lián)網(wǎng)時(shí)代后，隨著各種移動設(shè)備的普及，移動互聯(lián)網(wǎng)更加受到大眾的青睞。由于移動互聯(lián)網(wǎng)的使用量遠(yuǎn)遠(yuǎn)超出了傳統(tǒng)互聯(lián)網(wǎng)的使用量，移動設(shè)備也正在逐漸超越桌面設(shè)備。因?yàn)橛脩粼谝苿釉O(shè)備上的使用習(xí)慣不同，UX設(shè)計(jì)師無法將桌面設(shè)備上的網(wǎng)頁排版原封不動地復(fù)制到移動設(shè)備上，這會使用戶在網(wǎng)頁的操作和閱讀上十分不方便。

因此，設(shè)計(jì)師試圖將移動設(shè)備和桌面設(shè)備的網(wǎng)頁分開來設(shè)計(jì)，然而因此面對的問題是：市場上移動設(shè)備屏幕的尺寸都是完全不一樣的。比如iPhone的移動設(shè)備已經(jīng)更新過很多次屏幕尺寸；不同品牌之間設(shè)備屏幕尺寸也無法把控，設(shè)計(jì)師不能為每一個(gè)不同的屏幕尺寸去設(shè)計(jì)適合它們尺寸的網(wǎng)頁。

圖片來源：https://timgsa.com/timg?image&quality…

這種情況下，Ethan Marcotte在2010年提出了響應(yīng)式web設(shè)計(jì)（Responsive web design）這一概念，其設(shè)計(jì)目標(biāo)是：自行識別設(shè)備屏幕尺寸并做出相應(yīng)調(diào)整的網(wǎng)頁設(shè)計(jì)，從而提高網(wǎng)頁在移動端的用戶體驗(yàn)。同時(shí)，Ethan Marcotte也模擬建立了一個(gè)簡單的響應(yīng)式web的示范網(wǎng)站，題主可以點(diǎn)進(jìn)鏈接體驗(yàn)一下。

網(wǎng)站鏈接：https://alistapart.com/d/responsive-web-design/ex/ex-site-flexible.html

從響應(yīng)式web設(shè)計(jì)的模擬示范網(wǎng)站可以看出，根據(jù)顯示屏的大小變化、頁面的排版布局都相應(yīng)地自動作出了調(diào)整，整個(gè)頁面里的所有元素都是靈活的，頁面的排版不再受顯示屏大小的限制。因此，響應(yīng)式web設(shè)計(jì)的出現(xiàn)，其可用性被大大提高，無論是在哪個(gè)用戶端，用戶都可以按照自己的使用習(xí)慣瀏覽頁面，減少使用時(shí)發(fā)生錯(cuò)誤的幾率，從而獲得更好的用戶體驗(yàn)。

圖片來源：http://www.e-goodnews.com.tw/www/images/mod2/20150225135718vj9y.jpg

另外，除了響應(yīng)式web設(shè)計(jì)，為迎合其他移動用戶端，自適應(yīng)web設(shè)計(jì)（Adaptive Web Design）的應(yīng)用也非常廣泛。為了方便題主更全面地理解響應(yīng)式web設(shè)計(jì)，我認(rèn)為有必要將它與自適應(yīng)web設(shè)計(jì)做一個(gè)對比。因?yàn)槿绻阉髯赃m應(yīng)web設(shè)計(jì)，很可能將出現(xiàn)下面的文字：

響應(yīng)式網(wǎng)頁設(shè)計(jì)（Responsive web design，通?？s寫為RWD），或稱自適應(yīng)網(wǎng)頁設(shè)計(jì)、回應(yīng)式網(wǎng)頁設(shè)計(jì)、對應(yīng)式網(wǎng)頁設(shè)計(jì)。

實(shí)際上，響應(yīng)式web設(shè)計(jì)和自適應(yīng)web設(shè)計(jì)是有一定區(qū)別的，其中最根本的差別是：自適應(yīng)web設(shè)計(jì)是網(wǎng)頁內(nèi)容根據(jù)設(shè)備的不同而進(jìn)行“適應(yīng)”，響應(yīng)式web設(shè)計(jì)則是網(wǎng)頁的布局針對屏幕大小的尺寸而進(jìn)行響應(yīng)。響應(yīng)式web在網(wǎng)頁上并不會自動為用戶隱藏圖片或簡化菜單，而是將原本網(wǎng)頁上所有的內(nèi)容原封不動地進(jìn)行展示，但是手機(jī)端上的排版則會自動進(jìn)行優(yōu)化從而方便用戶閱讀、瀏覽以及使用該網(wǎng)頁。




以上望有幫助，歡迎交流

———————————————————

歡迎關(guān)注我的個(gè)人官方微信（kang-shishi）

如有藝術(shù)留學(xué)、院校、專業(yè)、作品集方面的問題，可私信康石石咨詢