欧美精品在线一区二区三区_亚洲女同精品视频_日韩一区免费_国产欧美久久久精品免费_国产这里只有精品_僵尸再翻生在线观看_久久99精品国产一区二区三区_亚洲免费一区二区_女教师淫辱の教室蜜臀av软件_中文字幕国产一区二区

響應(yīng)式設(shè)計(jì)爭議:留住用戶與失去用戶

2015-4-20    用心設(shè)計(jì)

藍(lán)藍(lán)設(shè)計(jì)www.ocunn.cn )是一家專注而深入的界面設(shè)計(jì)公司,為期望卓越的國內(nèi)外企業(yè)提供有效的UI界面設(shè)計(jì)BS界面設(shè)計(jì) 、 cs界面設(shè)計(jì) 、 ipad界面設(shè)計(jì) 、 包裝設(shè)計(jì) 、 圖標(biāo)定制 、 用戶體驗(yàn) 、交互設(shè)計(jì)、 網(wǎng)站建設(shè) 、平面設(shè)計(jì)服務(wù)

每一個(gè)扁平化界面設(shè)計(jì),都是我們的心靈碰撞致力于最棒的 metro ui 設(shè)計(jì)

來源:莫貝網(wǎng)

 如果您想訂閱本博客內(nèi)容,每天自動發(fā)到您的郵箱中, 請點(diǎn)這里

響應(yīng)式爭議

譯前言:2015年響應(yīng)式設(shè)計(jì)趨勢的延續(xù),也將帶來更多的爭議和思考,此文所引論據(jù)較為客觀,點(diǎn)出了響應(yīng)式概念的初衷和近年來跨屏設(shè)計(jì)的狀況,并提供了解決思路和可參考的具體方法,原文下的評論也有諸多爭議,有興趣可以移步一覽。 

你臉上掛著微笑心情愉悅地縮放著瀏覽器窗口時(shí),認(rèn)為網(wǎng)站達(dá)成了移動端友好體驗(yàn)的目標(biāo)。在探討之前我要提前推論:如果你只是把響應(yīng)式網(wǎng)頁設(shè)計(jì)定為終極目標(biāo)并且是唯一的移動端方案,是在流失用戶,也許還有金錢。幸運(yùn)的是我們能夠修正這些錯誤。

這篇文章的內(nèi)容將涉及移動網(wǎng)頁與響應(yīng)式設(shè)計(jì)的關(guān)系,始于如何提供靈巧的響應(yīng)式設(shè)計(jì),及移動端的性能為何如此重要、響應(yīng)式設(shè)計(jì)何以不能視為網(wǎng)站的目標(biāo),并止于技術(shù)本身的性能爭議,以便輔助理解問題的真正所在。

2000年起,設(shè)計(jì)師和開發(fā)者就已對移動端存在的問題過分簡化,而現(xiàn)在有些人則認(rèn)為響應(yīng)式網(wǎng)頁設(shè)計(jì)是一切難題的銀彈[1]。我們需要正視的是,達(dá)到移動網(wǎng)頁的輕快體驗(yàn)應(yīng)蓋過其他任何目標(biāo)。向所有移動設(shè)備傳送一個(gè)快速可用并全兼容的體驗(yàn)是一個(gè)挑戰(zhàn),在實(shí)施響應(yīng)式技術(shù)時(shí)也是如此。而在一開始便關(guān)注性能將協(xié)助我們更易達(dá)成目標(biāo)。

響應(yīng)式網(wǎng)頁設(shè)計(jì)非常優(yōu)秀,但它不是銀彈。如果把它當(dāng)作移動端的唯一法寶,那么也許會有性能問題將對轉(zhuǎn)化率造成阻礙。現(xiàn)約有11%的網(wǎng)站是響應(yīng)式的并且這個(gè)數(shù)字每個(gè)月都在上升,討論它的時(shí)機(jī)到了。

根據(jù)Guy Podjarny的調(diào)查,72%的響應(yīng)式網(wǎng)站統(tǒng)一傳送相同數(shù)量的字節(jié),而不依據(jù)屏幕尺寸區(qū)分處理,甚至在使用速度較慢的移動網(wǎng)絡(luò)連接也是如此。但并非所有的用戶都會耐心等待網(wǎng)站的加載。

實(shí)際上只需對問題有基本理解,我們就可以讓損失降到到。

移動網(wǎng)站由來已久

我并不是說不該讓設(shè)計(jì)做到響應(yīng)式,或者建議應(yīng)該采用一個(gè)m.*的子域名。事實(shí)上,社交分享已無所不在,不區(qū)分設(shè)備讓每一個(gè)文件指向同一個(gè)URL是明智的。但這并不意味著單一的URL應(yīng)該總是傳送同一文件,或者說是所有的設(shè)備應(yīng)該加載同一個(gè)資源。

引用創(chuàng)造“響應(yīng)式網(wǎng)頁設(shè)計(jì)”術(shù)語的Ethan Marcotte的一句話:

