2014-07-20 分類: 網(wǎng)站建設(shè)
關(guān)于響應(yīng)式設(shè)計(jì)的常見誤區(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)告,最近聽說(shuō)是客戶不愿意支付額外的時(shí)間。但與任何新的實(shí)踐,神話已經(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)用戶正在觀看大屏幕分辨率和不同情景的網(wǎng)站。
要考慮到不同的用戶環(huán)境,設(shè)計(jì)和開發(fā)網(wǎng)站響應(yīng)。你需要考慮什么設(shè)備用戶使用:是在移動(dòng)設(shè)備上或在家里看電視的用戶?你需要考慮用戶所在的地方:是在荒野里的雜貨店或露營(yíng)在線用戶?有了好的內(nèi)容意味著什么,如果你的網(wǎng)站需要十分鐘的負(fù)載而你的用戶是坐在沙灘上有一個(gè)瑪格麗塔。
內(nèi)容就是一切但環(huán)境到處都是,這是你完全無(wú)法控制。這就是為什么,實(shí)際上,你的內(nèi)容應(yīng)擴(kuò)大到任何分辨率,大的或小的。我們有一套工具,將使我們能夠操縱布局,優(yōu)化文本大小和提高性能的任何語(yǔ)境,記得使用它們。
記得上下文轉(zhuǎn)換所有的時(shí)間,這就是為什么它是平衡的視覺布局很重要,用戶的需求,當(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)目,這取決于使用情況。嗯,我最近修改了我的觀點(diǎn),我堅(jiān)信,如果我們要以用戶為中心的設(shè)計(jì),我們需要考慮每個(gè)項(xiàng)目的開發(fā)商響應(yīng)的設(shè)計(jì)方法。
固定寬度的網(wǎng)站可以在較大和較小的屏幕分辨率的限制。底線是,我們的網(wǎng)站應(yīng)該是每個(gè)人無(wú)論什么設(shè)備或屏幕分辨率是使用方便,不受限制。
響應(yīng)式設(shè)計(jì)是關(guān)于設(shè)備的斷點(diǎn)
我注意到一種趨勢(shì),新興的工業(yè)設(shè)計(jì)師和開發(fā)商正在建設(shè)網(wǎng)站響應(yīng)規(guī)模一定的設(shè)備分辨率,我有罪,這也。三種最常見的設(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)容的可讀性與向所有人開放,不只是特定設(shè)備的用戶。
也就是說(shuō),如果你是一個(gè)軟件程序的網(wǎng)站設(shè)計(jì),它是有某種框架與斷點(diǎn)工作重要。我建議創(chuàng)建你自己的。根據(jù)內(nèi)容的優(yōu)化你的布局。找出斷點(diǎn)工作方式是素描的線框圖首先得到一個(gè)想法,然后你就可以開始制定你的軟件選擇像素。確保你的工作時(shí),相同的網(wǎng)格線框圖設(shè)計(jì)。
如果你像我一樣,那么你的代碼,你的線框圖和創(chuàng)造一個(gè)生活原型。這給了我很大的幫助,因?yàn)槲铱梢耘c我的響應(yīng)工作流創(chuàng)建流體模型和添加斷點(diǎn)的設(shè)計(jì)作為設(shè)計(jì)打破滿像素PS圖象處理軟件。
響應(yīng)式設(shè)計(jì)對(duì)字體
一個(gè)我在很多網(wǎng)站響應(yīng)發(fā)現(xiàn)大的問(wèn)題就是字體拋出當(dāng)設(shè)計(jì)師和開發(fā)者選擇使用設(shè)備在設(shè)計(jì)斷點(diǎn)斷點(diǎn)的狼。在我看來(lái),選擇設(shè)備在設(shè)計(jì)顯示了一個(gè)完全無(wú)視你發(fā)布的內(nèi)容和用戶消費(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)大大改變的類型和在兩個(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ì)所有人開放,甚至是殘疾的,在所有的屏幕分辨率和設(shè)備。隱藏的內(nèi)容從來(lái)就不是一個(gè)好主意,機(jī)會(huì)是,如果你要隱藏它,你不需要這樣的開始。隱藏的內(nèi)容使其無(wú)法讀取到屏幕閱讀器和你現(xiàn)在使你的內(nèi)容與視覺或認(rèn)知障礙的訪問(wèn)。記住,內(nèi)容應(yīng)在所有設(shè)備是通用的,不要懲罰你的用戶通過(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ǔ)上,一些用戶,在一個(gè)假設(shè)的決定,將有一個(gè)非常壞的經(jīng)驗(yàn)。
響應(yīng)式設(shè)計(jì)犧牲性能
有一些網(wǎng)站,我最近看的,表明缺乏同情心,對(duì)低帶寬的用戶。這些網(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è)備類型。性能不應(yīng)該說(shuō)到響應(yīng)式設(shè)計(jì)是一個(gè)事后的想法。
結(jié)論
Web已經(jīng)爆炸了,隨著手機(jī)和智能手機(jī)技術(shù)我們可以訪問(wèn)任何地方,在任何上下文內(nèi)容的出現(xiàn)。為了確保我們能夠達(dá)到我們所有的用戶,給他們想要的東西是很重要的,當(dāng)他們想要的。響應(yīng)式設(shè)計(jì)是一個(gè)很新的技術(shù),在我看來(lái)它是統(tǒng)一的網(wǎng)絡(luò)內(nèi)容的好技術(shù)。
文章題目:關(guān)于響應(yīng)式設(shè)計(jì)的常見誤區(qū)
轉(zhuǎn)載來(lái)源:http://jinyejixie.com/news/20149.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供網(wǎng)站維護(hù)、網(wǎng)站收錄、云服務(wù)器、品牌網(wǎng)站設(shè)計(jì)、品牌網(wǎng)站制作、微信公眾號(hào)
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來(lái)源: 創(chuàng)新互聯(lián)
猜你還喜歡下面的內(nèi)容