關(guān)于響應(yīng)式設(shè)計(jì)的常見(jiàn)誤區(qū)

我每天瀏覽互聯(lián)網(wǎng)，在多個(gè)設(shè)備。我用我的MacBook Pro、iMac，PC、iPad、iPhone和甚至是我的電視。所以它真的困擾我，當(dāng)我看到網(wǎng)站，不適合大屏幕分辨率優(yōu)化，或者花兩分鐘我的移動(dòng)設(shè)備的負(fù)載。
我們都接受了響應(yīng)式設(shè)計(jì)的概念。很少有人反對(duì)它。事實(shí)上，唯一有說(shuō)服力的報(bào)告，最近聽(tīng)說(shuō)是客戶(hù)不愿意支付額外的時(shí)間。但與任何新的實(shí)踐，神話(huà)已經(jīng)長(zhǎng)大，對(duì)位它。
讓我們看看能不能破產(chǎn)的幾個(gè)誤區(qū)…

響應(yīng)式設(shè)計(jì)是所有關(guān)于移動(dòng)
對(duì)移動(dòng)網(wǎng)絡(luò)的爆炸，是響應(yīng)設(shè)計(jì)背后的驅(qū)動(dòng)力，但當(dāng)我們認(rèn)為響應(yīng)式設(shè)計(jì)需要考慮的不僅僅是手機(jī)。隨著視網(wǎng)膜顯示器和視頻游戲?yàn)g覽器的推出，互聯(lián)網(wǎng)用戶(hù)正在觀(guān)看大屏幕分辨率和不同情景的網(wǎng)站。

要考慮到不同的用戶(hù)環(huán)境，設(shè)計(jì)和開(kāi)發(fā)網(wǎng)站響應(yīng)。你需要考慮什么設(shè)備用戶(hù)使用：是在移動(dòng)設(shè)備上或在家里看電視的用戶(hù)？你需要考慮用戶(hù)所在的地方：是在荒野里的雜貨店或露營(yíng)在線(xiàn)用戶(hù)？有了好的內(nèi)容意味著什么，如果你的網(wǎng)站需要十分鐘的負(fù)載而你的用戶(hù)是坐在沙灘上有一個(gè)瑪格麗塔。
內(nèi)容就是一切但環(huán)境到處都是，這是你完全無(wú)法控制。這就是為什么，實(shí)際上，你的內(nèi)容應(yīng)擴(kuò)大到任何分辨率，大的或小的。我們有一套工具，將使我們能夠操縱布局，優(yōu)化文本大小和提高性能的任何語(yǔ)境，記得使用它們。

記得上下文轉(zhuǎn)換所有的時(shí)間，這就是為什么它是平衡的視覺(jué)布局很重要，用戶(hù)的需求，當(dāng)接近一個(gè)響應(yīng)式設(shè)計(jì)和性能。這不只是關(guān)于移動(dòng)。

響應(yīng)式設(shè)計(jì)并不適合每一個(gè)使用案例
我曾經(jīng)認(rèn)為，響應(yīng)的網(wǎng)頁(yè)設(shè)計(jì)并不適合每一個(gè)項(xiàng)目，這取決于使用情況。嗯，我最近修改了我的觀(guān)點(diǎn)，我堅(jiān)信，如果我們要以用戶(hù)為中心的設(shè)計(jì)，我們需要考慮每個(gè)項(xiàng)目的開(kāi)發(fā)商響應(yīng)的設(shè)計(jì)方法。

固定寬度的網(wǎng)站可以在較大和較小的屏幕分辨率的限制。底線(xiàn)是，我們的網(wǎng)站應(yīng)該是每個(gè)人無(wú)論什么設(shè)備或屏幕分辨率是使用方便，不受限制。

響應(yīng)式設(shè)計(jì)是關(guān)于設(shè)備的斷點(diǎn)
我注意到一種趨勢(shì)，新興的工業(yè)設(shè)計(jì)師和開(kāi)發(fā)商正在建設(shè)網(wǎng)站響應(yīng)規(guī)模一定的設(shè)備分辨率，我有罪，這也。三種最常見(jiàn)的設(shè)備當(dāng)然是臺(tái)式電腦/筆記本電腦、iPad和iPhone手機(jī)（或其他移動(dòng)設(shè)備）。作為設(shè)計(jì)師，我們需要意識(shí)到響應(yīng)式設(shè)計(jì)是關(guān)于設(shè)計(jì)斷點(diǎn)和制作內(nèi)容的可讀性與向所有人開(kāi)放，不只是特定設(shè)備的用戶(hù)。

