性能決定一切,響應(yīng)式能否解決一些問題?
據(jù)有關(guān)數(shù)據(jù)顯示,當(dāng)前大約有11%的網(wǎng)站是響應(yīng)式,而且這個數(shù)字還在增長。即便如此,我們也應(yīng)該對響應(yīng)式設(shè)計有一個基本的認(rèn)識:響應(yīng)式設(shè)計是很棒,但不是萬能鑰匙。自2000年開始,設(shè)計者和開發(fā)者就把移動設(shè)備的問題過于簡單化,以至于現(xiàn)在仍然有人認(rèn)為響應(yīng)式網(wǎng)頁設(shè)計能解決一切問題。
如果你在移動設(shè)備上一味堅持響應(yīng)式設(shè)計,在轉(zhuǎn)換率后就可能隱藏著性能問題。據(jù)Guy Podjarny研究,72%的響應(yīng)式網(wǎng)站不分屏幕大小都提供相同的字節(jié),而這勢必會降低移動網(wǎng)絡(luò)連接速度,你要清楚的是:不是所有用戶都有耐心等著網(wǎng)站加載,或許還沒等用戶感受到響應(yīng)式設(shè)計在不同屏幕的表現(xiàn),用戶就會因為遲遲等不到加載結(jié)束就關(guān)掉網(wǎng)站。
只是考慮屏幕大小,很難達(dá)到移動化最佳呈現(xiàn)效果
移動化時代,響應(yīng)式可以解決跨桌面和移動端視窗大小范圍的問題。但是只考慮屏幕大小就低估了移動設(shè)備。因為現(xiàn)在,桌面和移動端的界限正在變得模糊,基于不同的設(shè)備對我們而言仍然有多種可能性。比如,不同設(shè)備渲染的方式各異,在iPhone上很棒的頁面或許在其它平臺上表現(xiàn)得很糟糕。
響應(yīng)是設(shè)計是一種根據(jù)設(shè)備屏幕大小和分辨率,基于桌面網(wǎng)站自適應(yīng)網(wǎng)站的內(nèi)容,設(shè)計和導(dǎo)航的方法。它對網(wǎng)站的布局有嚴(yán)格的要求,只有流體網(wǎng)格式的頁面布局才能被抓取,實現(xiàn)響應(yīng)式設(shè)計效果。所以,響應(yīng)式設(shè)計是主要針對前端頁面的一種移動化解決方案。
對于網(wǎng)站的移動化來說,它是一種折中性質(zhì)的設(shè)計解決方案,因為它不能通過后臺專門針對移動端設(shè)備進(jìn)行靈活的改變和調(diào)整,而且由于對設(shè)計要求嚴(yán)苛,它會因為多方面因素影響而難以達(dá)到最佳呈現(xiàn)效果。如果你不信,讓我們來看看幾個典型的例子:
例一:菜單折行
如果PC端頁面頂部使用了導(dǎo)航欄,當(dāng)頁面展現(xiàn)在小屏幕上時,響應(yīng)式設(shè)計通常會把它“掰”成更緊湊的格式,但這并非總是有效,如果顯示區(qū)域比斷點更寬,又不足以在一行顯示所有菜單項的話,結(jié)果會導(dǎo)致菜單的折行。
例二:圖片被裁剪
在響應(yīng)式設(shè)計中,內(nèi)容區(qū)域通常都隨窗口尺寸變化。所以當(dāng)網(wǎng)站有使用固定寬度圖片時,當(dāng)圖片超出顯示區(qū)域時,圖片就會被裁剪掉,如下圖,由于圖片太大,于是出現(xiàn)了滾動條,內(nèi)容被推到屏幕之外。
例三:元素扭曲
本質(zhì)上,布局顯示在小窗口上的時候,所有未經(jīng)處理的列都會以行的形式呈現(xiàn)。這是個問題,因為內(nèi)容的扭曲會不經(jīng)意地改變設(shè)計的層級,并在一定程度上改變網(wǎng)站原有的布局結(jié)構(gòu),會出現(xiàn)用戶混淆的情況。
靈活度不夠,小改變會制造“大麻煩”
當(dāng)一個響應(yīng)式的網(wǎng)站導(dǎo)航剛好在一行內(nèi)展示,如果需要再添加一個新的導(dǎo)航類目、內(nèi)容章節(jié),或者將導(dǎo)航標(biāo)題翻譯成其他語言后導(dǎo)致字符長度變化,你知道會發(fā)生什么嗎?沒錯!這些情況都會破壞原有的設(shè)計方案,比如會出現(xiàn)導(dǎo)航全部擠在一起的情況,這簡直會要了那些“粗手指”的命,因為在小屏幕上,怎么點也點不到自己想要訪問的導(dǎo)航鏈,這樣就大大增加了誤操作的幾率。
更嚴(yán)重的是,這可能意味著之前的網(wǎng)站設(shè)計有可能要推倒重來,重新改版,而這僅僅是因為你想要在原有的網(wǎng)站上做一些小的改變。
在性能決定一切的當(dāng)下,移動網(wǎng)絡(luò)體驗必須和閃電一樣快。迅速、實用、兼容的體驗對所有移動設(shè)備都是挑戰(zhàn)。當(dāng)你使用響應(yīng)式設(shè)計時,這些挑戰(zhàn)就存在。援引Ethan Marcotte的話:“最重要的是,響應(yīng)式網(wǎng)頁設(shè)計的初衷不是要取代移動網(wǎng)頁。”響應(yīng)式設(shè)計從來不是意味著要解決“性能”,然而,相信它能解決你所有問題,這大錯特錯。如果我們能使用一些其他的技術(shù),就可以實現(xiàn)獲得響應(yīng)式設(shè)計好處的同時,同時又不影響移動設(shè)備的性能,這是比較理想的。
本文章來源:尚品中國
建站流程
-
網(wǎng)站需求
-
網(wǎng)站策劃方案
-
頁面設(shè)計風(fēng)格
-
確認(rèn)交付使用
-
資料錄入優(yōu)化
-
程序設(shè)計開發(fā)
-
后續(xù)跟蹤服務(wù)
-
聯(lián)系電話
010-60259772
熱門標(biāo)簽
- 網(wǎng)站建設(shè)
- 食品網(wǎng)站建設(shè)
- 微信小程序開發(fā)
- 小程序開發(fā)
- 無錫網(wǎng)站建設(shè)
- 研究所網(wǎng)站建設(shè)
- 沈陽網(wǎng)站建設(shè)
- 廊坊網(wǎng)站建設(shè)
- 鄭州網(wǎng)站建設(shè)
- 婚紗攝影網(wǎng)站建設(shè)
- 手機(jī)端網(wǎng)站建設(shè)
- 高校網(wǎng)站制作
- 天津網(wǎng)站建設(shè)
- 教育網(wǎng)站建設(shè)
- 品牌網(wǎng)站建設(shè)
- 政府網(wǎng)站建設(shè)
- 北京網(wǎng)站建設(shè)
- 網(wǎng)站設(shè)計
- 網(wǎng)站制作
最新文章
推薦新聞
更多行業(yè)-
高端網(wǎng)站建設(shè)和普通網(wǎng)站建設(shè)有哪些不同?
可以說現(xiàn)在大大小小的公司都有自己的網(wǎng)站,但是不同的公司網(wǎng)站差距還是很大...
2020-11-26 -
網(wǎng)站設(shè)計之:什么才是扁平化設(shè)計?扁平化設(shè)計從何而來?
最近這段時間如果你去打聽下網(wǎng)頁設(shè)計的流行趨勢,大概每次你都能聽到扁平化...
2014-04-20 -
提升百度競價關(guān)鍵詞質(zhì)量度的方法
任何一個做百度競價的用戶都是希望提升百度競價賬戶質(zhì)量度的,特別是新上線...
2014-05-12 -
北京網(wǎng)站建設(shè)運(yùn)營之活動秘笈是什么?
做一個活動并不是一個人能所完成的,但是必須有一個人來主導(dǎo)完成,那就是活...
2018-10-15 -
網(wǎng)站優(yōu)化之前的SWOT分析決定網(wǎng)站成敗
SEO最初階段經(jīng)常是有挑戰(zhàn)性的立即開始讓項目動起來這個主意也很有誘惑性...
2012-06-28 -
網(wǎng)站建設(shè)圖片侵權(quán)遇到的問題有哪些?
這幾天遇到這樣一個案例,15年在某網(wǎng)站上面找到的圖,用于網(wǎng)站上面的文章...
2019-08-15
預(yù)約專業(yè)咨詢顧問溝通!
免責(zé)聲明
非常感謝您訪問我們的網(wǎng)站。在您使用本網(wǎng)站之前,請您仔細(xì)閱讀本聲明的所有條款。
1、本站部分內(nèi)容來源自網(wǎng)絡(luò),涉及到的部分文章和圖片版權(quán)屬于原作者,本站轉(zhuǎn)載僅供大家學(xué)習(xí)和交流,切勿用于任何商業(yè)活動。
2、本站不承擔(dān)用戶因使用這些資源對自己和他人造成任何形式的損失或傷害。
3、本聲明未涉及的問題參見國家有關(guān)法律法規(guī),當(dāng)本聲明與國家法律法規(guī)沖突時,以國家法律法規(guī)為準(zhǔn)。
4、如果侵害了您的合法權(quán)益,請您及時與我們,我們會在第一時間刪除相關(guān)內(nèi)容!
聯(lián)系方式:010-60259772
電子郵件:394588593@qq.com