最重要的是,響應(yīng)式網(wǎng)頁設(shè)計(jì)不是特意為移動網(wǎng)站提供的一個(gè)替代解決方案。
(譯補(bǔ)Ethan Marcotte原文:“我認(rèn)為響應(yīng)式設(shè)計(jì)是設(shè)計(jì)哲學(xué)的一部分,也是前端開發(fā)策略的一部分。而作為后者,應(yīng)依實(shí)際項(xiàng)目所需評估其可行性?!保?/p>

響應(yīng)、移動、快速

移動端的性能保證與響應(yīng)式設(shè)計(jì)可以同時(shí)實(shí)現(xiàn),只要用上一些其他技術(shù)。響應(yīng)式網(wǎng)頁設(shè)計(jì)從不意味著去制造性能問題,這也是我們無法歸罪于這項(xiàng)技術(shù)本身的原因,而許多人相信它能解決一切問題才是錯誤的根源。

讓設(shè)計(jì)響應(yīng)式化的重要性在于,我們需要處理從臺式機(jī)到手機(jī)的大區(qū)間viewport尺寸。但是只考慮屏幕尺寸低估了移動設(shè)備,臺式機(jī)與手機(jī)的分界線正在變得模糊,不同類型的設(shè)備也趨于提供多樣化功能。顯然我們已無法再只依賴于使用媒體查詢這一功能。

有些評論者稱之為“負(fù)責(zé)任的響應(yīng)式網(wǎng)頁設(shè)計(jì)”,雖然其他人把它叫做現(xiàn)代化的響應(yīng)式網(wǎng)頁設(shè)計(jì)。撇開兩種叫法語義上的差別,我們確實(shí)需要理解并意識到問題所在。

不存在銀彈也沒有可以一勞永逸的方案,我們能做的是使用組合技巧提升現(xiàn)有的響應(yīng)式方案并且力求性能的最優(yōu)化:

  • 提供相同URL及內(nèi)容,但針對不同設(shè)備結(jié)構(gòu)不同;
  • 在立項(xiàng)規(guī)劃階段便需遵循移動優(yōu)先原則;
  • 使用display: none時(shí)進(jìn)行真機(jī)測試驗(yàn)證資源加載,而非依賴于桌面瀏覽器模擬;
  • 在瀏覽器提供更好的解決方案(如srcset)之前,使用JavaScript分發(fā)響應(yīng)式圖片;
  • 移動端初始viewport的文件內(nèi)嵌,或者優(yōu)先加載首屏內(nèi)容。
  • 提供更智能的響應(yīng)式方案如:按需加載、分組響應(yīng)式、服務(wù)器端的自適應(yīng)處理。

按需加載

CSS媒體查詢無法讓設(shè)備區(qū)分加載和解析,這意味著移動端的手機(jī)會下載和解析為更大屏幕提供的CSS。再者,蜂窩網(wǎng)絡(luò)下CSS的分區(qū)渲染浪費(fèi)的毫秒十分寶貴,有必要避免全依賴于此。

正如我們知道的,iPhone不會動態(tài)轉(zhuǎn)換為iPad的尺寸,采用JavaScript 的matchMedia查詢方法替代CSS媒體查詢,則能夠保證不同設(shè)備顯示內(nèi)容的統(tǒng)一性并且只加載它們各自所需要的CSS。

使用特征檢測工具可以做到更好,如Modernizr可以構(gòu)建更智能的UI和功能定義,而不是只依賴于屏幕尺寸。

分組響應(yīng)式

基于單HTML頁面為所有屏幕進(jìn)行響應(yīng)式設(shè)計(jì)時(shí),為臺式電腦和智能手機(jī)傳送同樣的HTML結(jié)構(gòu)是糟糕的,原因再次回歸到移動端的性能問題。

即使服務(wù)器端存儲同一個(gè)文件,基于設(shè)備分組也可以實(shí)現(xiàn)對終端的按需發(fā)送。舉例來說,為6英寸及更大尺寸的屏幕提供大的浮動式菜單,而為小于6英寸的屏幕提供一個(gè)小的漢堡包菜單[2]。響應(yīng)式技術(shù)可以基于分組實(shí)現(xiàn)不同情境的適配,如橫豎屏模式的轉(zhuǎn)換、不同型號的iPhone(寬為320像素)、各式5英寸的安卓設(shè)備(寬為360像素)及平板(寬為400像素及以上)。

服務(wù)器端層面

更智能的響應(yīng)式解決方案的最后一個(gè)選項(xiàng)是服務(wù)器,對移動網(wǎng)頁來說服務(wù)器端進(jìn)行特征檢測及定義并不新奇,市面上早有諸如WURFLDevice Atlas之類的工具庫。

把響應(yīng)式設(shè)計(jì)與服務(wù)器端組件聯(lián)合同樣也有前例,已被知曉的有響應(yīng)式設(shè)計(jì)+服務(wù)器端組件(RESS),或被稱為自適應(yīng)設(shè)計(jì),保障每個(gè)終端代碼簡約性的同時(shí),提高了響應(yīng)式的速度與可用性體驗(yàn)。

不幸的是,在過去幾年里這些技術(shù)沒有在社區(qū)里獲得太多的推動,只需看看有多少為開發(fā)者提供的博客或雜志將“RESS” 與“自適應(yīng)” 和“響應(yīng)式”相提并論便可一知。其一原因在于:我們是前端工程師,任何涉及后端的內(nèi)容都是個(gè)令人頭疼的難題。

一部分情況是前端設(shè)計(jì)人員可以控制的是服務(wù)器上的腳本;另一部分情況是有遠(yuǎn)程開發(fā)團(tuán)隊(duì)管理,設(shè)計(jì)師并不想在每次需要調(diào)整UI時(shí)都與他們打交道,這種情形下的心情我能夠理解。

這也是為何在大項(xiàng)目里頭應(yīng)該考慮新的架構(gòu)層:一種不需要動用后端,只通過前端工程師就能夠?qū)?span style="width:auto;height:auto;float:none;" id="20_nwp">服務(wù)器端架構(gòu)進(jìn)行操作的方式。Node.js[3]是一種卓越的作為前后端之間流通架構(gòu)的平臺,這個(gè)架構(gòu)方式下,前端工程師可以基于內(nèi)部的流通性進(jìn)行調(diào)整而不需要涉及后端架構(gòu),從而實(shí)現(xiàn)為所有設(shè)備提供輕快的響應(yīng)式和可用性體驗(yàn)。