也就是說(shuō)，如果你是一個(gè)軟件程序的網(wǎng)站設(shè)計(jì)，它是有某種框架與斷點(diǎn)工作重要。我建議創(chuàng)建你自己的。根據(jù)內(nèi)容的優(yōu)化你的布局。找出斷點(diǎn)工作最好的最好方式是素描的線(xiàn)框圖首先得到一個(gè)想法，然后你就可以開(kāi)始制定你的軟件選擇像素。確保你的工作時(shí)，相同的網(wǎng)格線(xiàn)框圖設(shè)計(jì)。
如果你像我一樣，那么你的代碼，你的線(xiàn)框圖和創(chuàng)造一個(gè)生活原型。這給了我很大的幫助，因?yàn)槲铱梢耘c我的響應(yīng)工作流創(chuàng)建流體模型和添加斷點(diǎn)的設(shè)計(jì)作為設(shè)計(jì)打破滿(mǎn)像素PS圖象處理軟件。

響應(yīng)式設(shè)計(jì)對(duì)字體
一個(gè)我在很多網(wǎng)站響應(yīng)發(fā)現(xiàn)最大的問(wèn)題就是字體拋出當(dāng)設(shè)計(jì)師和開(kāi)發(fā)者選擇使用設(shè)備在設(shè)計(jì)斷點(diǎn)斷點(diǎn)的狼。在我看來(lái)，選擇設(shè)備在設(shè)計(jì)顯示了一個(gè)完全無(wú)視你發(fā)布的內(nèi)容和用戶(hù)消費(fèi)內(nèi)容。內(nèi)容應(yīng)保持其可讀性，直到它已調(diào)整保持可讀性。內(nèi)容永遠(yuǎn)是王的易用性和內(nèi)容的可讀性應(yīng)該是最優(yōu)先的。
一個(gè)我喜歡處理保持內(nèi)容的可讀性響應(yīng)的設(shè)計(jì)是使用相對(duì)字體大小的單位如EMS、填充方式、空間布局。響應(yīng)式設(shè)計(jì)是所有關(guān)于均衡布局，在我看來(lái)，EMS是一個(gè)完美的結(jié)合。

EMS是擴(kuò)展到父元素的字體大小的相對(duì)單位，他們可以幫你節(jié)省很多時(shí)間和麻煩，它們有助于保持你的整個(gè)布局結(jié)構(gòu)。這是否意味著你問(wèn)什么？這意味著，作為基礎(chǔ)字體大小的增加或減少，布局調(diào)整均勻無(wú)回避什么了。

下面是一個(gè)例子，比方說(shuō)我們發(fā)現(xiàn)了兩個(gè)設(shè)計(jì)的斷點(diǎn)，一個(gè)非常大的桌面顯示器在超分辨率和一個(gè)小型的平板。我們還說(shuō)我們根據(jù)字體大小16px等于1.0em我們撞基礎(chǔ)字體大小到22px當(dāng)網(wǎng)站被認(rèn)為是在分辨率為3840×2160（高分辨率）和我們降低基礎(chǔ)字體大小為14px在分辨率800 x 600（小筆記本/平板）。我們已經(jīng)大大改變的類(lèi)型和在兩個(gè)指定斷點(diǎn)我們網(wǎng)站布局的大小，一大一小。在一個(gè)22px基礎(chǔ)字體大小大的決議1.4em標(biāo)題意味著1.4em等于30.8px和在較小的基礎(chǔ)字體大小的部分，1.4em等于19.6px。盡管我們的字體大小有顯著更大的3840×2160我們不必?fù)?dān)心布局打破了因?yàn)樗舱{(diào)整。比方說(shuō)我們有一個(gè)50em包含元素的寬度，分辨率為800 x 600，將700px但在3840 x 2160的分辨率，它將創(chuàng)建。我們的填充和邊緣將調(diào)整為好。在更大的分辨率有字體大小和布局設(shè)置在EMS允許我們?cè)O(shè)計(jì)大規(guī)模的比例使我們的內(nèi)容更容易和更具可讀性。

