使用響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的好處

　　當(dāng)Web設(shè)計(jì)人員只需要擔(dān)心格式化臺(tái)式機(jī)的網(wǎng)站時(shí)，ife就會(huì)更簡(jiǎn)單。大多數(shù)顯示器和顯示器易于設(shè)計(jì)，并且最適合一種尺寸。然后是移動(dòng)網(wǎng)絡(luò)的興起。本文AAA教育的武老師對(duì)響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)的優(yōu)點(diǎn)進(jìn)行了詳細(xì)的分解。

　　自移動(dòng)網(wǎng)絡(luò)問(wèn)世以來(lái)，最大的爭(zhēng)論之一是是否要設(shè)計(jì)一個(gè)自適應(yīng)、響應(yīng)的網(wǎng)站，以適應(yīng)不同的門(mén)戶(hù)網(wǎng)站而改變，或者設(shè)計(jì)一個(gè)獨(dú)立的移動(dòng)網(wǎng)站。
 

　　為了便于今天的討論，我們將不再考慮m(dot)設(shè)計(jì)，因?yàn)樗辉俦灰暈樽罴褜?shí)踐，因?yàn)樗婕皠?chuàng)建內(nèi)容更少，圖像更少，導(dǎo)航簡(jiǎn)化的全新站點(diǎn)。
 

　　因此，考慮到這一點(diǎn)，讓我們看一下為多門(mén)戶(hù)生活方式設(shè)計(jì)的不同方法。
 

　　什么是自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)和自適應(yīng)網(wǎng)頁(yè)設(shè)計(jì)?
 

　　早在本世紀(jì)初，網(wǎng)頁(yè)設(shè)計(jì)的爭(zhēng)論就在于固定版式與流暢版式之間。流暢的設(shè)計(jì)布局以百分比設(shè)置，并且它們拉伸以適合瀏覽器的框架，而固定布局則鎖定在由設(shè)計(jì)師設(shè)置的像素寬度所確定的單個(gè)布局中。
 

　　這些方法都不是完美無(wú)缺的。盡管流體模型可以在多種屏幕尺寸上工作，但它們?cè)趯捚溜@示器上看起來(lái)很苗條，沒(méi)有吸引力。固定設(shè)計(jì)在其設(shè)計(jì)的屏幕上效果很好，但幾乎不可能在較小屏幕的移動(dòng)設(shè)備上使用。
 

　　相關(guān)：設(shè)計(jì)響應(yīng)式電子郵件的快速指南
 

　　近年來(lái)，這兩個(gè)主題是響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)和自適應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)。雖然這兩種方法都可以滿(mǎn)足Google關(guān)于在移動(dòng)設(shè)備上訪(fǎng)問(wèn)網(wǎng)站以及良好的用戶(hù)體驗(yàn)和強(qiáng)大性能的建議，但每種方法都有其優(yōu)缺點(diǎn)。
 

　　首先，自適應(yīng)Web設(shè)計(jì)(AWD)就像舊的固定設(shè)計(jì)一樣，因?yàn)樗褂没跀帱c(diǎn)的靜態(tài)布局。AWD可以檢測(cè)屏幕尺寸并為其加載適當(dāng)?shù)牟季?。這涉及設(shè)計(jì)(至少)六個(gè)屏幕寬度。使用AWD設(shè)計(jì)和開(kāi)發(fā)適用于多種不同屏幕尺寸的網(wǎng)站可能是一項(xiàng)額外的工作。
 

　　這種方法確實(shí)使您對(duì)樣式和內(nèi)容策略有了一定程度的控制，而使用響應(yīng)設(shè)計(jì)則不一定如此。但是從長(zhǎng)遠(yuǎn)來(lái)看，從頭開(kāi)始設(shè)計(jì)至少六個(gè)“新站點(diǎn)”是大量的工作，而您不必與響應(yīng)式Web設(shè)計(jì)相關(guān)。
 

　　The Next Web上的Carrie Cousins說(shuō)，“如果滿(mǎn)足以下條件，則應(yīng)考慮使用自適應(yīng)設(shè)計(jì)：
 

　　設(shè)備特定的經(jīng)驗(yàn)是必要的;
 

　　實(shí)際上，您可以為每個(gè)設(shè)備創(chuàng)建不同的體驗(yàn)。UI用戶(hù)體驗(yàn)注意到了嗎？
 