響應(yīng)式設(shè)計(jì)、性能和技術(shù)數(shù)據(jù)

對這篇文章你可能抱有一些置疑,接下來我們將對技術(shù)細(xì)節(jié)進(jìn)行重新審視以減輕你的疑慮。

響應(yīng)式設(shè)計(jì)通常會為所有設(shè)備傳送相同的HTML文件,再采取媒體查詢的方式加載不同的CSS和image文件,這一點(diǎn)有的人可能不太同意,但很多情況下都是如此實(shí)施的。

你也可能會認(rèn)為如今移動網(wǎng)絡(luò)速度的提升已足夠?qū)崿F(xiàn)良好的體驗(yàn),畢竟4G非??欤O(shè)備也運(yùn)行得更為流暢,那么在下結(jié)論之前我們來看一些數(shù)據(jù)吧。

蜂窩連接[4]

4G網(wǎng)絡(luò)還沒有廣泛覆蓋,而即便是全世界范圍內(nèi)都能夠使用4G網(wǎng)絡(luò),可能也會有一些超出預(yù)期的狀況。只論US地區(qū)的4G用戶數(shù)量約為22%,而其中的40%并非隨時(shí)處于4G連接狀態(tài),除外地區(qū)則只有不到3%的手機(jī)使用4G連接。

移動網(wǎng)絡(luò)速度受限于帶寬,3G可以達(dá)到5Mbps,4G可以達(dá)到50Mbps。但移動網(wǎng)頁體驗(yàn)通常面臨的最重要的現(xiàn)狀是:消耗于接收大文件(如 YouTube視頻)的帶寬越多,大批量小文件的并行下載越不順暢,并會伴有確定性的高發(fā)延遲。延遲是設(shè)備對每個(gè)數(shù)據(jù)包的首字節(jié)發(fā)起請求接收的往返時(shí)間。

蜂窩網(wǎng)絡(luò)比其他連接方式延遲更多。雖然US的家庭DSL連接延遲為20~45ms,3G網(wǎng)絡(luò)
卻可能達(dá)到150~450ms,4G網(wǎng)絡(luò)則為100~180ms。這也就意味著蜂窩連接的延遲比家庭網(wǎng)絡(luò)要高出5~10倍。

尚有其他延遲方面的問題如無線電廣播引起的變動:當(dāng)手機(jī)進(jìn)入休眠狀態(tài)后打開收音機(jī)頻率需要獲取更多數(shù)據(jù)而導(dǎo)致滯時(shí);設(shè)備平均可用內(nèi)存越低也就意味著電池和CPU消耗越多。

蜂窩網(wǎng)絡(luò)下的響應(yīng)式設(shè)計(jì)

一個(gè)實(shí)例:Keynote是一家提供性能解決方案的公司,發(fā)布了2014超級碗頂尖廣告的網(wǎng)頁性能數(shù)據(jù)。這份報(bào)告里陳述:在wired或Wi-Fi連接下加載時(shí)間為1~10s區(qū)間,而在蜂窩連接下加載時(shí)間為5~60s的區(qū)間。實(shí)在難以想象超級碗上投放的廣告是需要加載整整一分鐘的網(wǎng)頁。

 

 

2014超級碗廣告網(wǎng)頁性能
2014超級碗廣告網(wǎng)頁性能( 查看大圖

 

 

同樣的報(bào)告顯示有43%的網(wǎng)站提供了移動專屬版本,平均體積為862KB;50%實(shí)行響應(yīng)式方案的平均體積在3211KB(超出將近四倍);另外7%對移動設(shè)備提供的則是桌面版,這基本可以認(rèn)為響應(yīng)式網(wǎng)站比移動專屬網(wǎng)站的體積更大。

當(dāng)然,響應(yīng)式網(wǎng)站可以有不一樣的表現(xiàn),但不幸的是,這份報(bào)告之外的響應(yīng)式網(wǎng)站的表現(xiàn)也基本與超級碗廣告相似。

基于云技術(shù)的瀏覽器

如果對移動端網(wǎng)頁的性能仍存有疑慮,想想看基于云技術(shù)開發(fā)瀏覽器的廠商正為用戶做的——包括Opera Mini、基于亞洲的UC瀏覽器(根據(jù)statcounter的統(tǒng)計(jì),其市場占有率為11%),Amazon Fire的Silk瀏覽器和目前的 Google Chrome(通過選項(xiàng)設(shè)置)。

這些廠商在云端壓縮所有的網(wǎng)站和資源,隨后瀏覽器下載優(yōu)化過的版本到移動端,而他們?nèi)绱俗龅睦碛墒钦J(rèn)識到了性能服務(wù)于用戶的意義。

移動端的網(wǎng)頁被低估

網(wǎng)絡(luò)社區(qū)通常會低估移動瀏覽器的重要性,我曾聽到人們說現(xiàn)今的移動端網(wǎng)頁只有iOS的Safari和Android的Chrome瀏覽器,對響應(yīng)式設(shè)計(jì),我們只需顧及320像素寬的viewport。但實(shí)際情況比這復(fù)雜得多。