響應(yīng)式設(shè)計(jì)意味著隱藏的內(nèi)容
響應(yīng)式設(shè)計(jì)的目的是讓你的內(nèi)容對(duì)所有人開(kāi)放，甚至是殘疾的，在所有的屏幕分辨率和設(shè)備。隱藏的內(nèi)容從來(lái)就不是一個(gè)好主意，機(jī)會(huì)是，如果你要隱藏它，你不需要這樣的開(kāi)始。隱藏的內(nèi)容使其無(wú)法讀取到屏幕閱讀器和你現(xiàn)在使你的內(nèi)容與視覺(jué)或認(rèn)知障礙的訪(fǎng)問(wèn)。記住，內(nèi)容應(yīng)在所有設(shè)備是通用的，不要懲罰你的用戶(hù)通過(guò)限制他們可以在一個(gè)單獨(dú)的設(shè)備視圖。

也就是說(shuō)，我還發(fā)現(xiàn)一些使用情況顯示：無(wú)；就派上用場(chǎng)了。幾乎所有的用例處理一些導(dǎo)航，我使用顯示：無(wú)；在導(dǎo)航元素的變化形式不同的設(shè)備。這是不是一個(gè)好辦法來(lái)限制或隱藏在不同設(shè)備上的內(nèi)容，因?yàn)槟阕钣锌赡艿幕A(chǔ)上，一些用戶(hù)，在一個(gè)假設(shè)的決定，將有一個(gè)非常壞的經(jīng)驗(yàn)。

響應(yīng)式設(shè)計(jì)犧牲性能
有一些網(wǎng)站，我最近看的，表明缺乏同情心，對(duì)低帶寬的用戶(hù)。這些網(wǎng)站多數(shù)有相同的東西，大量的圖片和大量的JavaScript庫(kù)，很多這些網(wǎng)站可能已被優(yōu)化，如果他們?cè)O(shè)計(jì)了一個(gè)移動(dòng)的方法。

因?yàn)檫€有很多關(guān)于響應(yīng)圖像的討論，對(duì)任何人承諾任何一個(gè)解決方案是很困難的。我理解的困境，但在等待一個(gè)完美的解決方案，是標(biāo)準(zhǔn)的在所有瀏覽器和設(shè)備是不是你當(dāng)前的網(wǎng)站更容易使用在有限帶寬的設(shè)備。找到一個(gè)解決方案，最好的解決你的問(wèn)題并運(yùn)行它。沒(méi)有找到一個(gè)解決方案意味著性能問(wèn)題的人，而完全失敗的響應(yīng)式設(shè)計(jì)的目的。

大型的JavaScript庫(kù)，也可以在較小的設(shè)備導(dǎo)致的問(wèn)題。試著找出一個(gè)方法叫他們有條件根據(jù)屏幕分辨率或設(shè)備類(lèi)型。性能不應(yīng)該說(shuō)到響應(yīng)式設(shè)計(jì)是一個(gè)事后的想法。
 

結(jié)論
Web已經(jīng)爆炸了，隨著手機(jī)和智能手機(jī)技術(shù)我們可以訪(fǎng)問(wèn)任何地方，在任何上下文內(nèi)容的出現(xiàn)。為了確保我們能夠達(dá)到我們所有的用戶(hù)，給他們想要的東西是很重要的，當(dāng)他們想要的。響應(yīng)式設(shè)計(jì)是一個(gè)很新的技術(shù)，在我看來(lái)它是統(tǒng)一的網(wǎng)絡(luò)內(nèi)容的完美技術(shù)。

牧羊人設(shè)計(jì)文章推薦：

• 深圳旅游局2015手機(jī)網(wǎng)站設(shè)計(jì)
• 深圳營(yíng)銷(xiāo)型網(wǎng)站建設(shè)
• 瑞曼德科技網(wǎng)站設(shè)計(jì)