你是否在決定網(wǎng)站應(yīng)以響應(yīng)式設(shè)計(jì)或自適應(yīng)設(shè)計(jì)之間做出選擇時(shí)遇到困難？沒關(guān)系，我們了解你的問題，并將在此篇文章中引導(dǎo)你了解自適應(yīng)網(wǎng)站和響應(yīng)式網(wǎng)站的基礎(chǔ)知識(shí)。

文章綱要：

1. 什么是自適應(yīng)網(wǎng)站？

2. 自適應(yīng)網(wǎng)站的好處與壞處

3. 自適應(yīng)網(wǎng)站范例

4. 什么是響應(yīng)式網(wǎng)站？

5. 響應(yīng)式網(wǎng)站的好處與壞處

6. 響應(yīng)式網(wǎng)站范例

7. 比較自適應(yīng)網(wǎng)站與響應(yīng)式網(wǎng)站

1. 什么是自適應(yīng)網(wǎng)站？

讓我們從自適應(yīng)網(wǎng)站設(shè)計(jì)開始。自適應(yīng)網(wǎng)站設(shè)計(jì)一詞是在網(wǎng)頁設(shè)計(jì)師 Aaron Gustafson 所著的 《Adaptive Web Design: Crafting Rich Experiences With Progressive Enhancement》 一書中引入的詞匯。

自適應(yīng)網(wǎng)站具有多種固定布局大小，當(dāng)網(wǎng)站確定任何設(shè)備上的可用空間時(shí)，它會(huì)為設(shè)備螢?zāi)贿x擇最合適的布局。因此，調(diào)整瀏覽器大小對(duì)網(wǎng)站的自適應(yīng)布局沒有影響。例如，當(dāng)你在行動(dòng)設(shè)備上打開瀏覽器時(shí)，網(wǎng)站將為該行動(dòng)設(shè)備螢?zāi)贿x擇最佳布局。

一些老牌企業(yè)（如 Amazon 和 Apple ）都已將自適應(yīng)布局納入其網(wǎng)站設(shè)計(jì)中，并針對(duì)不同的行動(dòng)設(shè)備進(jìn)行網(wǎng)站優(yōu)化效果。記住，自適應(yīng)網(wǎng)站需要網(wǎng)頁設(shè)計(jì)師為不同的設(shè)備螢?zāi)辉O(shè)計(jì)不同的布局，而不是讓同一個(gè)設(shè)計(jì)布局在不同的設(shè)備上自己重新排列。

自適應(yīng)網(wǎng)站有六種最常見的螢?zāi)慌虐嬖O(shè)計(jì)：

• 320 像素
• 480 像素
• 760 像素
• 960 像素
• 1200 像素
• 1600 像素。

2. 自適應(yīng)網(wǎng)站的好處與壞處

• 好處

加載速度更快，網(wǎng)頁設(shè)計(jì)師可以控制每個(gè)布局，因?yàn)樗麄兡軌驗(yàn)槊總€(gè)螢?zāi)怀叽缃⑿碌淖罴言O(shè)計(jì)，網(wǎng)頁設(shè)計(jì)人員也可以針對(duì)不同的螢?zāi)怀叽缣砑踊驕p少內(nèi)容。

• 缺點(diǎn)

自適應(yīng)網(wǎng)站上的多個(gè)布局可能導(dǎo)致內(nèi)容重復(fù)，從而影響網(wǎng)站在搜索引擎的排名，更改網(wǎng)站排版還需要設(shè)計(jì)師投入大量的時(shí)間和精力。

3. 自適應(yīng)網(wǎng)站范例

• IKEA

IKEA

IKEA的行動(dòng)網(wǎng)站采用針對(duì)行動(dòng)設(shè)備螢?zāi)粌?yōu)化的自適應(yīng)設(shè)計(jì)。它簡化了選單和瀏覽，還突出了購物清單選項(xiàng)（在網(wǎng)站的桌面版本上不可見）。此設(shè)計(jì)面向在實(shí)體店購物時(shí)使用手機(jī)的客戶。

• Adidas

Adidas

Adidas 的自適應(yīng)網(wǎng)站利用自適應(yīng)布局來模仿桌面網(wǎng)站，為行動(dòng)設(shè)備用戶提供更流暢的體驗(yàn)。它為客戶提供更輕的圖像和更簡單的線上購物流程。

• Turkish Airlines

Turkish Airlines

Turkish Airlines 允許他們的網(wǎng)站用戶在三種版本的自適應(yīng)布局之間進(jìn)行選擇：桌面網(wǎng)站、行動(dòng)網(wǎng)站和應(yīng)用程式。該品牌的行動(dòng)網(wǎng)站具有時(shí)尚的外觀且更簡單的網(wǎng)站功能，以適應(yīng)較小的螢?zāi)粚挾?。其網(wǎng)頁設(shè)計(jì)師著重顯示網(wǎng)站的搜索功能（例如線上辦理登機(jī)手續(xù)和航班狀態(tài)），以及為希望預(yù)訂航班的移動(dòng)用戶提供的航班預(yù)訂功能。

4. 什么是響應(yīng)式網(wǎng)站？

那什么是響應(yīng)式網(wǎng)占設(shè)計(jì)呢？這個(gè)術(shù)語是在 2011 年由網(wǎng)頁設(shè)計(jì)師和開發(fā)人員 Ethan Marcotte 編寫的《 Responsive Web Design 》一書中引入的。響應(yīng)式網(wǎng)站的設(shè)計(jì)方式是透過調(diào)整設(shè)計(jì)元素的位置來響應(yīng)瀏覽器寬度的變化。