如今有不下于10個(gè)瀏覽器的市場占有率超過1%,就算只需考慮iOS和Android的默認(rèn)瀏覽器也并不容易。大致情形來說,在移動端瀏覽網(wǎng)頁的用戶中,iOS占50%,Android占38%,Windows Phone占3%,Opera Mini占5%(包括各類操作系統(tǒng)),剩余4%則為其他平臺。

而如今的Android平臺有64%的用戶使用自帶瀏覽器,這是一個(gè)與Google Chrome存在差異并且本身具有多個(gè)版本的瀏覽器。此外,的三星Galaxy中有一些設(shè)備所提供的Android瀏覽器是自定義引擎的版本。

根據(jù)viewport的尺寸,僅Android系統(tǒng)的智能手機(jī),如今我們需要處理的像素寬度就包括320、360、400、540。那么我要建議的是,不要低估移動端的網(wǎng)頁,并去了解它那些的特征。

1秒內(nèi)完成首屏內(nèi)容的加載

在移動設(shè)備中,我們把在1秒或是更少時(shí)間完成首屏內(nèi)容(即不需滾動直接顯示的內(nèi)容)渲染的網(wǎng)站視作是快的。我知道1秒鐘看起來十分快速——特別是考慮到至少有一半的情形是要在蜂窩網(wǎng)絡(luò)下來達(dá)到的——但這已被證實(shí)是可能的。1秒響應(yīng)可保證用戶聚焦于內(nèi)容,從而提升轉(zhuǎn)化率及減少流失。

達(dá)到1秒響應(yīng)時(shí)間,首屏內(nèi)容需要在傳輸控制協(xié)議(TCP)的單次往返時(shí)間中完成——不能忽略的是普遍的3G網(wǎng)絡(luò)幾乎存在半秒的延遲。由于TCP被稱 為“慢啟動”,首次響應(yīng)不能超過14KB以避免二次打包。這意味著首屏內(nèi)容的HTML和CSS至少必須符合14KB的單次HTTP響應(yīng)。如果我們做到這 個(gè),那么也就達(dá)成了1秒加載時(shí)間的感官體驗(yàn)。

這條規(guī)則并沒有被明確列出,且要視實(shí)際需要而有所調(diào)整。然而,由于移動屏幕的首屏內(nèi)容顯示通常無法達(dá)到與桌面屏幕一致的效果,使用響應(yīng)式設(shè)計(jì)達(dá)到1秒的目標(biāo)是非常艱難的,但實(shí)現(xiàn)的難度是可以通過多種技術(shù)的結(jié)合降低的。

一個(gè)HTML服務(wù)所有平臺

一個(gè)典型的響應(yīng)式設(shè)計(jì)是對所有設(shè)備發(fā)送單一的HTML文件:電視、桌面、平板、智能手機(jī)及其后的所有手機(jī)。這聽起來很贊,但我們生活的世界有蜂窩網(wǎng)絡(luò)和其他的各種問題。移動設(shè)備下你的響應(yīng)式HTML可能會正確渲染,但它不夠快,本來它應(yīng)該是可以更快的,這也在影響你的轉(zhuǎn)化率。

一旦有display: none出現(xiàn)在CSS中,你的站點(diǎn)就會開始變慢。一個(gè)從零開始為語義設(shè)計(jì)的站點(diǎn),響應(yīng)式的超載 會讓一切工作幾近化為無用;一個(gè)站點(diǎn)的HTML里包含的40個(gè)外部JavaScript里的絕大多數(shù)jQuery插件和功能庫都是為大屏服務(wù)的,響應(yīng)式超 載會讓一切崩潰。使用同一HTML,就等同于在所有設(shè)備加載同樣的外部資源。

這并不是說不能做單一的響應(yīng)式設(shè)計(jì),只是站點(diǎn)不會自行進(jìn)行優(yōu)化。如果你已經(jīng)留心到了性能,那么你的響應(yīng)式方案將會不同尋常。

我們來審視一番星巴克的站點(diǎn),它的主頁是響應(yīng)式的并且在我們測算的三種viewport下(屏幕截圖見下)看起來都很贊。但查看結(jié)構(gòu)之后,我們發(fā)現(xiàn) 所有版本都加載33個(gè)外部JavaScript文件和6個(gè)CSS文件。使用3G延遲網(wǎng)絡(luò)的移動設(shè)備需要加載到39個(gè)外部文件只為顯示這樣一個(gè)頁面么?

 

 