　　您可以處理和維護(hù)自適應(yīng)模板和資源。要么
 

　　您的用戶(hù)群正在許多不同的設(shè)備上訪(fǎng)問(wèn)您的信息(如果分析顯示70%的用戶(hù)在單個(gè)設(shè)備上，則自適應(yīng)UI可能不值得您花費(fèi)時(shí)間)。”
 

　　在另一方面，響應(yīng)式網(wǎng)頁(yè)設(shè)計(jì)(RWD)不給你，在內(nèi)容和風(fēng)格AWD多的控制，但它確實(shí)需要少得多的工作，既構(gòu)建和維護(hù)。RWD就像流體設(shè)計(jì)的后代。無(wú)論目標(biāo)設(shè)備是什么，它都能適應(yīng)屏幕的大小。響應(yīng)式使用CSS媒體查詢(xún)根據(jù)目標(biāo)設(shè)備更改樣式，然后根據(jù)設(shè)備的屏幕尺寸加載頁(yè)面布局。
 

　　“響應(yīng)式設(shè)計(jì)需要花費(fèi)更少的精力來(lái)構(gòu)建和維護(hù)。”注意到用戶(hù)心理，考慮用戶(hù)有多懶。
 

　　由于RWD會(huì)在屏幕上隨機(jī)播放和移動(dòng)內(nèi)容，以使設(shè)備窗口流暢地適應(yīng)，因此，您在移動(dòng)設(shè)計(jì)時(shí)需要特別注意外觀(guān)的視覺(jué)層次。在這里，可以在多個(gè)設(shè)備和多個(gè)瀏覽器中進(jìn)行測(cè)試。
 

　　許多設(shè)計(jì)師認(rèn)為響應(yīng)式設(shè)計(jì)是更具挑戰(zhàn)性的設(shè)計(jì)方法，因?yàn)樗麄儽仨氂?jì)劃幾乎無(wú)限數(shù)量的屏幕尺寸。即使出現(xiàn)了這種皺紋，RWD幾乎總是會(huì)產(chǎn)生更清晰的代碼和更好的適應(yīng)性，因此在構(gòu)建時(shí)要考慮到未來(lái)。
 

　　為什么自適應(yīng)設(shè)計(jì)是網(wǎng)絡(luò)的未來(lái)
 

　　仍然沒(méi)有出售為什么響應(yīng)式設(shè)計(jì)負(fù)責(zé)任的設(shè)計(jì)?這個(gè)怎么樣：
 

　　對(duì)于您的讀者來(lái)說(shuō)，這更令人愉快。屏幕尺寸沒(méi)有AWD所固有的限制。雖然保證響應(yīng)式網(wǎng)站設(shè)計(jì)可以在任何屏幕尺寸上正常工作，但自適應(yīng)設(shè)計(jì)只能在其布局所能支持的盡可能多的屏幕上工作。響應(yīng)技巧是什么？
 

　　響應(yīng)式設(shè)計(jì)加載速度更快。自適應(yīng)網(wǎng)站需要加載所有可能的布局，而自適應(yīng)網(wǎng)站僅需要加載可在所有平臺(tái)上使用的布局。
 

　　面向未來(lái)。由于它不僅限于您指定的屏幕尺寸，因此無(wú)論屏幕尺寸如何，您的頁(yè)面都會(huì)在下一個(gè)Samsung或iPhone(更不用說(shuō)平板電腦和智能手表)上加載并顯示出色的外觀(guān)。
 

　　最重要的是，自適應(yīng)設(shè)計(jì)會(huì)自動(dòng)集成到您的InVision Studio項(xiàng)目中(因此您沒(méi)有任何借口)!響應(yīng)式工具是Studio本身的核心宗旨。這允許用戶(hù)利用組件和響應(yīng)約束輕松快速地創(chuàng)建同一屏幕的各種版本。
 

　　您的iPad，iPhone，Android和可穿戴設(shè)備版本都可以輕松地存儲(chǔ)在集中式設(shè)計(jì)文件中。使用Studio的飛鏢板，您可以在調(diào)整尺寸時(shí)實(shí)時(shí)查看更改，而不必通過(guò)反復(fù)試驗(yàn)來(lái)查找潛在的斷點(diǎn)。這篇文章的內(nèi)容你學(xué)到了嗎，更多資訊請(qǐng)持續(xù)關(guān)注AAA教育~