具有響應(yīng)式布局的網(wǎng)站上的內(nèi)容將自動(dòng)根據(jù)可用的瀏覽器空間展示給用戶。與自適應(yīng)網(wǎng)站相反，如果你在桌面上打開響應(yīng)式網(wǎng)站，然后更改瀏覽器視窗大小，內(nèi)容大小也將有所改變以針對(duì)瀏覽器視窗自行安排最佳呈現(xiàn)效果。

5. 響應(yīng)式網(wǎng)站的好處與壞處

好處：

響應(yīng)式網(wǎng)站僅使用單個(gè) URL 來適應(yīng)每個(gè)頁面的任何螢?zāi)怀叽?，其設(shè)計(jì)過程也只需要更少的時(shí)間。響應(yīng)式設(shè)計(jì)允許網(wǎng)站在所有設(shè)備上呈現(xiàn)一致性，這是獲得良好用戶體驗(yàn)的重要因素，這也使其更適合搜索引擎優(yōu)化 (SEO)。

缺點(diǎn)：

響應(yīng)式網(wǎng)站的加載速度較慢。在網(wǎng)站上線之前，大量的調(diào)整和審核對(duì)于開發(fā)過程至關(guān)重要，因?yàn)轫憫?yīng)式網(wǎng)站需要能夠自我更改以適應(yīng)任何螢?zāi)弧?由于設(shè)計(jì)元素四處移動(dòng)，響應(yīng)式網(wǎng)站上的圖像可能會(huì)變形。

6. 響應(yīng)式網(wǎng)站范例

• Real Meal Grill

電腦版：

行動(dòng)設(shè)備版：

• Dr Chai Tea

電腦版：

行動(dòng)設(shè)備版：

• Grow Food Where People Live

電腦版：

行動(dòng)設(shè)備版：

7. 比較自適應(yīng)網(wǎng)站與響應(yīng)式網(wǎng)站

• 開發(fā)困難度

自適應(yīng)網(wǎng)站更易于開發(fā)，但需要設(shè)計(jì)師花費(fèi)更多時(shí)間來打造不同的幾版網(wǎng)站設(shè)計(jì)。記??！為一個(gè)網(wǎng)站建立多個(gè)布局比建立適合任何螢?zāi)怀叽绲膯我徊季忠菀椎枚唷?/p>

• 靈活性

自適應(yīng)網(wǎng)站的一個(gè)缺點(diǎn)是，它只能在適配其布局的螢?zāi)簧线\(yùn)行。因此，如果用戶使用新發(fā)布的新螢?zāi)粚挾仍O(shè)備，你建立的自適應(yīng)網(wǎng)站布局可能就無法正確呈現(xiàn)，這意味著你將不得不編輯它們或建立一個(gè)新的。

• 加載速度

自適應(yīng)網(wǎng)站需要在用戶打開網(wǎng)站時(shí)加載開發(fā)的每個(gè)布局，而響應(yīng)式網(wǎng)站只需要加載適合所有螢?zāi)粚挾鹊膯蝹€(gè)布局。由于所有額外的布局和資源，自適應(yīng)網(wǎng)站將比響應(yīng)式網(wǎng)站花費(fèi)更多的時(shí)間來加載。然而，情況并非總是如此，你也需要考慮網(wǎng)站內(nèi)容與大小。

透過 建設(shè)一個(gè)響應(yīng)式網(wǎng)站

你是否恰好在尋找一個(gè)網(wǎng)站建設(shè)平臺(tái)來幫助你建立一個(gè)全新的響應(yīng)式網(wǎng)站？如果是，那我建議你考慮 ，該專業(yè)平臺(tái)具有行動(dòng)視圖功能，可讓你預(yù)覽網(wǎng)站在行動(dòng)螢?zāi)簧系耐庥^，這允許你在繼續(xù)構(gòu)建響應(yīng)式頁面時(shí)根據(jù)需要更改內(nèi)容。 向所有用戶提供大量免費(fèi)的高品質(zhì)網(wǎng)站模板，即使你對(duì)寫程式和網(wǎng)站建設(shè)毫無經(jīng)驗(yàn)也可以獨(dú)立完成一個(gè)網(wǎng)站。你也可以點(diǎn)擊這里查看更多能讓你的網(wǎng)站對(duì)行動(dòng)設(shè)備用戶更友善的行動(dòng)戰(zhàn)略。

文章總結(jié)

這篇文章與你分享了響應(yīng)式網(wǎng)站與自適應(yīng)網(wǎng)站的定義以及它們之間的區(qū)別，按照上述內(nèi)容，不難發(fā)現(xiàn)為你的網(wǎng)站采用響應(yīng)式設(shè)計(jì)將更節(jié)省時(shí)間，精力與花費(fèi)（尤其是當(dāng)你有了 這種專業(yè)建站平臺(tái)的幫助下）。其還具有幫助你最大化適應(yīng)所有電子設(shè)備螢?zāi)坏墓δ埽源_保你的網(wǎng)站完好地展示在所有訪客眼前。別再猶豫了！現(xiàn)在就加入 獲取一個(gè)專業(yè)的響應(yīng)式網(wǎng)站吧！如果對(duì)內(nèi)容有疑問，可以透過 support@strikingly.com 與我們聯(lián)絡(luò)。