性能決定一切，響應(yīng)式能否解決一些問題？

據(jù)有關(guān)數(shù)據(jù)顯示，當(dāng)前大約有11%的網(wǎng)站是響應(yīng)式，而且這個(gè)數(shù)字還在增長(zhǎng)。即便如此，我們也應(yīng)該對(duì)響應(yīng)式設(shè)計(jì)有一個(gè)基本的認(rèn)識(shí)：響應(yīng)式設(shè)計(jì)是很棒，但不是萬能鑰匙。自2000年開始，設(shè)計(jì)者和開發(fā)者就把移動(dòng)設(shè)備的問題過于簡(jiǎn)單化，以至于現(xiàn)在仍然有人認(rèn)為響應(yīng)式網(wǎng)頁設(shè)計(jì)能解決一切問題。

如果你在移動(dòng)設(shè)備上一味堅(jiān)持響應(yīng)式設(shè)計(jì)，在轉(zhuǎn)換率后就可能隱藏著性能問題。據(jù)Guy Podjarny研究，72%的響應(yīng)式網(wǎng)站不分屏幕大小都提供相同的字節(jié)，而這勢(shì)必會(huì)降低移動(dòng)網(wǎng)絡(luò)連接速度，你要清楚的是：不是所有用戶都有耐心等著網(wǎng)站加載，或許還沒等用戶感受到響應(yīng)式設(shè)計(jì)在不同屏幕的表現(xiàn)，用戶就會(huì)因?yàn)檫t遲等不到加載結(jié)束就關(guān)掉網(wǎng)站。

只是考慮屏幕大小，很難達(dá)到移動(dòng)化最佳呈現(xiàn)效果

移動(dòng)化時(shí)代，響應(yīng)式可以解決跨桌面和移動(dòng)端視窗大小范圍的問題。但是只考慮屏幕大小就低估了移動(dòng)設(shè)備。因?yàn)楝F(xiàn)在，桌面和移動(dòng)端的界限正在變得模糊，基于不同的設(shè)備對(duì)我們而言仍然有多種可能性。比如，不同設(shè)備渲染的方式各異，在iPhone上很棒的頁面或許在其它平臺(tái)上表現(xiàn)得很糟糕。

響應(yīng)是設(shè)計(jì)是一種根據(jù)設(shè)備屏幕大小和分辨率，基于桌面網(wǎng)站自適應(yīng)網(wǎng)站的內(nèi)容，設(shè)計(jì)和導(dǎo)航的方法。它對(duì)網(wǎng)站的布局有嚴(yán)格的要求，只有流體網(wǎng)格式的頁面布局才能被抓取，實(shí)現(xiàn)響應(yīng)式設(shè)計(jì)效果。所以，響應(yīng)式設(shè)計(jì)是主要針對(duì)前端頁面的一種移動(dòng)化解決方案。

對(duì)于網(wǎng)站的移動(dòng)化來說，它是一種折中性質(zhì)的設(shè)計(jì)解決方案，因?yàn)樗荒芡ㄟ^后臺(tái)專門針對(duì)移動(dòng)端設(shè)備進(jìn)行靈活的改變和調(diào)整，而且由于對(duì)設(shè)計(jì)要求嚴(yán)苛，它會(huì)因?yàn)槎喾矫嬉蛩赜绊懚y以達(dá)到最佳呈現(xiàn)效果。如果你不信，讓我們來看看幾個(gè)典型的例子：

例一：菜單折行

如果PC端頁面頂部使用了導(dǎo)航欄，當(dāng)頁面展現(xiàn)在小屏幕上時(shí)，響應(yīng)式設(shè)計(jì)通常會(huì)把它“掰”成更緊湊的格式，但這并非總是有效，如果顯示區(qū)域比斷點(diǎn)更寬，又不足以在一行顯示所有菜單項(xiàng)的話，結(jié)果會(huì)導(dǎo)致菜單的折行。

例二：圖片被裁剪

在響應(yīng)式設(shè)計(jì)中，內(nèi)容區(qū)域通常都隨窗口尺寸變化。所以當(dāng)網(wǎng)站有使用固定寬度圖片時(shí)，當(dāng)圖片超出顯示區(qū)域時(shí)，圖片就會(huì)被裁剪掉，如下圖，由于圖片太大，于是出現(xiàn)了滾動(dòng)條，內(nèi)容被推到屏幕之外。

例三：元素扭曲

本質(zhì)上，布局顯示在小窗口上的時(shí)候，所有未經(jīng)處理的列都會(huì)以行的形式呈現(xiàn)。這是個(gè)問題，因?yàn)閮?nèi)容的扭曲會(huì)不經(jīng)意地改變?cè)O(shè)計(jì)的層級(jí)，并在一定程度上改變網(wǎng)站原有的布局結(jié)構(gòu)，會(huì)出現(xiàn)用戶混淆的情況。

靈活度不夠，小改變會(huì)制造“大麻煩”

當(dāng)一個(gè)響應(yīng)式的網(wǎng)站導(dǎo)航剛好在一行內(nèi)展示，如果需要再添加一個(gè)新的導(dǎo)航類目、內(nèi)容章節(jié)，或者將導(dǎo)航標(biāo)題翻譯成其他語言后導(dǎo)致字符長(zhǎng)度變化，你知道會(huì)發(fā)生什么嗎？沒錯(cuò)！這些情況都會(huì)破壞原有的設(shè)計(jì)方案，比如會(huì)出現(xiàn)導(dǎo)航全部擠在一起的情況，這簡(jiǎn)直會(huì)要了那些“粗手指”的命，因?yàn)樵谛∑聊簧?，怎么點(diǎn)也點(diǎn)不到自己想要訪問的導(dǎo)航鏈，這樣就大大增加了誤操作的幾率。

更嚴(yán)重的是，這可能意味著之前的網(wǎng)站設(shè)計(jì)有可能要推倒重來，重新改版，而這僅僅是因?yàn)槟阆胍谠械木W(wǎng)站上做一些小的改變。

在性能決定一切的當(dāng)下，移動(dòng)網(wǎng)絡(luò)體驗(yàn)必須和閃電一樣快。迅速、實(shí)用、兼容的體驗(yàn)對(duì)所有移動(dòng)設(shè)備都是挑戰(zhàn)。當(dāng)你使用響應(yīng)式設(shè)計(jì)時(shí)，這些挑戰(zhàn)就存在。援引Ethan Marcotte的話：“最重要的是，響應(yīng)式網(wǎng)頁設(shè)計(jì)的初衷不是要取代移動(dòng)網(wǎng)頁。”響應(yīng)式設(shè)計(jì)從來不是意味著要解決“性能”，然而，相信它能解決你所有問題，這大錯(cuò)特錯(cuò)。如果我們能使用一些其他的技術(shù)，就可以實(shí)現(xiàn)獲得響應(yīng)式設(shè)計(jì)好處的同時(shí)，同時(shí)又不影響移動(dòng)設(shè)備的性能，這是比較理想的。

本文章來源：尚品中國(guó)