星巴克響應(yīng)式截圖
不同情境下的星巴克站點(diǎn) (查看大圖

 

 

你可能會認(rèn)為,“啊,干嘛怪技術(shù)應(yīng)該怪實(shí)現(xiàn)”,這是對的。這篇文章并不是和響應(yīng)式網(wǎng)頁設(shè)計(jì)作對,它駁斥的是瞄準(zhǔn)了響應(yīng)式卻實(shí)現(xiàn)得很糟糕,它駁斥的是以響應(yīng)式為目標(biāo)而不顧性能,正如星巴克一般。

若你的響應(yīng)式站點(diǎn)存在性能問題,那根源可能是出于你所定的目標(biāo)。若為響應(yīng)式設(shè)計(jì)實(shí)施規(guī)劃,也必須為性能實(shí)施規(guī)劃。

資源加載

媒體查詢有多種應(yīng)用方式,通常采用如下中的一種:

  • 單獨(dú)CSS文件添加多樣的@media聲明;
  • 通過link標(biāo)簽的media屬性為頁面引入多樣的CSS文件。

第一種情形中,只會產(chǎn)生一個(gè)CSS文件,故所有設(shè)備都會加載全平臺的CSS,數(shù)百個(gè)無用的選擇器都會被瀏覽器轉(zhuǎn)譯和解析。

你可能會認(rèn)為多樣的外部文件是更好的方式,因?yàn)闉g覽器會基于斷點(diǎn)加載不同的資源,這是我們在各種博客、雜志、書和培訓(xùn)課程中得到的信息。

  1. <link rel="stylesheet" href="desktop.css"
  2. media="(min-width: 801px)">
  3. <link rel="stylesheet" href="tablet.css"
  4. media="(min-width: 401px) and (max-width: 800px)">
  5. <link rel="stylesheet" href="mobile.css"
  6. media="(max-width: 400px)">

好吧,你完全錯了。所有的瀏覽器會不分環(huán)境地把所有的外部CSS一并加載。下面的屏幕截圖顯示iPhone下載了所有頭部引用的CSS文件, 包括與它無關(guān)的。

 

 

iPhone加載頁面引用的CSS文件截圖
瀏覽器會不分環(huán)境地把所有的外部CSS一并加載 (查看大圖

 

 

為何瀏覽器會下載所有的CSS文件?現(xiàn)在假設(shè)有一個(gè)CSS文件是為豎屏提供的另一個(gè)則為橫屏提供。我們不希望瀏覽器在橫豎屏切換時(shí)飛快地切換 CSS,為防止其間出現(xiàn)頁面裸奔(無CSS的裸HTML頁),我們希望的是瀏覽器提前把所有文件都加載好。而這正是你基于屏幕尺寸定義媒體查詢會發(fā)生的一 切。

那么可以調(diào)整移動瀏覽器的尺寸么?目前基本上不行,但廠商正在準(zhǔn)備推出可以像桌面瀏覽器一樣調(diào)整的移動瀏覽器,這也是瀏覽器會不顧媒體查詢的寬度匹配規(guī)則不分情境加載所有聲明的CSS的原因。

尚沒有任何移動設(shè)備具有可伸縮的viewport(目前為止),但某些情形下viewport會被重置:

  • 某些瀏覽器的屏幕旋轉(zhuǎn);
  • viewport聲明被動態(tài)更改;
  • onload添加了內(nèi)容導(dǎo)致偏移;
  • 支持外部鏡像;
  • 某些三星的安卓機(jī)同時(shí)運(yùn)行多個(gè)app(多窗口模式下)。

在上述變動下瀏覽器會最優(yōu)化加載可能會需要的所有資源。而不遠(yuǎn)的將來瀏覽器對此會更智能,但此時(shí)我們尚有問題存留:我們傳送了比實(shí)際需要超出得多的資源,從而讓用戶遭受無妄之災(zāi)。

真正的問題:以響應(yīng)式設(shè)計(jì)為目標(biāo)

正如Lyza Danger Gardner在“當(dāng)我們談?wù)摗憫?yīng)式’時(shí)我們在談?wù)撌裁础?/a>里所說的,設(shè)計(jì)師為“響應(yīng)式”下的定義并不一致,從而會導(dǎo)致溝通誤差。

追本溯源來看,這個(gè)術(shù)語首次出現(xiàn)是在2010Ethan Marcotte的文章里,隨之而來是同名書籍。Ethan定義其為:以流體網(wǎng)格、彈性圖片和媒體查詢?nèi)N技術(shù)為多區(qū)間的設(shè)備屏幕提供最佳顯示體驗(yàn)。

這并沒有什么不對,問題出現(xiàn)在我們只把它視之為站點(diǎn)效果,而沒有理解其背后更寬廣的更需要達(dá)成的目標(biāo)。

當(dāng)以響應(yīng)式設(shè)計(jì)效果為目標(biāo),會變得容易迷失在觀念中。你 真正試著去解決的問題是什么?響應(yīng)式化有問題么?也許沒有。但你是否把“響應(yīng)式化”理解為“兼容移動端”?如果是這樣,那你也許犯了一些錯誤。

一個(gè)站點(diǎn)的終極目標(biāo)應(yīng)該是“服務(wù)用戶”,從而實(shí)現(xiàn)更多形式的轉(zhuǎn)化,不論是讓訪客傳播文字、提供信息還是產(chǎn)生消費(fèi)。沒有高性能的站點(diǎn)就沒有滿意的用戶。

性能在轉(zhuǎn)化上,尤其是移動端方面的直接影響,已被多次證實(shí)。如果這是你第一次聽聞,只要隨便翻閱一本 Steve Souders關(guān)于網(wǎng)頁性能優(yōu)化的專業(yè)書就可一知詳細(xì)。

知曉目標(biāo),決定用何種工具和技術(shù)以最佳方式實(shí)現(xiàn)。這就是你分析在哪里、如何用響應(yīng)式方法時(shí)應(yīng)該做的。你使用響應(yīng)式設(shè)計(jì)——卻沒有領(lǐng)會它。

響應(yīng)式與用戶

紐約時(shí)報(bào)在幾個(gè)月前以保持“符合你的預(yù)期”為目標(biāo)重新設(shè)計(jì)了網(wǎng)站,同時(shí)有上千家大型企業(yè)驕傲地推出了他們新的響應(yīng)式版的網(wǎng)站。

