網(wǎng)絡(luò)學(xué)院
為什么要做響應(yīng)式網(wǎng)站?
1、什么是響應(yīng)式設(shè)計?
概念:伊?!ゑR科特在2010年首先提出了響應(yīng)式網(wǎng)頁設(shè)計(RWD,Responsive Web Design)這個術(shù)語。 簡而言之是指網(wǎng)頁能自動識別屏幕寬度、并做出相應(yīng)調(diào)整的網(wǎng)頁設(shè)計。
原理:主要是css根據(jù)屏幕寬度,自動調(diào)整網(wǎng)頁div顯示和布局,以適應(yīng)不同尺寸屏幕優(yōu)化瀏覽體驗。
價值:隨著越來越多的智能移動設(shè)備( mobile, tablet device )加入到互聯(lián)網(wǎng)中來,移動互聯(lián)網(wǎng)不再是獨(dú)立的小網(wǎng)絡(luò),而是成為了 Internet 的重要組成部分。響應(yīng)式網(wǎng)絡(luò)設(shè)計 ( RWD / AWD)的出現(xiàn),目的是為移動設(shè)備提供更好的體驗,并且整合從PC端到手機(jī)的各種屏幕尺寸和分辨率,用技術(shù)來使網(wǎng)頁適應(yīng)不同分辨率的屏幕。
響應(yīng)式設(shè)計可以為電腦、手機(jī)、平板等不同終端的用戶提供更加舒適的界面和更好的用戶體驗,而且隨著目前大屏幕移動設(shè)備的普及,已成為大勢所趨。
2、搭建響應(yīng)式網(wǎng)站的9個理由
作為一種能夠縮放適應(yīng)不同大小的屏幕的網(wǎng)頁設(shè)計做法,響應(yīng)式設(shè)計(Responsive Design)正日益成為最受推崇的移動網(wǎng)頁優(yōu)化方式。在谷歌公司于2012年中期指出,響應(yīng)式設(shè)計是優(yōu)化移動網(wǎng)站的最佳方式之后,這種設(shè)計做法的地位得到了進(jìn)一步鞏固。
隨著iPhone、iPad和Android手機(jī)的普及,網(wǎng)站主辦方發(fā)現(xiàn),網(wǎng)站在移動端應(yīng)當(dāng)帶來與桌面端類似的體驗。否則,網(wǎng)站在移動設(shè)備上看起來就只有細(xì)小的文字和鏈接,網(wǎng)頁布局也會一團(tuán)糟。這就意味著損失流量和銷售額的風(fēng)險。如果你還對網(wǎng)站是否需要實(shí)現(xiàn)響應(yīng)式設(shè)計存在質(zhì)疑的話,看看下面的網(wǎng)絡(luò)調(diào)查數(shù)據(jù),相信你會更加認(rèn)可網(wǎng)站實(shí)現(xiàn)響應(yīng)式布局的重要性。
l 85%的用戶認(rèn)為企業(yè)的移動站點(diǎn)必須做的能夠媲美PC端網(wǎng)頁
l 移動設(shè)備用戶的數(shù)量將在2014年末超過PC端的用戶數(shù)量。
l 72%的用戶會同時使用多種設(shè)備。(數(shù)據(jù)整理自互聯(lián)網(wǎng),為平均值)
l 48%的用戶稱:如果企業(yè)的移動網(wǎng)站做的不夠好,往往會給人不注重用戶的“錯覺”。
l 73%的互聯(lián)網(wǎng)用戶使用手機(jī)作為和互聯(lián)網(wǎng)互動的主要的或是唯一的設(shè)備
l 48%的智能機(jī)及平板用戶表示很少企業(yè)會在移動站點(diǎn)的優(yōu)化工作上下功夫。
l 據(jù)統(tǒng)計目前有16%的網(wǎng)絡(luò)流量都來自于移動端。
l 67%的網(wǎng)民表示,更喜歡用手機(jī)在那些用戶友好度高的電商網(wǎng)站平臺上進(jìn)行購物。
l 66%的移動設(shè)備用戶反應(yīng)移動網(wǎng)站的加載速度有待提高,響應(yīng)式設(shè)計的普及迫在眉睫。
3、響應(yīng)式網(wǎng)站的制作難點(diǎn)
既然響應(yīng)式設(shè)計已成為大勢所趨?為什么國內(nèi)99.9999%的網(wǎng)站都還不是響應(yīng)式的?
1)設(shè)計原型多、兼容測試多
制作前期,需要對用戶調(diào)研,確定制作多個尺寸線框原型界面,還需要設(shè)計師和前端開發(fā)人員保持密切的溝通
2)視覺設(shè)計要求高、細(xì)節(jié)多
移動設(shè)備的屏幕像素密度與傳統(tǒng)電腦屏幕不一樣,在設(shè)計的時候需要保證內(nèi)容文字的可讀性、控件可點(diǎn)擊區(qū)域的面積等,都將對設(shè)計師有高要求
3)前端實(shí)現(xiàn)難、跨技術(shù)合作
與傳統(tǒng)的web開發(fā)相比,響應(yīng)式設(shè)計的頁面由于頁面布局、內(nèi)容尺寸發(fā)生了變化,所以最終的產(chǎn)出更有可能與設(shè)計稿出入較大,需要前端開發(fā)人員和設(shè)計師多溝通
4)參與人員多、耗費(fèi)精力大
因為響應(yīng)式設(shè)計需要對多個界面兼容、功能調(diào)試,導(dǎo)致整個制作過程需要UI設(shè)計師和前端工程師不斷磨合制作。
總的來說,響應(yīng)式網(wǎng)頁不像傳統(tǒng)網(wǎng)頁只需考慮一種狀態(tài),不是交付一套設(shè)計稿就完事兒了,它需要更多的人員參與到制作中來,它給設(shè)計、前端和開發(fā)團(tuán)隊之間的協(xié)作模式帶來新的挑戰(zhàn)。在一個復(fù)雜產(chǎn)品全面響應(yīng)式的項目里,開發(fā)人員在開發(fā)之初就要設(shè)計好要適配的屏幕尺寸大小,頁面越復(fù)雜,要考慮的適配排版問題就越多,而且交互每個階段該產(chǎn)出什么?交互與視覺如何協(xié)作?前端何時介入?哪些事情讓后端開發(fā)來做更合理?一系列的配合制作難度,導(dǎo)致很多站長望而生卻。
概念:伊?!ゑR科特在2010年首先提出了響應(yīng)式網(wǎng)頁設(shè)計(RWD,Responsive Web Design)這個術(shù)語。 簡而言之是指網(wǎng)頁能自動識別屏幕寬度、并做出相應(yīng)調(diào)整的網(wǎng)頁設(shè)計。
原理:主要是css根據(jù)屏幕寬度,自動調(diào)整網(wǎng)頁div顯示和布局,以適應(yīng)不同尺寸屏幕優(yōu)化瀏覽體驗。
價值:隨著越來越多的智能移動設(shè)備( mobile, tablet device )加入到互聯(lián)網(wǎng)中來,移動互聯(lián)網(wǎng)不再是獨(dú)立的小網(wǎng)絡(luò),而是成為了 Internet 的重要組成部分。響應(yīng)式網(wǎng)絡(luò)設(shè)計 ( RWD / AWD)的出現(xiàn),目的是為移動設(shè)備提供更好的體驗,并且整合從PC端到手機(jī)的各種屏幕尺寸和分辨率,用技術(shù)來使網(wǎng)頁適應(yīng)不同分辨率的屏幕。
響應(yīng)式設(shè)計可以為電腦、手機(jī)、平板等不同終端的用戶提供更加舒適的界面和更好的用戶體驗,而且隨著目前大屏幕移動設(shè)備的普及,已成為大勢所趨。
2、搭建響應(yīng)式網(wǎng)站的9個理由
作為一種能夠縮放適應(yīng)不同大小的屏幕的網(wǎng)頁設(shè)計做法,響應(yīng)式設(shè)計(Responsive Design)正日益成為最受推崇的移動網(wǎng)頁優(yōu)化方式。在谷歌公司于2012年中期指出,響應(yīng)式設(shè)計是優(yōu)化移動網(wǎng)站的最佳方式之后,這種設(shè)計做法的地位得到了進(jìn)一步鞏固。
隨著iPhone、iPad和Android手機(jī)的普及,網(wǎng)站主辦方發(fā)現(xiàn),網(wǎng)站在移動端應(yīng)當(dāng)帶來與桌面端類似的體驗。否則,網(wǎng)站在移動設(shè)備上看起來就只有細(xì)小的文字和鏈接,網(wǎng)頁布局也會一團(tuán)糟。這就意味著損失流量和銷售額的風(fēng)險。如果你還對網(wǎng)站是否需要實(shí)現(xiàn)響應(yīng)式設(shè)計存在質(zhì)疑的話,看看下面的網(wǎng)絡(luò)調(diào)查數(shù)據(jù),相信你會更加認(rèn)可網(wǎng)站實(shí)現(xiàn)響應(yīng)式布局的重要性。
l 85%的用戶認(rèn)為企業(yè)的移動站點(diǎn)必須做的能夠媲美PC端網(wǎng)頁
l 移動設(shè)備用戶的數(shù)量將在2014年末超過PC端的用戶數(shù)量。
l 72%的用戶會同時使用多種設(shè)備。(數(shù)據(jù)整理自互聯(lián)網(wǎng),為平均值)
l 48%的用戶稱:如果企業(yè)的移動網(wǎng)站做的不夠好,往往會給人不注重用戶的“錯覺”。
l 73%的互聯(lián)網(wǎng)用戶使用手機(jī)作為和互聯(lián)網(wǎng)互動的主要的或是唯一的設(shè)備
l 48%的智能機(jī)及平板用戶表示很少企業(yè)會在移動站點(diǎn)的優(yōu)化工作上下功夫。
l 據(jù)統(tǒng)計目前有16%的網(wǎng)絡(luò)流量都來自于移動端。
l 67%的網(wǎng)民表示,更喜歡用手機(jī)在那些用戶友好度高的電商網(wǎng)站平臺上進(jìn)行購物。
l 66%的移動設(shè)備用戶反應(yīng)移動網(wǎng)站的加載速度有待提高,響應(yīng)式設(shè)計的普及迫在眉睫。
3、響應(yīng)式網(wǎng)站的制作難點(diǎn)
既然響應(yīng)式設(shè)計已成為大勢所趨?為什么國內(nèi)99.9999%的網(wǎng)站都還不是響應(yīng)式的?
1)設(shè)計原型多、兼容測試多
制作前期,需要對用戶調(diào)研,確定制作多個尺寸線框原型界面,還需要設(shè)計師和前端開發(fā)人員保持密切的溝通
2)視覺設(shè)計要求高、細(xì)節(jié)多
移動設(shè)備的屏幕像素密度與傳統(tǒng)電腦屏幕不一樣,在設(shè)計的時候需要保證內(nèi)容文字的可讀性、控件可點(diǎn)擊區(qū)域的面積等,都將對設(shè)計師有高要求
3)前端實(shí)現(xiàn)難、跨技術(shù)合作
與傳統(tǒng)的web開發(fā)相比,響應(yīng)式設(shè)計的頁面由于頁面布局、內(nèi)容尺寸發(fā)生了變化,所以最終的產(chǎn)出更有可能與設(shè)計稿出入較大,需要前端開發(fā)人員和設(shè)計師多溝通
4)參與人員多、耗費(fèi)精力大
因為響應(yīng)式設(shè)計需要對多個界面兼容、功能調(diào)試,導(dǎo)致整個制作過程需要UI設(shè)計師和前端工程師不斷磨合制作。
總的來說,響應(yīng)式網(wǎng)頁不像傳統(tǒng)網(wǎng)頁只需考慮一種狀態(tài),不是交付一套設(shè)計稿就完事兒了,它需要更多的人員參與到制作中來,它給設(shè)計、前端和開發(fā)團(tuán)隊之間的協(xié)作模式帶來新的挑戰(zhàn)。在一個復(fù)雜產(chǎn)品全面響應(yīng)式的項目里,開發(fā)人員在開發(fā)之初就要設(shè)計好要適配的屏幕尺寸大小,頁面越復(fù)雜,要考慮的適配排版問題就越多,而且交互每個階段該產(chǎn)出什么?交互與視覺如何協(xié)作?前端何時介入?哪些事情讓后端開發(fā)來做更合理?一系列的配合制作難度,導(dǎo)致很多站長望而生卻。
編輯:外貿(mào)soho網(wǎng)站專業(yè)建設(shè)-葉子網(wǎng)絡(luò)mmfriends.cn 點(diǎn)擊次數(shù):14857次
更新時間:2016-07-04 14:57:27
0
條評論