紐約時(shí)報(bào)以有別尋常的方式進(jìn)行響應(yīng)式設(shè)計(jì),但有一些人對它并非基于相同HTML進(jìn)行適應(yīng)性布局而是采取專門的移動站點(diǎn)抱以不滿,甚至有一篇文章冠以“新版的紐約時(shí)報(bào)WebApp缺失響應(yīng)式設(shè)計(jì)的核心”的標(biāo)題聲討。

 

 

紐約時(shí)代雜志新版響應(yīng)式
紐約時(shí)代雜志以有別尋常的方式進(jìn)行響應(yīng)式設(shè)計(jì)查看大圖

 

 

沒有人說過響應(yīng)式設(shè)計(jì)意味著使用同一HTML去適配所有屏幕尺寸,而這顯然已被當(dāng)作普遍定義。但這條規(guī)則并沒有在任何地方被明確規(guī)定,只是我們試圖簡化問題所造成的。

近幾個(gè)月內(nèi),數(shù)家公司都在宣揚(yáng)著這樣的臺詞:“我們提供了一個(gè)新的響應(yīng)式版網(wǎng)站,讓移動端轉(zhuǎn)化得到了100%的提升?!钡D(zhuǎn)化的提升確實(shí)是因?yàn)檎军c(diǎn)進(jìn)行了響應(yīng)式化么?還是用戶意識到了它是響應(yīng)式的而更愿意使用?

人們轉(zhuǎn)化更多僅是因?yàn)樵谝苿釉O(shè)備上得到了更快更好的體驗(yàn),而無關(guān)于采取了何種有別以往的方案(不論它是移動端版本還是桌面版本的縮影)。以此說來,響應(yīng)性沒有任何優(yōu)于采用傳統(tǒng)移動方案實(shí)現(xiàn)的特別之處,而相同設(shè)計(jì)下的獨(dú)立移動站點(diǎn)若輔以其他技術(shù)形成更明智的方案,也能夠達(dá)到相同的轉(zhuǎn)化甚至更佳。

結(jié)論

“用戶才不鳥你的站點(diǎn)用上了什么響應(yīng)式” —— Brad Frost

Brad Frost相當(dāng)正確,用戶想要的是快速易用,他們并不老去調(diào)整瀏覽器窗口,也不需要理解“響應(yīng)式”的含義。

這是沉重的事實(shí),也并非是所有網(wǎng)站都會面臨的狀況,但也好過總想著“我們做了響應(yīng)式兼容移動端沒有后顧之憂了?!蹦承r(shí)候,甚至不需要考慮情境地把響應(yīng)式設(shè)計(jì)稱之為“性能破壞者”也是有利的,因?yàn)檫@將有助于讓人們關(guān)注到性能的重要性。

紐約時(shí)報(bào)是對的:以用戶為核心,而非工具或技術(shù),甚或是當(dāng)作設(shè)計(jì)師們的狂歡。

詞匯譯注:


 

[1] 沒有任何一項(xiàng)技術(shù)或方法可使軟件工程的生產(chǎn)力在十年內(nèi)提高十倍。維基:沒有銀彈 ?

[2] 漢堡包菜單,以三道杠形式表示菜單入口。延伸閱讀:關(guān)于漢堡包圖標(biāo)的閑言碎語 ?

[3] Node,使用Chrome V8引擎快速構(gòu)建可伸縮應(yīng)用程式的平臺。Node.js 究竟是什么? ?

[4] 國內(nèi)外蜂窩網(wǎng)絡(luò)連接的狀況有所差異。

日歷

鏈接

個(gè)人資料

存檔

久久久久久久久久久久久女过产乱| 天天综合色天天| 日韩精品极品在线观看| 国产视频精品网| 亚洲av无码成人精品国产| 日本韩国在线观看| 亚洲成av人片在线观看www| 美女国产一区二区三区| 777欧美精品| 高清视频一区| 风间由美一二三区av片| 中文字幕在线永久在线视频| 欧美精品密入口播放| 久久久久九九视频| 久久久精品欧美| 国产 日韩 亚洲 欧美| 精品一区二区三区四| 中文字幕在线观看网站| 99视频在线精品国自产拍免费观看| 26uuu国产一区二区三区| 亚洲黄色片网站| 日韩成人在线资源| 色婷婷在线视频观看| av免费在线观看网站| 99国产精品久久久久久久成人热| 国产精品久久久久久妇女6080| 欧美一卡二卡三卡| 国内视频一区| 成人性生交大片免费看无遮挡aⅴ| 99久久精品国产色欲| 欧美日韩黄色| 久久精品一区四区| 精品国产欧美成人夜夜嗨| 2022中文字幕| 精品国产xxx| 欧美男男gaygay1069| 成人aa视频在线观看| 综合网中文字幕| 国模无码视频一区二区三区| 97人妻精品一区二区三区视频 | 忘忧草精品久久久久久久高清| 国产成人日日夜夜| 亚洲欧美国内爽妇网| 黄色网络在线观看| 人妻中文字幕一区二区三区| 欧美日韩伦理一区二区| 91丨porny丨户外露出| 欧美成人亚洲成人| 黄色手机在线视频| 四虎永久在线| 欧美福利一区| 欧美日韩不卡一区二区| 蜜桃91精品入口| 国产在线观看免费视频今夜| 欧美成人精品一区二区男人小说| 免费视频一区| 精品国产欧美一区二区| 可以在线看黄的网站| 中文字幕一区2区3区| 日韩有吗在线观看| 亚洲色图19p| 成人黄色短视频在线观看| 精品少妇一区二区三区免费观| 粉嫩av一区二区夜夜嗨| 欧美日韩黑人| 91福利国产精品| 国产精品一区二区三区精品| caoporn91| 日韩中文影院| 欧美激情在线免费观看| 国产精品96久久久久久又黄又硬| 亚洲三级在线观看视频| 免费人成黄页在线观看忧物| 国产精品毛片一区二区三区| 亚洲精品白浆高清久久久久久| 国产在线一区二| 久久精品久久精品久久| 四虎精品在线观看| 亚洲少妇最新在线视频| 成人av网站观看| 国产一级二级三级视频| 99久久香蕉| 亚洲va欧美va人人爽| 噜噜噜噜噜久久久久久91| 国产一级免费视频| 羞羞答答一区二区| 欧美在线不卡一区| www亚洲国产| 风流少妇一区二区三区91| 亚洲有吗中文字幕| 亚洲国产精品久久91精品| 国产午夜大地久久| 一个人免费视频www在线观看| 欧美亚洲国产激情| 欧美日韩aaa| 日韩专区第三页| 西西人体44www大胆无码| 亚洲日本视频| 中文字幕不卡在线视频极品| www.久久com| 日本高清在线观看| 久久久国产午夜精品| 国产精品入口尤物| 久久久无码精品亚洲国产| 成人在线视频中文字幕| 91福利资源站| 国产成人永久免费视频| 最新亚洲伊人网| 蜜臀av性久久久久蜜臀aⅴ四虎| 亚洲精品国产综合久久| 日韩一级理论片| 黄色小网站在线观看| 成人小视频在线观看| 国产精品视频999| 日韩精品一区二区三| 欧美大胆视频| 欧美一区二区在线看| 无码aⅴ精品一区二区三区浪潮| 亚洲国产精品一| 136国产福利精品导航网址| 国产一区二区三区精品久久久| 黄色免费观看视频网站| 日av在线播放| 国产成人综合在线播放| 国产精品99一区| 国产系列精品av| 欧美色爱综合| 亚洲国产中文字幕久久网| 男人午夜视频在线观看| av免费不卡| 亚洲精品中文字幕乱码三区| 色就是色欧美| 免费男女羞羞的视频网站主页在线观看 | 日韩高清一级片| 欧美极品少妇xxxxx| 欧美另类videoxo高潮| 欧美精品国产白浆久久久久| 欧美一级在线免费| 天天av天天操| 99只有精品| 在线影视一区二区三区| 日本在线观看a| 女人天堂av在线播放| 亚洲蜜桃精久久久久久久| 一区二区三区四区免费视频| 日本大臀精品| 久久影院午夜片一区| 久久久久资源| 粉嫩欧美一区二区三区| 成人一级视频在线观看| 国产精品国模大尺度私拍| 亚洲av永久纯肉无码精品动漫| 久久人体视频| 最近2019中文字幕一页二页| 精品一区二区三孕妇视频| 亚洲ab电影| 国产午夜精品美女视频明星a级| 国产免费又粗又猛又爽| 国产伦精品一区二区三区视频金莲| 久久久99精品免费观看| 欧美视频1区| 亚洲人成77777男人| 95精品视频在线| 日韩视频精品| 欧美精品久久久久久久久久丰满| 日日摸夜夜添夜夜添国产精品 | 天海翼一区二区三区免费| 麻豆精品精品国产自在97香蕉| 欧美乱大交xxxxx| 天天操天天操天天操天天操天天操| 免费视频成人| 884aa四虎影成人精品一区| 日本中文字幕精品—区二区| 精品视频在线一区二区在线| 欧美二区三区91| 欧美成人精品一区二区综合免费| 亚洲优女在线| 在线观看一区二区视频| 手机精品视频在线| 欧美高清一级片| 亚洲成人久久一区| 国产精品国产三级国产专业不 | 秋霞网一区二区三区| 欧美日韩色图| 午夜精品一区二区三区在线 | 国内一区在线| 亚洲国产精华液| 久久网站热最新地址| 亚洲一区3d动漫同人无遮挡 | 成人久久精品视频| 全国男人的天堂网| 久久这里只有精品首页| 黄黄视频在线观看| av成人 com a| 91精品国产色综合久久| 成人在线电影网站| av一区二区高清| 午夜精品久久久久久久白皮肤| 亚洲国产精品久| 亚洲精品看片| 91精品啪aⅴ在线观看国产| 亚洲第一免费视频| 91免费看片在线观看| 麻豆md0077饥渴少妇| ****av在线网毛片| 日韩欧美在线影院| 精品伦精品一区二区三区视频密桃| 麻豆一区二区麻豆免费观看| 色偷偷av一区二区三区| 国产成人无码精品亚洲| 日本欧美在线看| 精品国产乱码久久久久| 91这里只有精品| 粉嫩老牛aⅴ一区二区三区| jjzz黄色片| 视频在线不卡免费观看| 国产精品高潮呻吟久久av无限| 亚洲午夜无码久久久久| 国产成人综合精品三级| www.亚洲一区二区| 美女福利一区二区三区| 亚洲精品99999| 日韩欧美亚洲国产| 紧缚奴在线一区二区三区| 日韩精品一区二区三区色偷偷 | 999久久久免费精品国产| 欧美专区在线视频| 亚洲欧洲成人在线| 亚洲婷婷国产精品电影人久久| 中文字幕一区二区三区有限公司 | 亚洲片在线观看| 久久草视频在线| 久久成人精品无人区| 亚洲国产欧美不卡在线观看| 国产亚洲成av人片在线观看| 日韩国产精品视频| 国产高清中文字幕| 成人免费毛片app| 日本手机在线视频| 日韩欧美久久| 国内精品久久久久久中文字幕| www.com国产| www..com久久爱| 欧美 国产 综合| 亚洲综合网站| 97国产成人精品视频| 亚洲欧美日韩成人在线| 亚洲精品视频在线观看免费| 日本一区二区免费视频| 国内自拍视频一区二区三区 | 91porn在线观看| 欧美日本在线看| 97在线观看免费高| 久草在线在线精品观看| 99热这里只有精品免费| 亚洲一区二区三区中文字幕在线观看 | 午夜精品小视频| 亚洲免费在线观看视频| 日本一卡二卡在线| 99精品热6080yy久久| 美脚丝袜一区二区三区在线观看 | 亚洲精品国产精品国自产在线 | 嫩草伊人久久精品少妇av杨幂| 日韩一区二区三区高清免费看看| 人妻无码一区二区三区| 在线亚洲成人| 一区二区精品国产| 国产精品99久久免费| 午夜精品久久17c| 国产小视频在线播放| 91精品国产综合久久久蜜臀粉嫩| 新91视频在线观看| 男人的j进女人的j一区| 国产精品波多野结衣| 国产区一区二| 国产成人亚洲精品| 亚洲成人影院麻豆| 亚洲精品在线看| 国产视频一二三四区| 亚洲一区二区四区蜜桃| 山东少妇露脸刺激对白在线| 国内精品免费在线观看| 日本福利视频在线| 日韩精品久久| 精品不卡在线| 日本在线一区二区| 热门国产精品亚洲第一区在线| 色香蕉在线视频| 欧美日韩视频免费播放| 久草网站在线观看| 久久久久久久久久久99999| 欧美一区二区三区影院| 美女网站久久| 国产黄色片免费在线观看| 成人激情电影在线| 免费看成人片| 国产色99精品9i| 国产欧美中文字幕| 热三久草你在线| 欧美激情啊啊啊| 日本电影在线观看网站| 国产一区二区三区网站| 黄页网站在线播放| 日韩欧美中文字幕一区| 99久久精品无免国产免费| 日韩欧美aaa| 亚洲精品77777| 亚洲另类春色国产| 国产性xxxx| 欧美极品少妇xxxxⅹ高跟鞋| 熟女少妇一区二区三区| 成人午夜在线视频| 深夜视频在线观看| 久久成人免费日本黄色| 五月婷婷六月丁香激情| 久久精品一区| 熟妇人妻无乱码中文字幕真矢织江 | 丁香网亚洲国际| 久久久久无码精品| 麻豆一区二区在线| 在线观看国产一级片| 欧美亚洲一区| 久久久999视频| 日韩午夜激情| 日韩中文字幕三区| 国产精品s色| 拔插拔插海外华人免费| 欧美日韩 国产精品| 18禁裸男晨勃露j毛免费观看| 欧美成人专区| 欧美专区一二三| 最新国产精品视频| 午夜午夜精品一区二区三区文| 国产成人免费精品| 国产精品人成电影| 成人av集中营| 91亚洲精品一区二区| 曰本一区二区| 国产精品二区在线观看| 一区中文字幕| 麻豆精品视频| 国产精品欧美在线观看| 一区二区三区国| 久久精品国产亚洲夜色av网站| 国产精品久久久久久久小唯西川 | 18成人免费观看网站下载| 欧美一区二区三区婷婷| 97se亚洲综合在线| 中文字幕一区二区三区四区久久| 国产成人久久久| 日韩精品免费观看视频| 亚洲影院在线看| 在线一区二区三区视频| 快播日韩欧美| 日韩欧美一区二区三区在线视频| 精品国产乱码久久久久久蜜柚 | 久久五月天婷婷| 欧美三级午夜理伦三级小说| 日韩免费电影一区二区| 日韩在线第七页| www..com日韩| 老牛国产精品一区的观看方式| 精品视频在线观看一区二区| 国产精品v日韩精品v欧美精品网站 | 日韩三级在线观看| 中文在线а√在线| 精品国产一区av| gogo久久| 亚洲在线免费观看| 久久九九热re6这里有精品| 一区二区精品在线| 在线日本成人| 中文字幕一二三区| 久久精品一区二区三区不卡牛牛| chinese麻豆新拍video| 国产婷婷色一区二区三区| 国产一级片免费| 91九色最新地址| 亚州男人的天堂| 日韩视频在线免费观看| 678在线观看视频| 91欧美精品午夜性色福利在线| 免费成人动漫| 国产伦精品一区二区三区| 狠狠色狠狠色综合婷婷tag| 欧美极品欧美精品欧美| 韩国精品一区二区| 国产18无套直看片| 亚洲高清免费视频| www.天堂在线| 在线播放亚洲激情| 成人三级高清视频在线看| 国产伦精品一区二区三区四区视频| 日本高清精品| 中文字幕日韩一区二区三区| 久久国产精品毛片| 国产又黄又粗又猛又爽的视频 | 欧洲精品二区| 亚洲综合在线小说| 久久精品国产99久久|